Write HTML. Render video.

Built for agents.

47,273
Stars
4,370
Forks
182
Open Issues
131
Subscribers

Transform HTML into Video

HyperFrames demo: HTML code on the left transforms into a rendered video on the right

Why Choose HyperFrames?

🎬

HTML-Native

Write compositions as HTML files with data attributes. No React requirement, no proprietary timeline format.

🤖

Agent-Friendly

Agents already write HTML. The CLI is non-interactive by default, perfect for automated workflows.

✅

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 your custom runtime.

📜

Open Source

Apache 2.0 license, with no per-render fees or commercial-use thresholds.

Creation Workflows

/product-launch-video

Website marketing tours, product launches, and social clips

/faceless-explainer

Topic explanations with LLM-invented visuals

/pr-to-video

GitHub PR changelogs and feature reveals

/embedded-captions

Add captions/subtitles to talking-head videos

/motion-graphics

Short, design-led animations and kinetic type

/music-to-video

Beat-synced videos from audio tracks

/slideshow

Presentations, pitch decks, interactive decks

/general-video

Anything else - longer pieces, brand reels

Quick Start

Install the HyperFrames CLI and create your first video:

# Install HyperFrames
npx hyperframes init my-video

# Navigate to your project
cd my-video

# Preview in browser
npx hyperframes preview

# Render to MP4
npx hyperframes render

Requirements: Node.js 22+, FFmpeg