28 repo giúp Claude Code làm motion graphics: bạn thật sự cần mấy cái?
28 repo đang lan truyền thật ra chia làm 3 loại: thư viện, phần mềm, và skill/MCP mới là thứ cài vào Claude Code. Để làm video đầu tiên, bạn cần đúng 3 cái.
Có thể bạn đã thấy tấm ảnh "Cài 28 repo này để dùng Claude Code cho motion graphics" của Charlie Hills được chia sẻ khắp nơi, kèm những bài dịch rất dài. Danh sách hay, nhưng nhìn vào dễ hoảng: 28 thứ, mỗi thứ một kiểu, cài cái nào trước?
Câu trả lời ngắn: để làm video đầu tiên bạn cần 3 cái. Bài này chia 28 cái tên ra thành từng loại cho dễ hiểu, rồi chỉ ra 3 cái đó. Nếu bạn chưa biết "làm video bằng code" là gì, đọc bài Làm video bằng code với Claude Opus 5.5 trước rồi quay lại đây.
⚠️ Mình đã mở từng repo trên GitHub để kiểm tra link ngày 10/10/2026. Các công cụ này đổi rất nhanh, có repo đổi tên, đổi chủ. Link nào không mở được thì tìm theo tên là ra.
Không phải cái nào cũng "cài vào Claude Code"
Tiêu đề "cài 28 repo này" làm nhiều người nghĩ phải tải cả 28 về máy. Thật ra trong danh sách có ba loại khác hẳn nhau:
| Loại | Ví dụ | Cài thế nào |
|---|---|---|
| Thư viện (code người khác viết sẵn) | GSAP, Three.js, Remotion, shadcn/ui | Không cần cài trước. Khi làm video, Claude tự thêm vào từng dự án bằng npm hoặc pip. Claude vốn đã biết dùng hầu hết các thư viện này |
| Phần mềm trên máy | FFmpeg, Blender, After Effects | Cài một lần vào máy tính, như cài phần mềm bình thường |
| Skill và MCP (dạy Claude, nối Claude với phần mềm khác) | gsap-skills, remotion skills, MCP cho Blender | Cài vào Claude Code. Đây mới đúng là thứ "cài để dùng Claude Code" |
Nói gọn: thư viện là đồ nghề, skill là sổ tay chỉ cách dùng đồ nghề cho đúng, MCP là dây nối Claude sang phần mềm khác. Claude không có skill vẫn dùng được GSAP, nhưng có skill thì ít lỗi vặt hơn, chuyển động "đúng nghề" hơn.
Bản đồ 28 repo, theo 5 nhóm
Mình giữ đúng cách chia nhóm của Charlie Hills, viết lại phần mô tả và thêm cột "nên biết" cho người mới.
1. Engines: thứ làm mọi thứ chuyển động
| Repo | Làm gì | Nên biết |
|---|---|---|
| three.js | Cảnh 3D: vật thể, camera, ánh sáng | Logo xoay, sản phẩm 3D. Khó nhất trong nhóm |
| anime.js | Chuyển động nhẹ cho chữ, hình khối, SVG | Gọn, dễ đọc |
| motion | Chuyển động mượt cho giao diện web, nhất là React | Tên cũ là Framer Motion |
| react-three-fiber | Viết cảnh Three.js theo kiểu React | Chỉ cần khi bạn làm Remotion + 3D |
| lottie-web | Phát hoạt hình xuất từ After Effects trên web | Có sẵn hàng nghìn icon động miễn phí dạng Lottie |
| gsap | Sắp thời gian từng chuyển động đến từng khung hình | Đáng học nhất nhóm. Miễn phí hoàn toàn, kể cả dùng thương mại |
2. Render: biến code thành file MP4
| Repo | Làm gì | Nên biết |
|---|---|---|
| ffmpeg | Cắt, ghép, đổi định dạng video và âm thanh | Gần như công cụ nào khác cũng cần nó ở bước cuối |
| remotion | Dựng video bằng React | Miễn phí cho cá nhân và công ty tối đa 3 người, lớn hơn phải mua giấy phép |
| hyperframes | Biến một trang HTML thành video | Của HeyGen, Apache 2.0, có sẵn skill cho Claude Code. Dễ bắt đầu nhất |
| manim | Hoạt hình toán học, công thức, sơ đồ | Viết bằng Python. Kiểu video của kênh 3Blue1Brown |
| motion-canvas | Video giải thích, có màn hình xem trước trực tiếp | Viết bằng TypeScript |
| revideo | Render video bằng code trên máy chủ | Tách ra từ Motion Canvas. Hợp khi cần làm hàng loạt tự động |
3. UI parts: mảnh ghép giao diện có sẵn chuyển động
| Repo | Làm gì | Nên biết |
|---|---|---|
| shadcn/ui | Bộ thành phần giao diện React (nút, bảng, form…) | Nền để các bộ bên dưới "cắm" vào |
| react-bits | Chữ động, nền động, hiệu ứng | Giấy phép riêng, đọc trước khi dùng cho dự án đem bán |
| magicui | Thành phần động cho trang giới thiệu sản phẩm | MIT |
| motion-primitives | Chữ động và giao diện động, chép vào là chạy | MIT |
| magic-mcp | Cho Claude tìm và lấy thành phần giao diện từ thư viện 21st.dev | Tìm miễn phí, phần AI dựng giao diện tính phí |
Nhóm này chỉ cần khi video của bạn mô phỏng một phần mềm (video demo ứng dụng, dashboard). Làm video giải thích kiến thức thì bỏ qua được.
4. Sound: giọng nói, nhạc và phụ đề
| Repo | Làm gì | Nên biết |
|---|---|---|
| whisper | Nghe giọng đọc, chép thành phụ đề có mốc thời gian | Chạy trên máy bạn, miễn phí. Hiểu tiếng Việt, bản medium/large chính xác hơn nhưng chậm, cần máy mạnh |
| tone.js | Tạo nhạc và âm thanh bằng code | Nhạc nền "tự chế", không lo bản quyền |
| wavesurfer.js | Vẽ sóng âm chuyển động | Hợp với video podcast |
| elevenlabs/skills | Dạy Claude dùng ElevenLabs: giọng đọc, nhạc, hiệu ứng âm thanh | ElevenLabs là dịch vụ trả phí, gói miễn phí không được dùng thương mại |
5. Skills & MCP: dạy Claude làm cho đúng nghề
| Repo | Làm gì | Nên biết |
|---|---|---|
| anthropics/skills | Bộ skill mẫu chính thức của Anthropic, có skill về vẽ, canvas, ảnh GIF | Nguồn tin cậy nhất trong danh sách |
| mcp-for-blender | Claude điều khiển Blender để dựng cảnh 3D | Cần cài Blender (miễn phí) |
| gsap-skills | Dạy Claude dùng GSAP đúng cách | Chính chủ GSAP làm |
| remotion skills | Dạy Claude các thói quen tốt khi làm Remotion | Chính chủ Remotion làm |
| threejs-skills | Dạy Claude dựng cảnh Three.js | Do cộng đồng làm |
| after-effects-mcp | Claude điều khiển Adobe After Effects | After Effects là phần mềm trả phí |
| motion-graphics-skills | 13 skill motion graphics của chính Charlie Hills | Do cá nhân làm, nên đọc qua trước khi cài |
Thật sự cần mấy cái
Mới bắt đầu thì mình khuyên đúng 3 thứ:
- Một "máy quay": HyperFrames (viết bằng HTML, dễ nhất) hoặc Remotion (viết bằng React, nhiều ví dụ hơn). Chọn một, đừng chọn cả hai.
- Skill đi kèm máy quay đó: skill có sẵn trong kho HyperFrames, hoặc remotion skills.
- gsap-skills để chuyển động mượt và đúng nhịp.
Cài thêm FFmpeg vào máy nếu công cụ báo thiếu. Vậy là đủ cho video đầu tiên. Kiểm tra nhanh sau khi cài: mở Claude Code, gõ / rồi tìm tên skill, thấy hiện trong danh sách là đã cài đúng. Cách cài từng skill vào Claude Code nằm trong phần README của mỗi kho, thường chỉ là một hai dòng lệnh.
Những thứ còn lại, khi nào cần mới thêm:
- Cần cảnh 3D → three.js (và threejs-skills).
- Cần phụ đề cho video có giọng đọc → whisper.
- Làm video demo phần mềm → nhóm UI parts.
- Làm video giảng toán, vẽ sơ đồ → manim.
- Đang quen Blender hoặc After Effects → MCP tương ứng.
Cài nhiều skill cùng lúc không làm Claude giỏi lên. Ngược lại là khác: các skill có thể "dạy" những cách làm khác nhau cho cùng một việc, và Claude phải đọc nhiều hơn mỗi lần làm.
Ráp lại thành một quy trình
Ví dụ: bạn muốn làm video 30 giây giới thiệu một khóa học. Với bộ 3 thứ ở trên, quy trình trông thế này:
- Kịch bản trước, hình sau. Nhờ Claude viết kịch bản chia cảnh: mỗi cảnh mấy giây, chữ gì hiện lên, lời đọc là gì. Đọc kỹ, sửa nội dung ở bước này, rẻ hơn nhiều so với sửa khi đã thành video.
- Dựng hình. Bảo Claude dựng video bằng HyperFrames hoặc Remotion theo kịch bản, dùng GSAP cho chuyển động, đưa mã màu và logo của bạn.
- Âm thanh. Nhạc nền nhờ Claude viết bằng code. Giọng đọc thì tự thu bằng điện thoại cũng được, rồi dùng Whisper tạo phụ đề.
- Cho Claude tự kiểm tra. Yêu cầu Claude xuất ảnh chụp từng cảnh và tự xem lại chữ có bị cắt, bị chồng không. Đây là bước nhiều người bỏ qua nhất.
- Xuất MP4, rồi góp ý. Xem, nói như với người dựng phim: "cảnh 2 chậm quá", "logo hiện mạnh hơn". Không cần biết code.
Làm xong một video, bạn có trong tay một khuôn mẫu: lần sau chỉ cần đổi chữ, đổi màu là ra video mới. Đó mới là chỗ video bằng code hơn hẳn kéo thả trong phần mềm dựng phim.
Cần nhớ
- Skill và MCP là code chạy trên máy bạn. Skill từ Anthropic, GSAP, Remotion, HeyGen là chính chủ làm. Skill của cá nhân thì mở ra đọc qua trước khi cài, giống như bạn không cài phần mềm lạ mà không biết nó làm gì.
- Số sao GitHub không phải điểm chất lượng. Three.js hơn trăm nghìn sao vì nó lâu đời và dùng cho đủ thứ, không có nghĩa nó hợp với video của bạn hơn HyperFrames.
- Đọc giấy phép nếu làm video để bán hoặc cho công ty: Remotion (công ty trên 3 người), ElevenLabs (gói miễn phí), Magic MCP (phần AI), After Effects đều có chỗ tính tiền.
- Video bằng code hợp với đồ họa chuyển động: chữ, biểu đồ, sơ đồ, logo, giao diện. Cần cảnh quay người thật, phong cảnh thì đó là việc của các công cụ như Veo, Kling. Hai cách có thể ghép với nhau trong cùng một video.
Việc làm ngay
Cài đúng 3 thứ ở mục "Thật sự cần mấy cái", làm một video 10 giây giới thiệu tên bạn. Chạy được rồi mới thêm thứ thứ tư.
Danh sách gốc do Charlie Hills tổng hợp.