What Is HyperFrames? HeyGen's HTML-to-Video Framework, Explained (2026)
What Is HyperFrames? HeyGen's HTML-to-Video Framework, Explained (2026)
June 8, 2026
Keston CollinsVideo editor with nearly 10 years of experience, exploring the intersection of motion graphics and AI.
If you have seen "HyperFrames" trending and want a straight answer: HyperFrames is HeyGen's open-source framework that renders video from HTML, built so AI coding agents can write the markup for you. You author a scene with HTML, CSS, and an animation library, a headless browser steps through it frame by frame, and the frames are encoded into an MP4. It is a rendering engine, not an editor, and it is free. This page explains exactly what it is, clears up the one myth that keeps spreading about it, and shows who should actually use it.
TL;DR — What is HyperFrames?
Question
Answer
What is it?
An open-source framework that renders video from HTML
Who made it?
HeyGen, released in 2026
License / cost
Apache 2.0, free, self-hosted, no usage thresholds
What you write
HTML + CSS + a seekable animation library (GSAP, CSS, Lottie, etc.)
Built for
AI coding agents and developers
Does it generate video with AI?
No — it only renders what a browser can draw
Closest comparison
Remotion (which renders from React instead of HTML)
Who it's not for
Non-coders who want a finished branded clip — see the third path below
HyperFrames sits in the same family as a Motion Agent, but it solves the problem from the opposite end: you write code, the agent helps, and the framework renders.
How HyperFrames works
The model is simple once you see it. A HyperFrames composition is a plain HTML file. Timing lives in data-* attributes (when an element starts, how long it lasts, which track it is on), and motion comes from an animation library through an adapter, so GSAP, CSS animations, Lottie, Three.js, or Anime.js all work as long as the animation can be seeked to a specific point in time.
To produce the video, HyperFrames opens the page in a headless Chrome instance, seeks to each frame, captures it, and then FFmpeg encodes those captured frames into an MP4. Because the same input seeks to the same frames every time, the output is deterministic: render it today or in a CI job next month and you get the identical file. Audio tracks are supported too, with their own start and duration timing. The whole flow runs from a CLI, init to scaffold, preview for a live browser reload, for the final file, and it runs non-interactively by default, which is the tell that this was designed for agents and pipelines rather than for a person clicking around.
render
What HyperFrames is built for
The reason HyperFrames exists is the AI agent. HeyGen ships skills for Claude Code, Cursor, Gemini CLI, and Codex, registered as slash commands like /hyperframes for authoring and /hyperframes-cli for the build steps. The bet behind the project is that large language models have read an enormous amount of HTML and very little Remotion-flavored React, so an agent can write HTML motion scenes more reliably than it can write React compositions. In practice that means you describe a scene to your coding agent, it writes the HTML, and HyperFrames renders it.
Teams already using it in public include HeyGen itself, whose own launch videos are open-source HyperFrames compositions you can remix, plus tldraw for automated pull-request walkthrough videos and TanStack for code-demo clips. The common thread is developer-adjacent teams producing structured, repeatable motion graphics, not one-off cinematic shots.
The one myth to clear up
Here is the correction that matters, because a lot of third-party write-ups get it wrong: HyperFrames does not generate video with AI. It renders what a browser can draw, which means text, SVG, CSS shapes, canvas, and animation libraries. There is no photorealistic footage, no talking-head avatar, no generative video model producing imagery. If you read a blog claiming HyperFrames "uses AI to create video," that blog is wrong, and the official documentation is explicit about it.
The "AI" in HyperFrames is the agent that writes the HTML, not a model that paints the pixels. That distinction is the difference between a deterministic motion-graphics renderer and a generative tool like Sora or Veo. HyperFrames is firmly the former.
What HyperFrames can and cannot do
To be useful you need both halves of the picture, so here is the honest version.
It is good at: product and launch videos, social clips, animated explainers, data visualizations, animated captions, lower thirds, and turning docs or code into video. Anything that is structured, on-brand, and worth producing the same way twice is a fit, especially when an agent is writing the markup.
It will not: generate footage, replace a camera, or stand in for HeyGen's avatar products. And it is not no-code. It lowers the bar compared to React, but you, or an agent you can direct and debug, still write HTML, CSS, and animation code. It also needs a real local toolchain: Node.js 22 or newer, FFmpeg, and a headless Chrome via Puppeteer. When a render looks wrong, someone has to read the code to fix it.
HyperFrames vs Remotion in one paragraph
The question everyone pairs with "what is HyperFrames" is how it stacks up against Remotion. Short answer: same job, different language. Remotion renders video from React components; HyperFrames renders from plain HTML. Both drive headless Chrome plus FFmpeg, both are deterministic, both run in CI, and both are built so agents can write the code. The licenses differ, HyperFrames is Apache 2.0 with no thresholds while Remotion uses a business-source license that charges teams above revenue limits, and Remotion has the more mature visual studio. We go deep on the trade-offs in HyperFrames vs Remotion.
Is HyperFrames free?
Yes. HyperFrames is released under the Apache 2.0 license, which means it is free to use, modify, and self-host, with no per-render fees and no commercial-use thresholds. Your only real costs are the developer time to author each scene and the compute to render it. We break down the license details and how they compare to Remotion's paid tiers in Is HyperFrames free?.
The third path: when you do not want to write code at all
Everything above assumes you, or your agent, will write HTML. For a lot of people that assumption does not hold. A founder shipping a launch video, a social manager making three hooks a week, a marketing team with a brand kit and a deadline, none of them want to clone a repo or read a stack trace.
For that job there is a third path: a Motion Agent. Instead of writing code, you describe what you want in plain language, and the system calls a branded, market-tested template, fills in your content, and exports a finished clip in minutes. With AutoAE that is the whole workflow, no HTML, no React, no render pipeline, starting at $9.90/mo or $2.90 per export. If your output is a deliverable rather than a pipeline, that is usually the faster route. If you specifically want HyperFrames but you are not a developer, start with HyperFrames for marketers.
FAQ
Is HyperFrames a video editor? No. It is a rendering framework. You author scenes as code and it renders them to MP4. There is no timeline UI to drag clips around; the closest thing is a browser preview that live-reloads as you edit the HTML.
Does HyperFrames use AI to generate video? No. It renders what a browser can draw, text, shapes, SVG, canvas, and animation libraries. The AI part is the coding agent that writes the HTML, not a model that generates the imagery.
Is HyperFrames free for commercial use? Yes. It is Apache 2.0, with no per-render fees and no commercial-use thresholds. You self-host and pay only for your own compute.
Do I need to know how to code to use HyperFrames? Effectively yes. An AI agent can write much of the HTML, but it is still code, and fixing a broken render means reading that code. If you want branded video without code, a Motion Agent is the no-code path.
What is the difference between HyperFrames and Remotion? HyperFrames renders video from HTML; Remotion renders from React. Both are deterministic, agent-friendly, and built on headless Chrome plus FFmpeg. The main differences are the authoring language, the license, and Remotion's more mature studio.
