A practical guide to HyperFrames — the mental model + 6 recipes for making video from HTML/CSS/GSAP—— #3924

The idea that got me hooked on this project: a video is just an HTML page with a clock. You build a normal-looking webpage, and a render pipeline seeks its animation state to a sequence of exact timestamps, capturing each one as a frame — no timeline-scrubbing editor, no proprietary format, just markup, CSS, and GSAP.

I saw someone on HyperFrames' own Show HN thread mention it's "a bit hard to grok" at first without a fuller mental model, so I wrote up exactly that: why everything has to be seekable and deterministic, what that means for how you write the animation code, six complete copy-paste-ready recipes (title card, counting stat, logo intro, scene crossfade, CTA morph, Ken Burns drift), and a "five pitfalls" section covering the mistakes that produce a blank render or a frozen frame instead of a helpful error message.

Not affiliated with HeyGen — just an independent guide teaching technique on top of the open-source framework, written after building a few real compositions myself and hitting most of the pitfalls firsthand.

If useful: https://sidheart.gumroad.com/l/lyudd

Happy to answer questions about the render pipeline or any of the recipes in the comments.