heygen-com/hyperframes

What it is

HyperFrames is an open-source framework for turning HTML, CSS, media, and seekable animations into deterministic MP4 videos. Compositions are plain HTML files with data attributes for timing and tracks. The renderer seeks each frame in headless Chrome and encodes the result with FFmpeg. You can use it locally with the CLI, from AI coding agents with skills, or as a rendering core behind hosted workflows.

Who it's for

• Developers who want to generate video programmatically from HTML
• Users of AI coding agents (Claude Code, Codex, Cursor, Gemini CLI and others) who want agents to author videos
• Teams building automated content pipelines, CI rendering or regression tests that need repeatable output
• Designers and marketers making product launch videos, explainers, captions and motion graphics

Requirements

Setup

1. Install the Claude Code plugin

   Add the marketplace and install the versioned plugin, then use /hyperframes:hyperframes.

   bashCopy

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

2. Install standalone skills (including OpenCode)

   Opens a picker; the Core Skills group is all you need. Agents and non-interactive runs should use npx hyperframes skills update instead.

   bashCopy

   npx skills add heygen-com/hyperframes

3. Start a project manually with the CLI

   Scaffold a project, preview it in the browser with live reload, and render it to MP4.

   bashCopy

   npx hyperframes init my-video
   cd my-video
   npx hyperframes preview      # preview in browser with live reload
   npx hyperframes render       # render to MP4

Examples

Using `/hyperframes`, create a 10-second product intro with a fade-in title, a background video, and subtle background music.

<div id="stage" data-composition-id="launch" data-start="0" data-width="1920" data-height="1080">
  <video
    class="clip"
    data-start="0"
    data-duration="6"
    data-track-index="0"
    src="intro.mp4"
    muted
    playsinline
  ></video>

  <h1 id="title" class="clip" data-start="1" data-duration="4" data-track-index="1">Launch day</h1>

  <audio
    data-start="0"
    data-duration="6"
    data-track-index="2"
    data-volume="0.5"
    src="music.wav"
  ></audio>

  <script src="https://cdn.jsdelivr.net/npm/gsap@3/dist/gsap.min.js"></script>
  <script>
    const tl = gsap.timeline({ paused: true });
    tl.from("#title", { opacity: 0, y: 40, duration: 0.8 }, 1);
    window.__timelines = window.__timelines || {};
    window.__timelines.launch = tl;
  </script>
</div>

npx hyperframes add flash-through-white   # shader transition
npx hyperframes add instagram-follow      # social overlay
npx hyperframes add data-chart            # animated chart

npx hyperframes skills update

Pros & cons

Images