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. [src-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

Source references

  • [src-012] Nate Herk — Video editing & content creation cluster (2026-04-15 to 2026-04-23)

Robin Cartier perspective

This page is part of Robin Cartier's working AI knowledge graph: a practical research layer for production AI, recommendation systems, experimentation, GEO, and agentic web readiness.

The useful next step is to connect this concept back to applied product leadership and operating models.

Recommended next

Keep reading from this thread

From 500 indexed pages and articles.

  1. Wiki concept AI Video Editing Pipeline End-to-end agentic pipeline for producing edited, motion-graphic-enhanced video from a raw recording using Claude Code as orchestrator. Related by hyperframes
  2. Wiki concept video-use Open-source Python library for AI-powered video editing. Handles the transcript generation and editing phase (filler word removal, silence cutting, retake detection) using word-level timestamps, then Related by hyperframes
  3. Wiki concept Word-Level Timestamp Sync Technique in AI video editing where transcription (Whisper or ElevenLabs) produces millisecond-precision timestamps per spoken word, used to trigger motion graphic animations at Related by hyperframes