How to Make AI Videos With HyperFrames (Free and Open Source)

Search "how to make AI videos" and every result on page one is a company selling you an AI video tool. That is not advice. That is a product page wearing a tutorial costume.

I make videos for a living. The B-roll in my last 20 uploads was made with HyperFrames, which is free and open source. So this is the actual workflow, the exact commands, and the parts where it still falls down.

What HyperFrames Is, And Why It Is Different#

HyperFrames is an open-source framework from HeyGen. It turns a coding agent like Claude Code into a video renderer.

Here is the distinction that decides everything, and the one most guides skip. HyperFrames is not a generative video model. It does not invent pixels and hope they look right. Claude writes real HTML and CSS, and HyperFrames renders that document to an MP4.

That one architectural choice is why it works for the videos most people actually need to make:

• Text is legible, because it is real text in a real font, not a model's guess at letterforms
• Brand colors are exact hex values, not approximations that drift between scenes
• The same prompt renders the same video twice, so you can iterate on one thing instead of re-rolling and praying
• It runs locally, so there is no credit meter and no per-clip cost
• You can read the source, because the project is just files on your disk

HyperFrames Tutorial: Install It First#

You need Node.js 20 or newer, and a coding agent. Claude Code or ChatGPT Codex both work, because HyperFrames does not care which agent is driving.

npm install -g hyperframes
hyperframes doctor

doctor is the important one. It checks your environment and tells you exactly what is missing. Nine times out of ten the answer is ffmpeg or a Node version below 20, and it will say so.

Then start a project:

hyperframes init my-first-video
cd my-first-video

You now have a folder with an index.html, a hyperframes.json config, and a fonts directory. That index.html is your video. Claude edits it, HyperFrames renders it.

How A HyperFrames Project Is Built#

Worth understanding even though the agent writes it for you, because it explains why you can control this thing so precisely.

A composition is one HTML document. Scenes are elements with class="clip". Timing lives in data-* attributes on those elements, so a clip that starts at two seconds and runs for four is literally marked that way in the markup. Animation runs on a single paused timeline that HyperFrames seeks through frame by frame.

That last part is the reason renders are deterministic. Nothing is running in real time and nothing is sampled on a whim. Frame 240 is computed the same way every single time.

Render it:

npx hyperframes render

The MP4 lands in renders/. A 60-second explainer takes a few minutes on a laptop.

How to Make AI Videos With HyperFrames, Step By Step#

Step 1. Write one sentence. Not a script, a subject. "Make a Vox-style explainer about why coffee prices went up." Resist art-directing. Everything you do not specify gets decided consistently, and consistency is the thing you actually want.

Step 2. Let it research and script. The agent gathers facts, writes a beat-mapped script, and maps each beat to a scene. This is where you intervene, if you intervene anywhere. Read the script and fix the claims. Everything downstream inherits them.

Step 3. Lock one visual language. The step people skip, and the one that decides whether it looks professional. Generating scenes one at a time gives you eight clips that each look fine and together look like eight clips. Palette, type scale and motion rules get decided once and applied to every scene.

Step 4. Render and check. Watch it. Not the keyframes, the actual video. Motion problems are invisible in stills.

Step 5. Add a presenter, optional. Motion graphics plus a voiceover is most of a video, not all of one. Adding a face is what makes it feel like a video with a person in it. This is the one thing the agent cannot generate itself, so it calls out to HeyGen for the talking-head A-roll and composites it in.

What It Actually Costs#

Being specific, because the guides ranking above this one are not.

• HyperFrames: free, open source, no per-video charge, runs locally
• Claude Code or Codex: whatever you already pay, usually $20/mo. Rendering burns tokens, not credits
• AI presenter: free tier to try, $24/mo billed yearly on the Creator plan
• A human motion designer, for comparison: $300 to $3,000 per video, days of turnaround

At four explainers a month, this replaces a line item that runs into four figures.

Where It Breaks#

The honest part. I have shipped enough of these to know the failure modes cold.

The voiceover is always the weakest link. Every first pass. It reads flat, stresses the wrong word, rushes the punchline. Always ask for a rewrite, shorter and more conversational, before you accept the render.

The last 20 percent is the hard 20 percent. Default output gets most of the way and then stalls exactly on the details that separate publishable from not. Spacing slightly off. A transition a beat too slow. No single prompt fixes that.

It does not do live action. Real people in real places is a camera's job.

Say the aspect ratio out loud. Ask for horizontal or vertical explicitly or you get both and waste a render.

Lint-clean does not mean correct. A composition can pass every check and still have two cards stacked on each other. Watch the video.

The Shortcut#

Everything above is doable by hand. I did it by hand for months, and what I learned is that the quality gap is not in the tools. It is in accumulated judgment about what breaks.

So I packaged that judgment into two Claude skills that sit on top of HyperFrames.

The free one makes Vox-style explainer shorts: research, script, narration, captions, render, from one sentence. It ships with a working reference project and the scene blueprints.

The paid one is for product videos and commercials: brand-kit sourcing, full ad sets in 16:9, 9:16 and 1:1 from a single run, hook variants for paid testing, and an 11-gate quality checklist built out of real client revision notes.

Watch It Happen#

Reading about it is one thing. Here is the full build on screen, including the failures and my honest criticism of the output.

Common Questions#

Which AI makes videos for free? HyperFrames is genuinely free and open source, and it renders on your own machine so there is no credit meter. You still pay for the coding agent driving it, which is probably a subscription you already have.

Can ChatGPT make AI videos? Not on its own. ChatGPT Codex can drive HyperFrames exactly like Claude Code does, because the instructions are plain markdown. HyperFrames does the rendering either way.

Is HyperFrames actually free? Yes. It is open source and rendering happens locally. HeyGen builds it and HeyGen is a paid product, but you are not required to use HeyGen to use HyperFrames. The only thing HeyGen adds is the AI avatar.

What is the difference between HeyGen and HyperFrames? People mix these up constantly. HeyGen is the paid platform for AI avatars and talking-head video. HyperFrames is the free open-source rendering framework HeyGen publishes. The HeyGen HyperFrames combination is what this post uses: HyperFrames renders the motion graphics, and HeyGen supplies the presenter on top. You can run HyperFrames on its own forever and never pay HeyGen a cent.

Do AI-generated videos make money? Same as any video. The format does not decide that, the topic and the quality do. What changes is your cost per video, which drops close to zero, so the math on a video that underperforms looks very different.

How long does one take? A 60-second explainer is about 20 minutes end to end, and most of that is you reading the script and asking for a better voiceover.

Start with the free skill and render the template. If that works, everything else will.

Related Reading#

• The Claude skill that makes these videos, which is this same workflow packaged so the agent runs every step
• AI Clone System: scale to 10 videos a week without filming, if the avatar side is what interests you
• AI Story Videos: the full pipeline from research to final edit, a generative-first approach to compare against this one
• AI stick figure animation for faceless channels, a lighter format that ships faster
• 30 videos in 30 days: what the data actually showed, on what happens when production stops being the bottleneck
• 3 SEO secrets for short-form video titles, because a video nobody clicks was still a wasted render