The Problem: Browsers Don't Want to Be Cameras
Here's a deceptively simple product requirement: take a web page with animations, and turn it into a video file.
Sounds easy, right? Open a browser. Record the screen. Export MP4. Ship it.
We tried that. It doesn't work.
The core issue is that browsers are real-time systems. They render frames when they can, skip frames under load, and tie animations to wall-clock time. If your screenshot takes 200ms but your animation expects 16ms frames, you get a stuttery, unwatchable mess. The browser kept rendering at its pace while we captured at ours, and the two never agreed.
We needed something more radical. We needed to make the browser believe time moves only when we say it does.
Why Not Remotion?
Before we go further, a reasonable question: why build this at all? Remotion exists and it's genuinely great. Remotion solves the deterministic rendering problem elegantly: everything is a React component controlled by the library, so it knows exactly what frame you're on and can render any frame in any order. That also unlocks parallel rendering across multiple browser tabs or machines, because frames are independent.
We seriously considered it. But our use case has two specific constraints.
First, Replit's video renderer takes a URL and produces an MP4. The page behind that URL might use framer-motion, plain CSS animations, raw
... continue reading