HyperFrames: turn any website into an MP4 video

HeyGen quietly shipped a CLI called HyperFrames that turns a URL into an MP4. It scrapes the site for screenshots, fonts, colors, and assets, then builds an HTML composition you (or an AI agent) can edit and render to video with headless Chrome and FFmpeg.

I pointed it at aisensei3000.com and had a polished 18-second product video — 12 beats, hero scenes, slam cuts, feature cards, CTA — in about ten minutes. This guide is the recipe.

HyperFrames is a Node CLI plus a set of AI skills (for Claude Code, Cursor, Codex, etc.) that runs a 7-step pipeline: capture website → extract design tokens → write a script → generate voiceover → build animated HTML beats → render frames → encode MP4.

The composition is just an index.html with GSAP timelines. You can preview it live in the browser, lint it, and render to MP4 or transparent WebM. Source and skills live at github.com/heygen-com/hyperframes.

Two installs. The first wires the AI skills into your agent of choice (Claude Code, Cursor, etc.) so you can prompt with /hyperframes. The second is the CLI itself, which you run with npx — no global install needed.

# 1. Install the skills (one time, picks up your installed agents)
npx hyperframes skills

# 2. Sanity check the CLI
npx hyperframes --help

If you don't see the skill in your agent after install, restart the agent session. For Claude Code specifically, you can also run npx skills add heygen-com/hyperframes.

Start by capturing the site you want to turn into a video. Capture pulls screenshots at every scroll position, downloads images and SVGs, extracts the color palette and fonts, and writes a CLAUDE.md describing the result.

mkdir my-video && cd my-video
npx hyperframes capture https://aisensei3000.com

On my run that produced 11 scroll screenshots, 13 assets, the full color palette (#131E39, #C22879, washi pinks and blues), and the three fonts the site uses (Baloo 2, Klee One, M PLUS Rounded 1c). All written to captures/aisensei3000-com/.

Then scaffold an empty composition project and copy your captured assets in:

npx hyperframes init aisensei-video --yes
cp -r captures/aisensei3000-com/assets aisensei-video/assets
cp -r captures/aisensei3000-com/screenshots aisensei-video/screenshots
cd aisensei-video

Now hand it to your AI agent. The prompt I used in Claude Code:

Using /hyperframes, build an 18-second product video from the capture in ../captures/aisensei3000-com.
Use the captured fonts, colors, and assets. 12 beats — fast cuts.
Hero, three feature scenes (one per how-it-works asset), a "meet the senseis" card row, and a download-for-Mac CTA.
Throw in a few full-screen "slam" cuts with single words ("Ask.", "See.", "Learn.", "Sensei.") in between scenes.

The agent writes one index.html file. Every visible scene is a div with three required data attributes that the framework uses to schedule it:

<div
  class="scene clip"
  data-start="3.0"      // when this scene starts (seconds)
  data-duration="1.6"   // how long it stays on screen
  data-track-index="1"  // track lane (use 1 unless layering)
>
  <h1 id="b3-t">She <span class="hl">points.</span></h1>
</div>

Animation is pure GSAP, declared at the bottom of the file and registered on window.__timelines. The framework drives playback frame-by-frame from this paused timeline, which is what makes the render deterministic.

<script>
  window.__timelines = window.__timelines || {};
  const tl = gsap.timeline({ paused: true });

  tl.from("#b3-t", { opacity: 0, y: 30, duration: 0.4 }, 3.1);
  tl.from("#b3-i", { opacity: 0, x: 60, scale: 0.95,
    duration: 0.5, ease: "power2.out" }, 3.05);

  window.__timelines["main"] = tl;
</script>

Live-preview while you tweak, and lint before you render:

npx hyperframes preview     # opens the studio in your browser
npx hyperframes lint        # validates timing + structure

When the preview looks right, render. The CLI launches headless Chrome workers (one per CPU core), captures each frame as a PNG, and pipes them through FFmpeg.

npx hyperframes render --output my-video.mp4

For my 18-second AI Sensei composition this took ~32 seconds on an 8-core M-series Mac. Final file: 3.6 MB at 1920×1080, 30fps. For a transparent overlay, swap to --format webm.

Three places to go from here:

• Add a voiceover with npx hyperframes tts — runs Kokoro-82M locally, no API keys.
• Browse pre-built blocks with npx hyperframes catalog and install one with npx hyperframes add.
• Read the inline docs without leaving the terminal: npx hyperframes docs examples.

The whole thing feels like Remotion if Remotion shipped a website-scraper and stopped requiring a React build step. Worth ten minutes of your time.