HyperFrames

📋 Overview

HyperFrames is an open-source framework that turns HTML, CSS, media, and seekable animations into deterministic MP4 videos. Instead of React components or proprietary timelines, you write plain HTML files with data attributes for timing and tracks, then use GSAP, Three.js, Lottie, Anime.js, WAAPI, or CSS for animation. The renderer uses headless Chrome (Puppeteer) to seek each frame and FFmpeg to encode — producing pixel-identical output from the same input every time. It ships with 19 agent skills that teach coding agents (Claude Code, Cursor, Gemini CLI, Codex) the full video production loop: plan, write HTML, wire animations, lint, preview, render. HeyGen uses it in production, and adopters include tldraw and TanStack.

✨ Key Features

• •HTML-native compositions — no build step, no React requirement; an index.html plays and renders as-is
• •19 production-tested agent skills turn coding agents into video production studios
• •Deterministic rendering via Puppeteer + FFmpeg — same input, same frames, same output, CI-safe
• •Multi-runtime animation adapters: GSAP, Three.js, Lottie, Anime.js, WAAPI, CSS, custom frame adapters
• •AWS Lambda rendering for distributed encode pipelines driven from a laptop or CI
• •frame.md design system converts existing DESIGN.md tokens into a video-ready superset an agent can compose from
• •Catalog of reusable blocks: shader transitions, social overlays, animated charts, maps, kinetic captions