Write HTML. Render video. Built for agents.

Quickstart | Showcase | Playground | Catalog | Docs | Discord

HyperFrames is an open-source framework for turning HTML, CSS, media, and seekable animations into deterministic MP4 videos. Use it locally with the CLI, from AI coding agents with skills, or as the rendering core behind hosted authoring workflows.

Install the HyperFrames skills, then describe the video you want:

npx skills add heygen-com/hyperframes

Try a prompt like:

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

The skills teach agents the HyperFrames production loop: plan the video, write valid HTML, wire seekable animations, add media, lint, preview, and render. They work with Claude Code, Cursor, Gemini CLI, Codex, and other coding agents that support skills.

For visual design handoff workflows, see the Claude Design guide and Open Design guide.

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

Requirements: Node.js 22+, FFmpeg

Need ideas? Browse the Showcase for finished videos you can watch, read, run, and remix.

• 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

frame.md — your design system, ready for video.

Every brand has a design.md. None of them were written for a camera. frame.md is the missing translation layer: it takes your web-context design spec and inverts it for the frame — the same tokens, the same rules, but rewritten so an AI agent can compose a promo video without guessing at scale or reaching for web chrome.

The output is a DESIGN.md superset your whole toolchain can read. Atoms stay sacred. Composition stays free. Numbers come from the script.

Biennale Yellow	BlockFrame
Blue Professional	Bold Poster
Broadside	Capsule
Cartesian	Cobalt Grid
Coral	Creative Mode

Browse and remix them all at hyperframes.dev/design.

Define a video as HTML. Add data attributes for timing and tracks. Use GSAP, CSS, Lottie, Three.js, Anime.js, WAAPI, or your own frame adapter for seekable animation.

<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>

Preview instantly in the browser. Render locally or in Docker. The renderer seeks each frame in headless Chrome and encodes the result with FFmpeg, so the same input produces the same video.

HyperFrames is the open-source rendering engine, plus a growing set of tools around HTML-native video creation.

Install ready-to-use blocks and components:

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

Browse the catalog at hyperframes.heygen.com/catalog.

• HTML-native: compositions are HTML files with data attributes. No React requirement, no proprietary timeline format.
• Agent-friendly: agents already write HTML, and the CLI is non-interactive by default.
• Deterministic: same input, same frames, same output. Built for CI, regression tests, and automated rendering.
• No build step: an index.html composition plays as-is and can be previewed directly in the browser.
• Adapter-based animation: bring GSAP, CSS animations, Lottie, Three.js, Anime.js, WAAPI, or a custom runtime.
• Open source: Apache 2.0 license, with no per-render fees or commercial-use thresholds.

Alaya.love uses HyperFrames inside its Loom Video feature — the 6th mode of the Loom content engine, joining Summary / Podcast / Debate / Thesis / Pitch.

# Loom Video (new in 2026-06): HTML composition + TTS → MP4 via npx hyperframes
import subprocess
import asyncio

async def render_loom_video(
    topic: str,
    style_preset: str,        # e.g. "blockframe" / "cobalt-grid" / "biennale-yellow"
    tts_audio_path: str,
    output_mp4: str,
) -> str:
    """Render a Loom Video composition to MP4."""
    composition = build_composition_html(topic, style_preset, tts_audio_path)
    composition_path = write_composition_to_project_dir(composition)
    proc = await asyncio.create_subprocess_exec(
        "npx", "-y", "hyperframes@0.6.97", "render",
        "--docker",                    # ARM64-safe on DGX Spark
        "--resolution=1080p",
        "--quality=standard",
        cwd=composition_path.parent,
        stdout=asyncio.subprocess.PIPE,
        stderr=asyncio.subprocess.PIPE,
    )
    stdout, stderr = await proc.communicate()
    return find_rendered_mp4(composition_path)

The Loom Video pipeline:

1. LLM planning (Qwen3.6 35B local) — generates video structure: scenes, captions, timing
2. Composition builder — emits index.html with GSAP timeline + multi-track (data-track-index) layout
3. HyperFrames render (--docker on DGX Spark ARM64) — headless Chrome + FFmpeg → MP4
4. Vault write — saves to ~/AutoPKM/Loom_Video/{topic_slug}_{ts}.mp4 + .html + .meta.json

The generated videos feature:

• Deterministic output — same composition → same MP4 bytes (CI-friendly)
• Multi-track — <video data-start data-duration data-track-index> + <audio> + text + overlay
• Cool blue palette — matches the underground-mine aesthetic of 識海彼岸 chapters
• Frame.md design tokens — blockframe / cobalt-grid / biennale-yellow / studio / capsule presets

A 5s 1080p sample renders in 1m 3.3s on DGX Spark (GB10, software Chromium). A 30s chapter trailer runs ~6 min. Output: H.264 MP4, ~80 KB/s, 676 kbps for 1080p.

Loom Video sits alongside Loom Pitch (which uses frontend-slides for HTML slide decks). The two are complementary:

See the full spec at openspec/changes/add-loom-video-mode/ in the AutoPKM_Desktop repo. Companion skill: hyperframes-on-dgx-spark for ARM64 / snap-docker pitfalls.

HyperFrames is inspired by Remotion. Both tools render video with headless Chrome and FFmpeg. The main difference is the authoring model: Remotion's bet is React components; HyperFrames' bet is plain HTML that humans and agents can both write easily.

Read the full comparison in the HyperFrames vs Remotion guide.

Full documentation: hyperframes.heygen.com/introduction

• Quickstart
• Showcase
• Guides
• API Reference
• Catalog
• Examples
• AWS Lambda rendering

HyperFrames is used in production at HeyGen, with community examples from teams like tldraw, TanStack, and others in ADOPTERS.md. Open a PR if your team is using HyperFrames.

• Questions and ideas: Discord
• Bugs and feature requests: GitHub Issues
• Security reports: SECURITY.md
• Contributions: CONTRIBUTING.md

The repo uses Git LFS for golden regression-test baselines under packages/producer/tests/**/output.mp4 (about 240 MB of .mp4 files). If you're cloning the full repo for development, install Git LFS first:

# macOS
brew install git-lfs

# Ubuntu / Debian
sudo apt install git-lfs

# Windows
winget install GitHub.GitLFS

# Then, once per machine
git lfs install

If you only need source files, you can skip LFS content:

GIT_LFS_SKIP_SMUDGE=1 git clone https://github.com/heygen-com/hyperframes.git

Apache 2.0