HyperFrames: Viết video bằng HTML, render từng frame bằng Chrome và FFmpeg

Tôi biết tới HyperFrames trong lúc tìm một cách dựng video bằng code mà không phải kéo mọi thứ vào React. Cách project này chọn khá trực diện: scene vẫn là HTML/CSS/JavaScript, nhưng mỗi phần tử có timing rõ ràng và renderer có thể nhảy tới đúng thời điểm cần chụp thay vì phát animation theo thời gian thực.

HyperFrames là dự án mã nguồn mở của HeyGen. README mô tả nó như một framework biến HTML, CSS, media và seekable animation thành video MP4 có thể render lặp lại. Có thể dùng CLI, nhúng phần render vào hệ thống riêng hoặc để coding agent tạo composition từ bộ skill đi kèm.

Điểm đáng thử không nằm ở chuyện “HTML cũng làm animation được” — chuyện đó vốn chẳng mới. Cái đáng xem là HyperFrames cố đóng gói web animation thành một quy trình đủ chặt để đem vào CI, batch render và automation.

Ở thời điểm tôi đọc repo, CLI đang ở nhánh 0.8.x, source dùng Apache-2.0, runtime yêu cầu Node.js 22+ và FFmpeg.

Repository: github.com/heygen-com/hyperframes

HyperFrames là gì?

Ở mức sử dụng cơ bản nhất, một video HyperFrames có thể chỉ là một file index.html.

Trong HTML đó, mỗi phần tử có thể mang metadata về thời gian:

<h1
  class="clip"
  data-start="1"
  data-duration="4"
  data-track-index="1"
>
  Launch day
</h1>

data-start cho biết clip bắt đầu ở giây nào, data-duration cho biết nó tồn tại bao lâu, còn data-track-index thể hiện track của element trong composition.

Video, audio, text, SVG, canvas, WebGL hay các phần tử HTML bình thường đều có thể tham gia vào composition. Animation không bị khóa vào một framework riêng. README hiện liệt kê các hướng như:

CSS animation,
GSAP,
Lottie,
Three.js,
Anime.js,
Web Animations API,
adapter tùy chỉnh.

Nếu nhìn theo luồng render thì nó gần như thế này:

HTML/CSS/JS + media
        ↓
composition có timing
        ↓
seek tới thời điểm chính xác
        ↓
Chrome render frame
        ↓
FFmpeg encode + mix audio
        ↓
video output

Đây là khác biệt quan trọng so với việc chỉ quay màn hình một trang web đang chạy animation.

Vì sao cần “seekable animation”?

Một animation bình thường trên web thường phụ thuộc vào đồng hồ thực.

Ví dụ:

ms     animation bắt đầu
ms    browser vẽ frame tiếp theo
ms    frame tiếp theo
...

Nếu máy chậm, browser bận hoặc tab bị throttle, animation có thể bỏ frame hoặc lệch timing. Điều đó không quá nghiêm trọng khi người dùng chỉ xem animation trực tiếp trong trình duyệt, nhưng lại không phù hợp với một renderer video cần tạo chính xác frame số 157, 158, 159…

HyperFrames đi theo hướng khác: renderer yêu cầu composition hiển thị trạng thái tại một timestamp cụ thể.

Ví dụ video 30 fps:

frame 0   → t = 0.000s
frame 1   → t = 0.033s
frame 2   → t = 0.067s
...
frame 150 → t = 5.000s

Engine có thể seek composition tới từng thời điểm rồi capture frame đó. Vì vậy render không cần phụ thuộc vào việc animation “play” trơn tru theo thời gian thực.

Đây cũng là lý do tài liệu HyperFrames nhấn mạnh tính deterministic: cùng input và cùng môi trường render thì pipeline hướng tới việc tạo lại cùng một chuỗi frame.

Kiến trúc repository

HyperFrames không phải một package duy nhất. Repository là monorepo gồm nhiều lớp.

Một số package quan trọng:

packages/
├── cli
├── core
├── engine
├── producer
├── studio
├── player
├── shader-transitions
└── aws-lambda

Có thể hiểu chúng theo luồng sau:

CLI / Studio / Agent
        ↓
composition HTML
        ↓
@hyperframes/producer
        ↓
@hyperframes/engine
        ↓
Chrome + FFmpeg
        ↓
MP4 / WebM / MOV / ...

@hyperframes/core = contract/runtime/parser dùng chung
                    cho composition, engine và producer

`hyperframes` CLI

