Recording your screen seems like the obvious way to turn a web animation into a video. It works, but the result is rarely as good as the animation in your browser.
What goes wrong with a screen recording
- Dropped frames. The browser draws when it can, the recorder grabs when it can, and the two rarely agree. Motion stutters, especially when the computer is busy.
- No transparency. A screen has no alpha channel. You get your desktop or a white page behind the animation.
- Never the same twice. Record twice and you get two slightly different videos.
- Fixed to your screen. Want 4K or 9:16 for Reels? Your screen probably isn’t that.
What frame-by-frame capture does instead
web2vid runs the page in a headless browser where time stands still until it says so. For every frame it:
- sets the page’s clock to the exact frame time (
performance.now(),requestAnimationFrame,Date, CSS and Web Animations all agree), - lets the page draw,
- captures that one frame, with transparency,
- moves the clock forward by exactly one frame.
Rendering takes as long as it takes, but the video always plays at exactly the right speed, at any size, with real alpha, and the same page always gives the same file.
When a screen recording is still fine
For a quick demo of a whole app with a mouse pointer moving around, a screen recording is the right tool. For animations that should look perfect, especially with transparency, capture them frame by frame.
Try it with web2vid, free for macOS, Windows and Linux.