hyperframes is HeyGen’s open-source engine for turning HTML into video. You write a plain HTML file with timing attributes, and it renders a deterministic MP4. The tagline, “Write HTML. Render video. Built for agents,” is the whole thesis: AI coding agents already know HTML and CSS, so the fastest path to programmatic video is to let them author it directly rather than learn a video API. That framing, plus the fact that HeyGen (an AI video company) maintains it and uses it internally, is why it is worth a closer look than a typical render library.
How it works
The model is unusually direct. Your HTML runs as a normal web page in the browser, with data-start, data-duration, and data-track-index attributes controlling when elements appear and on which track. To render, hyperframes opens the page with Puppeteer and uses Chrome’s HeadlessExperimental.beginFrame API to seek frame by frame, captures each frame, and encodes with FFmpeg. Audio elements are extracted and mixed separately. Because it seeks frames deterministically rather than recording wall-clock time, the same input produces the same frames every render.
It adapts to multiple animation runtimes (GSAP, Lottie, Three.js, CSS animation, the Web Animations API), ships a Catalog of ready-made transitions and overlays, supports transparent output (WebM, ProRes, PNG sequences), and can render distributed on AWS Lambda or GCP Cloud Run.
Install and a minimal example
npm install -g hyperframes
npx hyperframes init my-video
cd my-video
npx hyperframes preview # live browser preview with hot reload
npx hyperframes render # local MP4Requirements are Node >= 22, FFmpeg, and Chrome (Puppeteer downloads it). A composition is just HTML:
<div id="stage" data-composition-id="launch" data-width="1920" data-height="1080">
<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" src="music.wav"></audio>
</div>For agents, npx skills add heygen-com/hyperframes wires it into Claude Code, Cursor, and Gemini CLI.
The frame.md idea worth noting
One genuinely clever piece is frame.md: it inverts a web design system into a video-friendly DESIGN.md so the agent does not guess at scale and proportion. Design tokens are built for browsers at arbitrary sizes; video has fixed dimensions and frame rates. frame.md bridges that gap, and it is the kind of detail that signals the project is solving the agent-authoring problem seriously, not just wrapping a renderer.
How it compares
| Project | Authoring model | Stars (2026-06) |
|---|---|---|
| heygen-com/hyperframes | Plain HTML, agent-first | ~27k |
| remotion-dev/remotion | React components | ~50k |
| redotvideo/revideo | Animation-driven library | ~4k |
| OpenCut-app/OpenCut | GUI timeline editor | ~55k |
Remotion is the heavyweight peer, but it uses React components and its license has commercial terms; hyperframes uses plain HTML, is Apache-2.0, and renders locally out of the box. revideo is animation-library-focused and smaller. OpenCut is the opposite philosophy entirely: a GUI editor for humans, where hyperframes is a code path for agents. Pick by whether a human or an agent is authoring.
Gotchas from the issue tracker
Releases are near-daily (the v0.6.x line), and the open issues cluster on rendering stability:
- Frame duplication or skips when a clip’s
data-startaligns to the frame grid, from a missing epsilon in frame lookup (#1317). - Three.js/WebGL content disappearing in v0.6.x where it worked in v0.5.5 (#1260), and GSAP methods silently dropped without a stub (#1285).
- Renderer hangs on low-memory hardware (#1236) and large compositions timing out (#1219), so resource limits bite.
- A stray v1.0.x tag broke
npx skillsversion resolution (#1282).
The pattern: the core HTML-to-video path is sound, while animation-library compatibility and low-memory rendering are where you will hit walls. Test your specific animation stack before committing to a pipeline.
FAQ
Is hyperframes free? Yes. hyperframes is Apache-2.0 licensed and open-source, with no per-frame fee or commercial restriction, and it renders locally out of the box.
What is the difference between hyperframes and Remotion? hyperframes authors video as plain HTML and is Apache-2.0; Remotion uses React components and carries commercial licensing terms. hyperframes is aimed at AI agents that already know HTML.
How do I render video with hyperframes? Run npx hyperframes init to scaffold a project, write HTML with data-start and data-duration timing attributes, then npx hyperframes render for an MP4.
What does hyperframes require to run? Node 22 or newer, FFmpeg, and Chrome (Puppeteer downloads it). Rendering uses headless Chrome to seek frames and FFmpeg to encode.
Who uses hyperframes? HeyGen builds it and uses it internally for video synthesis, and its adopters list includes projects like tldraw and TanStack using it for release and code-demo videos, which is a useful signal that the HTML-to-video path holds up in real pipelines rather than only in demos.
Related reading
For the human-facing counterpart (a GUI video editor rather than an agent code path) see OpenCut-app/OpenCut.