hyperframes

What hyperframes does

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.

With an AI coding agent

For Claude Code, install the versioned plugin:

Enable auto-update for the hyperframes marketplace in /plugin → Marketplaces, then use /hyperframes:hyperframes. See the plugin guide for Copilot, VS Code, Cursor, Gemini CLI, updates, and migration.

For standalone skills (including OpenCode), use:

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, Codex, Cursor, Gemini CLI, IBM Bob, and other coding agents that support skills.

Creation workflows

• --------------------------: ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

• /product-launch-video: Any website — marketing / launching / promoting a product (from its URL, a brief, or a script), or a site tour / showcase / social clip featuring the site's own visuals. Up to ~3 min (sweet spot 30-90s).

• /faceless-explainer: Explaining a topic / concept from arbitrary text — no product, no URL, no website capture; every visual is LLM-invented (typography / abstract / diagram / data-viz).

• /embedded-captions: Adding captions / subtitles to an existing talking-head video (footage untouched) — verbatim rail, embedded climax behind the subject, or pure-cinematic embed.

• /talking-head-recut: Packaging an existing talking-head / interview / podcast video with designed graphic overlays — lower-thirds, data callouts, kinetic titles, pull-quotes, side panels, PiP.

What You Can Build

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 site-tour explainers

• Reusable motion graphics for automated content pipelines

How It Works

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.

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.

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

Explore the project

Read the project documentation for installation, requirements and usage instructions. The overview above draws on the project's README; follow the original documentation when setting it up.