HyperFrames: HTML videos from a coding agent

What it does

HyperFrames (heygen-com/hyperframes) is an open-source HTML-native video framework used in production at HeyGen. You author compositions as HTML with data attributes for timing and tracks, animate with GSAP, CSS, Lottie, Three.js, Anime.js, WAAPI or custom adapters, then lint, preview and render with the CLI. Agent skills cover creation workflows (product launch, PR-to-video, captions and more) plus domain skills for core, animation and media. Optional AWS Lambda and HeyGen cloud render paths exist; local render has no per-render fee.

How builders use it

• Install skills with npx skills add heygen-com/hyperframes (core set) or the Claude Code plugin from the README.
• Or scaffold manually: npx hyperframes init my-video, then preview and render.
• Ask the agent to plan one short scene, write valid HTML, lint, preview and only then render.
• Reuse catalog blocks with npx hyperframes add <block> when you need a known transition or overlay.

What to expect

Repeatable MP4s from HTML you can edit by prompt and keep in git, without a proprietary timeline.

# Claude Code plugin:
claude plugin marketplace add heygen-com/hyperframes
claude plugin install hyperframes@hyperframes

# Or standalone skills (core set):
npx skills add heygen-com/hyperframes
# agents/non-interactive: npx hyperframes skills update

# Manual CLI:
npx hyperframes init my-video
cd my-video
npx hyperframes preview
npx hyperframes render

Ask your agent:
Using /hyperframes, create a 10-second 1080x1080 product intro: title fades in, three feature lines slide in, subtle background music. Plan first, write valid HTML with data-* timing, lint, preview, then tell me how to render the MP4.