Make real videos from a sentence with HyperFrames

Start here

HyperFrames is a free, open-source tool from HeyGen that lets an AI agent build video by writing the same HTML, CSS, and JavaScript that runs a website. Their own line for it is "edit videos by vibe-coding." You never open a timeline or an effects panel. You describe the video in plain English, the agent writes the code, and your own computer renders the file. It runs locally, so it uses no HeyGen credits and costs nothing to render.

The reason that matters: motion graphics that used to mean an editor and a week now come out of a single message. Here is a 25-second product launch video I made for Melda. It took three prompts, no footage, and no editor.

Below is the tutorial. It starts at the very beginning, one line into an AI agent, and climbs to green-screen reactions and b-roll edits that used to take me hours by hand. You can stop at whatever rung is useful and come back for the next one.

1. Set it up

You drive HyperFrames through an AI coding agent. You do not need to write code, and you do not need the most expensive model. I run it two ways depending on what I have open.

With Claude Code on Sonnet. Sonnet is fast, cheap, and more than capable for video work, so there is no reason to burn Opus on it. Make an empty folder, call it something like my-videos, and open Claude Code inside it (the desktop app or the terminal both work). Then type this into Claude:

install hyperframes video editor

It will fetch the skill and, the first time, ask to install a couple of helpers like Homebrew and ffmpeg. Approve those. If you would rather run the exact command yourself, it is:

npx skills add heygen-com/hyperframes

With ChatGPT 5.5 in Codex. HyperFrames works just as well inside Codex, OpenAI's coding agent. Same idea: open Codex in an empty folder and ask it to install the HyperFrames editor. In Codex you kick off a video by starting your message with /hyperframes so the agent loads the right skill before it builds. Everything else in this guide is identical; the prompts are the same words either way.

That is the whole install. From here you are just texting an agent what you want to see.

2. Your first video

Start small so you can see the loop end to end. The move for a first prompt is to name three things and stop: what it is about, how long and what shape, and one visual idea. Here is the exact prompt I used:

I want you to make a 10 second portrait (9:16) explainer video explaining the health benefits of getting outside every day. Choose one strong animated visual metaphor that makes the idea instantly understandable. Keep it fast to render.

The agent writes a short plan, builds the scene, and renders. "Keep it fast to render" is doing real work in that prompt: it tells the agent to lean on flat shapes and one clean animation instead of anything heavy, so you get a file back in seconds instead of minutes. Here is what came back, untouched:

Once it is built, you preview it by asking the agent to launch preview, which opens it in your browser. If you like it, you export from there or just ask the agent to save the MP4. That is the full loop. Everything past this point is the same loop with more in the prompt.

3. Turn a website into a product demo

Once the basics click, point HyperFrames at a real URL and let it build a launch video from your actual brand. There is a workflow for exactly this, /website-to-video, that visits the site, reads its colors, type, and UI, and matches them. This was my first pass at a Melda demo:

I want you to use the /website-to-video, create a 25-second cinematic product launch video from www.melda.co. Capture the website's actual colors, typography, UI, and brand feel, then turn it into a premium Apple-keynote-style reveal with dramatic pacing, animated UI zooms, 3 big beneficial cards, clean voiceover, subtle sound effects, and a final CTA. Make it feel like this tiny website is announcing the future.

The first render was good, not great. The pacing was right and the brand read as Melda, but the intro did not say what I actually wanted it to say, and I wanted a vertical cut for stories and reels. So I went back with specifics instead of vibes. I gave it the exact copy I wanted on the opening cards, screenshots of the precise UI to feature, and asked for a 9:16 version. That second pass is this:

The lesson is worth sitting with, because it holds for everything harder than the beginner clip. This is not a slot machine where one prompt gives you a finished video every time. The agent gets you most of the way in the first pass; the last stretch is you handing it exact copy, real screenshots, and specific notes. The more complex the edit, the more fine-tuning it takes, and that is normal, not a failure. Vague in, generic out. Specific in, yours out.

4. Import the extra workflows

Everything past a plain explainer runs better on a purpose-built workflow. HyperFrames ships a set of them, each tuned for a kind of video, and you can pull them all in with one line:

