HyperFrames by HeyGen

What it is

HyperFrames is HeyGen’s open-source framework for turning HTML, CSS, media and seekable animations into MP4 video. You ask a coding agent for a video, and the HyperFrames skills teach it how to plan the film, write a valid project, preview it and render it. The README says the renderer seeks each frame in headless Chrome and encodes the result with FFmpeg, so the same input gives the same video. It also says HyperFrames is used in production at HeyGen.

1. You ask your agent for a video
2. The skill picks the kind of film and reads its references
3. The agent writes timed HTML scenes and a paused timeline
4. lint and check run, then you review the preview
5. After approval, it seeks each frame in headless Chrome
6. FFmpeg encodes the frames and the audio mix into an MP4

Who it suits

Product teams, developers, marketers and creators who want a finished video from a prompt and still want the files. The result is a project folder of plain HTML, so an agent, the browser editor and your own tools can all keep editing the same files. HeyGen’s docs say you need no code on the agent path.

Skip it if all you need is a quick trim or one caption pass on a clip. An ordinary video editor gets there faster than a project, a check and a render.

Where to use it

HeyGen documents a route for each of these agents and apps.

• Claude Code: the plugin, called with /hyperframes:hyperframes
• GitHub Copilot CLI and VS Code: the same GitHub marketplace
• Gemini CLI: an extension installed from the repository
• Cursor: standalone skills, a team marketplace or a local plugin folder
• Codex: skills in the shared ~/.agents/skills folder, called with $hyperframes
• OpenCode, Google Antigravity and IBM Bob: standalone skills
• No agent of your own: the Studio app for Mac, Windows and Linux, or a hosted connector in Claude.ai, ChatGPT or Grok

The README says HyperFrames ships 8 skills: a core set of four, and four that install on demand.

How to set it up

Get it saves a zip of Mindket’s setup notes in your downloads folder, with each agent’s steps from HeyGen’s README and docs. Install the tools below first, then add the skills by one route per agent.

1. Install Node.js 22 or later and FFmpeg, then run npx hyperframes doctor.
2. Add the skills by one route for your agent. Claude Code takes the plugin, and most others take the installer.
3. Start a new agent session in your video project’s folder.
4. Ask for a video and name the skill: /hyperframes:hyperframes in Claude Code, /hyperframes in most others, $hyperframes in Codex.

In Claude Code, install the plugin:

claude plugin marketplace add heygen-com/hyperframes
claude plugin install hyperframes@hyperframes

Most other agents use the installer, run in your project folder. The picker opens with nothing selected, and Core Skills is the group to tick. An agent or CI run with no picker uses the second line instead.

npx skills add heygen-com/hyperframes

npx hyperframes skills update

Gemini CLI, GitHub Copilot CLI, Cursor and the rest have their own lines in the kit’s notes. HeyGen’s docs say to choose one install method per agent.

How to use it

Ask for the video in plain words and name the skill. The agent writes the project in your folder, checks it and opens a preview. It stops there. Rendering starts after you approve, or when you ask for the file. A film over about 15 seconds that tells something begins differently: the agent first offers three storylines, written in words only, and you pick one.

npx hyperframes preview
npx hyperframes render --output final.mp4

The first line reopens the project in the browser editor later, and the second makes the MP4. Say the quality in words and the agent sets the flags.

Example

In an empty folder, with the plugin installed, you ask your agent for a first video.

Using /hyperframes:hyperframes, make a 10-second product intro for https://example.com.

The agent reads the guide for a launch film, builds the project in your folder and runs its checks. It opens the preview and waits. You get a folder with an index.html root composition, one scene file per scene under compositions/ and your media in assets/. A new video is 1920×1080 at 30 fps unless you say otherwise. After you approve the preview, one command makes the file.

npx hyperframes render --output final.mp4

For newcomers and experts

If you are new. Think of a video here as a web page with a clock. Each element says when it appears, and the renderer captures the page at every tick of that clock before FFmpeg joins the frames into a video. You never have to read the HTML. Describe the video, watch the preview and say what to change in the same conversation. If a terminal is not for you, HeyGen’s Studio app puts the chat, preview and editor in one window and installs an agent for you.

For experts. A composition is HTML with data attributes for timing and tracks. Animation comes from GSAP, CSS, Lottie, Three.js, Anime.js, WAAPI or your own frame adapter. The skill’s contract bans Date.now(), unseeded Math.random(), network fetches and timers inside a composition, because every frame has to be a function of timeline time.

A plugin pins the CLI version in its manifest but not the skill commit. For a repeatable install, HeyGen’s docs say to keep a release tag and turn automatic updates off.

Good to know

For local work the project stays on your machine. What reaches out is the CLI’s usage data, the optional HeyGen pieces and your agent’s provider.

• Usage data: the CLI sends command names, render performance, error names and system info, including the name of a coding agent it detects. It stays anonymous until you sign in to HeyGen, then it is linked to your account. npx hyperframes telemetry disable or HYPERFRAMES_NO_TELEMETRY=1 turns it off
• Installer data: the skills installer sends anonymous usage data unless DISABLE_TELEMETRY=1 or DO_NOT_TRACK=1 is set
• Sign-in: the media skill asks you to sign in to HeyGen before it uses HeyGen voices, music or asset search, and uses local tools only when you ask
• Cost: the docs call the framework and local rendering free. Your agent bills its own plan, and HeyGen voices beyond Voice Turbo, avatars, generated clips and cloud renders use HeyGen credits
• Cloud rendering: it uploads the project to HeyGen, and media of 5 MB or more is referenced by public, unsigned URL. hyperframes cloud render --dry-run shows what will upload
• Publishing: npx hyperframes publish uploads the project to hyperframes.studio and works signed out, through a claim link
• Website capture: it fetches public pages from your machine. With GEMINI_API_KEY or OPENROUTER_API_KEY set, the captured images also go to that provider to be described, and --skip-vision turns that off
• Render tags: each file carries two metadata tags, hyperframes_renderer and hyperframes_version, and nothing about your paths or project
• Disk and Windows: a long multi-worker render on macOS or Windows can need tens of GB of temporary frames. Under WSL2, Chrome may fall back to slower software rendering
• Removal: claude plugin uninstall hyperframes@hyperframes, copilot plugin uninstall hyperframes or gemini extensions uninstall hyperframes. For standalone skills the docs only point to your skill manager
• License: Apache-2.0, copyright HeyGen, Inc. The README says there are no per-render fees. Media you add keeps its own license