HyperFrames is a framework that turns HTML, CSS, media, and seekable animations into deterministic MP4 videos. A composition is an HTML file: elements carry data-* attributes for start time, duration, and track, and animation comes from GSAP, CSS keyframes, Lottie, Three.js, Anime.js, WAAPI, or a custom frame adapter. The renderer seeks each frame in headless Chrome and encodes the result with FFmpeg, so the same input yields the same output.
The project is aimed at AI coding agents as much as at people. A set of 20 skills teaches agents the production loop of planning a video, writing valid HTML, wiring seekable animations, adding media, linting, previewing, and rendering. A router skill (/hyperframes) picks a creation workflow for a request; workflows include product launch videos, faceless explainers, pull-request walkthroughs, embedded captions, talking-head recuts, motion graphics, music-synced videos, slide decks, and a Remotion-to-HyperFrames port. Domain skills cover the composition contract, animation, keyframes, creative direction, media sourcing, the CLI, audio mixing, the registry, and Figma import. The skills work with Claude Code, Cursor, Gemini CLI, Codex, and other agents that support skills.
Rendering runs locally, in Docker, on AWS Lambda through a deployable distributed render stack, or on HeyGen-hosted cloud rendering. Requirements are Node.js 22+ and FFmpeg. A frame.md format re-expresses a web design system (tokens, typography, palettes) for the camera so an agent can compose a branded video without guessing at scale.
Comparison with Remotion, which also renders through headless Chrome and FFmpeg:
| HyperFrames | Remotion | |
|---|---|---|
| Authoring | HTML + CSS + seekable animation | React components |
| Build step | None; index.html plays as-is | Bundler required |
| Agent handoff | Plain HTML files | JSX / React project |
| Library-clock animations | Seekable, frame-accurate via adapters | Wall-clock patterns need care |
| Distributed rendering | Local and AWS Lambda | Remotion Lambda |
Features
- HTML-native compositions: timing and tracks are data attributes on ordinary elements, with no React or proprietary timeline format
- Deterministic rendering: frame-by-frame seeking in headless Chrome and FFmpeg encoding for CI, regression tests, and automated pipelines
- Adapter-based animation: GSAP, CSS, Lottie, Three.js, Anime.js, WAAPI, TypeGPU, or a custom runtime
- Agent skills: a router plus creation workflows and domain skills that agents load on demand
- CLI dev loop: init, lint, check, snapshot, preview, render, publish, and doctor
- Catalog: reusable blocks and components for transitions, overlays, captions, charts, maps, and effects, added with hyperframes add
- Audio mixing: voiceover carve, effect chains (EQ, compressor, limiter, reverb, and more), automation envelopes, and submix buses
- Distributed rendering: AWS Lambda deployment and HeyGen-hosted cloud rendering from a laptop or CI
- Studio and player: a browser editor for compositions and an embeddable web component
- Packages: @hyperframes/core, engine, producer, studio, player, shader-transitions, and aws-lambda
