HyperFrames: HTML as a deterministic compile target for video
HeyGen's open-source HyperFrames turns HTML, CSS, and seekable animations into deterministic MP4 video, with coding agents as the intended author. Here is why the authoring contract — not the renderer — is the real bet, and where it fits in a production content pipeline.
HeyGen recently open-sourced HyperFrames, an Apache-2.0 framework that turns HTML, CSS, media, and seekable animations into MP4 video. On the surface it reads like another "render the web to video" tool. What makes it worth attention is the bet underneath: it treats video as a deterministic compile target, and it picks HTML as the source language because that is the language coding agents already write fluently.
I spend my days running generative and agentic systems in production, and the thing that breaks automated content pipelines is rarely model quality. It is the impedance mismatch between what an agent emits — text, markup, structured data — and what production tooling consumes — stateful GUI timelines, opaque project formats, editors built for a human with a mouse. HyperFrames closes that gap by making the renderer a pure function of an HTML file.
The authoring contract is the product
A HyperFrames composition is an index.html. Clips, titles, and audio are ordinary DOM elements annotated with data attributes that describe timing and tracks — data-start, data-duration, data-track-index:
<div id="stage" data-composition-id="launch" data-start="0" data-width="1920" data-height="1080">
<video class="clip" data-start="0" data-duration="6" 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">Launch day</h1>
<audio data-start="0" data-duration="6" data-track-index="2" data-volume="0.5" src="music.wav"></audio>
<script src="https://cdn.jsdelivr.net/npm/gsap@3/dist/gsap.min.js"></script>
<script>
const tl = gsap.timeline({ paused: true });
tl.from("#title", { opacity: 0, y: 40, duration: 0.8 }, 1);
window.__timelines = window.__timelines || {};
window.__timelines.launch = tl;
</script>
</div>
There is no build step, no JSX, no proprietary timeline. The file plays as-is in a browser, which means it is inspectable, diffable, and trivially generated. That last property is the whole point. An agent does not need to learn a bespoke SDK or drive a GUI; it writes markup, the same skill it uses for everything else. The CLI is non-interactive by default, so an agent can scaffold, lint, preview, and render without a human in the loop.
This is also why the project ships skills rather than only docs. npx skills add heygen-com/hyperframes installs the production loop — plan the video, write valid HTML, wire seekable animations, add media, lint, preview, render — into Claude Code, Cursor, Gemini CLI, Codex, and other agents. The framework's real interface is not the API; it is the set of patterns that teach an agent the parts that generic web knowledge gets wrong.
Determinism is the feature
The rendering model is what earns my trust for a production pipeline. Many web-to-video approaches play the page in real time and screen-record it, which makes them hostage to frame drops and timing jitter — the same input can produce different output. HyperFrames instead seeks each frame: it drives headless Chrome to a fixed timestamp, captures that frame, and hands the sequence to FFmpeg for encoding and audio mixing. Same input, same frames, same output.
That single property is the difference between a demo and something I would put behind an automated pipeline. Deterministic output is testable output. The repository keeps golden MP4 baselines for regression tests — large enough that they live in Git LFS — which is exactly the discipline you want when an agent, not a person, is generating the compositions. You can diff a render against a known-good baseline and catch a regression before it ships.
Animation as a function of time
Determinism imposes one real constraint on authors, and it is worth understanding. Animations have to be seekable — frame-accurate functions of the current time rather than wall-clock effects driven by setTimeout or real-time playback. In practice you build a paused GSAP timeline and expose it on window.__timelines so the renderer can scrub it to any frame. HyperFrames calls this the library clock, as opposed to wall-clock patterns that, in its words, "need care."
The animation layer is adapter-based: GSAP, CSS, Lottie, Three.js, Anime.js, WAAPI, or your own runtime, as long as it can be seeked. The discipline — every animation is a pure function of frame time — is precisely what makes deterministic rendering possible, and it is a constraint an agent can be taught and a linter can enforce.
frame.md: a design system rewritten for the camera
The piece I find most thoughtful is frame.md. Every brand has a design.md, but those tokens were written for the web — responsive scale, web chrome, layout that reflows. None of that survives contact with a fixed 1920×1080 canvas. frame.md inverts the spec for the frame: the same tokens and rules, rewritten so an agent can compose a promo video without guessing at scale. The mantra is clean — atoms stay sacred, composition stays free, numbers come from the script. Brand primitives are fixed; layout and timing come from the per-video script. It is a sensible separation of concerns for anyone trying to keep automated video on-brand.
HyperFrames vs Remotion
The obvious comparison is Remotion, which HyperFrames credits as inspiration. Both render with headless Chrome and FFmpeg, so raw capability is similar. The difference is the authoring bet. Remotion composes video from React components, which is a strong model for a human building a reusable, typed component library. HyperFrames bets on plain HTML with no build step, which is the lower-friction target for an agent emitting a one-off composition — and it ships under Apache 2.0 rather than Remotion's source-available license. Neither bet is wrong; they optimize for different authors. If your author is a coding agent, the HTML-native, build-free contract is the one that fits.
Where I would use it
I would reach for HyperFrames for programmatic, templated video: product and feature announcements, PR walkthroughs with animated diffs, chart races, docs-to-video. The determinism makes these safe to regenerate on every release and to gate with regression tests.
I would set expectations on the rest. The framework gives you a clean interface and reproducible output; it does not give you taste, asset sourcing, or audio that ducks under narration on its own — those still sit with you or your agent. Seek-per-frame in headless Chrome is not free at scale, which is why the AWS Lambda render path exists, and the cloud-rendering story is younger than Remotion's. But the core decision — make video a deterministic function of HTML, and treat the agent as the primary author — is the right one for where content pipelines are heading. It is the kind of unglamorous infrastructure choice that makes the interesting automation on top of it actually reliable.