HyperFrames của HeyGen: dựng video bằng HTML cho AI agent, thử thế nào

Tóm tắt nhanh (thông tin xem ngày 01/10/2026)

• HyperFrames là framework mã nguồn mở của HeyGen, công bố ngày 17/04/2026. Bạn viết video bằng HTML, CSS và JavaScript, công cụ dựng trang đó thành file MP4.
• Cách chạy: Chrome không giao diện chụp từng khung hình, FFmpeg ghép lại. Cần Node.js 22 trở lên và FFmpeg. Giấy phép Apache 2.0.
• Thiết kế cho AI coding agent như Claude Code, Cursor, Gemini CLI, Codex: agent viết HTML, bạn xem trước và xuất video.
• Kết quả đầu ra có tính xác định: cùng đầu vào cho cùng đầu ra, rất hợp với việc làm hàng loạt biến thể.
• Chưa kiểm chứng: chúng tôi chưa tự cài và render. Các con số về tốc độ trong bài là của một người đánh giá độc lập, nêu rõ nguồn ở phần tương ứng.

Làm video bán hàng thường vướng ở chỗ này: bản đầu thì dựng được, nhưng sửa giá, đổi hook, đổi logo cho 30 biến thể thì mất cả ngày kéo thả. HyperFrames đi theo hướng khác: coi video là một trang web có thời gian, để AI agent viết trang đó, rồi xuất ra MP4. Bài này giải thích cách nó hoạt động, những gì đã được xác nhận, những giới hạn, và nên thử nó như thế nào nếu bạn làm nội dung hay bán hàng.

Ảnh: Nemuel Sereti, Pexels (giấy phép miễn phí).

HyperFrames là gì

Theo trang GitHub của dự án, HyperFrames là framework biến HTML, CSS, media và hoạt ảnh thành video MP4 có tính xác định. HeyGen, công ty làm video avatar AI, phát hành nó dưới dạng mã nguồn mở với giấy phép Apache 2.0, nghĩa là không có phí theo từng lượt render và không có ràng buộc thương mại đặc biệt từ phía công cụ.

Bài hướng dẫn trên trung tâm trợ giúp của HeyGen nói rõ đây là công cụ riêng, hướng đến người thích làm việc bằng code, và tách biệt với trình dựng video chính của HeyGen. Điều này đáng nhớ: nó không phải một trình dựng kéo thả mới, mà là công cụ dành cho quy trình có code và AI agent.

Công cụ ra mắt ngày 17/04/2026 theo bài tổng hợp của Creative AI News, và theo bài đó, nó chạy hoàn toàn trên máy bạn, không cần dịch vụ đám mây hay khoá API.

Cách hoạt động: video là một trang HTML có đồng hồ

Mỗi video là một file HTML. Phần tử gốc khai báo kích thước và ID của bản dựng. Các phần tử con, như video, tiêu đề hoặc âm thanh, mang các thuộc tính để nói chúng xuất hiện lúc nào, kéo dài bao lâu và nằm ở lớp nào. README trình bày một ví dụ gần như thế này:

<div id="stage" data-composition-id="launch" data-start="0" data-width="1920" data-height="1080">  <h1 id="title" class="clip" data-start="1" data-duration="4" data-track-index="1">Launch day</h1>  <audio data-start="0" data-duration="6" data-track-index="2" src="music.wav"></audio></div>

Ai từng làm trang web đều đọc được đoạn này: data-start là giây bắt đầu, data-duration là thời lượng, data-track-index là thứ tự lớp, giống các track trên timeline của phần mềm dựng.

Phần chuyển động dùng các thư viện hoạt ảnh có sẵn. README liệt kê GSAP, CSS keyframes, Lottie, Three.js, Anime.js, Web Animations API và cả bộ chuyển đổi tự viết. Điều kiện chung là hoạt ảnh phải "seekable", tức là công cụ có thể nhảy thẳng tới khung hình bất kỳ thay vì phải phát từ đầu. Đây là mấu chốt của tính xác định: renderer đưa trang tới đúng thời điểm của khung hình thứ n, chụp lại, rồi chuyển khung tiếp theo. FFmpeg gom các khung hình thành MP4.

