HyperFrames: turning an HTML composition into a finished video
HyperFrames, built by HeyGen, renders video from ordinary markup by pausing a timeline and seeking it one frame at a time, so the same project always renders the same way. The hyperframes skill is the entry point: it holds the render contract and the work loop an agent follows from plan to final file.
Claude Code, Codex, Cursor, Gemini CLI, GitHub Copilot, OpenCode, IBM Bob
What it does
Sets the timing rules: every timed element carries class clip, data-start and data-duration, and the root composition fixes the video length.
Bans anything non-deterministic in a scene, including Date.now(), unseeded Math.random(), network fetches, timers and endless repeats.
Sends the agent to the block registry before it hand-codes a named effect, and to media-use for music, voice, footage and avatars.
Runs a check, preview and render loop: check --json lists violations with a fix line, snapshot shows frames, render waits for approval.
Maps each request type to a reference file: launch film, explainer, music video, data chart, vertical clip, 3D or captions.
When to use it
You want a feature-launch video that lives in the repo and can be edited like any other code.
A chart race or map animation has to be rebuilt every time the underlying numbers change.
A website or pull request needs a walkthrough clip, and capture can pull the page in as source material.
Ask your agent
Using /hyperframes, make a 10-second product intro with a fading-in title, a background clip and soft music.
Turn our landing page into a 20-second vertical video with captions, and show me the preview first.
Build an animated bar chart of quarterly revenue from data.csv in HyperFrames, 1920x1080.
Questions
How do I install HyperFrames in Claude Code?
Add the marketplace with claude plugin marketplace add heygen-com/hyperframes, then run claude plugin install hyperframes@hyperframes. The standalone skill installs with the skills CLI command on this page.
Does HyperFrames work with Codex or Cursor?
The README lists Claude Code, Codex, Cursor, Gemini CLI, IBM Bob and other agents that support skills. There is also a packaging script for a Codex plugin archive.
Which HyperFrames skill should I install first?
Start with hyperframes itself, since it carries the contract and work loop. The core set adds hyperframes-cli, hyperframes-registry and media-use, and npx hyperframes skills update installs exactly those four.