Đây là lớp hầu hết người dùng sẽ chạm vào đầu tiên.

CLI cung cấp các command cho workflow như:

npx hyperframes init
npx hyperframes preview
npx hyperframes lint
npx hyperframes check
npx hyperframes render

Nếu chỉ muốn làm video, thường không cần gọi trực tiếp engine bên dưới.

`@hyperframes/core`

Core giữ các contract và runtime dùng để hiểu composition:

timing,
clip tree,
parser,
lint,
animation adapter,
runtime seek,
audio metadata,
schema và utility dùng chung.

Đây là lớp giúp HTML không còn chỉ là một trang web, mà trở thành một composition có timeline mà renderer hiểu được.

`@hyperframes/engine`

Đây là phần thú vị nhất nếu muốn hiểu renderer hoạt động thế nào.

Theo README của package engine, nó dùng Puppeteer + Chrome DevTools Protocol để mở composition trong headless Chrome. Renderer seek từng frame, capture kết quả rồi đưa sang FFmpeg.

Các service được repository tách riêng gồm những phần như:

browserManager
frameCapture
screenshotService
chunkEncoder
streamingEncoder
audioMixer
videoFrameExtractor
parallelCoordinator
fileServer

Có nghĩa engine không chỉ chụp ảnh màn hình. Nó còn xử lý lifecycle của browser, capture session, frame buffer, encode, audio mix và parallel rendering.

`@hyperframes/producer`

Nếu engine là các primitive render, producer là pipeline cao hơn dùng để đưa composition tới output hoàn chỉnh.

Package này chứa phần render orchestration, parity/regression harness, distributed rendering và nhiều kiểm tra phục vụ production.

Studio và Player

@hyperframes/studio cung cấp giao diện browser để preview/edit composition. @hyperframes/player là web component để nhúng playback vào ứng dụng web.

Điều này cho phép cùng một project HTML đi qua nhiều bề mặt:

coding agent
    ↕
project files
    ↕
Studio
    ↕
CLI renderer

HyperFrames khác video editor truyền thống ở đâu?

HyperFrames không cố trở thành Premiere Pro hay After Effects trong trình duyệt.

Nó phù hợp hơn với cách nghĩ của developer:

asset + code + timing + data
              ↓
         render pipeline
              ↓
            video

Thay vì kéo layer trên timeline bằng chuột, bạn có thể sinh hàng loạt video bằng code, thay text bằng dữ liệu, đổi ảnh theo input hoặc để agent viết composition.

Điểm mạnh của mô hình này thường xuất hiện khi video cần tự động hóa:

video giới thiệu sản phẩm,
changelog hoặc feature announcement,
chart/data animation,
social video có template,
video tài liệu,
video giải thích được tạo từ script + asset,
pipeline render hàng loạt theo dữ liệu.

Ngược lại, nếu workflow chủ yếu là chỉnh tay từng keyframe bằng GUI và làm compositing phức tạp kiểu VFX, HyperFrames không thay thế hoàn toàn các editor truyền thống.

HyperFrames và coding agent

Một phần khá rõ trong thiết kế của dự án là hướng tới coding agent.

Repository có các integration cho nhiều môi trường agent và một bộ skill riêng. Quickstart chính thức gợi ý cài skill:

npx skills add heygen-com/hyperframes

Sau đó có thể yêu cầu agent bằng ngôn ngữ tự nhiên, ví dụ:

Using /hyperframes, make a 10-second product intro for https://example.com.

Ngoài route tổng quát /hyperframes, repo còn chia knowledge thành các skill chuyên biệt như:

/hyperframes-core
/hyperframes-animation
/hyperframes-keyframes
/hyperframes-creative
/hyperframes-cli
/hyperframes-audio
/hyperframes-registry
/media-use
/figma

Cách chia này hợp lý vì một agent làm video cần nhiều kiến thức hơn việc “viết HTML”: timing, animation phải seek được, audio, typography, transition, media asset và quy tắc render đều ảnh hưởng tới output cuối.

Điểm đáng chú ý là HyperFrames vẫn để lại project files bình thường. Agent không chỉ gửi yêu cầu tới một black box rồi trả về MP4. Sau khi agent tạo video, bạn vẫn có thể mở HTML/CSS/JS để sửa tay, preview trong Studio hoặc render lại bằng CLI.

Cài đặt

Yêu cầu

Theo tài liệu hiện tại:

Node.js 22+,
FFmpeg.

Kiểm tra Node:

node --version

Kiểm tra FFmpeg:

