heygen-com/hyperframes

HyperFrames Stack

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

• CLI — Available — Scaffold, preview, lint, inspect, and render local video projects
• Core / Engine / Producer — Available — Parse compositions, drive headless Chrome, encode video, and mix audio
• Catalog — Available — Reusable blocks and components for transitions, overlays, captions, charts, maps, and effects
• Agent skills — Available — Teach coding agents the video-production patterns that generic web docs miss
• Studio — Available, evolving — Browser surface for previewing and editing compositions
• AWS Lambda rendering — Available — Deploy a distributed render stack and drive renders from your laptop or CI
• hyperframes.dev — Available — Community playground for previewing, iterating, sharing, and rendering HTML-native video projects
• frame.md — Available — Invert your design system for the camera — a DESIGN.md superset an agent can compose video from

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.

Core set

• /hyperframes — Read first for any request to make, edit, animate or render a video, motion graphic, captions or overlays with HyperFrames (HTML rendered to video). Holds the render contract and the wo
• /hyperframes-cli — The HyperFrames CLI by job — scaffold, check, look at frames, edit the timeline, preview, render locally or in the cloud, publish, project history — plus reading its JSON and recove
• /hyperframes-registry — About 450 ready-made blocks and components installed as editable source — transitions, overlays, titles, kinetic type, captions, charts, maps, 3D, camera moves. Use before hand
• /media-use — Get or make any media for a video — music, sound effects, images, icons, logos, voiceover, avatar and generated video, transcripts, cutouts, colour grades and looks — with HeyGen or free

概述

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.

Using Claude Code, Codex, Cursor, or another coding agent? Run npx hyperframes skills update once, then ask your agent to make a video.

With an AI coding agent

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.

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.