HyperFrames Tutorial (2026): From Install to Your First MP4

This is the hands-on, no-agent version of getting started with HyperFrames: you, a terminal, and the command line, from install to a finished MP4. If you would rather have an AI agent write the scene for you, read HyperFrames with Claude Code instead. This guide is the manual path, so you understand what the framework is actually doing.

TL;DR — the HyperFrames workflow

Step	Command / action
1. Toolchain	Install Node.js 22+, FFmpeg, headless Chrome
2. Scaffold	npx hyperframes init
3. Author	Write the scene in HTML with data-* timing
4. Preview	npx hyperframes preview (live browser reload)
5. Render	npx hyperframes render → MP4

HyperFrames renders HTML into video, so this whole tutorial is web code plus two commands. For the concept primer first, see what is HyperFrames.

Step 1: Install the toolchain

Before anything renders, your machine needs three things: Node.js version 22 or newer, FFmpeg, and a headless Chrome (HyperFrames uses Puppeteer to drive it). This is the first honest checkpoint, HyperFrames is a developer tool, so you are working in a terminal, not a browser tab. If installing Node and FFmpeg is unfamiliar territory, that is a signal worth noting before you go further; the HyperFrames for marketers piece covers whether this path is right for you.

With those installed, you have everything HyperFrames needs to capture frames and encode them.

Step 2: Scaffold a project

Run npx hyperframes init to create a starter project. This sets up the folder structure and a sample composition so you are not staring at a blank file. The scaffold gives you a working HTML scene you can render immediately, which is the fastest way to confirm your toolchain is healthy before you write anything custom.

Render the sample first. If it produces an MP4, your Node, FFmpeg, and Chrome setup is correct, and any later problems are in your code, not your install.

Step 3: Write a scene in HTML

A HyperFrames scene is HTML. You lay out elements with HTML and CSS, then control timing with data-* attributes, when an element starts (data-start), how long it lasts (data-duration), and which track it sits on. Motion comes from an animation library through an adapter, so you can use GSAP, CSS animations, Lottie, or others, as long as the animation is seekable to a specific frame.

A first scene might be a title that fades in, a subtitle that slides up a beat later, and a logo that lands at the end. You write the markup, set the timing attributes, and wire the motion with your chosen library. The key rule to internalize: animations must be seekable, because HyperFrames renders by jumping to each frame. Animations that depend on wall-clock time rather than an internal timeline will not compose correctly.

Step 4: Preview in the browser

Run npx hyperframes preview to open the scene in a browser with live reload. This is your fast feedback loop, edit the HTML, watch the motion update, adjust timing, repeat, without rendering a full video each time. Spend your iteration here, because previewing is instant and rendering is not.

Get the motion right in preview before you render. It will save you from re-rendering a 10-second clip five times to fix a half-second timing issue.

Step 5: Render your first MP4

When the preview looks right, run npx hyperframes render. HyperFrames opens headless Chrome, seeks to each frame, captures it, and hands the frames to FFmpeg, which encodes the MP4. Because the render is deterministic, the same scene produces the same file every time, which is what makes HyperFrames reliable in automated pipelines.

That is your first video. From here you can add audio tracks, more elements, and tighter choreography, and you can move the render into Docker or a serverless function for automation.

The honest friction points

Three things tend to trip people up, so plan for them. First, the toolchain: if Node, FFmpeg, or Chrome is misconfigured, nothing renders, fix this before blaming your code. Second, seekability: animations that are not frame-seekable will render wrong, so check that your animation library is driven by HyperFrames' clock. Third, complexity: the more elements and the tighter the timing, the more back-and-forth between preview and render. None of this is unusual for a code tool, but it is real work, not a one-click export.

If this is more than you wanted

If you got through this tutorial and enjoyed it, HyperFrames is a great fit and you should keep building. If the toolchain and the HTML felt like a detour from the actual video you needed, that is useful to know, it means you want a result, not a render pipeline.

A Motion Agent skips all five steps. Instead of installing a toolchain and writing HTML, you describe the clip in plain language, it calls a branded, market-tested template, and you export. With AutoAE there is no install, no code, and no render command, just a finished clip from $9.90/mo or $2.90 per export. The other tools in this space are sorted by code-versus-no-code in HyperFrames alternatives.

FAQ

How do I get started with HyperFrames? Install Node.js 22+, FFmpeg, and headless Chrome, run npx hyperframes init to scaffold a project, write your scene in HTML with data-* timing, preview with npx hyperframes preview, and render with npx hyperframes render.

Do I need an AI agent to use HyperFrames? No. You can write the HTML yourself with the CLI, as in this tutorial. An agent like Claude Code can write it for you, but it is optional.

What do I need installed for HyperFrames? Node.js 22 or newer, FFmpeg, and a headless Chrome (via Puppeteer). The framework itself is free under Apache 2.0.

Why does my HyperFrames render look wrong? Most often the animation is not frame-seekable, or the toolchain is misconfigured. Confirm the sample project renders first, then check that your animation library is driven by HyperFrames' clock.

Is there a no-code way to do this? Yes. A Motion Agent like AutoAE produces branded video from a plain-language description, with no install and no code, from $2.90 per export.