HeyGen's open-source framework and skills that turn HTML, CSS and animations into deterministic MP4 video.

How it works

Foe: Reel Phantom, footage to make, cut, caption or render.

Foes

  • Reel Phantom

Party · Context

  • DreamweaverYour agent100/100
  1. Reel Phantom

    The Reel Phantom blocks the way.

    What really happensIt stands for footage to make, cut, caption or render.

    Dreamweaver: Context 100/100.

  2. Rewind

    The phantom rewinds and plays the same hit twice.

    What really happensRaw footage needs cut after cut before it plays well.

    Dreamweaver takes 5. Dreamweaver takes 5. Dreamweaver: Context 90/100.

  3. HyperFrames

    The hero equips the HyperFrames relic.

    What really happensInstall the plugin, then call /hyperframes:hyperframes. That skill holds the render contract and the work loop.

    Reel Phantom takes 21.

  4. HyperFrames

    Titles, captions and charts are laid out like a web page.

    What really happensThe agent writes HTML with seekable animations and pulls transitions, captions and charts from the block registry.

    Reel Phantom takes 26.

  5. Rewind

    The Reel Phantom uses Rewind.

    Dreamweaver takes 5. Dreamweaver takes 5. Dreamweaver: Context 80/100.

  6. HyperFrames

    Each frame is checked before the final render.

    What really happensThe CLI lints the project, previews it in the browser and lets the agent look at single frames.

    Reel Phantom takes 18.

  7. HyperFrames

    The Reel Phantom is captured as an MP4.

    What really happensnpx hyperframes render writes a deterministic MP4 on your machine. It needs Node.js 22+ and FFmpeg but no paid account.

    Reel Phantom takes 35. Reel Phantom falls.

  8. Victory

    The Reel Phantom falls.

Learn this spell

Claude Code

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

Codex

/plugins

Notes

Runs locally and needs Node.js 22+ and FFmpeg. HeyGen is optional, used by media-use for generated media such as avatar video and voiceover. After install, use /hyperframes:hyperframes. Core skills: hyperframes, hyperframes-cli, hyperframes-registry (about 450 blocks) and media-use; figma, slideshow and remotion-to-hyperframes install on demand. Codex: install HyperFrames from /plugins, or npx skills add heygen-com/hyperframes. It overlaps Remotion, and remotion-to-hyperframes ports Remotion projects.

This spell has no recorded sessions in the curator's logs. Tried it? Send a spell report.