# 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:

```html
<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  

![](https://cdn.hashnode.com/uploads/covers/6536409b7aa52ef9eb6c6b78/bdc3ec2e-41f6-4e35-a912-ebf6cef895e3.png align="center")

## 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:
    

```shell
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:

1.  **Compose:** Use standard web tech. Animations can be driven by **GSAP, Lottie, or CSS**. The "Frame Adapter" pattern allows any seekable runtime to work.
    
2.  **Preview:** `npx hyperframes preview` launches **Hyperframes Studio** in your browser. It supports Hot Module Replacement (HMR), so your video updates the moment you save your code.
    
3.  **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:

<table style="min-width: 75px;"><colgroup><col style="min-width: 25px;"><col style="min-width: 25px;"><col style="min-width: 25px;"></colgroup><tbody><tr><td colspan="1" rowspan="1"><p><strong>Template</strong></p></td><td colspan="1" rowspan="1"><p><strong>Style</strong></p></td><td colspan="1" rowspan="1"><p><strong>Best For</strong></p></td></tr><tr><td colspan="1" rowspan="1"><p><code>swiss-grid</code></p></td><td colspan="1" rowspan="1"><p>Clean &amp; Structured</p></td><td colspan="1" rowspan="1"><p>Corporate &amp; Technical demos</p></td></tr><tr><td colspan="1" rowspan="1"><p><code>nyt-graph</code></p></td><td colspan="1" rowspan="1"><p>Editorial</p></td><td colspan="1" rowspan="1"><p>Data storytelling &amp; animated charts</p></td></tr><tr><td colspan="1" rowspan="1"><p><code>play-mode</code></p></td><td colspan="1" rowspan="1"><p>Elastic &amp; Energetic</p></td><td colspan="1" rowspan="1"><p>Social media &amp; product launches</p></td></tr><tr><td colspan="1" rowspan="1"><p><code>vignelli</code></p></td><td colspan="1" rowspan="1"><p>Bold &amp; Portrait</p></td><td colspan="1" rowspan="1"><p>Mobile announcements (9:16)</p></td></tr></tbody></table>

## 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":

1.  **Root Element:** Must have `data-composition-id`, `data-width`, and `data-height`.
    
2.  **Timed Elements:** Must have `class="clip"`, `data-start`, `data-duration`, and `data-track-index`.
    
3.  **Animations:** GSAP timelines must be created with `{ paused: true }` and registered on `window.__timelines`.
    

```shell
npx hyperframes init my-project --example swiss-grid
```

Which will create a project and it would look like this

![](https://cdn.hashnode.com/uploads/covers/6536409b7aa52ef9eb6c6b78/e1190c93-4262-446a-8f19-f662e5346176.png align="center")

You can preview the changes using the following command `npx hyperframes preview` in your terminal

![](https://cdn.hashnode.com/uploads/covers/6536409b7aa52ef9eb6c6b78/68b2d85c-4d8d-47a0-96f7-6d40af8a9200.png align="center")

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

![](https://cdn.hashnode.com/uploads/covers/6536409b7aa52ef9eb6c6b78/2b0827c4-3640-4c4d-a5c9-d25ade6d865b.png align="center")

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

![](https://cdn.hashnode.com/uploads/covers/6536409b7aa52ef9eb6c6b78/bd32da0f-a74c-4404-accf-fcdcb3382821.png align="center")

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

%[https://youtu.be/rHjjd21GGYM] 

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

%[https://github.com/heygen-com/hyperframes]