How to Install HyperFrames: Setup Guide & Requirements (2026)
How to Install HyperFrames: Setup Guide & Requirements (2026)
June 20, 2026
Keston CollinsVideo editor with nearly 10 years of experience, exploring the intersection of motion graphics and AI.
Installing HyperFrames means setting up a developer toolchain, not downloading an app. It is HeyGen's open-source framework that renders video from HTML, so getting it running takes a few prerequisites and a couple of commands. Here is the exact setup, the requirements, the agent skill, and the errors that trip people up.
TL;DR — HyperFrames install requirements
Requirement
Why
Node.js 22+
Runs the framework and CLI
FFmpeg
Encodes captured frames into MP4
Headless Chrome (Puppeteer)
Renders each frame in a browser
npx hyperframes init
Scaffolds a project
HyperFrames skill (optional)
Lets Claude Code / Cursor drive it
HyperFrames is a video-as-code tool. If you want video without installing a toolchain, the no-code path is at the end.
Step 1: Install the prerequisites
Before HyperFrames can render anything, your machine needs three things:
Node.js 22 or newer — the runtime for the framework and its CLI.
FFmpeg — HyperFrames captures frames in a browser, then FFmpeg encodes them into the final MP4. Install it via your OS package manager and confirm ffmpeg -version works.
A headless Chrome — HyperFrames uses Puppeteer to drive a headless browser that seeks and captures each frame.
This is the honest checkpoint: HyperFrames is a developer tool, so you are working in a terminal. If installing Node and FFmpeg is unfamiliar, read HyperFrames for marketers before going further — it covers whether this path is right for you.
Step 2: Scaffold a project
With the prerequisites in place, create a starter project:
npx hyperframes init
This sets up the folder structure and a sample composition, so you have a working scene to render immediately rather than a blank file. Render the sample first — if it produces an MP4, your Node, FFmpeg, and Chrome setup is healthy, and any later problems are in your code, not your install.
Step 3 (optional): Install the HyperFrames skill for your AI agent
HyperFrames was built so AI coding agents can write the HTML for you. HeyGen publishes skills for Claude Code, Cursor, Gemini CLI, and Codex. Once installed, the skill registers as slash commands — /hyperframes for authoring, /hyperframes-cli for build steps, /hyperframes-media for TTS and captions — so the agent knows the HyperFrames conventions and can scaffold, author, and render for you. Full walkthrough: how to use HyperFrames with Claude Code.
This step is optional. You can write the HTML yourself with the CLI (HyperFrames tutorial); the skill just lets an agent do more of it.
Step 4: Render to confirm
Preview and render to confirm everything is wired:
npx hyperframes preview # live browser preview
npx hyperframes render # outputs the MP4
If the sample renders to a video file, your install is complete.
Common install errors
"FFmpeg not found" — FFmpeg is not installed or not on your PATH. Install it and confirm ffmpeg -version.
Node version errors — you are below Node 22. Upgrade Node.
Headless Chrome / Puppeteer fails to launch — Puppeteer could not download or run Chrome; check the Puppeteer install step and any sandbox flags your environment needs.
The sample renders but your scene does not — that is a code issue, not an install issue. Most often an animation that is not frame-seekable; confirm your animation library is driven by HyperFrames' clock.
The no-code path: install nothing
If the toolchain is more than you want, there is a path that requires no install at all. A Motion Agent runs in the browser: you describe the clip in plain language, it calls a branded, market-tested template, and you export — no Node, no FFmpeg, no Chrome, no CLI. With AutoAE that is the whole workflow, for $9.90/mo or $2.90 per export. If you only need branded hooks, titles, and transitions, that skips every step above.
FAQ
What do I need to install HyperFrames?
Node.js 22 or newer, FFmpeg, and a headless Chrome (via Puppeteer). Then npx hyperframes init scaffolds a project. The framework itself is free under Apache 2.0.
How do I install the HyperFrames skill for Claude Code?
Install HeyGen's HyperFrames skill, which registers /hyperframes, /hyperframes-cli, and /hyperframes-media as slash commands in the agent. It is optional — you can use the CLI without an agent.
Why won't HyperFrames render after install?
Most often FFmpeg is missing from PATH, Node is below 22, or headless Chrome failed to launch. Confirm the bundled sample renders first to isolate install vs. code issues.
Is there a way to make video without installing HyperFrames?
Yes. A Motion Agent like AutoAE runs in the browser with no install — describe the clip and export, from $2.90 per export.
