HyperFrames

An open-source project by HeyGen (Heygen-com/hyperframes).

Why it matters

Automating video production from code or agents usually meant proprietary formats or a separate build pipeline. When the output drifts between runs, it’s hard to reproduce or verify what an agent produced.

HyperFrames pushes that down to HTML — “Write HTML. Render video. Built for agents.” It turns HTML, CSS, media, and animations into deterministic MP4 videos: identical inputs produce identical outputs, so an agent’s composition can be reproduced exactly.

What you can make

The official showcase renders videos like these straight from HTML:

• Product launches and feature showcases — launch videos with UI mockups, voiceover, and SFX. The showcase’s “HyperFrames Launch Video” and “Timeline Editor Launch” are this type.
• Website → video — turn a website into a product promo, social ad, feature showcase, or brand reel. The “Website to HyperFrames” demo shows this flow.
• Data and chart animations — data visualizations like bar charts. Pull the data-chart block from the catalog with npx hyperframes add data-chart.
• Social overlays — social captions and overlays such as an Instagram follow callout. Catalog block instagram-follow.
• Title systems and VFX — title and effects videos using texture-mask typography, shader transitions, and Three.js. The showcase’s “Texture Launch” and “VFX x HeyGen”.

The key is the workflow. Instead of opening a video editor and working a timeline, you describe the video to Claude Code — e.g. “make a 15-second video of this revenue data as a bar chart filling up.” The agent writes the HTML composition and npx hyperframes render outputs the MP4. Agents already speak HTML, so the video comes out of a prompt — no separate video API or drag-and-drop editor.

Key features

• HTML-native compositions

  An HTML-based format that expresses timing with data attributes. There’s no build step, so index.html plays directly in browsers, and it doesn’t require React.

• Deterministic rendering

  Identical inputs produce identical outputs. Renders don’t drift, which makes them easy to reproduce and verify in agent workflows.

• Agent-friendly CLI

  The CLI is non-interactive by default. An agent can author a composition and then hand off to rendering without human intervention.

• Adapter-based animation

  Animation engines plug in through adapters: GSAP, CSS animations, Lottie, Three.js, Anime.js, and WAAPI (Web Animations API).

• Catalog components

  Add reusable blocks and components from the catalog — e.g. npx hyperframes add flash-through-white, npx hyperframes add data-chart.

• Studio, frame.md, and Lambda rendering

  A browser-based Studio composition editor, the frame.md design system for inverting web design specs to video specs, AWS Lambda distributed rendering, and an embeddable player web component.

Getting started

With AI agents (skills)

npx skills add heygen-com/hyperframes

After installing, describe the video you want and the agent authors an HTML composition that the CLI renders.

Manual CLI

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

Notes

• Requirements — Node.js 22 or higher and FFmpeg. Rendering runs via headless Chrome and FFmpeg.
• License — Apache 2.0, with no per-render fees or commercial-use thresholds.
• Install count source — the install number above is from skills.sh npx skills telemetry, aggregated across the skills this repo ships (39). It is not listed on claude.com/plugins.
• Rendering modes — local CLI rendering and AWS Lambda distributed rendering.
• Docs and playground — documentation, quickstart, and the showcase live at hyperframes.heygen.com; design templates and the playground are at hyperframes.dev.