How to make a product launch video with Claude Code and HyperFrames (HTML to MP4)

#ai #video #javascript #tutorial

Most "AI video" tools generate pixels you cannot edit. If you want a product launch video where the text is exactly your copy, the colors are your brand and you can change one word next week, you want the video to be code.

HyperFrames from HeyGen does that. A video is an HTML file with a few data attributes for timing and tracks. The renderer seeks every frame in headless Chrome and encodes with FFmpeg, so the same input always gives the same MP4. Because the format is plain HTML, coding agents are good at writing it, and the project ships skills that teach Claude Code, Codex, Cursor and Gemini CLI the production loop.

This guide gets you from zero to a rendered launch video with Claude Code, then shows the manual CLI route.

Before you start

Node.js 22 or newer
FFmpeg on your PATH
Claude Code (or Codex, Cursor, Gemini CLI or another agent that supports skills)

Step 1: install the HyperFrames plugin in Claude Code

claude plugin marketplace add heygen-com/hyperframes
claude plugin install hyperframes@hyperframes

Optional but handy: inside Claude Code run /plugin, pick Marketplaces, then hyperframes, then Enable auto-update.

Using Codex, Cursor or another agent instead? Run this once from your video project folder:

npx hyperframes skills update

That installs the core set: /hyperframes (the render contract, read first), /hyperframes-cli, /hyperframes-registry (about 450 ready made blocks) and /media-use (music, voiceover, images, transcripts).

Step 2: ask for the video

Load the router with /hyperframes:hyperframes and give the agent your URL and a length. A prompt that works well:

Using HyperFrames, make a 30 to 45 second product launch video from https://your-site.com. Show me the storyboard before rendering, then render the MP4 and list the scenes and any assets you pulled from the site.

Asking for the storyboard first matters. It is cheap to change a scene list and slow to re-render.

For a quick test, the README's own example prompt is small enough to finish in minutes:

Using /hyperframes, create a 10-second product intro with a fade-in title, a background video, and subtle background music.

Step 3: preview, fix, render

npx hyperframes preview      # preview in browser with live reload
npx hyperframes render       # render to MP4

Ask for changes in plain words ("make the title hold one second longer", "swap the green for our brand blue"). Each change is an edit to HTML, so it is precise and reviewable in git.

The manual route, no agent

npx hyperframes init my-video
cd my-video
npx hyperframes preview
npx hyperframes render

Need a transition, a chart or a social overlay? Pull a block from the catalog as editable source:

npx hyperframes add flash-through-white   # shader transition
npx hyperframes add data-chart            # animated chart

What the HTML looks like

A clip is just an element with timing attributes:

<video class="clip" data-start="0" data-duration="6" data-track-index="0" src="intro.mp4" muted playsinline></video>

Animations use any seekable runtime: GSAP, CSS, Lottie, Three.js, Anime.js or WAAPI. Register a paused GSAP timeline on window.__timelines and the renderer scrubs it frame by frame.

Why this beats prompting a video model

Deterministic. Same input, same frames. You can render in CI and diff outputs.
Editable. Next month's price change is a one line HTML edit, not a regeneration.
No React requirement. Remotion is the closest alternative and is excellent, but it is React components plus a bundler; HyperFrames is an index.html that plays as is. It is also Apache 2.0, with no per-render fees.

Honest caveats

Rendering is local and CPU heavy; long 1080p videos take a while on a laptop. There is an AWS Lambda path for bigger jobs.
The agent pulls copy and images from your site, so check every claim on screen before you publish.
Some /media-use options (voiceover, avatar, generated video) use HeyGen services; the free local tools cover music, captions and cutouts.