# Làm motion graphics bằng Claude Opus 5.5: dựng xưởng video bằng code từ thư mục trống
URL: https://opcaios.org/blog/motion-graphics-claude-opus-5-5
Ngày: 2026-10-29
Cập nhật: 2026-10-25
Tác giả: Lê Quốc Nghĩa
Chuyên mục: Hướng dẫn
Làm motion graphics bằng Claude nghĩa là để Claude Code viết mã (HTML, React hoặc p5.js) mô tả từng khung hình, rồi dùng công cụ như FFmpeg dựng thành video có nhạc, giọng đọc và logo, không cần mở After Effects. Theo Hamza Khalid, tác giả loạt hướng dẫn "AI in Public" (bài đăng trên X ngày 30/9/2026, hơn 312 nghìn lượt xem theo X), bí quyết nằm ở phần thiết lập chứ không phải câu lệnh: câu lệnh chỉ chiếm 10% kết quả, thiết lập chiếm 90%. Bài này viết lại phần hướng dẫn đó bằng tiếng Việt, kèm toàn bộ ảnh và video từ bài gốc, và đối chiếu từng kho mã, từng lệnh cài trên GitHub ngày 23/10/2026.
*Phim giới thiệu thương hiệu 25 giây của tác giả, dựng bằng Claude Opus 5.5: mọi khung hình và âm thanh đều là mã. Video: Hamza Khalid (AI in Public), lấy từ [bài gốc trên X](https://x.com/humzaakhalid/status/2105203643758895454).*
*Ảnh bìa của bài gốc. Ảnh: Hamza Khalid.*
## Motion graphics bằng code là gì?
Motion graphics bằng code là cách tạo hoạt họa chữ, hình khối và giao diện bằng mã nguồn: mỗi khung hình được vẽ từ HTML, CSS, canvas hay React, rồi công cụ dựng gộp các khung thành tệp MP4. Vì mọi thứ là văn bản, một mô hình viết mã như Claude đọc, sửa và chạy lại được, thay vì phải kéo thả trong phần mềm đồ hoạ.
Theo tác giả, lý do đáng bỏ một cuối tuần để học là video đã rẻ đi rất nhanh: ông kể một người làm sản phẩm trả hơn $1,000 cho video ra mắt cách đây một năm, rồi tuần trước tự làm một video bằng Claude trong chưa đầy 30 phút (đây là lời kể của tác giả bài gốc, chưa kiểm chứng độc lập). Anthropic phát hành Claude Opus 5.5 ngày 22/9/2026, và theo tác giả, trong vài giờ sau đó dòng thời gian của ông đầy các video giới thiệu và video nhạc được dựng từ mã, phần lớn chú thích "một câu lệnh".
## Vì sao "một câu lệnh" thực ra cần 90% thiết lập?
Câu lệnh chỉ chiếm 10% kết quả, còn thiết lập chiếm 90%: đó là luận điểm của Hamza Khalid trong bài đăng ngày 30/9/2026 trên X. Phần quyết định video đẹp hay thô là thương hiệu, tài liệu tham chiếu và quy tắc mà Claude được đưa trước khi bắt đầu. Tác giả dẫn lại nhận xét của Thariq (thuộc nhóm Claude Code của Anthropic): bài đăng ghi "Claude one-shot this" (Claude làm một lần ra luôn), nhưng câu lệnh đứng sau dài khoảng 10 nghìn ký tự, kèm kỹ năng, ví dụ và khoá API. Để tự kiểm chứng, tác giả lấy một câu lệnh đang lan truyền, chạy nguyên văn và nhận kết quả "tạm được". Có hai lỗi:
1. Đầu nhân vật lơ lửng vì không có cổ và thân bên dưới.
2. Màu chữ chọi với nền đến mức khó đọc.
Cuối cùng, ví dụ: cùng một câu lệnh nhưng có thư mục thương hiệu với logo và hệ màu thì Claude không cần tự chọn màu.
*"Claude Pop": 6 giây mở đầu của một video nhạc dựng bằng mã, lấy từ bài gốc. Video: Hamza Khalid.*
*Claude Code dựng lại video nhạc "Claude Pop", có bản xem trước 6 giây ngay trong khung chat. Ảnh: Hamza Khalid.*
## Bước 1: Tạo thư mục thương hiệu để làm xưởng video
Thư mục thương hiệu là nơi mọi video bắt đầu: Claude Code làm việc trong thư mục bạn mở, nên đặt kho tham chiếu, kỹ năng, tệp thương hiệu và sản phẩm render chung một chỗ thì video sau tận dụng được video trước. Việc này mất khoảng một phút. Các bước trong ứng dụng Claude Code:
1. Mở Claude Code.
2. Bấm vào ô **No folder** (hoặc tên thư mục đang chọn).
3. Bấm **Open folder**.
4. Bấm **New Folder**.
5. Đặt tên theo thương hiệu của bạn (tác giả đặt là `video-motion-lab`) rồi bấm **Create**.
6. Thư mục mới đã được chọn, đó là xưởng của bạn.
*Bước 1: mở Claude Code. Ảnh: Hamza Khalid.*
*Bước 2: bấm vào ô No folder. Ảnh: Hamza Khalid.*
*Bước 3: chọn Open folder. Ảnh: Hamza Khalid.*
*Bước 4: bấm New Folder. Ảnh: Hamza Khalid.*
*Bước 5: đặt tên và bấm Create. Ảnh: Hamza Khalid.*
*Bước 6: thư mục đã được chọn. Ảnh: Hamza Khalid.*
## Bước 2: Nên cho Claude xem những kho mã tham chiếu nào?
Claude cần xem video bằng mã được dựng ra sao, vì mô hình chỉ dựa vào trí nhớ sẽ chọn hoạt họa "trung bình" nhất nó từng thấy. Tác giả dùng 8 nguồn tham chiếu, mỗi nguồn lo một phần việc: video nhạc, bộ khởi đầu, canvas nút, khung HTML, khung React, phim dài, thư viện câu lệnh và bộ dữ liệu. OPCAIOS đã kiểm tra từng kho trên GitHub ngày 23/10/2026, theo mô tả của GitHub và số sao ghi trong bảng:
| Vai trò | Nguồn | Mô tả (theo GitHub) | Sao, giấy phép |
|---|---|---|---|
| Video nhạc | [JohnHeibel/PDoomVideo](https://github.com/JohnHeibel/PDoomVideo) | Mã nguồn video nhạc "I'm Upping My P(doom)" làm bằng Claude Opus 5.5 | khoảng 2.500 sao, chưa ghi giấy phép |
| Bộ khởi đầu | [JohnHeibel/ClaudeAnimationBase](https://github.com/JohnHeibel/ClaudeAnimationBase) | Bộ khởi đầu hoạt họa tranh vẽ tay bằng p5.js và p5.brush, nhân vật Clawd, 31 cảm xúc | khoảng 1.580 sao, MIT |
| Canvas nút | [buildwithhanif/claude-animation-skill](https://github.com/buildwithhanif/claude-animation-skill) | Hoạt họa 2D vẽ tay viết bằng mã, thuần Node và FFmpeg | 42 sao, MIT |
| Khung HTML | [heygen-com/hyperframes](https://github.com/heygen-com/hyperframes) | "Viết HTML, render video, dành cho tác tử AI" | khoảng 70.000 sao, Apache-2.0 |
| Khung React | [Remotion Skills](https://www.remotion.dev/docs/ai/skills) | Bộ kỹ năng của Remotion (mã nguồn ở [remotion-dev/skills](https://github.com/remotion-dev/skills)) | khoảng 5.500 sao |
| Phim dài | [WinterArc21/Battle-of-Austerlitz-Film](https://github.com/WinterArc21/Battle-of-Austerlitz-Film) | Phim 5 phút bằng WebGL, âm thanh tổng hợp và lời dẫn | 25 sao |
| Thư viện câu lệnh | [guanmo-ai/awesome-ai-motion](https://github.com/guanmo-ai/awesome-ai-motion) | Tuyển chọn video và hoạt họa kèm mã nguồn, câu lệnh | khoảng 410 sao |
| Bộ dữ liệu | [athemeroy/awesome-claude-5-5-videos](https://github.com/athemeroy/awesome-claude-5-5-videos) | Danh sách video Claude 5.5 kèm nguồn, câu lệnh, công cụ | khoảng 730 sao, CC-BY-4.0 |
Hai lưu ý nhỏ. Thứ nhất, kho cuối trong bài gốc tên `awesome-opus-5-5-videos` nhưng nay đã đổi tên thành `awesome-claude-5-5-videos` (liên kết cũ vẫn chuyển hướng). Thứ hai, Remotion là trang tài liệu, không "clone" được như các kho còn lại nên được cài qua kỹ năng ở bước sau.
### Làm sao clone cả tám kho cùng một lúc?
Bạn không cần clone từng kho; clone là việc tải một kho mã từ GitHub về máy. Tác giả gói việc này thành một câu lệnh dán vào Claude Code (Anthropic), kèm yêu cầu kiểm tra Node.js 22 trở lên, git và FFmpeg trước khi clone, và dùng `GIT_LFS_SKIP_SMUDGE=1` cho HyperFrames để bỏ qua video thử lớn. Theo ảnh chụp của tác giả, 8 kho chiếm khoảng 560 MB. Dạng rút gọn của câu lệnh đó:
```
Trong thư mục này, tạo thư mục con "repos" và clone vào đó các kho sau:
https://github.com/JohnHeibel/PDoomVideo
https://github.com/JohnHeibel/ClaudeAnimationBase
https://github.com/buildwithhanif/claude-animation-skill
https://github.com/heygen-com/hyperframes
https://github.com/WinterArc21/Battle-of-Austerlitz-Film
https://github.com/guanmo-ai/awesome-ai-motion
https://github.com/athemeroy/awesome-claude-5-5-videos
Với HyperFrames, bỏ qua video thử lớn (dùng GIT_LFS_SKIP_SMUDGE=1).
Trước khi clone, kiểm tra Node.js 22+, git và ffmpeg; thiếu gì thì cài.
Xong thì liệt kê từng kho kèm một dòng nói nó dùng để làm gì.
```
*Kết quả: Claude clone xong các kho (khoảng 560 MB theo ảnh chụp của tác giả), tóm tắt từng kho và gợi ý dùng HyperFrames cho thiết kế thương hiệu, ClaudeAnimationBase cho phong cách minh hoạ có linh vật. Ảnh: Hamza Khalid.*
## Bước 3: Cài kỹ năng nào để Claude đỡ phải đoán?
Kỹ năng (skills) là các gói hướng dẫn cho Claude biết quy tắc làm việc của từng khung dựng. Kho mã cho Claude thấy sản phẩm tốt trông ra sao, còn kỹ năng đưa quy tắc để nó làm đúng cách khung đó mong đợi. Dán lần lượt các lệnh sau vào terminal:
```bash
npx skills add remotion-dev/skills
claude plugin marketplace add heygen-com/hyperframes
claude plugin install hyperframes@hyperframes
claude plugin marketplace add buildwithhanif/claude-animation-skill
claude plugin install claude-animation@claude-animation-skill
```
Đối chiếu với tài liệu của từng dự án: lệnh `npx skills add remotion-dev/skills` đúng như trang Remotion hướng dẫn; hai lệnh plugin của HyperFrames và hai lệnh của claude-animation đúng như README của chúng. README của claude-animation còn yêu cầu chạy thêm `npm install` trong thư mục kỹ năng sau khi cài, và cần Node 20 trở lên cùng FFmpeg.
## Nên dùng HyperFrames, Remotion hay claude-animation?
Chọn theo kiểu video bạn muốn, đúng như phần tóm tắt Claude tự viết trong ảnh chụp của tác giả:
- **HyperFrames (HTML, CSS, GSAP):** hợp nhất cho video thương hiệu sắc nét có logo, chữ, giao diện và hệ màu; có hàng trăm khối dựng sẵn như biểu đồ, hiệu ứng nhiễu, cửa sổ mã.
- **Remotion (React):** thay thế nếu bạn muốn dựng bằng thành phần React thay vì HTML.
- **ClaudeAnimationBase và claude-animation-skill:** hợp khi thương hiệu cần cảm giác tranh vẽ, có nhân vật hay linh vật; nhược điểm là các nét tô màu nước render chậm nếu máy không có card đồ hoạ rời, và README khuyên nhờ Claude thay bằng hiệu ứng khác khi chạy trên đồ hoạ tích hợp.
## Cần chuẩn bị gì trước khi bảo Claude dựng phim?
Bạn cần một bản tóm tắt thương hiệu ngắn: Claude sẽ hỏi lại bạn đúng những điều này trước khi bắt đầu, theo ảnh chụp của tác giả:
1. **Thương hiệu nào:** logo, màu sắc, phông chữ hoặc địa chỉ website để Claude tự lấy.
2. **Video dùng để làm gì:** mở đầu bằng logo, quảng cáo, giới thiệu sản phẩm, video giải thích hay vòng lặp mạng xã hội.
3. **Độ dài và tỷ lệ:** ví dụ 15 giây dọc 9:16 cho Reels hoặc Shorts, hay ngang 16:9, hay vuông 1:1.
4. **Phong cách:** motion graphics gọn gàng hay minh hoạ vẽ tay.
5. **Âm thanh:** nhạc, giọng đọc hoặc không có.
Phần còn lại của quy trình gốc (bản tóm tắt thương hiệu chi tiết, tệp `CLAUDE.md`, câu lệnh chính xác dựng phim và cách sửa lỗi khi render) tác giả để trong bản tin của ông, nên bài này không có bản gốc của các phần đó. Gợi ý thực tế: giữ quy tắc thương hiệu trong `CLAUDE.md` để mỗi video mới đều đọc lại, và yêu cầu Claude lên kịch bản phân cảnh trước khi viết mã; README của ClaudeAnimationBase cũng khuyên làm vậy, cùng với việc thử cả hướng dẫn rất rộng và rất chi tiết.
## Lưu ý trước khi làm theo
Lưu ý trước khi làm theo là năm điểm về máy móc, bản quyền và độ tin cậy của số liệu:
1. **Yêu cầu máy:** Node.js 22 trở lên (HyperFrames), git và FFmpeg; ClaudeAnimationBase cần thêm Google Chrome. Các kho tổng cộng khoảng 560 MB theo lần chạy của tác giả.
2. **Mức suy luận ảnh hưởng độ cầu kỳ:** theo README của ClaudeAnimationBase, các video thử đều dùng Opus 5.5 ở mức suy luận xhigh, và mức càng cao thì cảnh càng cầu kỳ, chi tiết.
3. **Bản quyền:** một số kho không ghi giấy phép (ví dụ PDoomVideo); nếu dùng lại tài sản của người khác trong sản phẩm thương mại, hãy kiểm tra giấy phép hoặc hỏi tác giả.
4. **Số liệu của tác giả:** các con số về lượt xem, chi phí và thời gian là lời kể trong bài gốc, chưa kiểm chứng độc lập.
5. **Kinh nghiệm của OPCAIOS:** sơ đồ và ảnh bìa của blog này cũng được dựng bằng mã (viết HTML rồi chụp bằng Chrome không giao diện), khác ở chỗ là ảnh tĩnh thay vì video.
Nếu bạn mới làm quen, đọc thêm [Nên chọn model AI nào?](/blog/chon-model-ai) để cân nhắc chi phí theo từng tác vụ, [Claude Sonnet 5.5 là gì?](/blog/claude-sonnet-5-5-la-gi) cho lựa chọn nhanh và rẻ hơn, và [AI viết code sai phiên bản](/blog/ai-viet-code-sai-phien-ban) để biết vì sao nên đưa tài liệu tham chiếu cho AI trước khi nhờ nó viết mã.
## Câu hỏi thường gặp
### Làm motion graphics bằng Claude có cần biết thiết kế không?
Không bắt buộc. Theo tác giả bài gốc, bạn chỉ cần một bức ảnh thương hiệu hoặc địa chỉ trang bán sản phẩm và một câu lệnh, nhưng kết quả phụ thuộc phần lớn vào việc thiết lập thư mục, kho tham chiếu và kỹ năng như trong bài này.
### Cần cài gì để Claude dựng video bằng mã?
Cần Claude Code, Node.js 22 trở lên, git và FFmpeg; tuỳ khung dựng có thể cần thêm Chrome. Sau đó cài kỹ năng của Remotion, HyperFrames và claude-animation bằng các lệnh ở Bước 3.
### HyperFrames và Remotion khác nhau thế nào?
HyperFrames dựng video từ HTML, CSS và GSAP, hợp với thương hiệu có logo, chữ, giao diện. Remotion dựng bằng thành phần React. Chọn theo ngôn ngữ bạn quen và kiểu video muốn làm.
### Vì sao chạy nguyên câu lệnh lan truyền vẫn ra video xấu?
Vì Claude thiếu thương hiệu, hình mẫu và quy tắc nên phải đoán. Tác giả thử chạy nguyên văn một câu lệnh viral và gặp đầu nhân vật lơ lửng, màu chữ chọi nền; thiết lập trước giúp tránh được điều đó.
### Muốn học cách dùng AI cho công việc thực tế thì bắt đầu từ đâu?
Nên bắt đầu từ một quy trình nhỏ lặp lại được, có thiết lập rõ ràng như bài này. Theo Hamza Khalid, thiết lập chiếm 90% kết quả, nên đầu tiên hãy tạo thư mục thương hiệu, tiếp theo cho Claude xem kho tham chiếu và cài kỹ năng, cuối cùng mới viết câu lệnh dựng phim. Ví dụ, một cửa hàng nhỏ có thể làm 1 video giới thiệu 15 giây dọc 9:16 cho Reels bằng Claude Code (Anthropic) trước khi mở rộng sang loạt video. Xem [khoá đào tạo ứng dụng AI](/services/dao-tao-ung-dung-ai) của OPCAIOS.
*Nguồn: bài viết của Hamza Khalid (AI in Public) trên X, [x.com/humzaakhalid/status/2105203643758895454](https://x.com/humzaakhalid/status/2105203643758895454), đăng 30/9/2026; ảnh và video lấy từ bài gốc theo yêu cầu, thuộc về tác giả; bài gốc chỉ công bố phần đầu hướng dẫn. Kho mã, lệnh cài và ngày phát hành Claude Opus 5.5 (22/9/2026) đối chiếu GitHub, trang Remotion và trang thông báo của Anthropic ngày 23/10/2026. Số liệu về lượt xem, chi phí và thời gian là lời tác giả, chưa kiểm chứng.*