HyperFrames: HTML-native Video Creation Framework

HyperFrames: HTML-native video creation for agents

[Image: HyperFrames logo] [Image: HyperFrames demo: HTML code on the left transforms into a rendered video on the right]

HyperFrames is an open-source framework designed to turn HTML, CSS, media, and seekable animations into deterministic MP4 videos. It is built to be used locally via a CLI, leveraged by AI coding agents with specialized skills, or integrated as the rendering core behind hosted authoring workflows. The goal is simple: write HTML, render a video, and do it deterministically so the same input always yields the same output.

Quick Start

With an AI coding agent

• Install the HyperFrames skills, then describe the video you want:
• Command:
  • npx skills add heygen-com/hyperframes
• Prompt example:
  • Using /hyperframes, create a 10-second product intro with a fade-in title, a background video, and subtle background music.
• How the skills help
• They guide agents through the HyperFrames production loop: plan the video, write valid HTML, wire seekable animations, add media, lint, preview, and render.
• They are compatible with Claude Code, Cursor, Gemini CLI, Codex, and other coding agents that support skills.
• Visual design handoffs
• Claude Design guide
• Open Design guide

Manually with the CLI

• Basic workflow:
• 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 or newer
• FFmpeg

What You Can Build

If you are looking for ideas, browse the showcased work to see finished videos you can watch, read, run, and remix:

• Product launches 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

How It Works

At its core, HyperFrames lets you define a video as HTML. You attach data attributes that control timing and track playback, and you can leverage a suite of animation technologies to drive seekable sequences:

• GSAP
• CSS animations
• Lottie
• Three.js
• Anime.js
• WAAPI
• Or your own frame adapter

A simple quick-start example (conceptually)

• Create an index.html with your composition, then preview in a browser.
• The renderer headlessly opens the composition in Chrome, captures frames, and encodes the result with FFmpeg.
• The important part: the same input yields the same video output, thanks to deterministic frame-by-frame rendering.

Preview and rendering flow

• Preview: instant browser preview of the HTML composition
• Render: production-grade MP4 rendering, either locally or in a Docker-based environment
• Deterministic rendering: the renderer seeks every frame in headless Chrome and uses FFmpeg for encoding, ensuring identical inputs produce identical outputs

HyperFrames Stack (core components)

• CLI
• Scaffold, preview, lint, inspect, and render local video projects
• Core / Engine / Producer
• Parse compositions, drive headless Chrome, encode video, and mix audio
• Catalog
• Reusable blocks and components for transitions, overlays, captions, charts, maps, and effects
• Agent skills
• Teach coding agents the video-production patterns that are often missed by generic web documentation
• Studio
• Browser-based composition editor and preview environment
• AWS Lambda rendering
• A distributed render stack to drive renders from a laptop or CI
• hyperframes.dev
• Community playground for previewing, iterating, sharing, and rendering HTML-native video projects
• Design.HTML (in development)
• Visualize a brand identity and turn it into reusable, video-ready HyperFrames compositions

Catalog

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

The catalog is also accessible at hyperframes.heygen.com/catalog/blocks/data-chart for inspiration and ready-made blocks.

Why HyperFrames?

• 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: the same input yields the same frames and the same output, which is ideal 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: you can plug in 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.

HyperFrames vs Remotion

HyperFrames is inspired by Remotion, but it favors a different authoring model:

• Authoring
• HyperFrames: HTML + CSS + seekable animation
• Remotion: React components
• Build step
• HyperFrames: none; index.html can be played as-is
• Remotion: bundler-based build step
• Agent handoff
• HyperFrames: plain HTML files
• Remotion: JSX / React projects
• Library-clock animations
• HyperFrames: seekable, frame-accurate via adapters
• Remotion: wall-clock animation patterns that require careful handling
• Distributed rendering
• HyperFrames: local rendering or AWS Lambda
• Remotion: Remotion Lambda and mature cloud renderer
• License
• HyperFrames: Apache 2.0
• Remotion: source-available Remotion License

For a deeper comparison, see the HyperFrames vs Remotion guide.

Documentation and Resources

HyperFrames ships with a thorough documentation ecosystem to help you scale from quick starts to advanced use:

• Introduction
• Quickstart
• Showcase
• Guides (GSAP animation, etc.)
• API Reference
• Catalog
• Examples
• AWS Lambda rendering
• hyperframes.dev as a community playground

Packages and What They Do

• hyperframes (packages/cli)
• The CLI for creating, previewing, linting, and rendering compositions
• @hyperframes/core
• Types, parsers, generators, linter, runtime, and frame adapters
• @hyperframes/engine
• Seekable page-to-video capture using Puppeteer and FFmpeg
• @hyperframes/producer
• Full rendering pipeline for capture, encode, and audio mix
• @hyperframes/studio
• Browser-based composition editor UI
• @hyperframes/player
• Embeddable web component for playback
• @hyperframes/shader-transitions
• WebGL shader transitions for compositions
• @hyperframes/aws-lambda
• AWS Lambda SDK and deployment surface for distributed renders

Community

HyperFrames is used in production at HeyGen, with community examples from teams like tldraw and TanStack. The project invites contributions from a wide community and welcomes open collaboration:

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

Development Notes

The repository uses Git LFS for golden regression-test baselines under packages/producer/tests/**/output.mp4 (roughly 240 MB of .mp4 files). If you’re cloning the full repository for development, you’ll want to install Git LFS first. Quick setup:

• macOS: brew install git-lfs
• Ubuntu / Debian: sudo apt install git-lfs
• Windows: winget install GitHub.GitLFS
• Then run: git lfs install If you only need source files and want to skip LFS content:
• GITLFSSKIP_SMUDGE=1 git clone https://github.com/heygen-com/hyperframes.git

License

Apache 2.0 (as stated in the project). The license text is included in the LICENSE file.

A Seamless Vision: HTML to Video

HyperFrames embodies a practical philosophy: empower creators and AI agents to describe a video in the most natural medium—HTML—while preserving determinism and efficiency. The approach aligns with real-world production pipelines where you want predictable outputs, repeatable results, and the ability to plug into existing tools and workflows.

From core ideas to daily practice, HyperFrames provides a spectrum of capabilities:

• Build light and fast: no heavy bundling steps; you can render a composable index.html directly.
• Iterate rapidly: preview in-browser and adjust timing, media, and transitions on the fly.
• Scale intelligently: deploy distributed rendering with AWS Lambda for large-scale pipelines or CI environments.
• Extend freely: the plugin-friendly architecture invites new blocks, effects, charts, and media templates.

The Visual Edge

While the text describes the process, the accompanying visuals communicate the essence of HyperFrames:

• The logo sets the brand identity and signals a modern, web-native approach to video production.
• A live demo image illustrates the core promise: an HTML-based composition on the left becomes a fully rendered video on the right, showcasing iteration and fidelity.

In Summary

HyperFrames offers a compelling path to HTML-native video creation, designed for both individual creators and AI-powered teams. It blends the accessibility of plain HTML with the power of modern animation tools, all wrapped in a deterministic, open-source package. The CLI, engine, catalog, and ecosystem around HyperFrames create a modular stack that can grow with your needs—whether you’re building product intros, data stories, social videos, or explainers.

If you’re exploring new ways to automate video production, HyperFrames provides a well-documented, agent-friendly, and scalable foundation. It invites experimentation, collaboration, and contribution, all while staying true to its core promise: write HTML, render video, and rely on deterministic results that fit into modern development and production pipelines.