Với người làm nội dung, điều này có hệ quả thực tế. Bạn sửa chữ trong một cảnh, chạy lại, và các cảnh khác không tự đổi nhịp. Bản dựng có thể đưa vào Git, so sánh khác biệt, hoặc chạy trong quy trình tự động.

Ảnh: Pexels (giấy phép miễn phí).

Bắt đầu thế nào

Yêu cầu theo tài liệu: Node.js 22 trở lên và FFmpeg; AI coding agent là tuỳ chọn nhưng được khuyến nghị. Ba lệnh cơ bản:

$ npx hyperframes init my-video$ npx hyperframes preview$ npx hyperframes render

Lệnh đầu tạo dự án, lệnh hai mở bản xem trước trong trình duyệt với tự tải lại, lệnh ba xuất MP4. README còn nêu các lệnh phụ trợ: lint để kiểm tra bản dựng, snapshot để chụp khung hình, doctor để chẩn đoán môi trường, catalog và add để tìm và cài các khối dựng sẵn. Ngoài ra có lệnh dựng trên đám mây và Lambda cho ai cần render phân tán.

Nếu muốn để agent làm việc, cài bộ kỹ năng bằng npx skills add heygen-com/hyperframes. Theo README có 21 kỹ năng. Một số kỹ năng tạo video theo mục đích, ví dụ:

• /product-launch-video: video giới thiệu sản phẩm dựa trên website.
• /faceless-explainer: video giải thích một chủ đề, không cần sản phẩm hay người xuất hiện.
• /embedded-captions: chèn phụ đề.
• /talking-head-recut: thêm đồ hoạ lên cảnh người nói.
• /music-to-video: hình ảnh khớp nhịp nhạc.
• /remotion-to-hyperframes: chuyển bản dựng Remotion sang HyperFrames.

Phần còn lại là kỹ năng nền về hoạt ảnh, âm thanh, CLI, Figma và kho khối dựng sẵn. Kho khối có các thành phần như chuyển cảnh shader, lớp phủ mạng xã hội, biểu đồ dữ liệu, phụ đề động và lower-third.

Chạy nhanh hay chậm: con số từ một người đánh giá

Trong bài đánh giá của andrew.ooo, tác giả dùng HyperFrames khoảng một tuần với Claude Code và GSAP. Ông ghi lại rằng một bản dựng 10 giây độ phân giải 1080p mất khoảng 35 đến 50 giây trên máy M2 Pro, còn bản 30 giây mất chừng 3 phút trên máy cục bộ. Cùng bài so sánh, Remotion Lambda với kết xuất song song làm bản 30 giây trong khoảng 25 giây.

Đây là con số của một người dùng, trên một cấu hình, nên hãy coi là gợi ý chứ không phải thông số chính thức. Chúng tôi chưa tự đo. Tuy vậy, ý chính khá rõ: render trên một máy là chậm hơn so với dàn máy song song, và nếu bạn cần ra hàng trăm video mỗi ngày thì phải tính đến render phân tán.

Tác giả đó cũng nêu một số điểm yếu:

1. Danh mục khối dựng sẵn còn mỏng so với hệ sinh thái React.
2. Chưa hỗ trợ tốt hoạt ảnh phản ứng theo âm thanh, vì cơ chế render là nhảy tới từng khung hình.
3. Chưa có trình chỉnh sửa trực quan hoàn thiện.
4. Chưa có adapter React chính thức.

Còn điểm mạnh theo ông: không phí theo lượt render, kết quả giống hệt nhau giữa các lần chạy, và vì agent vốn rành HTML nên agent làm việc với nó khá tự nhiên.

So với Remotion và các công cụ AI sinh video

So với Remotion. Cả hai đều dựng video bằng code. Theo bài đánh giá trên, Remotion hợp với đội đã dùng React và có người viết bản dựng bằng tay; HyperFrames hợp với quy trình tự động, nơi chính AI agent tạo ra video. Nếu đội của bạn không biết React, việc HyperFrames dùng HTML thuần là một lợi thế nhập môn.