install all the hyperframes workflows

The ones I reach for most:

• /product-launch-video and /website-to-video for promos and demos built from a real site.
• /faceless-explainer for topic videos with no footage, invented visuals per scene.
• /motion-graphics for short, motion-first units: a stat count-up, a logo sting, an animated diagram.
• /embedded-captions and /talking-head-recut for dressing up footage you already shot.

Naming the right workflow at the front of a prompt is the single biggest quality jump you can make, because it loads a whole set of defaults the agent would otherwise have to guess. The rest of this guide leans on them.

5. Green-screen reactions with motion graphics

This is where it gets fun. One of my favorite formats is a reaction: I read something interesting, react to it on camera, and the thing I read plays full-frame behind me while titles and cards animate on top. It is the highest-performing shape I make, and it used to be a real edit. Here is one, reacting to a research method a creator posted about:

The easiest way to make one of these is to work in this order:

1. Script it first. Write what you are going to say, tight. The reaction reads better when you know your three points going in.
2. Record the a-roll. Film yourself reacting, on a green screen if you have one, or just a plain wall. Do not worry about stumbles; the agent cleans those.
3. Grab the backgrounds. Screenshot the article, post, or paper you are reacting to. If you want moving footage behind you instead, record that too.
4. Upload it all with one prompt. Hand the agent your a-roll, the screenshots, and the prompt below. It keys you out, cleans your take, drops in the title and motion graphics, syncs captions, and lays the articles behind you.

Here is a copy-paste prompt. The bracketed parts are placeholders; swap in your own footage names, titles, and copy. The a-roll cleanup language is borrowed straight from the workflow that does it best:

/greenscreen Make a [LENGTH]-second vertical (1080×1920) green-screen reaction video.

Footage attached:
- aroll.mp4: me reacting on camera. Key me out cleanly and keep me as a cutout on the lower third of the frame.
- background-1.png, background-2.png: the two things I'm reacting to (e.g. the original paper and the post that surfaced it). Use these full-frame behind me.
- [optional] screen-recording.mp4: [what it shows]. Play it behind me where I point at it.

Clean the a-roll first: transcribe for word-level timing, then clean the take: cut false starts, stutters, repeats, and filler, and trim pauses over 0.1s, all transcript-located, seamless, audio and video together.

Title card (0–2s): "[YOUR TITLE, e.g. This Free Method Turns Claude Into a PhD Researcher]" in bold display type, then hand off to me.

Beats: cut a full-frame article or screenshot behind me as I land each point, and return to a clean background between points. When I name a tool or a number, pop a small labeled card next to it. [Optionally list your 3 beats here.]

On-screen copy, in quotes: "[stat or phrase 1]", "[phrase 2]".

Captions: word by word, white, sentence case, in the lower safe zone, never over my face.

CTA (last 3s): "[Comment KEYWORD and I'll send it]" (put a small "for FB / IG only" tag on the comment line) plus "[follow @handle / yoursite.co/resources]".

No stock footage. Keep any background music to a whisper under my voice.

This is the whole point of the format: you record footage of yourself reacting to something you read, show it behind you, and let the agent do the title, the cleanup, the captions, and the key. The reason to script and screenshot up front is that once all the context is uploaded together, the first pass lands much closer to done.

6. The six-part prompt (advanced)

Once you want a specific look rather than a happy accident, the best guidance comes from HeyGen themselves. Their "Anatomy of a Prompt" post breaks a good video prompt into six decisions. Make all six and the agent builds what you pictured. Skip one and the agent decides for you. Credit to them for the framework; here is the short version.

1. Route. Start with the right workflow: /motion-graphics, /product-launch-video, whichever fits. This is the first word of your prompt.
2. Spec. How long and what shape. "6-second, square," or even just "for TikTok," is enough.
3. Beats. What happens on screen, second by second.
4. Copy. Your exact words, in quotes.
5. Technique. Name the moves you want: a squash-and-settle, a soft shadow, an odometer count-up.
6. Negatives. Say what to leave out: no narration, no stock footage, no media files.

