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 attributes, when an element starts (), how long it lasts (), 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.