Summary in 3 lines
- HeyGen's open-source HyperFrames builds a video from a single HTML + GSAP file and always renders the same video from the same input.
- Because the source is text, an agent like Claude Code can edit it directly, and you preview the result right in a local browser.
- It works well to split the jobs: Remotion for assembling clips, HyperFrames for overlays, motion graphics, and captions.
"Write HTML. Render video. Built for agents." HyperFrames, released by HeyGen, is an open-source tool that builds video with HTML and GSAP and lets coding agents work directly on the source files. HeyGen announced on July 24, 2026 at 2:00 AM (Korea time) that it had also put HyperFrames inside its own Video Agent. As of September 27, 2026, it has 53,307 GitHub stars and uses the Apache 2.0 license. The repo first went public on March 10, 2026, and the current version is in the 0.8 range. skills.sh shows 52 HyperFrames skills with a cumulative 9 million installs. The top installs are hyperframes-cli at 688K, hyperframes at 656K, and hyperframes-registry at 596K.
Source: X @HeyGen
1. A video from a single HTML file
A HyperFrames project is made of HTML, CSS, media, and GSAP animation. Rather than building a video timeline in a dedicated editor, you edit text files, so you can have an agent like Claude Code change titles, captions, element placement, and timing.
When rendering, headless Chrome moves the GSAP timeline to each frame's timestamp and captures the screen, and FFmpeg encodes it into video. It does not record frames during playback, so the same input always produces the same video (deterministic rendering). `npx hyperframes preview` opens Studio in a local browser and reflects file changes with live reload.
2. Install it and make your first video
With Node.js 22 or later and FFmpeg ready, install the agent skills and initialize a project. When the first command shows a selection screen, choose Core Skills.
npx skills add heygen-com/hyperframes
npx hyperframes init my-video
cd my-video
npx hyperframes preview
npx hyperframes render --output final.mp4In Claude Code, ask with the skill name, length, and scenes you want, like "Using /hyperframes, create a 10-second product intro…". To have an agent install without the selection screen, run npx hyperframes skills update. The preview opens in a local browser, and edited files show up on screen right away.
3. How detailed should your prompt be
The official Prompt Guide splits how specific your instructions are into three levels. For short videos or the exploration stage, give only a mood. If you want more control over the result, specify style such as colors and typefaces. The more elements you have and the more visual consistency matters, the better it is to write down shape, color, position, and timing too.
- Mood words: Describe the overall feel, like "calm and futuristic."
- Style tokens: Give visible style standards such as color codes, typefaces, and textures.
- Full visual spec: Specify the shape, color, position, and entrance timing of each element in each scene.
4. Split the work with Remotion
If you use Remotion to join clips in order and HyperFrames to add overlays, motion graphics, and captions on top of footage you have already shot, each tool plays to its strengths. HyperFrames' talking-head-recut skill covers the flow of layering titles, lower-third caption bars, and data cards over source footage, and embedded-captions handles caption work. It also provides a skill to move existing Remotion work into HyperFrames.
| Category | HyperFrames | Remotion |
|---|---|---|
| How you write it | HTML, CSS, GSAP | React components, JSX |
| Rendering | Headless Chrome capture and FFmpeg | Browser renderer and FFmpeg, with cloud rendering options |
| License | Apache 2.0 | Free for individuals and organizations of 3 or fewer; paid license for larger companies depending on usage |
You can install the Remotion conversion skill as follows. For Remotion's free-use range for individuals and small organizations and its company license terms, see the official license page.
npx skills add heygen-com/hyperframes --skill remotion-to-hyperframesRemotion license · HyperFrames vs. Remotion
5. Videos made with HyperFrames
On August 8 at 3:03 AM (Korea time), @HyperFrames_ introduced the HyperFrames MCP, which adds sound effects and motion to animations made in Claude Design and exports them as MP4.
Source: X @HyperFrames_
On September 23 at 1:55 AM (Korea time), @Miguel07Code shared that Claude Opus 5.5 made the Shotbase launch video in one pass within 20 minutes using HyperFrames.
Source: X @Miguel07Code
If you use Claude Code, start with the one line npx skills add heygen-com/hyperframes and try making a 10-second product intro video first.