Capability

HyperFrames — generate videos with MCP

HeyGen's HTML-native video framework — describe a video and render it to MP4/WebM/MOV through the HyperFrames MCP.

#mcp#video#heygen

HyperFrames is HeyGen's open-source framework for turning HTML, CSS, media, and animation into deterministic MP4 / WebM / MOV videos — built for agents. In Cowork (and other hosted Claude surfaces) you drive it through the HyperFrames MCP: describe the video you want, and the tools compose an HTML project and render it for you, no timeline editor required.

Describea prompt
ComposeHTML project
Renderheadless Chrome + FFmpeg
VideoMP4 · WebM · MOV
Same input, same output every time — rendering is deterministic, so it fits automated pipelines.

Two ways to run it

Hosted MCP — Cowork & the Claude app

The full surface: compose and render_video run in the cloud, producing a hosted HeyGen project with a live canvas at app.heygen.com/projects/{id}.

Local skills — Claude Code & CLI agents

Standalone HTML/GSAP files on disk, rendered locally. In CLI/IDE agents the MCP's compose / render_video are disabled — install the skills instead. The read tools work in both.

Connect it

  1. 1

    In Cowork / the Claude app — add the MCP

    Add the HyperFrames (HeyGen) MCP as a connector, then authenticate with your HeyGen account or an API key. The compose / render_video tools become available in the session.
  2. 2

    In Claude Code / CLI — install the skills

    Skills teach the agent the full production loop (plan → HTML → animation → media → lint → preview → render).
    bash
    npx skills add heygen-com/hyperframes
  3. 3

    …or drive the CLI directly

    Scaffold, preview, and render a project by hand (requires Node 22+ and FFmpeg).
    bash
    npx hyperframes init my-video
cd my-video
npx hyperframes preview      # browser preview, live reload
npx hyperframes render       # encode to MP4

The MCP tools

Six tools cover the whole loop, from composing to tracking a render:

Tool / commandWhat it does
composeCreate or edit a video composition (the HTML project) from your description.
render_videoKick off the render pipeline — HTML composition → MP4 / WebM / MOV.
list_projectsList your HyperFrames projects.
get_projectFetch a project's details.
get_project_statusCheck a project's state.
get_render_statusTrack render progress until the video is ready.

Where each works

compose and render_video are available on hosted clients (Cowork, Claude.ai web/desktop). On local CLI agents they're disabled — use the skills above — but list_projects, get_project, get_project_status, and get_render_status work everywhere.

The skills & CLI commands

After installing the skills, these slash commands are available:

Tool / commandWhat it does
/hyperframesMain composition flow: plan → write valid HTML → wire seekable animation → add media → lint → preview → render.
/hyperframes-cli initScaffold a new video project.
/hyperframes-cli lintValidate a composition.
/hyperframes-cli previewPreview in the browser with live reload.
/hyperframes-cli renderEncode the composition to MP4.
/hyperframes-media TTSText-to-speech narration.
/hyperframes-media transcribeSpeech-to-text from audio.
/hyperframes-media remove-backgroundRemove a background from footage.

Add ready-made blocks

The catalog has reusable transitions, overlays, and charts you can drop into a composition:
bash
npx hyperframes add flash-through-white   # shader transition
npx hyperframes add instagram-follow      # social overlay
npx hyperframes add data-chart            # animated chart

Generate a video

  1. 1

    Describe it

    Tell the agent what you want — duration, scenes, media, music, captions.
    text
    Using /hyperframes, create a 10-second product intro:
a fade-in title, a background video, and subtle background music.
  2. 2

    Compose

    compose writes the HTML project and wires the animation timeline; preview to check it.
  3. 3

    Render

    render_video starts the pipeline; poll get_render_status until it finishes.
  4. 4

    Collect the output

    Grab the MP4 / WebM / MOV — or open the hosted project on the HeyGen canvas to keep editing.

How a composition works

A video is just HTML. Data attributes set timing and tracks; a paused GSAP (or CSS, Lottie, Three.js, Anime.js, WAAPI) timeline, exposed on window.__timelines, makes it seekable. The renderer seeks each frame in headless Chrome and encodes with FFmpeg — so the same input always produces the same video.

composition.html
<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>

frame.md — your design system, for the camera

HyperFrames adds frame.md: it takes a web-oriented design spec and inverts it for video — same tokens and rules, rewritten so an agent can compose a promo without guessing at scale. It's a DESIGN.md superset your whole toolchain can read.

Pairs with your DESIGN.md

If you already keep a design system as DESIGN.md (e.g. from Stitch), frame.md is the camera-ready translation of it — one source of truth across UI and video.

What you can build

  • Product-launch videos and feature announcements
  • PR walkthroughs with animated code diffs, narration, and captions
  • Data visualizations, chart races, and map animations
  • Social videos with kinetic captions, overlays, and music
  • Docs-to-video, PDF-to-video, and website-to-video explainers
  • Reusable motion graphics for automated content pipelines
HTML-nativeDeterministic renderMP4 · WebM · MOVApache 2.0

Learn more