Yuval Avidani
Author
Turns out HeyGen, the company everyone knows for talking avatars, quietly launched a completely different tool: one that generates video from HTML code. It's called HyperFrames, and no, it's not the avatar thing. HyperFrames is an open-source framework where an AI agent writes HTML, CSS and JavaScript, and gets a finished MP4 file at the end. To me this is one of the most interesting things to come out recently, because this is exactly how I've been working for a while now: I write a web page, and I get a video back.
Let's break this down slowly, because there are a few layers here worth understanding.
What is video-as-code, and why should we care
Think about how you build a video today. You open editing software, drag clips onto a timeline, manually adjust every element with your mouse. That's a visual timeline, and it works great for humans. But a language model, the LLM that generates our content, doesn't see a mouse and doesn't see a timeline. It sees text, and it's really good at writing text: it writes code all day long.
And that's exactly the idea behind HyperFrames. The composition, meaning the video itself, is just a plain index.html file. No React, no proprietary timeline, no secret format that only the company understands. There's an HTML page, and inside it elements with two simple attributes: data-start, which says when an element appears, and data-duration, which says how long it stays. That's it. Everything's in code, everything's text, everything's something a language model can naturally generate.
The cool part is that this is exactly why it fits working with AI agents. An agent doesn't need to "understand" software with a hundred buttons, it just writes HTML like it writes everything else.
How an HTML page turns into a video file
Now for the part that sounds like magic but is actually very simple once you get it. How do you take a web page, a living, moving thing, and turn it into a stable MP4 file?
Here's the process: Chrome runs in the background (headless Chrome), jumps to each frame separately in a deterministic way, and then FFmpeg encodes the frames into an MP4 file. Let's unpack these words, because each one matters.
"Headless Chrome" is simply a Chrome browser running without a window, without a screen. Think of it as Chrome working behind the scenes, taking screenshots on command. Instead of you looking at the page, it looks at the page for you and takes the picture.
"Deterministic" is an important word here. It means that if you run the same code twice, you get exactly the same video, frame for frame. No surprises, no randomness. Think of it like a recipe: same ingredients, same order, exact same cake every time. This is critical when working with agents, because we want a predictable outcome, not a lottery.
"FFmpeg" is the old, free tool everyone in the video world knows, the one that takes a pile of images and stitches them into a single video file.
There's another clever feature here worth stopping on. When you bring an existing video into the composition, FFmpeg pre-splits the clip into JPEG frames and injects them as img elements, bypassing Chrome's video decoder entirely. Why does this matter to us? Because a browser's video decoder is exactly where things tend to break: timing that jumps, a missing frame, sync that drifts. Instead of relying on it, every second of video gets turned into a sequence of still images, and each image sits exactly in its place. That's what gives you the stability.
What can you actually build
The obvious question: if it's just HTML, isn't it limited to text and rectangles? Not at all. HyperFrames supports GSAP by default, plus Lottie, CSS animations, Three.js and Anime.js. Let's sort these terms out, because if you're not from the field it's easy to get lost.
GSAP is the most widely used animation library on the web, it's what moves elements smoothly. Lottie is lightweight vector animations, exactly like the ones I use in my articles here. Three.js is a library for 3D in the browser, meaning you can build real 3D scenes. Anime.js is another animation library. Bottom line: anything a modern browser can draw, this framework can turn into video.
In terms of requirements, it's not complicated either. You need Node.js version 22 or higher, and FFmpeg installed. The rest of the work happens through a simple command-line interface with three main commands: hyperframes init to start a project, preview to see a preview, and render to produce the final video.
Why it's not the avatar, and why it's interesting anyway
I want to sharpen a point that's easy to get confused about. HyperFrames is a separate framework from HeyGen's avatar product. It's not a talking head generating you a video of a virtual presenter. It's an engineering tool that takes code and spits out an MP4. Two completely different things from the same company.
And what makes this story interesting is the license and the numbers. The tool is released under an Apache 2.0 license, no render credits, no seat limits, no commercial tiers, and no pay-per-render. Let me explain why that's a big deal. A lot of cloud video tools charge you for every minute you render, or limit how many users can touch a project. Here, you run everything locally on your own machine, and it's free and open source. Apache 2.0 is a permissive license that also allows commercial use, meaning you can build a product on top of this without worrying.
The project ships with 20 agent skills, meaning built-in capabilities that teach the agent how to build specific things. The repo sits at around 32.5K stars on GitHub, and version 0.7.22 came out on June 30, 2026. In terms of market positioning, HyperFrames competes with Remotion, the veteran framework for producing video from code. I won't say one's better than the other, it's just a different approach to the same problem.
Bottom line, as I see it
To me, the story here isn't just another video tool. The story is a way of working that matches how models think. I've been working this way for a while now, in the articles you read here, in teasers, and in presentations: I describe in text what I want, HTML code gets written, and a video comes out. It feels natural because it uses a language that both me and the model are fluent in, instead of fighting with a graphical interface.
That said, let's not get carried away. This is a tool for people who are comfortable with code and the command line, it's not an app with one big red button. You need Node and FFmpeg installed, and you need to start thinking of a video as a web page, which is a mental leap that isn't for everyone. Also, right now this is version 0.7, meaning before 1.0, so there's still a way to go.
What fascinates me most isn't what the tool does today, but what it signals: when video turns into code, suddenly an AI agent can build it end-to-end without a human hand on the mouse. The question that stays with me is, if tomorrow every video can be written in code by an agent, what does that mean for the people who edit video with a mouse all day?