What is HyperFrames?
HyperFrames is an open-source video rendering framework from HeyGen that lets AI agents create videos using HTML, CSS, and JavaScript.
Instead of building videos manually in a timeline editor, HyperFrames allows developers and AI coding tools to generate video compositions through code. This makes it useful for creating product videos, social clips, animated explainers, data visualizations, captions, overlays, and other web-based video formats.
HyperFrames is especially useful for users who want to work with AI coding agents like Claude Code, Cursor, Gemini CLI, or Codex. These tools can help create, edit, preview, and render HyperFrames videos directly from prompts.
Who is HyperFrames for?
HyperFrames is best for users who are comfortable working with code or AI coding tools.
It may be a good fit if you want to:
Create videos programmatically
Turn HTML, CSS, or JavaScript into video
Use AI agents to generate or edit videos
Build automated video workflows
Create social videos, product promos, animated charts, or explainer videos
Preview and render videos locally
👉 If you are looking for a no-code video creation experience, the main HeyGen platform may be a better fit.
What you’ll need before getting started
Before setting up HyperFrames, make sure you have:
Node.js 22 or later versions — runtime for the CLI and dev server
FFmpeg — video encoding for local renders
npx (included with npm) — package manager
An AI coding agent — Claude Code, Cursor, Gemini CLI, or Codex, if you want to use the AI-assisted workflow
Set up HyperFrames with an AI coding agent (recommended)
This is the fastest way to create and edit videos with HyperFrames using natural language.
Step 1: Open your terminal
Open a terminal or command line window on your computer.
Step 2: Install HyperFrames skills
Run the following command:
npx skills add heygen-com/hyperframes
Step 3: Open your AI coding agent
Open your preferred AI coding tool, such as Claude Code, Cursor, Gemini CLI, or Codex.
Step 4: Ask the agent to create a HyperFrames video
Example prompt:
Using /hyperframes , create a 10-second product intro with a fade-in title, background video, and background music.
Step 5: Make edits with natural language
Continue refining your video by describing changes in plain language.
Example:
Make the title bigger, switch to dark mode, and add a fade-out at the end.
The AI agent can help create the composition, adjust animations, update styling, and prepare the video for rendering.
Set up HyperFrames manually
You can also start a HyperFrames project directly from the command line.
Step 1: Open your terminal
Open a terminal or command line window on your computer.
Step 2: Create a new HyperFrames project
Run the following command:
npx hyperframes init my-video
Step 3: Navigate to your new project folder
cd my-video
Step 4: Preview your video
npx hyperframes preview
This opens a local browser preview so you can review your video before rendering it.
Step 5: Render your video
Run:
npx hyperframes render
Once rendering is complete, your video will be exported as an MP4 file.
Add ready-made blocks
HyperFrames includes ready-to-use blocks and components that can help you build videos faster.
For example, you can add a transition block:
npx hyperframes add flash-through-white
Add a social media overlay:
npx hyperframes add instagram-follow
Or add a data chart:
npx hyperframes add data-chart
These blocks help you add common video elements without creating every animation or visual component from scratch.
Example use cases
You can use HyperFrames to create:
Product intro videos
Social media clips
Animated captions
Pitch videos from PDFs
Data visualization videos
Bar chart races from CSV files
Website-to-video demos
Videos with music, images, overlays, and transitions
Troubleshooting
The setup command is not working
Make sure Node.js 22 or higher is installed.
You can check your version by running the following command:
node -v
The video does not render
Make sure FFmpeg is installed and available on your machine.
Run this command to check:
ffmpeg -version
My AI agent is not creating valid HyperFrames code
Make sure the HyperFrames skill was installed correctly:
npx skills add heygen-com/hyperframes
Then try explicitly asking your agent to use HyperFrames.
Example command:
Using /hyperframes , create a 20-second product demo video.
FAQ
Is HyperFrames part of the regular HeyGen editor?
No. HyperFrames is a developer and AI-agent-focused framework, separate from the main HeyGen video editor.
Do I need coding experience to use HyperFrames?
Some technical knowledge is helpful. AI coding agents can assist with creating and editing videos, but you still need to run commands in your terminal.
Is HyperFrames open source?
Yes, HyperFrames is open source.
Can HyperFrames render videos to MP4?
Yes. You can render a project locally using:
npx hyperframes render
Can I preview my video before rendering it?
Yes. Run the following command:
npx hyperframes preview
This opens a local browser preview so you can review the video before rendering it.
Get involved
Report bug or request features via Github Issues.