HyperFrames – Biến HTML thành video, sinh ra để làm việc cùng AI Agent

Nếu đã từng làm motion bằng HTML, CSS hoặc JavaScript, có lẽ bạn từng nghĩ: giá mà có thể lấy chính giao diện đang chạy trong trình duyệt rồi render thẳng thành video MP4, thay vì phải dựng lại mọi thứ bằng một công cụ video riêng.

HyperFrames đi khá sát với ý tưởng đó.

Đây là một framework mã nguồn mở từ HeyGen, cho phép tạo video bằng HTML, CSS, media và animation, sau đó render thành MP4 theo cách có thể tái lập chính xác. Điểm thú vị hơn là HyperFrames không chỉ nhắm tới developer, mà được thiết kế ngay từ đầu để làm việc cùng các AI coding agent như Claude Code, Codex, Cursor hay Gemini CLI.

HyperFrames là gì?

Có thể hiểu HyperFrames như một lớp kết nối giữa web development và video production.

Thay vì sử dụng timeline truyền thống, bạn xây dựng video gần giống cách làm một trang web: viết HTML, CSS, thêm hình ảnh, video, âm thanh rồi điều khiển animation bằng những công cụ quen thuộc như GSAP, CSS Animation, Lottie, Three.js, Anime.js hay Web Animations API.

HyperFrames sau đó dùng trình duyệt headless để đi qua từng frame và FFmpeg để encode thành video. Nhờ vậy, cùng một source có thể cho ra cùng một kết quả thay vì phụ thuộc vào quá trình capture màn hình thủ công.

Đây cũng là lý do slogan của dự án khá đúng bản chất:

Write HTML. Render video. Built for agents.

Điểm mình thấy thú vị nhất ở HyperFrames

Điểm mạnh đầu tiên là bạn có thể tận dụng gần như toàn bộ kỹ năng web hiện có.

Nếu đã quen với HTML, CSS, JavaScript hay animation bằng GSAP, việc tạo motion graphic với HyperFrames không quá xa lạ. Bạn không cần học lại một hệ thống composition hoàn toàn mới chỉ để làm một đoạn intro hoặc video giới thiệu sản phẩm.

HyperFrames cũng có khoảng 450 block và component dựng sẵn, trải từ transition, title, caption, kinetic typography cho tới chart, bản đồ, camera move và các hiệu ứng 3D. Thay vì viết mọi thứ từ đầu, AI agent có thể tìm component phù hợp rồi chỉnh sửa trực tiếp source.

Một điểm đáng chú ý khác là HyperFrames thực sự xem AI agent như một phần của workflow.

Dự án cung cấp các skill dành cho những công cụ như Claude Code, Codex, Cursor và Gemini CLI. Agent được hướng dẫn cách lên cấu trúc video, tạo HTML hợp lệ, thêm animation, kiểm tra lỗi, preview rồi render. Nói cách khác, thay vì bạn phải mô tả từng dòng code, có thể bắt đầu bằng một yêu cầu khá tự nhiên như:

Tạo video giới thiệu sản phẩm dài 10 giây, title fade-in, có background video và nhạc nhẹ.

Agent sẽ xử lý phần còn lại dựa trên workflow của HyperFrames.

HyperFrames phù hợp để làm gì?

Phạm vi sử dụng khá rộng.

Bạn có thể dùng nó cho video giới thiệu sản phẩm, feature announcement, video social có caption động, biểu đồ dữ liệu chuyển động, map animation hoặc những đoạn motion graphic được sinh tự động từ dữ liệu.

Một use case mình thấy khá hay là docs-to-video hoặc website-to-video. Vì nền tảng của HyperFrames vẫn là HTML, việc biến một tài liệu, landing page hay dashboard thành video giải thích sẽ tự nhiên hơn khá nhiều so với dựng lại toàn bộ layout bằng tay.

Dự án còn hướng tới các workflow như video walkthrough cho pull request, animation code diff hoặc pipeline tạo video hàng loạt.

Cài đặt HyperFrames

Cách đơn giản nhất là dùng CLI.

Máy cần Node.js 22 trở lên và FFmpeg. Sau đó chạy:

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

Lệnh preview mở project trong trình duyệt và hỗ trợ live reload.

Khi hoàn tất, render video bằng:

npx hyperframes render

Video sẽ được xuất thành MP4.

Nếu đang dùng AI coding agent, HyperFrames khuyến nghị cài bộ skill của dự án:

npx hyperframes skills update

Hoặc với hệ thống skills tương thích:

npx skills add heygen-com/hyperframes

Bộ core bao gồm skill chính /hyperframes, CLI, registry component và media workflow. Các skill bổ sung như Figma, slideshow hay chuyển từ Remotion sang HyperFrames có thể cài riêng khi cần.

Với Claude Code, dự án còn cung cấp plugin riêng:

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

Sau đó có thể gọi HyperFrames trực tiếp bên trong workflow của Claude Code.