Written back to back, those six collapse into one plain paragraph you could text from your phone. The route is the first word, the spec is the first sentence, the beats are the middle, your quotes stay quoted, and the negatives close it out.

For describing anything on screen, HeyGen's "beat formula" keeps you from being vague. For each element, make five quick calls in one sentence: what it is ("an oversized black Mac cursor"), what it does ("glides in and rests on the folder"), where it sits ("from the bottom-right"), how it looks ("oversized, black, macOS-style"), and when ("Beat 1, 0 to 2s"). Five calls, no jargon, and the agent stops guessing.

Three starter prompts, all under ten seconds

These follow the six-part structure and stay short on purpose, which is exactly where HyperFrames one-shots best. Copy one, swap the words, and run it.

/motion-graphics Make a 6-second 1080×1920 video on a deep-navy background with a faint blue glow. Beat 1 (0–2s): the number "0" sits centered in bold sans, then counts up fast to "700K" and settles. Beat 2 (2–4s): the label "followers from one habit" fades in beneath it. Beat 3 (4–6s): a thin blue line sweeps left to right under the number. Copy, in quotes: "700K", "followers from one habit". Technique: fast odometer count-up, ease-out settle, one subtle glow pulse on the final number. No narration, no images, no stock footage.

/motion-graphics Make a 5-second 1080×1080 video on warm paper-cream. Beat 1 (0–2s): the word "PROMPT" types on in monospace, one letter at a time. Beat 2 (2–3s): a purple cursor glides to the end and clicks. Beat 3 (3–5s): "PROMPT" flips up and is replaced by "VIDEO." in bold display type as a purple play triangle scales in beside it with a soft squash-and-settle. Copy, in quotes: "PROMPT", "VIDEO.". Technique: monospace type-on, cursor click, vertical flip, squash-and-settle on the play button. No narration, no media files.

/motion-graphics Make an 8-second 1080×1920 explainer on a soft white background with faint blue blobs. Beat 1 (0–3s): three cards labeled "Idea", "Hook", "Script" rise and fade into a vertical stack, each with a soft shadow. Beat 2 (3–6s): a glowing line draws down connecting them top to bottom. Beat 3 (6–8s): the stack slides into a rounded "Post" button that pulses once. Copy, in quotes: "Idea", "Hook", "Script", "Post". Technique: staggered rise-and-settle, animated connector draw, one pulse on the button, accent color #2563eb. No narration, no photos, no live action.

Where it hits a wall

Two honest limits, both from HeyGen and both true in my experience. First, hand-drawn characters and painterly texture cannot be carried by words alone; text underdetermines a drawing. Steer to flat geometric shapes ("rounded-geometric figure, circle head, no facial features") or generate the artwork first and hand it over as a file. Second, real footage and photos have to arrive as files, with their path in the prompt; the agent cannot conjure a photo of you or your product. And the more layered and longer the piece, the more rounds it takes. Short and shape-based is where a single message lands on the first render.

7. Overlaying b-roll on a-roll

The last and most involved format is a real talking-head edit: your face as the base track, with b-roll and screenshots cut in on top to sell each point. This is the "4-Year Side Hustle Story" cut I ran through HyperFrames end to end.

The thing that makes this work is doing it one stage at a time, with a review before you move on, instead of asking for the whole edit in one shot. Each stage is its own decision, and getting the base right before you decorate it saves you from redoing everything. Here is the pipeline I run.

Stage 1: clean the a-roll

Everything times against the cleaned take, so this comes first and gets its own review. The agent transcribes your footage for word-level timing, then cuts the retakes, false starts, filler words, and dead air, trimming every gap of about a tenth of a second or more, and re-transcribes the result. That new transcript is the clock every later stage reads from. Do not add a single graphic until this base cut is approved.

Stage 2: match b-roll by meaning

This is the craft stage, and the rule that matters most: pick b-roll by the meaning of the line, not by keyword. "The grind of editing at 2am" should pull a clip of late-night editing, not whatever file has "grind" in its name. A few rules I hold to:

