Open-source HTML-to-video rendering library designed for AI agent use. Claude Code writes animated HTML/CSS compositions synced to word-level audio timestamps; FFmpeg renders the result to MP4. Nate Herk’s preferred motion graphics engine over Remotion as of April 2026.
Key facts
- Type: Video rendering library (HTML-to-video)
- Creator: Hen (open-source)
- Status: Active
- Integration: Claude Code writes the HTML compositions; FFmpeg does the final render to MP4
What it does
HyperFrames accepts animated HTML/CSS (including CSS transitions, 3D transforms, and JavaScript animations) and renders each frame to video. It ships with a built-in catalogue of reusable animated components: iOS-style liquid glass cards, terminal animations, 3D UI reveals, Mac OS notification popups, Reddit-style postcards, and more.
Word-level timestamps from Whisper or ElevenLabs transcription are passed to HyperFrames so each animation element fires at the exact spoken moment — creating natural-feeling, non-mechanical motion graphics. [012]
Advantage over Remotion: more flexible design system (pure HTML/CSS vs React), and the built-in component library reduces the design work Claude needs to do per video.
Related
- See also: Video Use, Remotion, Claude Code, Whisper, Elevenlabs
- Concepts: Ai Video Editing Pipeline, Word Level Timestamp Sync
Source references
- [012] Nate Herk — Video editing & content creation cluster (2026-04-15 to 2026-04-23)