Video as Code: A Deep Dive into HeyGen’s Hyperframes
For years, the "holy grail" for web developers has been the ability to treat video as just another part of the DOM. We’ve had CSS animations and Canvas for the browser, but converting those into a professional, frame-accurate MP4 has always been a fragmented nightmare of screen recording or buggy cloud services.
Hyperframes changes the game. It’s an open-source framework that lets you write HTML, style it with CSS, and render it into deterministic, high-quality video.
1. The Core Philosophy: "Write HTML. Render Video."
Hyperframes isn't a video editor; it’s a rendering engine. It treats every element in your HTML as a "clip." By using simple data- attributes, you define the timeline directly in your markup.
What a "Video" looks like in Code:
<div id="root" data-composition-id="demo" data-width="1920" data-height="1080">
<video id="clip-1" data-start="0" data-duration="5"
src="intro.mp4" data-track-index="0" muted></video>
<h1 id="title" class="clip" data-start="1" data-duration="4"
data-track-index="1" style="font-size: 72px; color: white;">
Welcome to Hyperframes
</h1>
<audio id="bg-music" data-start="0" data-duration="5"
data-track-index="2" data-volume="0.5" src="music.wav"></audio>
</div>
Run npx hyperframes preview to preview or if you want to download just use the following command npx hyperframes render --output demo.mp4, and this produces a pixel-perfect video. No "wall-clock" dependencies, no lag—just deterministic, frame-by-frame capture using Chrome's beginFrame API.
something like this
2. Built for the "Agentic" Era
The most significant feature of Hyperframes is that it is Agent-Native.
While AI agents (like Claude Code or Cursor) struggle to navigate complex GUI-based video editors like Premiere Pro, they are experts at writing HTML and JavaScript. Hyperframes provides a bridge:
LLMs Speak HTML: Compositions are plain HTML documents, the format LLMs understand best.
Non-Interactive CLI: The CLI is designed to be driven by scripts and agents, offering fail-fast errors and plain text outputs.
Specialized Skills: You can teach your agent how to use it instantly by adding Hyperframes skills:
npx skills add heygen-com/hyperframes
3. How the Engine Works
Hyperframes operates on a three-step workflow that fits perfectly into any developer's CI/CD pipeline:
Compose: Use standard web tech. Animations can be driven by GSAP, Lottie, or CSS. The "Frame Adapter" pattern allows any seekable runtime to work.
Preview:
npx hyperframes previewlaunches Hyperframes Studio in your browser. It supports Hot Module Replacement (HMR), so your video updates the moment you save your code.Render: The engine loads your HTML in headless Chrome, seeks to each frame precisely (
frame = floor(time * fps)), captures it, and pipes it through FFmpeg for encoding.
4. Built-in Templates: From Swiss Grid to TikTok
You don't have to start from a blank page. Hyperframes comes with a catalog of 50+ ready-to-use blocks and templates:
Template | Style | Best For |
| Clean & Structured | Corporate & Technical demos |
| Editorial | Data storytelling & animated charts |
| Elastic & Energetic | Social media & product launches |
| Bold & Portrait | Mobile announcements (9:16) |
5. Getting Started
If you have Node.js 22+ and FFmpeg installed, you are ready to go.
The Rules of the Road:
To ensure your code renders correctly as a video, remember the "Rule of Three":
Root Element: Must have
data-composition-id,data-width, anddata-height.Timed Elements: Must have
class="clip",data-start,data-duration, anddata-track-index.Animations: GSAP timelines must be created with
{ paused: true }and registered onwindow.__timelines.
npx hyperframes init my-project --example swiss-grid
Which will create a project and it would look like this
You can preview the changes using the following command npx hyperframes preview in your terminal
If you are happy with the output you can download it using the following command
npx hyperframes render --output final_video.mp4
where you can see like below
Let's Make it crazier
This section expects you have created a new project and in the index.html replace the contents with the following one.
https://gist.github.com/nidhinkumar06/b8fb56e81cf702fd40f930483a67b751
You should see an output like below
Cool isn't it. Hmmm! want something bigger ok let's do a multilingual one
https://gist.github.com/nidhinkumar06/b1bb6bb61f114cccd33ad511143bbc8a
This output will look like this
Final Thoughts
Hyperframes isn't just a new tool; it's a new category. By moving video production into the Git-tracked, agent-readable, and developer-friendly world of HTML, HeyGen is opening the door for automated, programmatic video at a scale we haven't seen before.
Stop dragging clips. Start writing them.
Checkout the HyperFrames document:
https://hyperframes.heygen.com/introduction
Checkout the official GitHub