Một điểm khá hay: frame.md

Ngoài render video, HyperFrames còn giới thiệu khái niệm frame.md.

Ý tưởng là lấy design system vốn được tạo cho web rồi chuyển thành một bộ nguyên tắc dành riêng cho video: typography, khoảng cách, màu sắc, scale, composition và cách các thành phần xuất hiện trong một frame.

Điều này đặc biệt hữu ích khi dùng AI để tạo video, bởi agent không phải tự đoán thương hiệu của bạn nên trông như thế nào khi chuyển từ màn hình web sang video.

Với team đã có design system khá chặt chẽ, đây có thể là một hướng thú vị để giữ visual consistency khi tự động hóa content.

Những điểm cần lưu ý

HyperFrames mạnh nhất khi bạn đã quen với tư duy web development. Nếu chỉ muốn kéo thả vài clip rồi cắt ghép nhanh, Premiere, CapCut hoặc DaVinci Resolve vẫn trực quan hơn.

Ngược lại, khi video có nhiều thành phần được sinh từ dữ liệu, cần tái sử dụng template hoặc tạo hàng loạt phiên bản, cách tiếp cận bằng code lại trở thành lợi thế rất lớn.

Ngoài ra, môi trường hiện tại yêu cầu Node.js 22+ và FFmpeg. Animation cũng cần có khả năng seek theo timeline để renderer có thể tạo từng frame chính xác, vì vậy không phải hiệu ứng JavaScript nào trên web cũng có thể bê nguyên xi sang mà không chỉnh sửa.

HyperFrames hiện vẫn là một dự án phát triển rất nhanh. Repo sử dụng TypeScript, phát hành theo Apache 2.0 và đang được HeyGen cập nhật thường xuyên, nên nếu đưa vào pipeline production, mình sẽ ưu tiên khóa version thay vì luôn chạy theo bản mới nhất.

HyperFrames có đáng thử không?

Theo mình là có, đặc biệt nếu bạn nằm ở giao điểm giữa design, frontend và AI coding.

Điều hấp dẫn ở HyperFrames không hẳn là việc nó thay thế các phần mềm dựng phim truyền thống. Điểm hay hơn là nó biến video thành một artifact có thể lập trình: có source, component, design token, version control và có thể giao cho AI agent chỉnh sửa.

Một landing page có thể trở thành video launch. Một dashboard có thể trở thành animation dữ liệu. Một template có thể sinh hàng trăm video khác nhau mà không cần mở timeline và chỉnh từng clip.

Với xu hướng AI agent ngày càng tham gia sâu vào workflow sáng tạo, cách tiếp cận HTML → animation → video của HyperFrames là một hướng khá đáng để theo dõi.

Nếu bạn vốn đã quen viết web và muốn thử đưa AI sâu hơn vào quy trình làm motion hoặc video tự động, HyperFrames là một project rất đáng nghịch thử.

Ví dụ một flow hoàn chỉnh với HyperFrames

Để dễ hình dung, giả sử mình muốn tạo một video ngắn khoảng 10 giây giới thiệu một ứng dụng mới. Video gồm logo, tiêu đề xuất hiện nhẹ nhàng, một đoạn demo sản phẩm, vài dòng mô tả và nhạc nền.

Nếu làm theo cách truyền thống, mình sẽ phải chuẩn bị asset, mở phần mềm dựng video, tạo composition, đặt từng layer lên timeline rồi chỉnh animation. Với HyperFrames, quy trình lại gần với làm web hơn:

Ý tưởng → AI Agent → HTML/CSS/Animation → Preview → Chỉnh sửa → Render MP4

Bước 1: Tạo project

Trước tiên cần Node.js 22+ và FFmpeg trên máy. Sau đó tạo project mới:

npx hyperframes init product-intro
cd product-intro

Nếu đang sử dụng Claude Code, Codex, Cursor hoặc một coding agent hỗ trợ skills, nên cài bộ skill của HyperFrames:

npx hyperframes skills update

Đây là bước khá quan trọng khi muốn làm việc bằng AI. Các skill giúp agent hiểu cấu trúc project, cách sử dụng timeline, media, animation cũng như quy trình kiểm tra và render của HyperFrames.

Bước 2: Mô tả video cho AI Agent

Thay vì tự viết mọi thứ từ đầu, giờ có thể giao yêu cầu trực tiếp cho agent.

Ví dụ:

Using /hyperframes, create a 10-second 1920×1080 product launch video.

Start with the logo fading in, followed by the title “Meet cvFit”.
Show a product screenshot with a subtle zoom animation.
Add the text “Analyze your CV with AI” and finish with “cvfit.pro”.

Use a clean minimal style, smooth transitions and subtle background music.

Agent sẽ dựa trên skill của HyperFrames để lên cấu trúc video, tạo HTML, CSS, animation và sắp xếp các thành phần vào timeline.