So với Veo, Kling, Runway. Các mô hình này sinh ra hình ảnh từ lời mô tả. HyperFrames không sinh cảnh quay mà sắp xếp những gì bạn đã có: chữ, ảnh sản phẩm, video clip, biểu đồ, giọng đọc. Vì vậy hai loại công cụ bổ sung cho nhau chứ không thay nhau. Một quy trình hợp lý là dùng mô hình sinh video cho vài cảnh B-roll, rồi dùng HyperFrames để đặt tiêu đề, giá, logo, phụ đề và ghép nhịp cắt cho cả loạt.

Ý nghĩa với người làm nội dung và bán hàng

Điểm đáng giá nằm ở sự lặp lại. Những loại video sau hợp với cách làm này vì cấu trúc ổn định, chỉ dữ liệu thay đổi:

• Video giá và khuyến mãi: cùng khung, đổi tên sản phẩm, giá, thời hạn.
• Video so sánh hoặc xếp hạng từng bước, nơi mỗi cảnh là một mục.
• Bản tin số liệu ngắn, có biểu đồ lấy từ bảng tính.
• Video giải thích kiểu không lộ mặt, kết hợp giọng đọc và đồ hoạ.
• Loạt video cho nhiều kênh, mỗi kênh một tỷ lệ khung hình, bằng cách đổi data-width và data-height.

Một cách làm có thể áp dụng: dựng một mẫu 15 đến 30 giây, tách phần dữ liệu (tên sản phẩm, giá, hook) ra khỏi phần trình bày, rồi để agent đổ dữ liệu vào từng bản. Bạn duyệt nhanh từng bản thay vì dựng lại từng bản.

Cũng nên tỉnh táo với vài điểm:

• Cần chút nền kỹ thuật. Terminal, Node và FFmpeg vẫn là rào cản với người chưa từng dùng. Có agent hỗ trợ thì nhẹ hơn, nhưng bạn vẫn cần biết đọc thông báo lỗi.
• Không thay thế quay dựng. Với video cần cảm xúc con người, cắt dựng thủ công vẫn linh hoạt hơn.
• Font tiếng Việt cần thử sớm. Chúng tôi chưa kiểm chứng việc hiển thị dấu tiếng Việt trong bản render. Hãy thử ngay ở bản nháp đầu tiên, với đúng font thương hiệu.
• Âm thanh phản ứng chưa phải thế mạnh. Nếu bạn muốn hình nhảy theo từng nhịp trống, theo bài đánh giá trên, đó là điểm hạn chế.

Về số sao trên GitHub

Các nguồn chúng tôi xem nêu số sao khác nhau: khoảng 47,9 nghìn ở một nguồn tháng 9/2026, hơn 54 nghìn ở trang GitHub và các bảng xếp hạng khi chúng tôi xem. Vì lệch nhau, bài này không dùng con số cụ thể. Lượng sao chỉ cho biết mức quan tâm, không nói gì về độ phù hợp với quy trình của bạn.

Một buổi thử gợi ý

1. Cài Node.js 22 và FFmpeg, chạy npx hyperframes doctor để kiểm tra môi trường.
2. Khởi tạo dự án bằng init và chạy preview để quen với khung xem trước.
3. Cài bộ kỹ năng, mở Claude Code và nhờ dựng một video giá sản phẩm 15 giây, dọc 9:16, có chữ tiếng Việt.
4. Xuất bằng render, xem trên điện thoại, kiểm tra dấu tiếng Việt, độ đọc được của chữ và thời gian render.
5. Nếu bản đầu ổn, tách dữ liệu ra file riêng và thử nhân lên 5 biến thể. Ghi lại tổng thời gian từ lúc bắt đầu đến lúc có 5 file.

Con số ở bước cuối mới là thứ có ý nghĩa với bạn: nếu năm biến thể mất ít công hơn việc dựng tay, công cụ đã có giá trị với quy trình của bạn.

Kết

HyperFrames không phải phép màu, và theo những gì đã được ghi nhận, nó còn non: catalog mỏng, render một máy chậm hơn dàn song song, chưa có trình chỉnh trực quan. Nhưng ý tưởng coi video là mã, để AI viết và Git quản lý, đáng để người làm video bán hàng thử một lần, đặc biệt với các loạt video lặp lại. Hãy thử trên một video nhỏ, đo thời gian thật, rồi quyết định.