Làm Motion Graphic bằng Claude Code và Remotion: Từ Thư Mục Trống đến Video MP4
Remotion biến component React thành video, nên Claude Code viết và sửa được từng khung hình bằng chat. Bài này gom quy trình bốn cấp độ, bảng chọn phong cách và chín lỗi hay gặp.
Vinclair StudioCập nhật Đăng 12 nguồn được dẫn
Lần đầu dùng Remotion, điều làm mình thích nhất là mỗi khung hình đều là code. Remotion biến component React thành video, nên Claude Code viết được, sửa được bằng chat, và render ra MP4 ngay trên máy bạn. Trong bài này, mình gom lại quy trình bốn cấp độ, cách chọn phong cách hình ảnh và những lỗi hay gặp, dựa trên hai sổ tay công khai trên Claude và tài liệu chính thức của Remotion.
Hai nguồn tham khảo chính:
- Sổ tay "Motion graphics with Claude Code and Remotion", bốn cấp độ và chín lỗi: claude.ai/artifact/85LQzxW39CAXexf5uZo7tP
- "8 motion graphic styles, one prompt each": claude.ai/artifact/V2ZdmTZ3o6MUYG7ffBVWkw
Mình viết lại bằng lời của mình, rút gọn, và thêm những chỗ người mới hay vấp. Prompt đầy đủ bạn xem ở bản gốc.
Remotion khác gì phần mềm dựng video
Trong Premiere hay After Effects, bạn kéo keyframe trên timeline. Trong Remotion không có timeline: component đọc số khung hình hiện tại bằng useCurrentFrame(), rồi tính vị trí, độ mờ, kích thước từ số đó bằng interpolate() hoặc spring(). Khung 45 luôn ra đúng một hình, dù render lần nào.
Mình thấy chính điều này làm Remotion hợp với agent. Claude Code không cần "nhìn" timeline, nó chỉ cần viết hàm từ thời gian ra hình. Nhưng cũng chính điều này sinh ra lỗi số một: animation chạy bằng CSS hay hẹn giờ thì xem trước thấy ổn, render ra lại hỏng.
Dựng project
Hiểu nguyên lý rồi thì dựng project khá nhanh. Vì sao cần bước này: Remotion cần một thư mục dự án có sẵn cấu trúc chuẩn, và Claude Code cần bộ hướng dẫn chính thức để viết đúng API thay vì đoán. Theo tài liệu Remotion cho coding agent, bốn lệnh là đủ. Bạn mở terminal ở thư mục muốn chứa dự án rồi gõ lần lượt từng dòng, đợi dòng trước chạy xong mới gõ dòng sau:
npx create-video --yes --blank my-video: tạo thư mụcmy-videochứa một dự án Remotion trống.cd my-video: đi vào thư mục vừa tạo.npx remotion skills add: cài bộ skill chính thức để Claude Code hiểu Remotion.npm run dev: mở Remotion Studio trên trình duyệt để xem trước video.
npx create-video --yes --blank my-video
cd my-video
npx remotion skills add
npm run devLệnh skills add cài bộ Agent Skills chính thức, để Claude Code biết API đúng thay vì đoán. Sau đó mở terminal thứ hai, cd my-video, gõ claude và bắt đầu mô tả video. npm run dev mở Remotion Studio để xem trước.
Mình đã chạy thử lệnh tạo project hai lần ngày 01/11/2026 trên máy Linux (Node 24.22.1): mỗi lần dưới một phút (48 giây và 12 giây, tùy tốc độ mạng), cài Remotion 4.0.539 và React 19.2.3.
Bốn cấp độ, từ prompt đến footage của bạn
Cấp 0: một file luật cho cả dự án
Sổ tay A khuyên làm việc này đúng một lần: nhờ Claude Code cài đủ công cụ (Remotion, FFmpeg, Agent Skills, Python để tạo âm thanh), render thử một title card 3 giây, rồi viết file CLAUDE.md chứa luật làm video. Có file luật thì mỗi prompt sau chỉ cần nói nội dung, không phải nhắc lại kỹ thuật.
Theo cách mình hiểu, đây là những luật đáng giữ nhất trong file đó:
- Mọi khung hình là hàm của thời gian. Chỉ dùng
useCurrentFrame(),interpolate(),spring(). Cấm CSS transition,@keyframes,setTimeout,Date.now()vàMath.random()không có seed. - Ảnh dùng
<Img>vớistaticFile(), font tải bằng@remotion/google-fonts. Nếu không, renderer có thể chụp đúng lúc ảnh chưa tải xong. - Kích thước mặc định: 1920x1080 30fps, dọc 1080x1920. Với video dọc, chừa vùng an toàn ở trên và dưới để không bị giao diện app che.
- Luôn có thứ đang chuyển động, cảnh không dài quá vài giây, nền cũng chuyển động nhẹ thay vì một màu phẳng.
- Quy trình: storyboard trước, chờ duyệt; dựng; render vài ảnh tĩnh ở mỗi điểm cắt để soát; sửa lỗi nặng; cuối cùng mới render MP4.
- Sổ bài học: lỗi nào sửa quá một lần thì thêm một dòng vào
lessons.md, và đọc file đó đầu mỗi phiên.
Cấp 1: chỉ từ prompt ra video
Khi đã có file luật, cấp đầu tiên không cần tài sản gì: mô tả sản phẩm, Claude dựng toàn bộ giao diện bằng component rồi cho nó chuyển động. Mẹo quan trọng nhất của sổ tay A ở cấp này: viết mỗi cảnh theo ba nhịp Bắt đầu → Biến đổi → Kết thúc. "Cho thấy tính năng" là quá mơ hồ; "thẻ việc bay vào từ bốn phía, xoáy về giữa, rồi đập thành ba cột To do / Doing / Done" thì agent có thứ cụ thể để dựng.
Khung prompt gợi ý gồm: sản phẩm là gì và các vật thể thật trên màn hình, định dạng, phong cách (nền, màu nhấn, font), năm cảnh (mở, lộ diện, hành động, kết quả, thẻ kết), âm thanh, và quy trình (storyboard trước). Sổ tay có ví dụ điền sẵn cho một video concept 20 giây về Trello.
Khi Claude gửi storyboard, đọc nó trước khi cho dựng. Khi có ảnh tĩnh, góp ý từng ý một và nói rõ cái gì giữ nguyên.
Cấp 2: prompt cộng video tham khảo
Khi prompt thôi chưa đủ để ra đúng cảm giác bạn muốn, cấp 2 thêm một video tham khảo. Chọn một video bạn thích vì cách nó chuyển động, không phải vì nội dung. Quy trình hai bước:
- Nhờ Claude phân tích video tham khảo thành
style-bible.md: nhịp cắt, kiểu chuyển cảnh, cách chữ vào ra, bảng màu, chuyển động camera, độ "nảy" của animation, và vài động tác đặc trưng. Cuối file chia hai mục "Học" và "Không chép". - Bạn tự sửa
style-bible.md. Đây là chỗ gu của bạn đi vào. Rồi mới nhờ dựng video về chủ đề của bạn theo ngữ pháp đó, kèm bảng đối chiếu cảnh tham khảo → cảnh của mình → khung hình.
Lưu ý của sổ tay: tham khảo chậm thì ra video chậm. Cách kiểm tra đơn giản: đếm số lần cắt trong 10 giây đầu của cả hai video.
Biến thể: đưa URL sản phẩm thay vì chủ đề. Claude lấy logo, màu, font và câu chữ thật từ trang (tải file ảnh, không chụp màn hình trang), rồi dựng theo style bible. Chỉ làm với sản phẩm của bạn hoặc thương hiệu bạn được phép dùng, và soát lại mọi con số trên màn hình với trang gốc.
Cấp 3: footage của bạn, sửa theo phong cách tham khảo
Cấp cuối cùng đưa footage của chính bạn vào. Đặt video thô vào public/raw/, video tham khảo vào public/refs/. Một prompt làm năm việc: phiên âm có timestamp từng chữ (Whisper chạy trên máy), cắt khoảng lặng và câu nói hỏng, phân tích cách dựng của video tham khảo, dựng lại footage theo cách đó, và trình bày kế hoạch trước khi render.
Khi quy trình đã chạy ổn, sổ tay gợi ý đóng gói nó thành một skill của Claude Code để lần sau gọi lại.
Chọn phong cách: bắt đầu từ việc video phải làm
Sổ tay B có tám phong cách, mỗi cái một prompt dài vài chục nghìn ký tự. Với mình, phần hữu ích nhất là bảng chọn theo mục đích, mình tóm lại như sau:
| Video cần làm gì | Phong cách gợi ý | Vì sao |
|---|---|---|
| Giải thích một thứ hoạt động ra sao | Flat Vector | Hình 2D biến hình từ ý này sang ý kia, dễ theo dõi |
| So sánh hai công cụ | Generative Particles | Hạt sáng tụ lại thành hai vật thể đặt cạnh nhau |
| Đi qua một app | Liquid Glass | Kính khúc xạ lướt trên giao diện, hợp video sản phẩm |
| Chia sẻ mẹo hoặc framework | Kinetic Typography | Chữ chính là hình, hợp nội dung dạng danh sách |
| Một hệ thống, một pipeline | Isometric Line Art | Nét vẽ kỹ thuật tự vẽ ra rồi chạy |
| Quy trình cần cảm giác thân thiện | Paper Cut-Out | Giấy cắt dán, ấm và thủ công |
| Âm nhạc, văn hoá, câu chuyện | Risograph Print | Mực in chồng, chấm halftone |
| Game, code, hoài cổ | 8-Bit Pixel Art | Sprite pixel, chữ bitmap |
Nếu bạn mới bắt đầu, mình gợi ý bắt đầu bằng Kinetic Typography hoặc Flat Vector: chỉ cần chữ, hình khối và SVG, không cần shader hay WebGL, nên ít chỗ hỏng khi render.
Chín lỗi cần kiểm trước khi bấm render
Trước khi render cả video, mình luôn rà lại chín lỗi mà sổ tay A tổng kết. Mỗi lỗi dưới đây kèm cách tránh.
- Bỏ qua bước cài đặt. Không có Agent Skills và file luật, Claude đoán API. Làm Cấp 0 một lần.
- Animation chạy bằng CSS hoặc hẹn giờ. Remotion mở nhiều tab trình duyệt để render nhiều khung song song (tài liệu về lỗi nhấp nháy), nên mỗi khung phải tự tính được hình của nó; transition và
setTimeoutcho ra hình sai. Chỉ dùnguseCurrentFrame(),interpolate(),spring(). - Câu chuyện hoặc phong cách mơ hồ. "Làm giống Apple" ra video phẳng. Viết Bắt đầu → Biến đổi → Kết thúc cho từng cảnh, và đưa tham khảo.
- Không có storyboard hay ảnh tĩnh. Duyệt storyboard và soát ảnh tĩnh trước khi render cả video.
npx remotion stillrender một khung rất nhanh. - Tin vào lời tự review của Claude. Claude không cảm được nhịp. Bạn tự tua video và góp ý từng điểm.
- Ảnh và font chưa tải lúc render. Renderer chụp đúng trạng thái đang tải. Dùng
<Img>,staticFile()và@remotion/google-fonts. - Dùng nội dung không có bản quyền. Video tham khảo chỉ để phân tích, không dùng footage, nhạc hay logo của nó. Ghi nguồn và giấy phép nhạc vào
licenses.md. - Render sập với footage nặng. Tạo bản proxy 1080p cho file 4K, giảm concurrency, xem trước ở 720p.
- Lấy tài sản từ website sai cách. Đừng chụp màn hình trang: tải file ảnh gốc, chỉ dùng câu chữ có trên trang, và chỉ với thương hiệu bạn được phép dùng.
Khi render báo lỗi
Ngoài chín lỗi ở trên, có bốn thông báo lỗi mà mình thấy người mới hay gặp. Mỗi mục dưới đây tóm tắt trang troubleshooting chính thức của Remotion, kèm link để bạn đọc đầy đủ.
Video giật hoặc nhấp nháy khi render, dù preview mượt
Remotion mở nhiều tab để render song song, và các tab không chia sẻ trạng thái. Animation nào không tính từ useCurrentFrame() sẽ lệch nhau giữa các tab. Cách sửa gốc là mọi chuyển động phải là hàm của số khung hình; cách tạm là render với --concurrency=1, chậm hơn nhiều và vẫn không đảm bảo đúng thời điểm. Chi tiết ở trang Flickering.
"A delayRender() was called but not cleared after 28000ms"
Remotion đang chờ một tài nguyên chưa tải xong. Nguyên nhân thường gặp là quên gọi continueRender(), font hay ảnh tải từ mạng bị chặn, hoặc đặt concurrency quá cao khiến Chrome không tải hết video. Xem trang Debugging timeouts.
"Could not play video with src …"
Hay gặp nhất là file trong thư mục public/ nhưng gọi bằng đường dẫn thường như "/my-video.mp4". Phải dùng staticFile('my-video.mp4'), vì Remotion phục vụ file tĩnh dưới một tiền tố riêng. Codec Chrome không phát được (như HEVC trên Linux, .avi, .flv) cũng gây lỗi này. Xem trang Media playback error.
"Failed to launch the browser process"
Trên Linux, Chrome Headless Shell thiếu thư viện hệ thống, hoặc bạn chạy bản trình duyệt sai kiến trúc (x64 trên arm64). Cài các gói Linux Remotion liệt kê rồi thêm --log=verbose vào lệnh render để xem log của trình duyệt.
Remotion hay HyperFrames
Nếu bạn không muốn đụng React, HyperFrames trong Skills hub của mình là một lựa chọn khác: video là file HTML với animation, agent viết xong mở trình duyệt là xem được, render ra MP4 trên máy. Trang của nó trong hub ghi cả điểm cần cân nhắc, như CLI gửi số liệu sử dụng mặc định và cách tắt. Remotion hợp hơn khi bạn đã quen React, cần phụ đề, cần render hàng loạt hoặc trên cloud.
- Mỗi khung hình là một hàm của số thứ tự khung: render khung 45 hai lần ra hai file giống nhau từng byte.
- Cấm CSS transition và setTimeout trong Remotion; chỉ dùng useCurrentFrame(), interpolate(), spring().
- Viết mỗi cảnh theo ba nhịp Bắt đầu → Biến đổi → Kết thúc, đừng viết "cho thấy tính năng".
- Duyệt storyboard và ảnh tĩnh trước, rồi mới render cả video.
Đọc tiếp
Claude CodeHook Claude Code: Vì Sao Exit 1 Không Chặn ĐượcHook PreToolUse chặn rm -rf trước khi Claude Code chạy. Cấu hình, script Node đã thử với 12 lệnh mẫu, và 3 hiểu lầm làm hook tưởng chặn mà không chặn.→
Claude CodeQuảng Cáo Giảm 65% Token, Đo Thật Chỉ 8,5%Một skill hứa giảm 65% token, phép đo của JetBrains chỉ thấy 8,5%. Các cách miễn phí có sẵn trong Claude Code, và cách đọc phép đo trước khi cài công cụ ngoài.→
Next.jsTăng Tốc Next.js: Lighthouse Mobile 58 lên 71Những gì đã làm trên một site Next.js static export: LCP từ 8,3s còn 5,4s, trang nhẹ từ 1.129 KiB còn 604 KiB. Cả thay đổi có ích lẫn thay đổi làm trang tệ đi.→