How to Make a Video with HyperFrames: A Step-by-Step Guide

This is the short version - a one-page, do-it-now guide to going from nothing to a finished MP4 with HyperFrames, the open-source "video as code" framework from HeyGen. For the why and the deeper background, read HyperFrames: Make Real Videos by Writing HTML. This page is just the steps.

What you need first

• Node.js 22+ and FFmpeg on your PATH (FFmpeg does the encoding).
• An AI coding agent - Claude Code or the Codex app. It writes the composition for you.
• Any raw material you want in the video: footage, a voiceover, a logo, screenshots. All optional - you can also do it purely with on-screen graphics.

Step 1 - Install the skills (once)

This teaches your agent the whole HyperFrames workflow. In a terminal:

• npx skills add heygen-com/hyperframes (add --all for the full skill set: registry blocks, captions, media tools, animation adapters).

Step 2 - Scaffold the project

• npx hyperframes init my-video - creates the project folder, an starter index.html, and copies in any media you point it at.
• cd my-video and you are ready to author.

Step 3 - Drop in your raw material

• Footage: put your clips in the project (AirDrop your iPhone video, or download royalty-free stock). They become <video> elements on the timeline.
• Voiceover: record a take on your phone and drop it in, or generate narration with the built-in text-to-speech. Run npx hyperframes transcribe to get word-level timestamps for captions.
• Brand: add a design.md with your colors and fonts and a fonts/ folder, so everything renders on-brand.

Step 4 - Describe the video to your agent

Open the project in Claude Code or Codex and just say what you want - for example: "A 30-second product launch video: open on the hero shot, three feature cards, a pricing beat, end on our logo. Use my brand colors and the voiceover I dropped in." The agent writes and edits the HTML composition - scenes, timing, animation, captions, transitions.

Step 5 - Preview as you go

• npx hyperframes preview opens HyperFrames Studio with frame-accurate scrubbing and hot reload - every edit updates instantly.

Step 6 - Check it

• npx hyperframes lint validates the structure and timing.
• npx hyperframes inspect catches text spilling off-screen or overlapping.

Step 7 - Render

• npx hyperframes render produces a standard MP4 (1920x1080 at 30fps by default). Flags let you change frame rate, quality, or export WebM with transparency.

Step 8 - Put it on your site

The output is an ordinary video file, so embed it like any other clip - host it and drop in a normal HTML <video> tag with a poster image. Because the source is code, it lives in version control: when your brand or copy changes, you re-render instead of re-shooting.

That is the whole loop

Install, scaffold, add material, describe, preview, check, render. We used exactly this process to build the sizzle reel on our main HyperFrames write-up - real footage, a founder voiceover, an HTML product demo, and our logo, all in one file. If you want us to wire HyperFrames into your team's workflow or build a batch of branded videos, book a free call.