You describe the edit. Claude writes the code. Hyperframes renders the video. The result is a polished overlay without opening an editing timeline.
This is what the combination of Hyperframes and Claude Code makes possible.
How it works
Hyperframes turns video edits into code. You define the composition in TypeScript: what component goes on screen, when it appears, how it behaves. Claude Code writes that code from a plain-English description. The render command outputs a finished MP4.
The loop: describe the edit in a prompt, Claude modifies the Hyperframes files, preview in a browser, adjust if needed, render.
Step 1: Initialize a Hyperframes project
mkdir hyperframes-demo && cd hyperframes-demo
npx hyperframes init . --non-interactive --example blank
You get a blank project with agents.md, a CLAUDE.md, index.html, and hyperframes.json.
Step 2: Add the Hyperframes Claude skill
npx skills add agent/com.hyperframes
Select all skills from the prompt, then choose Claude Code as your target agent. Install per-project (recommended) or globally. When asked about the security risk, read it and decide for yourself. In this demo, we proceed.
The skills install into the .agent/skills/ folder. You can verify they're there before continuing.
Step 3: Install a component from the catalog
Go to hyperframes.heygen.com/catalog and browse the component library: captions, neon glows, social overlays, macOS notifications, YouTube lower thirds.
For this example, pick the YouTube lower third — it animates up from the bottom, shows your channel name and subscriber count, then slides back down.
Copy the install command from the catalog page and run it in your project terminal. The component lands in compositions/ as a ready-to-use template.
Step 4: Add your assets
Before prompting Claude, drop your source video and avatar into the assets/ folder. Hyperframes resolves asset paths relative to this directory.
Step 5: Prompt Claude
Open Claude Code in the project directory:
claude --model claude-sonnet-4-6
Then send this prompt:
Using /hyperframes, create a video using my input video from assets. Overlay the YouTube Lower Third composition on it. Set the channel name to "Renato Dinis AI" and subscribers text to "Renato Dinis AI". Use my avatar. Generate an HTML preview when done — wait for my approval before rendering.
Claude runs, modifies the composition files, and produces a browser-based storyboard. Open the HTML file in Chrome to preview.
Why preview before rendering? Rendering takes time and tokens. The preview costs nothing and lets you catch layout issues first.
Step 6: Iterate in the storyboard
In the storyboard, click any element to inspect it. Find something you want to change — say the Subscribe button color. Click "Ask agent" and write a targeted prompt:
Change the button background to YouTube red (#FF0000). The element is
.subscribe-buttonincompositions/youtube-lower-third.tsx.
The more specific you are about which element to change, the faster Claude makes the edit and the fewer tokens it burns. Copy the prompt back to your Claude Code session. The change applies in seconds.
Step 7: Render
When the preview looks right:
The preview looks good. Render using the /hyperframes CLI render command to generate the final video.
Renders at 30 FPS and 1080p by default. For 4K or 60 FPS, add those constraints to the prompt.
Tip: If you want to save tokens, run the render yourself instead of asking Claude:
npx hyperframes render
Same output, no Claude session needed.
What this changes
Timeline-based editing has one big cost: it doesn't scale. Every new video needs the same manual work. When edits are code, you run a script. Add 100 lower thirds by running the render 100 times with different inputs.
The same prompt that worked on one video works on the next. Claude doesn't need to relearn the composition. It just updates the variables and re-renders.
If you want to automate your video production pipeline or any other creative workflow, explore the AI UGC ad service or get in touch.