• Your face is home base. Cut to b-roll only when it earns the moment: proof, process, or emotion. Your thesis line and your pivots stay on your face, where the viewer reads you.
• Screenshots overlay, footage replaces. A screenshot or screen recording sits centered on top of your visible face, not full-frame, so it reads as "I just pulled this up." Life b-roll can take the full frame for a beat.
• Short, muted, vertical. Life clips run 2 to 3 seconds, always muted, starting a few seconds in to skip the ramp-up. Prefer vertical footage so it fills a 9:16 frame without stretching.
• Rhythm. Something visual changes every 2.5 to 6 seconds, never more than 7 static. Do not front-load all the b-roll and then leave a talking wall for the back half.
• Sync on the word. When you name a tool, a brand, or a number, land the matching visual on that exact word. In this cut the Claude and OpenAI logos hit precisely on "Anthropic" and "ChatGPT."

The naming system that lets the agent find b-roll

The agent can only pull the right clip if your library is named for what each clip means, not "IMG_4021.mov." I name every file subject-context_take_orientation, so a glance tells you the moment and the shape:

typing-keyboard_take-01_v.mov
speaking-stage_contentlab-take-01_v.mov
reacting-frustrated_take-01_v.mov
desk-workspace_topdown_v.mov

The _v, _h, or _sq suffix flags vertical, horizontal, or square so the agent knows what will fill the frame. Then keep a small manifest.json next to the clips, one entry each, describing what the clip means and tagging it. The agent queries this file instead of browsing the folder:

[
  {
    "file": "reacting-frustrated_take-01_v.mov",
    "orientation": "v",
    "duration_s": 6,
    "desc": "burnt out at the desk, head in hands, done with it",
    "tags": ["emotion", "frustrated", "turning-point"]
  }
]

With that in place, "the moment I almost quit" resolves to the right clip by its desc, and you never have to remember filenames.

Stage 3: captions, then music

Captions come from the assembled transcript, never the original, so they match the cut exactly. Keep them white, sentence case, about two words at a time, low in the frame in the safe zone, never on your face. Then the background music. I mix it at roughly 1% under my voice, a bed you feel more than hear, and fire a single soft mouse-click the frame each screenshot appears, which sells the "I just opened this" feel. For royalty-free music and sound effects, pixabay.com is the free library I pull from; it also has free stock footage if you need a b-roll clip you did not shoot.

The b-roll pass prompt

Once your a-roll is cleaned and your library is named and manifested, this is the prompt for the b-roll pass. Give it the cleaned cut, the transcript, and the folder:

Here's my cleaned a-roll (aroll-clean.mp4) and its word-level transcript (transcript.json). My b-roll is in /b-roll with a manifest.json where each clip has a desc and tags. Build a 9:16 edit.

Sequencing and timing:
- The talking head is home base. Cut to b-roll or a screenshot only when it earns the moment: proof, process, or emotion. My main claim and my pivot lines stay on my face.
- Pick b-roll by the MEANING of the line, matching the manifest desc and tags, not by filename. Skip weak matches; one strong insert beats two mediocre ones.
- Life and process b-roll: 2–3s, muted, starting a few seconds into the clip. Screenshots and screen recordings: center them as an overlay on my visible face, not full-frame, and fire a single soft mouse-click the frame each one appears.
- Rhythm: something visual changes every 2.5–6s, never more than 7s static. Don't front-load all the b-roll.
- Sync tightly: when I name a tool, brand, or number, land the matching visual on that exact word.

Then add captions from the transcript (white, ~2 words at a time, lower safe zone, never on my face) and a background music bed at about 1% under my voice. Show me a preview before you render.

Run these stages in order and gate each one, and a late change only re-runs what comes after it. Clean the take, approve it. Match the b-roll, approve it. Then captions, then music. That sequence is the difference between an edit that feels designed and one that feels like a prompt got lucky.

Go make one

Start on the first rung. Install it, type the ten-second explainer prompt, and watch a real video come out of one sentence. Then climb: point it at your own site, react to something you read, cut a talking-head edit. The tool is free and runs on your machine, so the only cost is the ten minutes it takes to make the first one. Go make it.