Table of Contents
- Introduction
- The Problem With Programmatic Video Today
- The Solution: HyperFrames
- Key Features
- Getting Started
- Advanced Usage
- Comparison: HyperFrames vs Remotion
- Why This Matters Now
- Conclusion & Next Steps
Introduction
!HyperFrames rendering pipeline: HTML template -> frame extraction -> video assembly
If you've ever tried to automate video production, you've hit the same wall: every tool — Premiere, After Effects, even web-based compositors — is built for a person sitting at a desk with a mouse, not for a script that runs unattended in a CI pipeline.
What if generating videos worked the same way building a website does?
Today we're looking at HyperFrames — HeyGen's open-source rendering framework that treats HTML/CSS as a first-class video authoring format. You write standard markup, add a few data attributes for timing, and render it into a frame-accurate MP4. No React DSL. No proprietary scene graph. No video editor.
This is the tool that lets AI agents like Claude Code write and iterate on video compositions the same way they write code. And it's Apache 2.0-licensed, fully open source, at github.com/heygen-com/hyperframes.
The Problem With Programmatic Video Today
Video has resisted the "code-as-infrastructure" treatment for decades. Every attempt requires either:
- A GUI editor that can't be scripted and requires manual export
- A React wrapper (looking at you, Remotion) that adds a build step and opinionated DSL
- Screen recording of a browser window — brittle, low quality, frame drops
- Cloud-render services that cost per minute and lock you into a vendor
The real cost isn't just tooling. It's that video workflows can't participate in Git. You can't diff a Premiere project. You can't review a video composition in a pull request. You can't reproduce the same output from the same inputs unless your artist happens to do it exactly the same way every time. And AI agents — which have gotten remarkably good at writing code — are completely shut out of the medium.
Automated video at scale requires three things that no existing tool fully delivers:
- Deterministic output — same input = identical video, always
- Git-trackable source — code diffs, rollbacks, branching
- Agent-native authoring — LLMs can write and modify compositions without specialized training
HyperFrames is built to deliver all three.
The Solution: HyperFrames
HyperFrames is an open-source video rendering framework from HeyGen that lets you define video compositions as HTML files and render them to MP4 via headless Chrome + FFmpeg.
Its core philosophy is elegantly simple: "Write HTML. Render video. Built for agents."
Every element in your HTML becomes a timed "clip" on the video timeline, controlled through data- attributes. Animations live in standard CSS/JS (GSAP, Lottie, Three.js). Preview is live-reload browser. Render is FFmpeg-encoded, frame-accurate output. No proprietary format stands between you and the final file.
At 19.9k stars and 1.9k forks with 145 releases as of May 2026, it's already the most momentum-rich open-source video framework shipping in the developer + AI agent space.
Key Features
HTML-Native Composition
HyperFrames compositions are plain HTML files. No React. No TSX. No bundler.
<div id="stage"
data-composition-id="my-video"
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>
<img
id="overlay"
class="clip"
data-start="2"
data-duration="3"
data-track-index="1"
src="logo.png"
/>
<audio
id="bg-music"
data-start="0"
data-duration="9"
data-track-index="2"
data-volume="0.5"
src="music.wav"
></audio>
</div>The Rule of Three governs valid compositions:
- Root element needs
data-composition-id,data-width,data-height - Timed elements need
class="clip",data-start,data-duration,data-track-index - Animations must use
{ paused: true }on GSAP timelines and register onwindow.__timelines
This is near-zero ceremony. Any web developer who can write div elements can write a video composition.
AI-First Design
HyperFrames isn't just AI-compatible — it's built for AI coding agents.
The CLI is non-interactive by default, which means it's scriptable by design. Error messages are machine-readable. Output is plain text. There are no TTY prompts that block a headless agent.
More importantly, the framework ships with a skills package that teaches AI agents the correct patterns:
npx skills add heygen-com/hyperframesOnce installed, the following slash commands become available in Claude Code:
/hyperframes— author and edit compositions/hyperframes-cli— init, lint, preview, render/hyperframes-media— TTS, transcription, background removal/gsap,/lottie,/three,/animejs,/css-animations,/waapi— adapter-specific animation skills
A cold-start prompt like "create a 10-second product intro with a fade-in title and background music" produces a working composition. Warm-start prompts that take existing HTML/PDF/CSV and turn them into videos work equally well. Iteration is just natural language: "make the title 2x bigger, add a fade-out at the end."
This is a qualitatively different experience from trying to drive Premiere via API or hand-coding JSX in Remotion.
50+ Ready-to-Use Blocks
HyperFrames ships an extensible block registry. Install common components with a single CLI command:
npx hyperframes add flash-through-white # shader transition
npx hyperframes add instagram-follow # social overlay
npx hyperframes add data-chart # animated chartTemplates for video styles include swiss-grid, nyt-graph, play-mode, and vignelli — covering corporate clean, editorial data storytelling, energetic social media, and 9:16 portrait formats.
The Frame Adapter Pattern
HyperFrames introduces a "Frame Adapter" abstraction that cleanly separates timing logic from animation runtime. Bring your own seekable animation library — GSAP, Lottie, CSS keyframes, Three.js, or Web Animations API — and HyperFrames handles the frame seeking and compositing.
This means you don't have to rewrite your existing animation knowledge. If your team already uses GSAP timelines for web animations, those same timelines work in HyperFrames video compositions.
Deterministic Rendering Engine
The rendering pipeline is frame-accurate by construction:
HTML Source → Headless Chrome loads composition → Chrome seeks to frame = floor(time × FPS) → screen capture → FFmpeg encode → MP4Chrome's beginFrame API gives sub-frame precision. No wall-clock playback. No race conditions between playback head and capture. Same HTML, same inputs, same video file every time.
This determinism is what makes AI-agent-driven workflows viable. An LLM can safely iteratively modify a composition, re-render, and do visual diffing — something that's impossible with tools whose output changes based on machine load, clock drift, or the time of day.
Fully Open Source (Apache 2.0)
HeyGen ships HyperFrames under Apache 2.0 — a permissive, fully OSI-approved license. No paid tier above a small-team threshold (as Remotion uses). No source-available licensing. Full rights to fork, modify, ship commercially, or build a product on top of it.
Getting Started
Prerequisites
node -v # needs >= 22 (check with nvm)
ffmpeg -version # needed for encodingQuick Setup
# Option 1: interactive project init
npx hyperframes init my-video
cd my-video
npx hyperframes preview # opens browser with live reload
npx hyperframes render # outputs MP4
## Option 2: AI agent (recommended)
npx skills add heygen-com/hyperframes
## Then use /hyperframes in Claude Code, Cursor, etc.First Composition
Create index.html in your project root:
<div id="root"
data-composition-id="hello"
data-width="1920"
data-height="1080">
<h1 id="title" class="clip"
data-start="0"
data-duration="5"
data-track-index="0"
style="font-size: 96px; color: white; font-family: sans-serif;">
HyperFrames
</h1>
</div>npx hyperframes preview # see the result live
npx hyperframes render # save as output.mp4That's it. No bundler. No npm install of framework core. A single HTML file is a complete video composition.
Advanced Usage
GSAP Timeline Animations
GSAP animations work in HyperFrames with one critical rule — pause them so HyperFrames controls playback:
// timeline.js — loaded via <script> in your composition
const tl = gsap.timeline({ paused: true });
tl.to('#title', { x: 200, opacity: 1, duration: 2, ease: 'power2.out' })
.to('#subtitle', { y: 0, opacity: 1, duration: 1 }, '-=0.5');
// Register so HyperFrames can seek it
window.__timelines = { main: tl };HyperFrames seeks window.__timelines.main to precise frame positions during render. You can scrub through the timeline in browser preview at any moment and see exact frame-accurate preview.
Multi-Track Compositions
Track indices control layering in the compositor. A higher data-track-index renders on top:
<!-- Track 0: base video -->
<video data-track-index="0" ... />
<!-- Track 1: overlay graphics -->
<svg data-track-index="1" ... />
<!-- Track 2: captions (top of stack) -->
<div class="clip" data-track-index="2" ... />Up to all available browser compositor layers per frame; no hard per-project limit.
Website-to-Video Pipeline
HyperFrames includes a website-to-hyperframes skill that captures a live URL and converts it into a video composition. This enables fully automated workflows like:
- "Render the homepage at
aratech.aeas a 30-second scrolling screencast video" - "Take the Notion doc and turn every section into a timed slide"
- "Generate a product demo from the live staging URL"
This is the CI-friendly video generation loop that most marketing teams still do by hand.
Lottie and Three.js
// Lottie player registered by HyperFrames runtime
window.__hfLottie.play('animation.json');
// Three.js scene — HyperFrames injects current frame time
window.__hfThreeTime = 0; // seconds, set each frame by the engineAdapter skills (/lottie, /three) auto-initialize the correct global and expose frame timing, so you don't need to set up any plumbing yourself.
Comparison: HyperFrames vs Remotion
HyperFrames is directly inspired by Remotion — the React-based programmatic video framework used at HeyGen in production. Both drive headless Chrome. Both produce deterministic frame-accurate output. Both ship agent skills. The architectural split is on one core decision: what does the primary author write?
For teams that already write HTML/CSS or need to embed existing web assets into video: HyperFrames is the obvious choice. For teams already deeply invested in a React component library with CI/CD: Remotion has some advantages on the distributed front.
The licensing gap is worth emphasizing. Remotion's "source-available" model means your company size, revenue, or deployment topology may trigger a paid license. HyperFrames has no such restriction under Apache 2.0.
Why This Matters Now
Two converging shifts make HyperFrames relevant this year rather than some future pipeline:
1. AI agent video is here. Claude Code, Cursor, and Codex can code. Now, with HyperFrames, they can code video. Natural language → HTML composition → rendered MP4 is an end-to-end workflow that runs today. You don't need to wait for an AI video model to be good enough; you need HTML and a renderer to be good enough — and they are.
2. Programmatic video is a competitive moat. Teams that generate video at scale from structured data (CSV → bar chart races, PDF → pitch videos, website → demo reels) have an inhuman advantage in content production velocity. The tools that lock in the most developers and agents first will define the infrastructure for the next wave of automated content.
HyperFrames is early but moving fast — 145 releases, a dedicated skills ecosystem, and integration with every major AI coding agent. It's the right time to start building with it.
Conclusion & Next Steps
HyperFrames isn't just another video tool. It's the first rendering framework that treats video composition as a first-class artifact in a developer's workflow — versioned in Git, reviewed in PRs, iterated by agents, and rendered deterministically on every commit.
If you've ever needed to:
- Generate 100 personalized intro videos from CRM data
- Turn a set of landing pages into a demo reel
- Automate social clip creation from podcast transcripts
- Embed AI-generated video output in a CI/CD pipeline
…HyperFrames is the tool that closes the loop.