HyperFrames là gì: làm video bằng HTML cho AI agent của HeyGen

Thử hình dung chiều thứ Sáu, sếp nhắn: "Em làm cho anh cái video 30 giây báo doanh số tuần, như tuần trước nhé." Tuần trước mất cả buổi chiều kéo thả trong phần mềm dựng phim. Tuần này số đã khác, chữ đã khác, nhưng các bước kéo thả thì y nguyên.

Việc lặp lại, chỉ đổi chữ và số, đúng là loại việc nên giao cho AI. Vấn đề là AI không biết cầm chuột kéo thả. Nó chỉ giỏi viết chữ. HyperFrames của HeyGen biến chuyện dựng video thành chuyện viết chữ.

Đọc nhanh trong 30 giây

• HyperFrames là framework mã nguồn mở (giấy phép Apache 2.0) của HeyGen, công khai trên GitHub giữa tháng 4/2026, dùng để viết video bằng HTML rồi render ra MP4.
• Nó được thiết kế cho AI agent: anh chị mô tả bằng lời, agent viết trang HTML có hiệu ứng, HyperFrames chuyển thành video.
• Cài bộ skill bằng npx skills add heygen-com/hyperframes, cần Node.js 22 trở lên và FFmpeg.
• Hợp với video lặp lại theo mẫu: bản tin số liệu, giới thiệu sản phẩm, clip đào tạo. Không thay được video quay thật.

HyperFrames là gì, làm video bằng HTML nghĩa là sao?

HyperFrames là bộ công cụ biến một trang HTML thành video. Khẩu hiệu trên README rất gọn: viết HTML, render video, làm cho agent. Mỗi đoạn phim, ảnh, chữ, nhạc nền là một thẻ HTML có thêm vài thuộc tính: data-start (bắt đầu ở giây thứ mấy), data-duration (dài bao lâu), data-track-index (nằm ở lớp nào).

Ví von cho dễ nhớ: file HTML của HyperFrames giống tờ lịch chiếu dán ở rạp. Mỗi dòng ghi phim gì, mấy giờ chiếu, dài bao lâu, phòng số mấy. Ai cầm tờ lịch cũng biết rạp sẽ chạy thế nào, không cần đứng xem. Ở đây "phòng số mấy" chính là lớp hình: lớp dưới là video nền, lớp trên là logo, lớp nữa là nhạc.

Ví dụ trong README: ba thẻ HTML thành ba lớp trên dải thời gian 9 giây.

README nêu bốn lý do chọn HyperFrames:

• HTML thuần: không cần React, không có ngôn ngữ riêng phải học.
• Ưu tiên AI: agent vốn viết HTML giỏi, dòng lệnh mặc định không hỏi lại, hợp để agent tự chạy.
• Render ổn định: cùng một đầu vào cho ra cùng một video, hợp với quy trình tự động.
• Chọn thư viện hiệu ứng tùy ý: GSAP, Lottie, CSS, Three.js.

Theo README, HeyGen dùng HyperFrames trong sản xuất thật, và các video ra mắt sản phẩm của họ dựng bằng chính công cụ này.

Từ một câu mô tả tới file MP4 đi qua mấy bước?

Với HyperFrames, một video đi qua bốn bước: anh chị mô tả, agent viết HTML, xem thử trên trình duyệt, render ra MP4.

Anh chị chỉ cần nói và xem, phần viết và render do agent lo.

Bên dưới là bảy gói theo README:

Đi kèm là bốn skill dạy agent viết cho đúng: hyperframes (dựng cảnh, phụ đề, giọng đọc, chuyển cảnh), hyperframes-cli (các lệnh), hyperframes-registry (cài khối dựng sẵn), gsap (thư viện hiệu ứng GSAP). Nếu chưa rõ skill là gì, anh chị đọc bài Agent Skills là gì.

Cài HyperFrames và làm video đầu tiên

Yêu cầu theo README: Node.js 22 trở lên và FFmpeg. Có hai cách bắt đầu.

Cách 1 cho người dùng agent, cách 2 cho người muốn tự cầm lái.

Cách 1: dùng cùng AI agent (README khuyên dùng). Cài bộ skill:

npx skills add heygen-com/hyperframes

Skill dùng được với Claude Code, Cursor, Gemini CLI, Codex. Trong Claude Code, skill hiện thành lệnh gạch chéo: /hyperframes để dựng video, /hyperframes-cli cho các lệnh, /gsap cho hiệu ứng.

Cách 2: tự tạo dự án.

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

preview mở bản xem thử trên trình duyệt, tự tải lại khi file đổi. render xuất ra MP4. Lệnh init cũng tự cài skill, nên anh chị giao lại cho agent lúc nào cũng được.

