If you've ever tried to generate video programmatically, you've probably ended up in one of two places.
Place one: FFmpeg scripting hell. You're hand-building a 12-flag command line, fighting codec mismatches, re-learning filter graph syntax every six months, and building your own queue/retry infrastructure around a binary that was never designed to be your rendering backend. It works, until it doesn't, and when it doesn't the error messages are unreadable.
Place two: a commercial video-generation API. Shotstack, FastPix, and similar services genuinely solve the rendering problem, but you pay for it in a different currency - usage-based pricing that scales with your output, and a template/API contract you don't control. Fine for some products, a real constraint for others.
There's a third option that's less talked about: treat the video as a normal webpage with a clock, and let a browser do the rendering.
That's the model behind HyperFrames, an open-source framework from HeyGen. A composition is HTML, CSS, and GSAP - a single paused timeline that gets seeked to exact timestamps instead of played in real time. A render pipeline (headless Chrome plus FFmpeg under the hood, but you never touch either directly) captures each timestamp as a frame and strings them into an MP4.
What that looks like in practice - no timeline editor, just markup:
<div class="clip" data-duration="2">
<h1 class="title">Q3 Revenue Up 34%</h1>
</div>
The data-duration attribute is read by the render pipeline to know how long to hold each clip when seeking; GSAP animates whatever you want inside it, and because the timeline is paused and seeked rather than played, the render is deterministic - the same input always produces the same frames, no race conditions, no dropped frames from a slow machine.
This doesn't replace Remotion or Motion Canvas if you're already happy with React-based or TypeScript-based compositions - it's a different lane, closer to plain web dev than to a video framework. Where it fits is exactly the gap this post opened with: you want exportable video, you know HTML/CSS/JS, and you'd rather not learn FFmpeg's filter graph syntax or hand a vendor your rendering pipeline.
Disclosure: I wrote a short paid guide covering six full animation recipes built on HyperFrames (title cards, stat counters, crossfades, and so on) plus the "five pitfalls" that eat the most debugging time when you're starting out - Animate With Code. The framework itself is free and open-source either way.
Top comments (0)