ffmpeg -version

Bạn có thể chạy HyperFrames trực tiếp bằng npx, không bắt buộc cài global.

Cách 1: tạo project bằng CLI

Khởi tạo một project mới:

npx hyperframes init my-video
cd my-video

Mở preview:

npx hyperframes preview

Sau khi composition ổn, render video:

npx hyperframes render

Nếu muốn chỉ định file output:

npx hyperframes render --output final.mp4

Trước khi render final, workflow tài liệu khuyến nghị chạy:

npx hyperframes lint
npx hyperframes check
npx hyperframes render --output final.mp4

lint kiểm tra cấu trúc composition. check mở project trong browser và tìm các vấn đề runtime/layout/motion/media/contrast trước khi encode.

Cách 2: dùng với coding agent

Nếu đang ở trong một folder mà Codex, Claude Code hoặc agent khác có thể thao tác file, có thể cài bộ skill trước:

npx hyperframes skills update

Hoặc dùng skill installer:

npx skills add heygen-com/hyperframes

Sau đó đưa yêu cầu dạng tự nhiên:

Using /hyperframes, create a 10-second 1920x1080 intro video.
Use a dark background, a large title, one subtitle and a simple upward reveal.
Preview it locally when finished.

Agent sẽ tạo project thay vì chỉ trả về một đoạn prompt.

Sau đó vẫn dùng các command quen thuộc:

npx hyperframes preview
npx hyperframes lint
npx hyperframes check
npx hyperframes render --output intro.mp4

Ví dụ cơ bản: title card 6 giây

Giả sử ta muốn tạo một video 1920×1080 dài 6 giây, gồm nền tối và một tiêu đề xuất hiện từ giây thứ 1.

Một composition tối giản có thể trông như sau:

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=1920,height=1080" />
  <style>
    html,
    body {
      margin: 0;
      width: 100%;
      height: 100%;
      overflow: hidden;
      background: #0a0a0a;
      color: white;
      font-family: Inter, system-ui, sans-serif;
    }

    #stage {
      position: relative;
      width: 1920px;
      height: 1080px;
    }

    #title {
      position: absolute;
      left: 120px;
      top: 390px;
      font-size: 110px;
      font-weight: 800;
      letter-spacing: -4px;
    }

    #subtitle {
      position: absolute;
      left: 126px;
      top: 535px;
      font-size: 34px;
      color: #a3a3a3;
    }
  </style>
</head>
<body>
  <div
    id="stage"
    data-composition-id="intro"
    data-start="0"
    data-duration="6"
    data-width="1920"
    data-height="1080"
    data-fps="30"
  >
    <h1
      id="title"
      class="clip"
      data-start="1"
      data-duration="4"
      data-track-index="0"
    >
      HyperFrames
    </h1>

    <p
      id="subtitle"
      class="clip"
      data-start="1.4"
      data-duration="3.6"
      data-track-index="1"
    >
      HTML in. Video out.
    </p>
  </div>
</body>
</html>

Ở mức này ta mới khai báo thời gian tồn tại của element. Nếu muốn motion mượt hơn, có thể thêm GSAP/CSS/WAAPI và đăng ký timeline theo contract của HyperFrames để renderer seek animation chính xác.

Ví dụ với GSAP theo pattern trong README:

<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: 60,
    duration: 0.8
  }, 1);

  tl.from("#subtitle", {
    opacity: 0,
    y: 24,
    duration: 0.6
  }, 1.35);

  window.__timelines = window.__timelines || {};
  window.__timelines.intro = tl;
</script>

Sau đó:

npx hyperframes preview

Kiểm tra:

npx hyperframes lint
npx hyperframes check

Và render:

npx hyperframes render --output intro.mp4

Thêm video, audio và nhiều track

Một composition thực tế thường có nhiều loại media.

Ví dụ:

<video
  class="clip"
  data-start="0"
  data-duration="6"
  data-track-index="0"
  src="intro.mp4"
  muted
  playsinline
></video>

<h1
  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>

Từ góc nhìn workflow, cách viết này khá giống một timeline editor nhưng timeline được biểu diễn bằng dữ liệu trong HTML.

Điều đó rất hữu ích khi composition được sinh tự động.

Ví dụ một pipeline có thể là:

script.json
assets/
voice.wav
captions.srt
      ↓
code / agent
      ↓
index.html + sub-compositions
      ↓
HyperFrames
      ↓
final.mp4

Catalog và component tái sử dụng

