How We Cut Our Browser Video Renderer's Frame Time by 80%

A 30-second product promo — 1,050 frames of Full HD video — used to take about 10 minutes to render. Nobody wants to wait ten minutes for a thirty-second video. So we went hunting for wasted time and found plenty: the same video now renders in about 3 minutes, an 80% cut, and exporting in your browser runs faster than realtime.

Here is the story of the four fixes, in plain English.

1. The export was doing the preview's job

The editor draws extra overlays while you preview an effect, so you can see exactly what it does to a layer. Useful on screen — but that work kept running during export too, where there is no screen to show it on. Every single frame paid for work nobody would ever see. We turned it off for exports.

2. The engine kept rebuilding its own tools

Some visual effects need heavy graphics machinery to run. The engine was tearing that machinery down and rebuilding it mid-render, over and over — like a chef washing every pan between each pancake. Now it keeps the pans warm and reuses them.

3. Identical frames were drawn 1,050 times

This was the big one. A simple fade — the most common animation in any template — used to force the engine to fully redraw the layer on every single frame, even though the layer itself never changed. Only its transparency did. That meant drawing the same thing 1,050 times per video.

The fix is simple once you see it: what a layer looks like and how it moves are two different things. We now draw the layer once, keep the picture, and re-apply just the motion and transparency — something the canvas does almost for free. What used to cost up to 300ms per frame now costs about 1ms.

4. The bug we didn't know we had

We check every performance change by comparing the new output against the old, pixel by pixel. The frames came back identical — except for fades, which were slightly more opaque in export than they were in preview. That exposed a real bug: exported videos had been rendering every fade a little wrong, and nobody had noticed, because a slightly-more-opaque fade still looks like a fade.

Fixed. What you see in the preview is now exactly what you get in the export.

The results

Scene medians per frame, on the product-launch template that started all this:

End to end, that's the 80% cut. And because the exact same engine powers everything we ship, every surface got faster at once:

• The Studio preview feels snappier, even with heavy effects turned on.
• Local export in your browser went from one frame per second to comfortably faster than realtime.
• API renders return sooner, so automations, webhooks, and batch jobs all finish earlier.
• Fades now export exactly the way you designed them.

What's next

Honesty section: 3 minutes for 30 seconds of video is much better, but it is not the finish line. Our render servers don't have a graphics card, so some effects still run on software rendering — that's the next big chunk to go after, and we'll write about it when it lands.

Want to feel the difference? Pick a template and export it, watch the frame counter fly with the CLI, or render videos straight from your own code via the API.