HyperFrames của HeyGen: viết HTML là ra video MP4, agent làm thay bạn

Tóm tắt nhanh

Thông tin tính đến ngày 02/10/2026.

• HyperFrames là framework mã nguồn mở của HeyGen, biến một trang HTML (kèm CSS, JavaScript) thành file MP4. Theo trang GitHub chính thức, giấy phép là Apache 2.0, cần Node.js 22 trở lên và FFmpeg.
• Điểm khác với kiểu làm video quen thuộc: bạn không kéo thả trên timeline. Bạn (hoặc một agent như Claude Code) viết HTML, rồi lệnh render sẽ chụp từng khung hình chính xác để ghép thành video.
• Tôi đã chạy thử trên máy Windows: khởi tạo dự án mẫu và render ra video 10 giây trong khoảng 14 giây. Phần agent tự viết video, phụ đề, giọng đọc, render đám mây chưa kiểm chứng.
• Chưa rõ: tốc độ render với video dài, nhiều cảnh nặng, và chất lượng khi dùng cho video dọc 9:16 bán hàng. Các nguồn tôi đọc các nguồn tôi đọc không cho số liệu giống nhau về những điểm này.

Nếu bạn làm video bán hàng hoặc video thương hiệu và đang mất nhiều thời gian cho những cảnh lặp lại (tiêu đề, bảng giá, số liệu chạy chữ, phụ đề), HyperFrames là một hướng đáng thử. Nó không thay thế video quay thật hay video do mô hình AI sinh ra. Nó giải một bài toán khác: dựng phần đồ họa chuyển động bằng code, để agent làm thay tay bạn.

Bài này giải thích nó chạy thế nào, tôi đã thử được gì, và nó hợp với ai.

HyperFrames là gì, nói ngắn gọn

Theo tài liệu giới thiệu, bạn mô tả video, agent viết HTML, CSS và JavaScript, còn HyperFrames chơi hoặc render kết quả. Kết quả là một thư mục dự án có thể sửa tiếp, chứ không phải một file video đóng kín.

Điều này nghe đơn giản nhưng có hệ quả lớn. Trình duyệt hiển thị HTML rất tốt, và các mô hình ngôn ngữ đã đọc rất nhiều HTML. Thay vì dạy agent một định dạng riêng, HyperFrames dùng chính thứ agent đã biết.

Một đoạn trích từ tài liệu mô tả ý tưởng này:

HyperFrames asks the project for each exact frame instead of depending on live playback.

(Nguồn: tài liệu HyperFrames, HeyGen)

Hiểu nôm na: nhiều công cụ quay màn hình trình duyệt theo thời gian thực, máy chậm thì rớt khung. HyperFrames không quay. Nó "tua" trang đến thời điểm thứ 0, chụp, tua đến thời điểm kế tiếp, chụp, rồi ghép lại bằng FFmpeg. Nhờ vậy cùng một đầu vào cho cùng một kết quả, và máy yếu chỉ làm video chậm hơn chứ không làm video hỏng.

README của dự án nêu rõ cả yêu cầu cài đặt: Node.js 22 trở lên và FFmpeg, giấy phép Apache 2.0. Một bài đánh giá độc lập của andrew.ooo cho biết dự án ra mắt giữa tháng 4/2026, không cần tài khoản HeyGen hay khoá API khi render trên máy mình.

Một video trông như thế nào dưới dạng HTML

Trích từ README chính thức, đây là cấu trúc của một cảnh gồm một clip video, một dòng chữ và một track nhạc:

<div id="stage" data-composition-id="launch" data-start="0" data-width="1920" data-height="1080">  <video    class="clip"    data-start="0"    data-duration="6"    data-track-index="0"    src="intro.mp4"    muted    playsinline  ></video>  <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"    data-volume="0.5"    src="music.wav"  ></audio>  <script src="https://cdn.jsdelivr.net/npm/gsap@3/dist/gsap.min.js"></script>  <script>    const tl = gsap.timeline({ paused: true });    tl.from("#title", { opacity: 0, y: 40, duration: 0.8 }, 1);    window.__timelines = window.__timelines || {};    window.__timelines.launch = tl;  </script></div>

Có vài điều đáng để ý trong đoạn này.

Một là, thời gian được khai báo bằng thuộc tính data-start và data-duration (tính bằng giây), còn lớp (layer) được khai báo bằng data-track-index. Đó là lý do người ta gọi nó là "timeline viết bằng HTML".

Hai là, chuyển động nằm trong một timeline GSAP ở trạng thái tạm dừng (paused: true), đăng ký vào window.__timelines. Vì timeline không tự chạy, HyperFrames có thể yêu cầu nó nhảy tới đúng khung hình số N. Đây chính là cơ chế giúp kết quả lặp lại được.

Ba là, theo README, ngoài GSAP bạn còn dùng được CSS, Lottie, Three.js, Anime.js hoặc Web Animations API, miễn là animation "tua" được.

Tôi đã chạy thử gì

Tôi thử trên máy Windows 10 có Node.js 24 và FFmpeg 8.0. Lệnh khởi tạo và render đều là lệnh trong README:

