My first brand film in code took about 2 hours for 30 seconds of video (a reconstructed figure, not a measured one). The fourth took 40 measured minutes. What changed, in my case, was not the model or my patience: I stopped doing by hand what HyperFrames already does well and put automatic checks where the same things kept failing.
This is the first "repo of the week": a repository I actually use, with what I measured and what bit me. HyperFrames is a HeyGen project, Apache 2.0, that turns an animated HTML page into an MP4. Here is the repo: github.com/heygen-com/hyperframes. What follows is in my own words and with my own numbers, not theirs.
What it actually does
Think of a video as a web page that moves. You write HTML and CSS for what you see, an animation library for when and how it moves, and HyperFrames does one thing that sounds small and isn't: it walks through that page frame by frame, takes a picture of each instant and stitches them into an MP4. Because the page moves by time and not by a running clock, frame 300 is always the same frame 300. That is called a deterministic render, and it is what lets a coding agent check its own work.
For an agency like mine that becomes something concrete. A launch video, an explainer or an intro stops being a project in an editor and becomes a folder of text: changing a client's name, a color or a sentence is editing one line and rendering again. There is no timeline that falls apart when you move one thing.
The repo also ships skills, which are instructions your agent reads before it writes. With npx skills add heygen-com/hyperframesthe agent learns how a composition is structured, what can be animated and what can't. The daily command is npx hyperframes, with subcommands to create, check, preview and render. It needs Node 22 or higher and ffmpeg.
Sources: HyperFrames repository (HeyGen), Apache 2.0 license; its entry in the Prompt13 catalog
A fact so I don't mislead you: HeyGen offers hosted rendering and authoring. The framework is open and runs on your machine. I don't use the hosted part.
Your first video, step by step
This is the loop I follow every time, in the order that matters. Each step is one action and almost all are commands of the repo itself:
- Create the folder: npx hyperframes init my-video. It comes with starter templates. The command is the same for you as for an agent.
- Write the composition in HTML. This is where the agent works, with the skills already loaded.
- Check the structure with lint. In my use it flags pieces with no identifier, layers overlapping in time and animations that were never registered.
- Check the visuals with inspect. In my use it walks through the page's time and warns you if text spills out of its box or off the frame.
- Watch it with preview before spending time on the final render.
- Render with render. Only here does the MP4 come out.
The rule that saves me the most time: lint and inspect before preview, always. When the agent gets it wrong, it is almost never the idea. It is text spilling off the screen in the vertical version or two layers fighting over the same second, and those two commands see that in seconds, without rendering.
Four of my videos, measured
I started on September 29 with a 30-second film for SVDIGINET: 11 scenes in HTML, animated with GSAP and with one 3D scene in three.js, in horizontal and vertical. The versions were HyperFrames 0.6.22, GSAP 3.15.0 and three 0.186.1, pinned locally so the result doesn't change with an update. Afterwards I turned what I learned into a repo of my own, motion-forge, with a command line and automatic checks.
| Video | Length | Wall clock | What happened |
|---|---|---|---|
| Film 1, SVDIGINET brand | 30 s | about 117 min (reconstructed) | Six agents in parallel, checked by hand. The time comes from file timestamps, not a clock, and I dispute it myself. |
| Film 2, recut | 18 s | 38 min | It came out fast and was the wrong deliverable: I wanted an adjustment to the previous reel, not a new one. |
| Film 3, Google profile launch | not recorded | 35 min | First clean measured run: 32 min for the first version, with one critic round, and 3 min for the second. Spanish version. |
| Film 4, a client video | not recorded | 40 min | Made with brag-slim. 17 of 17 automatic checks and one critic round, which caught a flash when the star count reached 3.3. |
The calculation that matters most to me: from 117 to about 35 minutes is 82 minutes less per film, with the caveat that the first figure is reconstructed and they are different films. And there is another trap in that math, which film 2 shows: going from 117 to 38 is worth nothing if you made the video that wasn't the one you needed. That is why the first step of my skill is now deciding whether it is a new film or an adjustment to an existing one.
There is a fourth use that isn't a film. On October 9 I published the first episode of a "Top N" video series made from text alone: a locally generated voice, measured captions and scenes in HTML. A full episode takes about 30 minutes of clock time, plus 5 minutes for every extra repo you mention. It went to YouTube and as a vertical Short. Same technique, different rhythm.
Five traps I fell into
HyperFrames does what it says. What it doesn't tell you is where your composition breaks without making noise. These five cost me real time, and several are now automatic checks in motion-forge:
| Trap | What you see | What I do now |
|---|---|---|
| Fonts that don't load | Text comes out in Helvetica with no error at all | I declare the font locally on the root page; a check verifies it |
| The darkest color lightens or dims | My black #0A0A0A comes out as #050808 in the 3D scene | Transparent canvas: the HTML supplies the background |
| Scenes linked with shortcuts | inspect cannot read them | I use check, which can |
| Rules the lint forbids | A typeface inside the scene and animating position with left or top | Typeface only on the root; I animate with transforms |
| Two root pages | The tool only accepts one root index.html | One root; scenes live in separate files |
node(--version)
v22.23.1
ffmpeg(-version)
ffmpeg version 7.1.1
npx(hyperframes --version)
0.8.154
Why I stopped using Remotion
Before HyperFrames I used Remotion, which writes videos in React. I made a 10-second test video with it (exported on September 14) and a promo, and then I dropped it. I didn't write down the reason that day, so I won't make one up. What I did leave in writing is this:
| HyperFrames | Remotion | |
|---|---|---|
| How you write it | HTML, CSS and an animation library | React |
| License | Apache 2.0 | Company license for commercial use |
| My reading: built for | An agent writing and checking it | Teams that already live in React |
| My notes | Aug 14 to Oct 13. Active | Jul 12 to Oct 13. Dropped |
My reading, which is mine and which I didn't measure: for a coding agent, HTML is easier to write well than a React component, because there is less to remember.
What I haven't measured
This is what I still don't know:
- Whether the audio sounds good. I generated it in code and no person has listened to it on the brand films.
- Whether the render is bit-for-bit identical. My determinism tests did not come out bit-exact on every scene.
- What a new brand costs: my recipes are tuned to one color and one logo, and changing brand means measuring again.
- How long it takes someone who is not me. My 35 to 40 minutes include that I already have the toolbox built.
- What happens when HyperFrames bumps a version. Today npx brings me 0.8.154 and my first film used 0.6.22: that is why I pin versions.
Try it on your Mac
Before falling for the idea, check that your machine can handle it. Paste this into Claude Code. It does not render or install anything globally:
Before touching anything, tell me whether this Mac can render a video with HyperFrames: the Node version (it needs 22 or higher), whether ffmpeg is installed, and whether `npx hyperframes doctor` passes. Then create a test folder with `npx hyperframes init test`, run lint and inspect, and tell me what they said. Do not render yet and do not install anything globally.
If it passes, the next step is the loop above with a blank template and a sentence of your own. If you want to see how I think about long sessions with agents, read what my sessions cost me. And if this format is useful to you, I pick the next repo the same way: one I use, with my numbers.
