20 repo trong bài này là các thư viện và công cụ mã nguồn mở hoặc miễn phí, mỗi cái lo một khâu của motion design: dựng video bằng code, vật lý, 3D, shader, hạt, vẽ đường, timeline, giọng đọc, phụ đề và xuất file. Opus ở đây là model Claude Opus chạy trong Claude Code (trên máy bạn): nó đọc mô tả việc của bạn, chọn thư viện hợp, viết code, mở bản xem trước để bạn nhìn rồi sửa tiếp.
Bạn không cần thuộc tên 20 repo. Bạn chỉ cần biết việc nào ứng với công cụ nào, để khi viết yêu cầu có thể nói đúng: “làm chữ rơi và nảy lên sàn” thì Claude sẽ nghĩ tới vật lý 2D, “làm logo xoay 3D” thì nghĩ tới Three.js.
Thông tin trong bài lấy từ trang GitHub và trang tài liệu chính thức của từng repo, kiểm link và giấy phép ngày 2026-11-08. Mình chưa tự chạy cả 20 công cụ, nên bài chỉ mô tả việc chúng làm theo tài liệu gốc, không hứa chất lượng đầu ra. Giấy phép và điều khoản có thể đổi, hãy xem lại trên trang gốc trước khi dùng cho việc thương mại.
Claude dùng 20 repo này như thế nào
Quy trình chung gồm bốn bước:
- Bạn mô tả cảnh muốn làm bằng tiếng Việt: nội dung, thời lượng, tỷ lệ khung hình, cảm giác chuyển động.
- Claude chọn thư viện phù hợp với mô tả đó và cài vào một thư mục dự án.
- Claude viết code, chạy thử, mở bản xem trước trên trình duyệt.
- Bạn xem, nói điều chỉnh (“chậm hơn”, “nảy mạnh hơn”, “đổi màu nhấn”), Claude sửa. Khi ổn thì xuất ra video.
Nếu bạn chưa quen với Claude Code, đọc Claude Code là gì trước. Cách dựng video bằng quy trình có reference, brief và vòng sửa nằm trong bài hướng dẫn Claude edit video.
Nhóm 1: Dựng video bằng code
1. Remotion (dựng video bằng React). Viết mỗi khung hình như một component React rồi render thành video. Repo mô tả ngắn gọn là làm video bằng code với React. Giấy phép riêng của Remotion: miễn phí cho cá nhân, công ty vì lợi nhuận tối đa 3 nhân viên, tổ chức phi lợi nhuận; công ty lớn hơn cần giấy phép công ty (theo file LICENSE trên GitHub, kiểm ngày 2026-11-08). GitHub
2. HyperFrames (render video từ HTML). Bạn viết HTML, công cụ render ra video, thiết kế để agent như Claude điều khiển được. Giấy phép Apache-2.0. GitHub, tài liệu
19. OpenCut (chỉnh sửa timeline). Trình dựng video miễn phí, mã nguồn mở, chạy trên web, máy tính và điện thoại. Dùng khi bạn muốn tự tay kéo cắt sau khi Claude làm xong phần chuyển động. Giấy phép MIT. GitHub
Bài Remotion Shorts Skill là ví dụ cụ thể về cách Claude Code dùng Remotion để làm video dọc chữ chuyển động.
Nhóm 2: Chuyển động 2D và đường nét
3. Anime.js (sắp xếp dòng thời gian). Thư viện hoạt hình JavaScript, có timeline để xếp nhiều chuyển động nối nhau hoặc chồng nhau. Giấy phép MIT. GitHub
4. React Spring (hoạt hình lò xo). Chuyển động theo vật lý lò xo thay vì đường cong cố định, nên nảy và dừng nhìn tự nhiên hơn. Giấy phép MIT. GitHub
5. PixiJS (đồ họa 2D bằng GPU). Bộ render 2D WebGL nhanh, hợp khi có nhiều sprite, hạt hoặc lớp hình cùng chuyển động. Giấy phép MIT. GitHub
6. p5.js (hiệu ứng hình ảnh tạo sinh). Nền tảng JavaScript cho nghệ sĩ và nhà thiết kế, hợp với hình nền, hoa văn và hiệu ứng sinh ra từ quy luật. Giấy phép LGPL-2.1. GitHub
7. Paper.js (đường dẫn vector). Bộ công cụ vẽ vector bằng script, dùng cho đường cong, nét vẽ dần và biến đổi hình. Giấy phép MIT. GitHub, trang chủ
Nhóm 3: Vật lý, 3D và shader
8. Matter.js (vật lý 2D). Engine vật lý vật rắn 2D cho web: rơi, va chạm, nảy. Giấy phép MIT. GitHub
9. Three.js (làm hiệu ứng 3D). Thư viện 3D JavaScript phổ biến nhất cho web, dùng cho logo xoay, cảnh 3D, camera chuyển động. Giấy phép MIT. GitHub
10. Rapier (va chạm 3D). Engine vật lý 2D và 3D chú trọng hiệu năng, hợp khi vật thể 3D cần rơi và va chạm thật. Giấy phép Apache-2.0. GitHub, trang chủ
11. OGL (shader tùy chỉnh). Thư viện WebGL tối giản, vừa đủ để viết shader riêng mà không kéo theo cả một engine lớn. README ghi giấy phép Unlicense (công cộng); GitHub không tự nhận diện giấy phép này. GitHub
12. tsParticles (hiệu ứng hạt). Tạo hạt, pháo hoa, confetti và các hiệu ứng tương tự, chỉnh được bằng cấu hình. Giấy phép MIT. GitHub
13. glTF Transform (tối ưu tài nguyên 3D). Bộ công cụ cho file glTF 2.0: nén, giảm dung lượng, chỉnh sửa. Dùng để file mô hình 3D nhẹ đi trước khi đưa vào cảnh. Giấy phép MIT. GitHub, trang chủ
14. GL Transitions (chuyển cảnh bằng shader). Bộ sưu tập hiệu ứng chuyển cảnh viết bằng shader, mở để ai cũng dùng và đóng góp. Giấy phép MIT. GitHub, trang chủ
Nhóm 4: Quay, âm thanh, phụ đề và xuất file
15. OBS Studio (quay màn hình). Phần mềm mã nguồn mở để quay màn hình và phát trực tiếp. Giấy phép GPL-2.0. GitHub, trang chủ
16. Chatterbox (lồng tiếng). Mô hình đọc văn bản thành giọng nói mã nguồn mở của Resemble AI. Giấy phép MIT. GitHub
17. Tone.js (tạo âm thanh và hiệu ứng). Framework Web Audio để tạo nhạc và âm thanh tương tác ngay trong trình duyệt, dùng cho tiếng “tick”, “whoosh”, nền nhạc ngắn. Giấy phép MIT. GitHub, trang chủ
18. faster-whisper (tạo phụ đề). Bản chạy nhanh của mô hình nhận dạng giọng nói Whisper, dùng thư viện CTranslate2. Đưa file tiếng vào, nhận lại văn bản có mốc thời gian để làm phụ đề. Giấy phép MIT. GitHub
20. FFmpeg (mã hóa và phân phối). Công cụ dòng lệnh xử lý video và âm thanh: đổi định dạng, nén, ghép, cắt. Phần lớn FFmpeg theo LGPL 2.1 trở lên, một số thành phần tuỳ chọn là GPL, xem trang pháp lý của dự án. Trang chủ, GitHub mirror
Cách giao cho Claude
Đừng bắt đầu bằng “làm cho mình video motion đẹp”. Hãy nói rõ cảnh, kích thước, thời lượng và công cụ nếu bạn đã chọn:
Làm một đoạn motion 8 giây, khung dọc 1080x1920, nền sáng. Chữ “Báo cáo tuần” rơi từ trên xuống và nảy nhẹ trên một mặt sàn, sau đó logo xoay 3D từ từ. Dùng Matter.js cho phần chữ rơi và Three.js cho logo. Tạo trang xem trước ở localhost, chưa xuất video. Khi mình duyệt mới xuất bằng FFmpeg.
Mình có 20 repo motion trong danh sách này (dán danh sách vào). Với cảnh “số liệu tăng dần kèm pháo giấy khi đạt mục tiêu”, hãy đề xuất 2 phương án dùng repo nào, nói ngắn lý do, rồi làm phương án đơn giản hơn và mở bản xem trước.
Câu hỏi thường gặp
Mình không biết code thì có dùng được không?
Dùng được ở mức bạn mô tả và Claude làm. Bạn không phải viết code, nhưng nên biết cách mở thư mục dự án, chạy bản xem trước và đọc lỗi cơ bản. Bài Claude Code là gì viết cho người mới.
20 repo này có dùng thương mại được không?
Phần lớn dùng giấy phép MIT hoặc Apache-2.0, cho phép dùng thương mại. Remotion giới hạn theo quy mô công ty, OBS, p5.js và FFmpeg có điều khoản GPL hoặc LGPL. Xem giấy phép từng repo ở link bên trên trước khi dùng cho khách hàng.
Có cần dùng cả 20 repo không?
Không. Hầu hết cảnh chỉ cần 1 đến 3 công cụ. Cứ bắt đầu bằng việc bạn cần làm, để Claude chọn công cụ hợp rồi thêm dần khi cần.
Claude có tự xuất được file MP4 không?
Claude viết code và chạy lệnh xuất (ví dụ qua Remotion, HyperFrames hoặc FFmpeg) trên máy bạn. Kết quả phụ thuộc cấu hình máy và cách bạn mô tả. Nên xem bản xem trước và kiểm file cuối trước khi đăng.
Tìm người đi cùng để dựng quy trình này ở đâu?
Mình có kèm 1:1 để dựng hệ thống AI cho công việc thật, và có cộng đồng miễn phí để trao đổi. Xem bên dưới.
Bước tiếp theo
Nếu bạn muốn có người đi cùng để dựng quy trình AI cho công việc của mình, bạn có thể tìm hiểu Coaching 1:1 hoặc vào cộng đồng để trao đổi với những người đang làm tương tự.