17 Apr 2026
What It Is
HyperFrames is an open-source video rendering framework from HeyGen. You compose videos as HTML pages with CSS animations and GSAP tweens. The CLI renders them to MP4, MOV, or WebM. The framework is agent-first: it ships with skill files that teach Claude Code, Cursor, Gemini CLI, and Codex how to author compositions.
The Pitch
"Be you in 2020: open Figma, open After Effects, open Premiere, pray the render works.
Be you in 2026: describe what you want, agent handles the rest, mp4 appears."
via @nrqa__
Agent Slash Commands
| Command | Purpose |
|---|---|
/hyperframes |
Author compositions |
/hyperframes-cli |
CLI command help |
/gsap |
GSAP animation help |
Install
npx hyperframes init my-video
cd my-video
npx hyperframes render
Node.js 22+ and FFmpeg required. No install step for the runtime itself.
Why It Matters
Remotion did this for React developers. HyperFrames goes a step further by being explicitly agent-first: the skills teach the model what to write, not just how to run the renderer. If HTML-as-video becomes the default output format for AI video generation, this is an early anchor.
6 months later: HyperFrames Studio
06 Oct 2026 HyperFrames has grown from a CLI into a full product line, with a new home at hyperframes.dev.
HyperFrames Studio
HyperFrames Studio is a desktop app: "the video editor built for agents". You don't write code. You describe the video, an agent on your computer builds it, and you change it by typing, pointing at the picture, drawing on it or leaving comments. A guide character, Framey, points you to the next step.
- Platforms: macOS and Linux today, Windows coming, plus enterprise deployment through HeyGen sales.
- Download: hyperframes.dev/studio.
The framework today
| Version | 0.8.137 (6th October 2026), with near-daily releases |
| GitHub | About 57,400 stars, 5,100 forks, 80 contributors |
| npm | About 813,000 downloads a week |
| Licence | Apache 2.0 |
What changed since April:
- 1-line install of the agent skills:
npx skills add heygen-com/hyperframes, for any agent that reads skills. - 4 ways to create: in your coding agent, in Studio, with the CLI, or through a hosted MCP connector in an AI chat, with no local install at all.
- Design import: start from a Figma file or an existing design.
- A prompt guide in 4 levels, from a first video to advanced effects.
- 30 Days of HyperFrames, a lesson series, plus examples.
Why the update matters
In April, the case was a framework for developers who already work with an agent. Studio removes that condition: anyone who can describe a video and point at a frame can now make one. With over 800,000 weekly downloads, HyperFrames is no longer an early anchor. It's the default way to make video from HTML with an agent.
Related notes: the source of the HyperFrames launch video (see HyperFrames Launch Video ) and a Claude Code skill for business films built on HyperFrames (see Motion Video Kit ).
Further Reading