$ npx hyperframes init demo$ cd demo$ npm run render

Điều tôi đã thấy:

• Lệnh init tạo một thư mục gồm index.html, package.json, hyperframes.json, meta.json, cùng hai file AGENTS.md và CLAUDE.md để agent đọc hướng dẫn ngay khi mở dự án.
• Dự án mẫu là một trang HTML 1920x1080 với một dòng chữ "Title" dài 10 giây trên nền tối. Mẫu này còn sơ sài, bạn phải tự thêm animation.
• Lệnh render ghi ra file MP4 dài 10 giây, dung lượng khoảng 30 KB (vì chỉ có một dòng chữ tĩnh), gồm 300 khung hình, tức 30 khung hình mỗi giây. Thời gian render thông báo là 13,6 giây, trong đó phần chụp khung hình mất khoảng 8 giây.
• Công cụ tự chạy một bước kiểm tra ("self-verify") và báo đạt trước khi xuất file.

Điều tôi chưa thử, nên chưa thể xác nhận:

• Cài plugin cho Claude Code rồi yêu cầu agent tự viết một video hoàn chỉnh.
• Phụ đề tự động, giọng đọc (TTS), nhạc nền.
• Render video dọc 9:16 và video dài hơn 1 phút.
• Render đám mây (AWS Lambda hoặc dịch vụ của HeyGen).

Mốc 13,6 giây chỉ phản ánh một cảnh đơn giản. Đừng suy ra tốc độ cho video nặng từ con số này.

Tốc độ và những điểm yếu mà người đánh giá đã nêu

Bài đánh giá của andrew.ooo nêu một số hạn chế mà bạn nên biết trước khi đầu tư thời gian. Đây là ý kiến của một người đánh giá, không phải số đo của tôi:

• Render trên một máy đơn có thể chậm: bài này ghi video 1080p dài 30 giây mất khoảng 3 phút khi chạy cục bộ, so với khoảng 25 giây với Remotion Lambda. Con số phụ thuộc cấu hình máy và độ phức tạp cảnh, nên hãy coi là tham khảo.
• Đồng bộ âm thanh với animation kiểu "tua khung" đòi hỏi tính toán thời gian cẩn thận.
• Kho thành phần dựng sẵn còn nhỏ hơn hệ sinh thái React.
• Chưa có trình chỉnh sửa trực quan hoàn chỉnh: bài đánh giá mô tả Studio là "đang phát triển".
• Chưa có bộ chuyển đổi React chính thức.

Một điểm cần nói rõ về con số. Số sao GitHub của dự án khác nhau rất nhiều giữa các nguồn tôi đọc (do chúng được ghi ở những thời điểm khác nhau), nên tôi không nêu con số cụ thể. Nếu bạn cần đo mức độ phổ biến, hãy mở trang GitHub và xem trực tiếp vào ngày bạn đọc.

HyperFrames so với Remotion

Remotion là cái tên quen thuộc trong giới dựng video bằng code. README của HyperFrames tự đặt mình cạnh Remotion với các điểm khác biệt sau:

• HyperFrames dùng HTML thuần với thuộc tính data-*. Remotion dùng thành phần React.
• HyperFrames không cần bước build, file HTML mở được ngay trên trình duyệt. Remotion cần bundler.
• Khi giao việc cho agent, HyperFrames giao một file HTML. Remotion giao một dự án JSX.
• Cả hai cùng dùng Chrome không giao diện (headless) và FFmpeg để render có tính lặp lại.

Đây là tuyên bố từ README của chính HyperFrames, nên hãy đọc với con mắt tỉnh táo. Tôi chưa thử Remotion trong lần này để so tay. Nếu đội của bạn đã có người thạo React, đã quen Remotion và hạ tầng render của nó, chưa chắc đã có lý do chuyển. Nếu đội chỉ có người làm nội dung và một agent, lợi thế "chỉ cần HTML" rõ hơn nhiều.

Cách bắt đầu nếu bạn muốn thử

Có hai đường, đều lấy từ README.

Đường đầu, cài như plugin cho Claude Code:

$ claude plugin marketplace add heygen-com/hyperframes$ claude plugin install hyperframes@hyperframes

Đường sau, cài bộ kỹ năng độc lập rồi tạo dự án:

$ npx skills add heygen-com/hyperframes$ npx hyperframes init my-video$ cd my-video$ npx hyperframes preview$ npx hyperframes render

Lệnh preview mở bản xem trước có tải lại trực tiếp. Lệnh render xuất MP4. Theo README, bộ kỹ năng gồm 21 kỹ năng cho agent (tạo video, phụ đề, đồng bộ nhạc và một số việc khác). Tôi chỉ thấy các file hướng dẫn trong dự án mẫu, chưa chạy các kỹ năng này.

Mẹo nhỏ: dự án mẫu ghim phiên bản công cụ trong package.json (tôi thấy hyperframes@0.8.107). Khi bạn làm cho khách, nên giữ nguyên phiên bản đã dùng để render hôm nay và render lại sau ba tháng vẫn ra cùng kết quả.

