Animate With Code: A Practical Guide to HyperFrames

Suggested price: $19 (pay what's fair - $5 minimum, you set the amount).

If you can write HTML and CSS, you can make video - that's the whole pitch of this guide.

HyperFrames (an open-source framework from HeyGen) treats a video as 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. String the frames together and you have an MP4. No timeline-scrubbing GUI, no proprietary editor - just markup, CSS, and GSAP.

This guide teaches the actual mental model (why everything has to be seekable and deterministic, and what that means practically for how you write animation code), then hands you six complete, copy-paste-ready recipes: title card reveal, counting stat / number ticker, logo or icon intro, scene-to-scene crossfade, CTA card morph-in, and slow background drift (Ken Burns).

Plus a five-pitfalls section covering the specific mistakes that produce confusing failures - a blank render, frozen frames, content piled in a corner - instead of a helpful error message. These are the exact things that eat the most debugging time for anyone starting out with this approach, explained plainly so you don't lose an afternoon to them.

Every example in this guide is real, working code, written and checked against the framework's actual technical contract - not simplified teaching examples that fall apart the moment you try to render them for real.

Who this is for: developers who'd rather write video than edit it, anyone building an automated or programmatic video pipeline (social content, data-driven reports, generated explainer clips), and anyone comfortable with HTML/CSS/light JS who wants a genuinely fast way into motion design.

This is an independent, unofficial guide - not affiliated with, endorsed by, or sponsored by HeyGen. HyperFrames itself is open-source and free; this guide teaches technique on top of it.

Why I wrote this

I hit almost every one of the five pitfalls above myself the first time I tried to render a HyperFrames composition - a blank MP4, a frame that looked frozen for no visible reason, an element that rendered fine in the browser but never showed up in the actual video. None of it was documented anywhere in a way that explained why it was happening, just workarounds. This is the writeup I wish existed when I started: the mental model first, then the recipes, then the specific failure modes, in that order, because the order is what actually saves you time.

Free sample

Not sure yet? The counting-stat recipe from this guide is free to read in full, with real working code: https://dev.to/sifat_ahmed_3cc666203e7b8/a-counting-stat-animation-in-hyperframes-full-working-code-free-recipe-3on4 - if that's useful, the other five recipes plus the full mental-model section and the five-pitfalls guide are in the guide above.

FAQ

Isn't HyperFrames free - why pay for this? Yes, HyperFrames itself is free and open-source. This guide doesn't sell the framework - it sells the technique: the mental model, the six working recipes, and the five specific failure modes that actually cost you time. If you'd rather figure all of that out yourself from the source and issue tracker, that's genuinely fine - this is for people who want the shortcut.

Do I need a HeyGen account or API key? No - HyperFrames is open-source and runs entirely on your own machine; nothing here requires a HeyGen account.

Is this guide AI-generated? No - every code example is real, hand-checked against HyperFrames' actual render pipeline, not generated and left unverified.

I've never used GSAP before - is that a problem? No. The guide explains the GSAP concepts you need as they come up; you don't need prior animation experience.

What format is the guide? A 9-page PDF with copy-paste-ready code for all six recipes.

Questions before you buy?

Message me here on Gumroad, or reply on the free dev.to post above - happy to answer anything before you buy.