HyperFrames: The Open Source Framework That Turns HTML into Video — Built for AI Agents
On April 17, HeyGen released HyperFrames as open source — a video rendering framework where compositions are HTML documents. It’s not a timeline editor. It’s not drag-and-drop. It’s not a proprietary DSL. It’s HTML with data attributes, rendered frame by frame to MP4, MOV, or WebM.
The core idea is elegant: LLMs are already excellent at generating HTML. So if you define a video as HTML, any AI agent can produce video. That’s exactly what HyperFrames does.
In two days since launch, the repo already surpassed 5.6k stars on GitHub and 400 forks. Apache 2.0 license, written in TypeScript.
How it works
A HyperFrames composition is an HTML document where each element receives data attributes for timing and layout:
<div id="stage" data-composition-id="demo"
data-start="0" data-width="1920" data-height="1080">
<video id="clip-1" data-start="0" data-duration="5"
data-track-index="0" src="intro.mp4" muted playsinline></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>
data-start and data-duration control timing. data-track-index controls layers. That’s the mental model. A div is a keyframe. CSS is the look. JavaScript handles animation.
The workflow is three commands:
npx hyperframes init my-video # project scaffold
npx hyperframes preview # live preview in browser (hot reload)
npx hyperframes render --output output.mp4 # render to video
Under the hood, HyperFrames loads your HTML in Chrome headless, steps through each frame using Chrome’s beginFrame API, captures it, and pipes everything through FFmpeg. The formula is frame = floor(time * fps) — no clock dependencies, no race conditions. Same input always produces the same output.
This determinism is the feature that makes HyperFrames viable for production pipelines. You can put npx hyperframes render in your CI, and it will produce exactly the same video every time.
Built for agents, not humans (but humans can use it too)
The CLI is non-interactive by default. All inputs are flags. Output is plain text. Errors fail fast. This is deliberate — it’s designed so AI agents can execute each command without parsing interactive prompts or navigating menus.
HyperFrames comes with skills that teach the agent framework-specific patterns. You run hyperframes init and the skills install automatically. In Claude Code, they register as slash commands:
/hyperframes— compose and create video compositions/hyperframes-cli— help with CLI commands/gsap— animation assistance
But it works with any agent that can write HTML: Cursor, Gemini CLI, Codex — whatever you want. The prompting pattern is natural:
“Using /hyperframes, create a 10-second product intro with a fade-in title, a background video, and background music.”
Or the most interesting use case — converting existing content to video:
“Summarize the attached PDF into a 45-second pitch video using /hyperframes.”
“Turn this CSV into an animated bar chart race using /hyperframes.”
The agent writes the HTML composition, HyperFrames renders it. You iterate by talking to the agent like it’s a video editor: “Make the title 2x bigger, switch to dark mode, and add a fade-out at the end.”
If you prefer the interactive human experience, add --human-friendly to the CLI and you get a full terminal UI.
50+ ready-to-use blocks
HyperFrames comes with a catalog of pre-built blocks and components you can add with a single command:
npx hyperframes add flash-through-white # shader transition
npx hyperframes add instagram-follow # social overlay
npx hyperframes add data-chart # animated chart
The catalog includes social overlays, shader transitions, data visualizations, cinematic effects, and more. You can explore the full catalog at Instagram Follow - HyperFrames.
This is where HyperFrames becomes practical for non-video experts. You don’t need to know shader programming to use a professional transition — just add the block and configure it with HTML attributes.
The animation stack
For animations, HyperFrames supports anything that can seek to a specific frame:
- GSAP — timeline-based animations (the main recommendation)
- Lottie — After Effects animations exported as JSON
- CSS transitions and keyframes — for simpler effects
- Three.js — 3D scenes
- D3 — data-driven visualizations
- Custom Frame Adapters — if your animation runtime can seek to a time, HyperFrames can capture it
The Frame Adapter pattern is the key architectural insight: any animation runtime that implements a seek(time) method can be plugged into the rendering pipeline. This is what makes the promise real: “anything a browser can render can be a frame in your video.”
No cloud, no external dependencies
This runs 100% locally. No API key. No account. No cloud processing. You need Node.js, Chrome (or Chromium), and FFmpeg. That’s it.
For reproducible environments, there’s Docker support. For CI/CD pipelines, you can run npx hyperframes render in any containerized environment.
This matters for two reasons the LATAM dev community knows well: first, you don’t depend on a service that could change pricing or terms. Second, your content never leaves your machine — relevant for anyone working with confidential material or customer data.
The big picture: video as code
HyperFrames is interesting beyond its technical merits for what it signals about the direction of content production.
The traditional video pipeline is: script → storyboard → shoot/animate → edit on timeline → export. Each step requires a different tool and often a different person.
The HyperFrames pipeline is: describe what you want → agent writes HTML → render → iterate. One tool. One workflow. And because the composition is code, you get version control, code review, automated testing, and CI/CD for free.
HeyGen clearly built this as infrastructure for its own AI video pipeline (its launch video was built with HyperFrames — the hyperframes-launch-video repo is public and fully clonable). But by open sourcing it under Apache 2.0, they’re betting that making video-as-code a standard benefits the entire ecosystem — including theirs.
For developers who’ve never touched video production: this is your on-ramp. You already know HTML. You already know CSS. You already have an AI agent. HyperFrames is the bridge.
Getting started
# Install and create project
npx hyperframes init my-first-video
cd my-first-video
# Preview in browser with live reload
npx hyperframes preview
# Render to MP4
npx hyperframes render
# Or let your agent do it all
# In Claude Code: /hyperframes "Create a 10-second intro with animated title"
Full documentation: hyperframes.heygen.com
HyperFrames is Apache 2.0, runs locally, and requires no account. With 5.6k stars in its first 48 hours, the community is clearly paying attention. Whether you want to automate marketing content, integrate video into your CI pipeline, or are just curious what happens when video becomes another file your agent can write — HyperFrames is worth the 5 minutes of the quickstart.