Một lưu ý về mạng: dự án mẫu nạp thư viện GSAP từ CDN. Nếu máy dựng của bạn bị chặn mạng, hãy tải thư viện về cục bộ trước. Tôi chưa thử tình huống này.

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

Đây là phần cần đọc kỹ. Tôi nghĩ HyperFrames hợp với những việc sau.

Video đồ họa chạy theo mẫu. Ví dụ video "3 lý do chọn sản phẩm", video báo giá, video tin ngắn cuối tuần. Cấu trúc giống nhau, chỉ đổi chữ, số và ảnh. Với HTML, bạn đổi dữ liệu rồi render lại. Việc này khó làm bằng phần mềm kéo thả mà không phải nhấp chuột lặp lại.

Phiên bản hoá hàng loạt. Cùng một mẫu nhưng đổi tên cửa hàng, giá, mã khuyến mãi cho nhiều chi nhánh. Vì đầu vào cố định cho ra đầu ra cố định, bạn kiểm tra được kết quả trước khi gửi khách.

Giữ quyền kiểm soát. Dự án là thư mục HTML mà người trong đội đọc và sửa được, không bị nhốt trong một công cụ đám mây. Giấy phép Apache 2.0 theo trang GitHub cũng không đặt phí theo lượt render. Tuy vậy, bạn nên tự đọc văn bản giấy phép đầy đủ nếu dùng cho sản phẩm thương mại, tôi không đưa ra tư vấn pháp lý.

Kết hợp với video do AI sinh. Cảnh quay do mô hình video tạo ra có thể được đặt làm một clip trong cấu trúc ở trên, rồi phủ tiêu đề, giá, nút kêu gọi hành động (CTA) bằng HTML. Cách này giúp chữ luôn sắc nét và đúng chính tả tiếng Việt, điều mà mô hình sinh video thường làm chưa ổn. Tôi chưa thử cách ghép này trong lần chạy, nên hãy coi nó là gợi ý để bạn tự kiểm tra.

Những việc tôi không khuyên dùng HyperFrames:

• Video cần diễn xuất người thật, cảm xúc, quay UGC. Đây là việc của quay phim hoặc mô hình sinh video.
• Video dựng cảm tính, cắt nhịp theo nhạc ở mức tinh chỉnh từng khung, nếu bạn quen CapCut hay Premiere. Bài đánh giá còn ghi Studio chưa hoàn thiện.
• Nếu đội không có ai đủ kiên nhẫn đọc lỗi HTML hoặc JavaScript khi agent viết sai.

Một quy trình thử nghiệm vừa sức trong một buổi chiều

Nếu muốn thử mà không đặt cược gì lớn, tôi gợi ý các bước sau:

1. Cài Node.js 22 trở lên và FFmpeg. Chạy npx hyperframes init để có dự án mẫu.
2. Chạy npm run render ngay, chưa sửa gì, để chắc máy bạn render được.
3. Mở index.html, đổi dòng chữ và thêm một animation fromTo như ví dụ ghi sẵn trong chú thích của file mẫu. Render lại và xem.
4. Sau đó mới thử giao agent: mô tả video 15 giây, yêu cầu agent dùng đúng cấu trúc data-*, rồi tự chạy npm run check trước khi render.
5. Ghi lại thời gian render, lỗi gặp phải, và việc nào bạn phải sửa tay. Đây là dữ liệu thật để quyết định có đưa vào quy trình sản xuất hay không.

Bước 2 nghe có vẻ thừa nhưng tiết kiệm thời gian. Nếu render mẫu còn lỗi, mọi thứ phía sau đều khó tìm nguyên nhân.

Những điều cần xác nhận thêm

Để bài này chân thật, đây là danh sách những gì tôi chưa chắc:

• Chất lượng video do agent viết ra từ một câu mô tả ngắn: chưa kiểm chứng.
• Hiệu năng với video dài, nhiều cảnh, nhiều video nền: chưa kiểm chứng. Số liệu của andrew.ooo chỉ là một điểm tham khảo.
• Cách xử lý phông chữ tiếng Việt có dấu ở nhiều phông khác nhau: chưa kiểm chứng. Hãy tự thử với phông bạn định dùng.
• Render đám mây và chi phí: chưa kiểm chứng. README chỉ nêu có hỗ trợ AWS Lambda.
• Mức độ ổn định giữa các phiên bản (dự án mẫu của tôi ghim bản 0.8.107): cần theo dõi khi nâng cấp.

Kết

HyperFrames đáng thử vì nó đổi cách nghĩ về video dựng bằng code: thay vì dạy agent một công cụ lạ, bạn để agent viết thứ nó đã quen là HTML, rồi để công cụ lo phần render ổn định. Một buổi chiều là đủ để biết nó có hợp với quy trình của bạn hay không.

Nếu bạn thử, hãy bắt đầu từ một video đồ họa ngắn, lặp lại hằng tuần. Đó là chỗ lợi ích dễ thấy và rủi ro thấp.