HyperFrames có kho hơn 50 khối dựng sẵn theo README, cài bằng lệnh add:

npx hyperframes add data-chart

Mẹo

Khi sửa video, nói với agent như nói với thợ dựng phim. README có câu mẫu kiểu: chữ tiêu đề to gấp đôi, đổi sang nền tối, thêm mờ dần ở cuối. Không cần biết thuộc tính HTML nào, agent tự tìm chỗ sửa.

Thử HyperFrames với hai việc thật

Việc 1: video giới thiệu sản phẩm 10 giây. Sau khi cài skill, anh chị gõ vào Claude Code một câu theo mẫu trong README:

Using /hyperframes, create a 10-second product intro with a fade-in title, a background video, and background music.

Agent dựng khung dự án, viết HTML, thêm hiệu ứng rồi render.

Việc 2: biến báo cáo thành video. README có các mẫu như tóm tắt file PDF thành video thuyết trình 45 giây, hay biến file CSV thành biểu đồ cột chạy đua. Quay lại bài toán doanh số chiều thứ Sáu, có thể thử:

Dùng /hyperframes, biến file doanh-so-quy.csv thành video biểu đồ cột 30 giây, khổ 16:9, tiêu đề tiếng Việt.

Cách nghĩ ở đây giống làm bánh trung thu: tốn công nhất là tạc cái khuôn. Có khuôn rồi, mỗi mẻ chỉ việc đổi nhân. Video đầu tiên là cái khuôn, các tuần sau agent chỉ thay số.

Trước đây tôi đã viết về ppt-master cho slide PowerPoint. HyperFrames là bước tương tự cho video: agent tạo ra file thật, sửa được, không chỉ là ảnh chụp.

Lưu ý

• Cấu hình máy. Render chạy trình duyệt không giao diện để chụp từng khung hình, rồi FFmpeg ghép lại. README không nêu cấu hình máy tối thiểu, nên thử một video ngắn trước.
• Cài kèm trình duyệt tự động. Gói engine dùng Puppeteer, tức là cài kèm một trình duyệt điều khiển bằng code. Máy công ty có chính sách phần mềm thì hỏi bộ phận IT trước.
• Phiên bản còn sớm. Các gói đang ở bản 0.x, giao diện lệnh có thể đổi.
• Phông chữ tiếng Việt. README không nói riêng. Kiểm tra phông có đủ dấu trong bản xem thử trước khi render.

Nhận xét của chuyên gia

Với doanh nghiệp Việt, chỗ HyperFrames hữu ích nhất là video lặp lại theo mẫu: bản tin số liệu tuần, video giới thiệu từng sản phẩm, clip ngắn cho khóa đào tạo nội bộ. Những việc này đang tốn nhiều giờ dựng tay, trong khi nội dung chỉ đổi chữ và số. Giấy phép Apache 2.0 cũng cho dùng thương mại thoải mái.

Hợp với ai: đội marketing có người biết chút HTML hoặc đã quen dùng agent lập trình; đội đào tạo cần nhiều video ngắn đồng bộ; người làm báo cáo định kỳ muốn có thêm bản video.

Chưa hợp với ai: video cần quay thật, cảm xúc, diễn viên; người chưa từng chạy lệnh trong terminal.

Cách bắt đầu của tôi: chọn một loại video lặp lại nhiều nhất trong tháng, làm một mẫu chuẩn với màu, phông, logo của công ty, rồi cho agent thay nội dung theo mẫu đó. Agent viết HTML nhanh nhưng không tự có gu thẩm mỹ; thiếu bộ nhận diện rõ thì video nào cũng na ná nhau.

Một câu để nhớ: với HyperFrames, video là thứ viết ra được, nên cũng là thứ AI làm hộ được.

Anh chị xem thêm các công cụ cùng giai đoạn trong dòng thời gian AI.

Câu hỏi thường gặp

HyperFrames có miễn phí không?

Có. HyperFrames là mã nguồn mở theo giấy phép Apache 2.0. Chi phí phát sinh là lượt dùng agent AI khi nhờ agent viết video.

Làm video bằng HyperFrames có cần biết React không?

Không. Theo README, mỗi video là một file HTML có thêm thuộc tính dữ liệu, không cần React hay ngôn ngữ riêng. Nếu dùng agent, anh chị chỉ cần mô tả bằng lời.

HyperFrames dùng được với agent nào?

README ghi bộ skill dùng được với Claude Code, Cursor, Gemini CLI và Codex.

HyperFrames có làm phụ đề và giọng đọc không?

Skill hyperframes có hướng dẫn phụ đề và giọng đọc, dòng lệnh có lệnh transcribe và tts. README không nói về chất lượng với tiếng Việt, anh chị nên thử trước.

Nguồn: heygen-com/hyperframes trên GitHub, 16/04/2026.