HyperFrames có catalog cho các block và component dựng sẵn.

README đưa ra các ví dụ như:

npx hyperframes add flash-through-white
npx hyperframes add instagram-follow
npx hyperframes add data-chart

Đây là hướng quan trọng nếu muốn dùng HyperFrames cho production. Thay vì để agent tự viết lại transition, chart, caption hoặc social overlay mỗi lần, có thể chuẩn hóa thành component rồi lắp vào nhiều video khác nhau.

Với pipeline tự động, khả năng tái sử dụng này có giá trị hơn việc mỗi video đều là một file HTML hoàn toàn bespoke.

Những gì HyperFrames làm tốt

Điểm tôi thích nhất là project không bắt người dùng học một cách viết scene hoàn toàn mới. HTML/CSS/JS vẫn là nền, nên cả developer lẫn coding agent đều có thể vào việc khá nhanh. Với video thiên về typography, SVG, canvas, WebGL hoặc media layer, việc không phải dựng thêm một React app cũng giúp project gọn hơn.

Phần render mới là thứ tạo khác biệt. HyperFrames không quay màn hình một animation đang chạy; engine chủ động seek tới từng thời điểm rồi capture frame. Nhờ vậy cùng một composition có thể đi từ máy local sang CI hay distributed render mà không đổi cách authoring.

Một điểm nữa là source vẫn là file bình thường. Agent có thể tạo scene, chạy lint/check, preview, sửa rồi render; người dùng vẫn mở chính những file đó để chỉnh tay. Với workflow tự động, cảm giác này dễ kiểm soát hơn một hệ thống chỉ nhận prompt rồi trả về MP4.

Những chỗ dễ vấp

HyperFrames không làm biến mất phần khó của motion design. Animation vẫn phải seek được; một đoạn chạy đẹp trong browser chưa chắc đã render ổn nếu nó phụ thuộc vào timer, random không seed hoặc side effect khó kiểm soát.

Browser cũng vẫn là runtime. Font, codec, GPU, WebGL/WebGPU và phiên bản Chrome có thể làm output khác đi, nên project production nên cố định môi trường render và có regression test cho những composition quan trọng.

Và dù authoring là HTML, video lớn vẫn cần kiến trúc tử tế. Khi scene, narration, captions, SFX, transition và asset bắt đầu nhiều lên, vấn đề chuyển từ “viết được HTML không?” sang “tổ chức project thế nào để còn sửa nổi sau vài tháng?”. Repo upstream cũng khá lớn vì chứa nhiều package, test và golden video; nếu chỉ muốn thử framework thì dùng npx hoặc clone bỏ qua LFS thường hợp lý hơn.

Khi nào tôi sẽ chọn HyperFrames?

Tôi sẽ cân nhắc HyperFrames khi đầu vào video đã có cấu trúc và có khả năng tự động hóa, ví dụ:

script
voice
subtitle
images/video assets
brand rules
       ↓
video generator

Đây là bài toán rất hợp với authoring bằng code: mỗi scene có timing rõ, asset có ID, animation có preset, subtitle có timestamp và output cần render lặp lại nhiều lần.

Ngược lại, với video cần chỉnh thủ công rất nhiều bằng cảm giác, keyframe phức tạp và compositing nặng, editor truyền thống vẫn có lợi thế lớn về tốc độ thao tác.

Kết luận

Sau khi đọc repo, tôi nghĩ cách hiểu dễ nhất về HyperFrames là: một trang web có timeline, nhưng được render như video thay vì chỉ chạy trong browser.

Điểm hấp dẫn nhất của nó là sự liền mạch. Scene vẫn là HTML/CSS/JS; animation có thể dùng công cụ web quen thuộc; renderer lo chuyện seek frame, encode và mix audio; còn CLI/skills nối phần đó với workflow của developer hoặc coding agent.

Nếu đầu vào của bạn đã có script, voice, subtitle và asset theo timeline, HyperFrames khá hợp để thử vì mapping từ dữ liệu sang composition rất trực tiếp. Còn nếu muốn cảm nhận project nhanh nhất, chỉ cần dựng một title card vài giây, preview rồi render. Sau lần đầu đó sẽ dễ thấy liệu cách authoring HTML-native này có hợp cách bạn làm việc hay không.

Tài liệu tham khảo

ABOUT THE AUTHOR

Cuong Vuong · Developer, Writer, Builder

Tôi viết về những thứ đã thử, đã xây dựng và những bài học có thể dùng lại trong dự án tiếp theo.

More about me →