HyperFrames turns HTML, CSS, media, and seekable animations into deterministic MP4 videos. A video is an HTML file: elements carry data attributes for start time, duration, and track, and animations come from GSAP, CSS, 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 produces the same frames.
It is aimed at AI coding agents as much as at people, since agents already write HTML. HyperFrames ships 21 agent skills, led by a router skill that picks a creation workflow for a request (product launch video, explainer, pull-request walkthrough, captions, motion graphics, beat-synced music video, slideshow, or a Remotion port) and loads domain skills for composition rules, animation, keyframes, audio mixing, media sourcing, and the catalog. The skills work with Claude Code, Codex, Cursor, Gemini CLI, OpenCode, and other agents that support skills, and a versioned plugin is available for Claude Code.
Around the rendering engine sit a CLI that scaffolds, previews, lints, and renders projects, a browser-based Studio editor, an embeddable player web component, WebGL shader transitions, a catalog of reusable blocks and components, AWS Lambda distributed rendering, and frame.md, a format that adapts a web design system for video so an agent can compose from it.
| HyperFrames | Remotion | |
|---|---|---|
| Authoring | HTML + CSS + seekable animation | React components |
| Build step | None | Bundler required |
| Agent handoff | Plain HTML files | JSX / React project |
| Distributed rendering | Local and AWS Lambda | Remotion Lambda |
Features
- HTML compositions: videos are HTML files with data attributes for timing and tracks, with no React requirement or proprietary timeline format
- Deterministic rendering: headless Chrome seeks each frame and FFmpeg encodes it, so identical input yields identical output for CI and regression tests
- Animation adapters: GSAP, CSS animations, Lottie, Three.js, Anime.js, WAAPI, or a custom runtime
- Agent skills: 21 skills, including a router and creation workflows for launch videos, explainers, PR walkthroughs, captions, motion graphics, music videos, and slideshows
- Audio mixing: voiceover ducking, an effect chain (EQ, compressor, limiter, reverb, and more), automation envelopes, and submix buses
- Media sourcing: resolves music, sound effects, images, icons, and voice into local files, generating them with TTS, music, or image models when the catalog has no match
- Catalog: reusable blocks and components for transitions, overlays, captions, charts, maps, and effects
- Studio and player: a browser-based composition editor and an embeddable player web component
- Cloud rendering: HeyGen-hosted cloud rendering and a deployable AWS Lambda stack for distributed renders
- frame.md: a DESIGN.md superset that adapts a brand's design system for video composition
- Remotion porting: a skill migrates existing Remotion compositions to HyperFrames HTML
- Figma import: brings Figma assets, tokens, components, and storyboard sections into a composition
