With video models like Kling or Veo, you roll the dice. If you don't like a scene, you generate again, pay again and hope the rest stays the same.
HyperFrames works differently. Claude writes animated HTML, a headless browser plays the page, records it frame by frame, and FFmpeg turns it into an MP4. Because every frame comes from code, you say "bigger font, green bars", and exactly that changes. It costs a few tokens, not a new generation run.
HyperFrames is open source, made by HeyGen and available under the Apache 2.0 license on GitHub.
You need three things:
node -vffmpeg -version, install on a Mac with brew install ffmpegIf something's missing, just tell Claude Code: "Check whether Node 22 and FFmpeg are installed and install whatever is missing." It asks before installing anything.
In the terminal:
npx skills add heygen-com/hyperframes
This gives Claude Code the HyperFrames skills: how a composition is structured, how timing and animation work, how to render. Alternatively, give Claude the GitHub URL and write "Set up HyperFrames for me".
Then restart Claude Code once so the skills are loaded.
Create an empty project folder and open Claude Code in it. Then describe what the video should achieve. Not a step-by-step recipe with seconds and effects, but goal, audience and look. Claude plans the rest.
A prompt to start with:
Build me a 15-second vertical video (1080x1920) with HyperFrames.
Goal: Explain in three steps how my newsletter works:
1. You sign up, 2. every Friday you get one workflow,
3. you rebuild it in 10 minutes.
Audience: marketers and founders, not technical.
Look: dark background, one accent color (orange), big clear type,
calm motion, no wild transitions.
Max 6 words per on-screen text.
Check the result yourself before you show it to me.
The last line matters. Claude can look at frames as images and catch issues like clipped text before you ever see them.
For the preview:
npx hyperframes preview
This opens a studio in your browser where you play and scrub the video. Now comes the real advantage. Instead of regenerating, you tell Claude what should change:
Claude changes exactly that spot in the code and leaves the rest as it was.
When you're happy:
npx hyperframes render
You get an MP4 you can upload right away. Run npx hyperframes check first, it scans the composition for common problems like missing files or low contrast.
I don't let Claude animate freely every time. For my reels I built a small library: simplified interfaces (chat, list, inbox), terminal and Git repos, and explainer graphics (flow, comparison, number). For each sentence in a reel, Claude picks the matching module and only fills in the content.
That gives me two things. Every insert looks like it came from the same studio, and the results are predictable because Claude doesn't reinvent the wheel each time. If you make videos regularly, this is the next step after your first one: have Claude turn your best results into a skill of your own.
Sources:
No spam, unsubscribe at any time
