The Scenario
You ask an AI to make a 10-second product intro video: a title fading in, a looping background video, light background music.
There are two traditional paths: generate pixels directly with a model like Sora, or write React components with Remotion and render them to MP4. The former is uncontrollable—you can't precisely specify that the title should start fading in at 3.2 seconds. The latter has a high barrier—you need to know React and understand component lifecycles.
HyperFrames offers a third path: write HTML and CSS, render a deterministic MP4.
It sounds almost too simple. But look closer, and this is a classic idea from compiler design—find an intermediate representation (IR) with enough expressive power and a mature ecosystem, compile all higher-level languages into it, then compile from it to all target platforms. LLVM is the IR for programming languages; HTML becomes the IR for video rendering.
What It Actually Does
HyperFrames is an open-source framework from HeyGen (yes, the AI avatar company). In one sentence: HTML/CSS/media + addressable animations → deterministic MP4 video.
Core mechanisms:
- HTML as the composition contract:
data-*attributes annotate the timeline,class="clip"marks clips, tracks organize layers. You're writing a web page, but every element has a time dimension. - Addressable animations: GSAP, Lottie, Three.js, CSS, WAAPI—any animation library works, with an "addressable" constraint. The renderer can extract a frame at any exact point in time rather than playing from the start.
- Deterministic rendering: the same HTML always produces the same MP4. No random seeds, no model inference uncertainty.
/hyperframes: the router—read it to decide which workflow to use/product-launch-video: product launch videos/pr-to-video: turn a GitHub PR into a change-explainer video/faceless-explainer: faceless explainer videos/talking-head-recut: add designed overlays to talking-head videos/music-to-video: music-driven videos/slideshow: interactive presentations/motion-graphics: motion graphics under 10 seconds- Remotion: React components → frame rendering → MP4. You need React, hooks, and component state management.
- HyperFrames: HTML/CSS → frame rendering → MP4. More declarative, closer to the final output.
- Repository: heygen-com/hyperframes
- Language: TypeScript
- License: Apache 2.0
- Stars today: 352
- 21 Agent Skills, supporting Claude Code/Codex/Cursor/Gemini CLI/OpenCode
- npm package:
hyperframes - Teams doing AI video generation who need deterministic output rather than pixel-level generation
- Developers using Claude Code or Cursor who want agents to automatically produce product videos
- Teams migrating from Remotion—HyperFrames ships a
/remotion-to-hyperframesmigration Skill
21 Skills: A Video Production Pipeline for Agents
The most interesting part of HyperFrames isn't the rendering engine—it ships with 21 Agent Skills that teach AI coding agents how to use HyperFrames:
Each Skill is a Markdown file teaching the agent how to plan video structure, write valid HTML, wire up animations, add media, lint, preview, and render. Supported agents: Claude Code, Codex, Cursor, Gemini CLI, OpenCode.
This design reveals a trend: tools no longer just expose APIs—they teach agents how to use themselves. Skills are manuals written for AI, not documentation written for humans.
Why HTML Is a Good Video IR
Think about the history of video generation: keyframe animation, then After Effects layer compositing, then Remotion's React components. Each step makes "describing a video" more like "writing code."
HTML's advantages as a video IR:
1. Agents already know HTML. Claude, GPT, and Gemini natively understand HTML/CSS—no extra training needed. Remotion requires React + TypeScript + component thinking; HTML just requires knowing how to write a web page. 2. Mature ecosystem. CSS animations, GSAP, Three.js, Lottie—decades of web animation tooling are directly usable. 3. Debuggable. Open the HTML in a browser, see the result, tweak one line of CSS and it takes effect immediately. Pixel-generation models can't do this. 4. Deterministic. The same HTML always produces the same video. Critical for automation pipelines—you can't have one CI/CD commit producing two different videos.
The cost is an expressiveness ceiling. HyperFrames can't do Sora-style physical scene generation—no HTML will describe "a cat jumping off a table and knocking over a vase." But for design-driven scenarios—product intros, data visualization, explainer videos, motion graphics—HTML's expressiveness is more than enough.
How It Differs From Remotion
Remotion is the pioneer in this space: write videos as React components. HyperFrames differs:
Remotion's React components are imperative—you use useCurrentFrame() to get the current frame and compute every element's position. HyperFrames' HTML is declarative—you declare the timeline with data-* attributes, and the renderer handles frame sampling itself.
Declarative fits AI agent generation better. Writing React requires understanding state and lifecycles; writing HTML only requires describing "what's here and when it appears."
The Deeper Trend: Agent-Native Tool Design
HyperFrames embodies three principles of agent-native tool design:
1. Use skills agents already have as the interface. No new DSL, no new framework to learn. HTML is every LLM's native language.
2. Encode domain knowledge as Skills, not documentation. The 21 Skills aren't READMEs for humans—they're instruction files consumed by agents. After reading a Skill, an agent knows the steps, media, and structure a "product launch video" requires.
3. Determinism first. Agent-generated video must be reproducible. The same prompt producing different videos breaks automation pipelines. HTML → MP4 is deterministic; model inference is not.
The Data
Who It's For
Closing
HyperFrames' real contribution isn't the rendering engine—it's turning video generation from a "model inference problem" into a "template rendering problem". Model inference is uncontrollable, irreproducible, and undebuggable; template rendering is controllable, reproducible, and debuggable in a browser.
While everyone chases "AI-generating video pixels," HeyGen asked the opposite question: what if a video is just rendered HTML? The answer to that question may be worth more than another video generation model.