HyperFrames: framework render video từ HTML cho AI agent
/hyperframes
HyperFrames render video MP4 trực tiếp từ HTML, CSS và animation có thể tua (seekable), dùng headless Chrome và FFmpeg thay vì một trình chỉnh timeline độc quyền. Nên dùng nếu team bạn đã quen viết HTML/CSS và muốn agent hoặc CI tự tạo video mà không cần React; nên bỏ qua nếu bạn đã đầu tư sâu vào một codebase Remotion hoặc cần một trình chỉnh timeline trực quan hoàn chỉnh thay vì viết markup.
Framework Render Video HTML-Native
HyperFrames là một framework mã nguồn mở do HeyGen xây dựng, chuyển mã HTML, CSS, media và animation có thể tua thành file MP4 tất định. Bạn có thể chạy qua CLI cục bộ, qua skill cho AI coding agent, hoặc dùng làm lõi render phía sau các workflow soạn nội dung dạng dịch vụ. Đóng gói thành nhiều package TypeScript — CLI, core, engine, producer, studio, player — theo giấy phép Apache-2.0.
Chuyển Đổi Thiết Kế Web Sang Video
Phần lớn các pipeline chuyển HTML sang video rơi vào hai nhóm: công cụ quay màn hình chỉ ghi lại những gì trình duyệt hiển thị, hoặc renderer dựa trên React như Remotion buộc bạn học một timeline component. Cả hai đều không giải quyết vấn đề về design system. File `design.md` của một công ty được viết cho viewport trình duyệt, không phải cho một khung hình video có thời lượng cố định. Ai đó phải tự đoán tỷ lệ, nhịp độ và lề an toàn cho camera bằng tay. Bước `frame.md` của HyperFrames đảo ngược spec đó thành một `DESIGN.md` mở rộng, được thiết kế riêng cho khung hình, còn các thuộc tính thời gian `data-*` cho phép renderer — hoặc một agent — tua tới bất kỳ điểm nào trong composition thay vì phải phát lại từ đầu.
Các Năng Lực Cốt Lõi Cho Việc Tạo Video
- ✓Các adapter animation có thể tua cho GSAP, CSS, Lottie, Three.js, Anime.js và WAAPI, cộng thêm một chỗ trống để cắm frame adapter tự viết.
- ✓Không cần bước build — một composition chỉ là file `index.html` với các thuộc tính `data-start`, `data-duration`, `data-track-index`, chạy được ngay khi mở trong trình duyệt.
- ✓Kết quả tất định: renderer duyệt qua từng khung hình trong headless Chrome bằng Puppeteer rồi ghép lại bằng FFmpeg, nên cùng một HTML luôn ra đúng một file MP4.
- ✓19 skill đóng gói sẵn, dẫn đầu bởi router `/hyperframes` — chuyển một yêu cầu bằng tiếng Anh thông thường thành workflow tạo video cụ thể như `/product-launch-video` hay `/pr-to-video`.
- ✓Bước `frame.md` đảo ngược một `design.md` có sẵn thành `DESIGN.md` mở rộng, được scale riêng cho khung hình video thay vì viewport trình duyệt.
- ✓Một catalog block và component cài được bằng `npx hyperframes add <name>` — shader transition, overlay mạng xã hội, biểu đồ động.
- ✓Đường render local và AWS Lambda qua `@hyperframes/aws-lambda`, giúp phân tán việc render thay vì dồn hết vào một máy.
- ✓Skill `/figma` kéo asset, token và animation Motion từ Figma vào một composition qua MCP.
Các Kịch Bản Tạo Video Thực Tế
- •Clip ra mắt sản phẩm và thông báo tính năng, dựng từ chính trang web sản phẩm hoặc một bản mô tả ngắn.
- •Video giới thiệu PR với diff code được animate và có lời dẫn, lấy trực tiếp từ một PR trên GitHub qua CLI `gh`.
- •Chart race, animation bản đồ và các dạng data visualization khác cho báo cáo hoặc bài đăng mạng xã hội.
- •Video giải thích từ docs hoặc PDF, cùng các motion graphic tái sử dụng cho pipeline tạo nội dung tự động.
Bắt Đầu Với HyperFrames
Với một AI coding agent, chạy `npx skills add heygen-com/hyperframes --full-depth` — giữ nguyên cờ `--full-depth`, vì nếu bỏ nó bạn sẽ nhận bản cache mà registry skills.sh lưu từ vài giờ trước thay vì bản `main` hiện tại. Chạy lệnh này không tương tác mà không chọn riêng một skill thì bạn sẽ cài luôn cả 19 skill; `npx hyperframes skills update` là lựa chọn thay thế chỉ cài đúng bộ core. Dùng riêng CLI thì chạy `npx hyperframes init my-video`, rồi `cd my-video` và `npx hyperframes preview` hoặc `npx hyperframes render`. README nêu yêu cầu là Node.js 22+ và FFmpeg; nếu clone toàn bộ repo để phát triển thì cần thêm Git LFS, vì các file video baseline cho regression test nằm dưới `packages/producer/tests`.
Tạo Video Bằng HTML Và AI Agent
Viết một composition dưới dạng file HTML, gắn `class="clip"` và các thuộc tính `data-start`/`data-duration`/`data-track-index` để định thời gian và thứ tự track, rồi điều khiển chuyển động bằng GSAP, CSS keyframe hoặc adapter khác — ví dụ trong README dựng một timeline GSAP cho tiêu đề fade-in cạnh một clip video và một track nhạc nền. `npx hyperframes preview` reload trực tiếp trong trình duyệt; `npx hyperframes render` duyệt qua composition từng khung hình trong headless Chrome, sau đó FFmpeg ghép thành file cuối. Với agent thì luồng làm việc là một prompt thay vì viết markup: cài skill, rồi yêu cầu kiểu như một đoạn intro sản phẩm 10 giây, router `/hyperframes` sẽ chọn workflow phù hợp — `/product-launch-video`, `/faceless-explainer`, `/motion-graphics` và các workflow khác — để lên kế hoạch cho yêu cầu, viết HTML, gắn animation rồi render.
Điểm Mạnh
- ✓Composition chỉ là HTML thuần, không định dạng độc quyền, không cần React, nên một agent vốn đã viết HTML có thể tạo video mà không phải học một mô hình soạn thảo mới.
- ✓Kết quả render lặp lại được — cùng một HTML vào, cùng khung hình ra — nên dùng được trong CI và regression test, chứ không chỉ để xuất một lần.
- ✓Animation không bị khóa vào một thư viện duy nhất: GSAP, CSS, Lottie, Three.js, Anime.js và WAAPI đều cắm được như adapter.
- ✓Router skill `/hyperframes` cùng 19 skill đóng gói biến một prompt một dòng thành cả một vòng sản xuất — lên kế hoạch, viết HTML, gắn animation, lint, preview, render — thay vì bạn phải tự script từng bước.
- ✓Cấp phép Apache-2.0, và theo README thì không thu phí theo từng lần render cũng không có ngưỡng doanh thu nào làm đổi điều khoản — khác với giấy phép source-available của Remotion.
Những Điều Cần Lưu Ý Khi Render Phân Tán
- △Clone đầy đủ repo kéo theo Git LFS cho khoảng 240 MB file `.mp4` baseline dùng cho regression test — nên bỏ qua bằng `GIT_LFS_SKIP_SMUDGE=1` nếu chỉ cần source code.
- △Cài qua agent mặc định lấy hết cả 19 skill trừ khi bạn dùng picker tương tác hoặc `hyperframes skills update` — dễ cài dư nhiều hơn mức cần dùng.
- △Chính bảng stack trong README liệt kê Studio, trình soạn thảo trên trình duyệt, ở trạng thái "Available, evolving" chứ chưa hoàn thiện, nên phần lớn việc soạn thảo vẫn diễn ra trên HTML/markup thay vì một timeline trực quan.
- △Cần Node.js 22+ và FFmpeg trên máy hoặc container thực hiện render — không cắm là chạy được ngay với môi trường không cài được hai thứ đó.
HyperFrames So Với Remotion: Khác Biệt Chính
Câu Hỏi Thường Gặp
HyperFrames chuyển HTML, CSS, media và animation thành video MP4 — clip ra mắt sản phẩm, video giới thiệu PR với diff động, data visualization, video mạng xã hội và video giải thích từ docs, theo các ví dụ trong README.
HyperFrames dùng giấy phép Apache-2.0; theo README thì không thu phí theo lần render và không có ngưỡng doanh thu nào làm đổi điều khoản, khác với giấy phép source-available của Remotion.
HyperFrames cần Node.js 22+ và FFmpeg trên máy thực hiện render; nếu clone toàn bộ repo để phát triển thì còn cần thêm Git LFS cho các file video baseline dùng trong regression test.
HyperFrames viết composition bằng HTML thuần, không cần bước build, còn Remotion dùng component React và cần bundler; cả hai đều render qua headless Chrome và FFmpeg, HyperFrames có thêm đường render AWS Lambda song song với render cục bộ.
HyperFrames đóng gói 19 skill hoạt động với Claude Code, Cursor, Gemini CLI, Codex và các agent khác hỗ trợ skill, cài qua lệnh `npx skills add heygen-com/hyperframes --full-depth`.
HyperFrames hỗ trợ sẵn GSAP, CSS, Lottie, Three.js, Anime.js và WAAPI làm adapter, và README có hướng dẫn tự viết frame adapter riêng cho các trường hợp khác.
Nên Dùng Cho Ai — Và Ai Nên Bỏ Qua
Chọn HyperFrames nếu team bạn đã quen viết HTML/CSS và muốn một AI coding agent — Claude Code, Cursor, Gemini CLI hoặc Codex, theo README — biến một bản mô tả yêu cầu viết bằng tiếng Anh thông thường thành video mà không phải thêm dependency React. HyperFrames cũng hợp với team muốn mang token của design system vào video qua `frame.md` thay vì phải thiết kế lại motion graphic từ đầu mỗi lần. Bỏ qua nếu bạn đã đầu tư sâu vào một dự án Remotion, cần một trình chỉnh timeline trực quan hoàn chỉnh thay vì viết markup, hoặc không thể chạy Node.js 22+ và FFmpeg trong môi trường render của mình.
Repo liên quan
Vẫn đang phân vân về hyperframes?
Một cú bấm sẽ gửi câu hỏi kèm trang này cho AI — xem AI nói gì về hyperframes.