HyperFrames: one prompt to Claude Code yields a 20-second MP4

The walkthrough is built around how HyperFrames splits labor: the AI writes only the HTML, while the tool handles rendering to video. HyperFrames is positioned from the start for coding agents — its README headline reads "Write HTML. Render video. Built for agents." — and three roles are distinguished: the person who asks in one sentence and checks the output, the AI that writes the HTML and assembles parts, and HyperFrames itself, which captures frame by frame in a browser and combines them with FFmpeg.

In practice, the AI did not start writing HTML immediately. It read the skill installed by init, searched the official component catalog, added five blocks (including code-terminal-run and count-up), ran a check, and took snapshot frames before rendering. That scaffolding — a catalog, instructions, checks, and frame samples — is what separates this from simply having the AI write an FFmpeg script.

Caveats are practical rather than technical. The template loads GSAP and fonts from external CDNs at render time, so an offline or restricted network fails unless you vendor them locally. The built-in text-to-speech produced Japanese the author could not understand, so supplying your own audio file is advised. Licensing also matters for commercial use: bundled sound effects are declared under the Pixabay Content License, and one music-generation route, MusicGen, has model weights under CC-BY-NC 4.0 (non-commercial) — though the BGM here was synthesized by the AI with FFmpeg, avoiding that issue.