Điểm thú vị là output cuối cùng vẫn là code. Vì vậy nếu có chỗ nào chưa đúng, mình có thể sửa trực tiếp hoặc tiếp tục yêu cầu AI chỉnh lại.

Bước 3: HyperFrames tạo composition

Ở phía dưới, video vẫn được mô tả bằng HTML.

Một scene đơn giản có thể trông như:

<div
  id="stage"
  data-composition-id="product-intro"
  data-start="0"
  data-width="1920"
  data-height="1080"
>
  <h1
    id="title"
    class="clip"
    data-start="1"
    data-duration="4"
    data-track-index="1"
  >
    Meet cvFit
  </h1>

  <video
    class="clip"
    data-start="3"
    data-duration="5"
    data-track-index="0"
    src="product-demo.mp4"
    muted
    playsinline
  ></video>
</div>

Các thuộc tính như data-start, data-duration và data-track-index đóng vai trò khá giống timeline trong phần mềm dựng video.

Khác biệt nằm ở chỗ timeline này được mô tả bằng code.

Animation có thể tiếp tục được điều khiển bằng GSAP, CSS, Lottie, Three.js hoặc các thư viện web quen thuộc.

Bước 4: Preview ngay trong trình duyệt

Sau khi agent tạo xong phiên bản đầu tiên, chạy:

npx hyperframes preview

HyperFrames mở preview trong browser và hỗ trợ live reload.

Đây là vòng lặp mình thấy hợp lý nhất khi sử dụng:

Prompt → Preview → Feedback → Agent sửa → Preview lại

Ví dụ thấy title quá lớn, animation hơi nhanh và screenshot chưa nổi bật, chỉ cần nói tiếp với agent:

Make the title 20% smaller, slow down the entrance animation and increase the product screenshot size. Keep everything else unchanged.

Không cần viết lại prompt từ đầu.

Cách làm này khiến HyperFrames khá giống một môi trường “vibe coding cho video”: mình đóng vai trò art director, còn agent xử lý phần implementation.

Bước 5: Thêm media và component

Khi video phức tạp hơn, không nhất thiết phải tự xây tất cả hiệu ứng.

HyperFrames có registry với hàng trăm block/component dành cho title, transition, caption, kinetic typography, chart, map, 3D và nhiều dạng motion khác.

Workflow lúc này có thể trở thành:

Brief
  ↓
AI Agent
  ↓
Chọn component từ HyperFrames Registry
  ↓
HTML + CSS + Animation
  ↓
Thêm image / video / audio
  ↓
Preview
  ↓
Feedback & chỉnh sửa
  ↓
Render

Với các project có design system, mình còn có thể đưa quy chuẩn thương hiệu vào frame.md để agent biết cách sử dụng màu sắc, typography, spacing và composition khi tạo video.

Nhờ vậy, prompt không cần lần nào cũng giải thích lại “logo đặt đâu, font gì, màu nào”.

Bước 6: Render video cuối cùng

Khi preview đã ổn, chỉ cần:

npx hyperframes render

HyperFrames sẽ render từng frame bằng trình duyệt headless rồi dùng FFmpeg để encode thành MP4.

Kết quả cuối cùng là một video bình thường, nhưng toàn bộ quá trình tạo video lại có thể lưu trong Git giống một project phần mềm.

Một flow thú vị hơn: tự động tạo nhiều video

Đây mới là nơi HyperFrames bắt đầu khác biệt rõ với các video editor thông thường.

Giả sử mình có một template:

Logo
↓
Tên sản phẩm
↓
Screenshot
↓
3 tính năng nổi bật
↓
CTA

Thay vì dựng 20 video bằng tay, dữ liệu có thể đến từ JSON, API hoặc database:

{
  "product": "cvFit",
  "headline": "Analyze your CV with AI",
  "cta": "Try it at cvfit.pro"
}

Sau đó pipeline có thể tự động:

Data / API
     ↓
Video Template
     ↓
HyperFrames
     ↓
Render
     ↓
MP4

Thay data khác là có một phiên bản video khác.

Nếu kết hợp thêm AI Agent:

Ý tưởng / dữ liệu
       ↓
    AI Agent
       ↓
Script + nội dung + layout
       ↓
   HyperFrames
       ↓
Preview / kiểm tra
       ↓
     Render
       ↓
       MP4

Đây là use case mình thấy hấp dẫn nhất của HyperFrames.

Nó không chỉ giúp “làm một video bằng HTML”, mà mở ra khả năng xây video generation pipeline: tạo video social hàng loạt, báo cáo dữ liệu dạng video, product update tự động, video giới thiệu feature mới hoặc biến nội dung có sẵn thành video.

Và vì tất cả nằm trong code, workflow này cũng có thể được version control, tự động hóa và giao cho AI Agent xử lý — khá khác với việc ngồi chỉnh từng layer trên một timeline truyền thống.