HyperFrames

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)