HyperFrames: viết video bằng HTML, để AI agent dựng và xuất MP4
Tóm tắt
HyperFrames (heygen-com/hyperframes, Apache-2.0) là framework “video as code”: bạn (hoặc AI agent) viết composition bằng HTML/CSS, headless Chrome và FFmpeg render ra MP4 chính xác từng frame. Kèm 21 skill cho Claude Code, Cursor, Codex… để dựng video theo quy trình.
Dựng video thường là việc thủ công trên phần mềm timeline, khó đưa vào quy trình tự động hay quản lý phiên bản. HyperFrames (heygen-com/hyperframes, giấy phép Apache-2.0) tiếp cận theo hướng “video as code”: bạn — hoặc một AI agent — viết composition bằng HTML/CSS, rồi headless Chrome và FFmpeg render ra MP4 chính xác từng frame. Dự án kèm 21 skill cho Claude Code, Cursor, Codex… để dựng video theo quy trình.
Điểm đáng chú ý
| Đặc điểm | Ý nghĩa |
|---|---|
| HTML/CSS là nguồn | LLM viết HTML rất tốt nên agent soạn video trực tiếp được |
| Render tất định | Cùng nguồn luôn ra cùng một video — dễ review, dễ version trong git |
| Skills có sẵn | /product-launch-video, /pr-to-video (biến PR GitHub thành video), /music-to-video… |
| Giấy phép | Apache-2.0, không tính phí theo lượt render |
So với Remotion
| Remotion | HyperFrames | |
|---|---|---|
| Cách viết | React-first | HTML/CSS-first |
| Render | Headless Chrome + FFmpeg | Headless Chrome + FFmpeg |
| Chuyển đổi | — | Có skill chuyển composition Remotion sang HyperFrames |
Cài và dùng
npx skills add heygen-com/hyperframes # cần Node.js ≥ 22Sau khi cài skill, bạn mô tả video muốn làm (nội dung, độ dài, phong cách) và agent tạo composition, xem trước, chỉnh và render.
Vì sao “video as code” hấp dẫn?
- Review được: thay đổi video là một diff trong git, đồng nghiệp xem và góp ý như với code.
- Tham số hoá: một template có thể sinh hàng trăm biến thể (tên khách hàng, số liệu, ngôn ngữ).
- Tự động hoá: gắn vào CI để tạo video mỗi lần ra bản.
- Phù hợp với AI: agent làm việc tốt nhất với văn bản có cấu trúc và có thể xem kết quả để sửa.
Giới hạn
- Đây là motion design bằng code (chữ, hình, media ghép), không phải AI sinh cảnh quay.
- Render video tốn CPU/thời gian; với video dài cần cân nhắc hạ tầng.
- Chất lượng thiết kế vẫn phụ thuộc brief và mắt thẩm mỹ của bạn.
Áp dụng thế nào?
- Team sản phẩm: tạo video release note hoặc demo tính năng tự động mỗi lần ra bản.
- Marketing: sinh biến thể video từ một template có tham số.
- Dev: thử bắt đầu với một video 15 giây trước khi làm việc phức tạp hơn.