Turning a web page into video without screenshots: the Kodecz engine
Article by Pedro Henrique Lahr
Kodecz is an open-source engine that turns a web page into an MP4 video. What sets it apart is that no frame ever becomes a picture along the way, on the graphics card or on the processor. On a real 74.7 second video, that made the processor work 15 to 17 times less than with Remotion, and the video came out nearly the same.
What does rendering a page as video mean?
You can make a video by writing a web page, with text, colors and animation. Rendering is turning that page into video, one frame at a time. A video has 30 frames per second, like the pages of a flip book you thumb through fast to see the drawing move.
Why are screenshots so heavy?
The most used tools, like Remotion and HyperFrames, take a picture of the page for every frame. Each picture leaves the graphics card, is copied to the processor, compressed as an image (PNG or JPEG) and then opened again to become video. It is like printing every page of the flip book, scanning it back in and only then making the film.
When the page has filmed footage inside, it gets worse: that footage goes through the processor several times before the picture is even taken.
How does Kodecz do it without pictures?
It has two paths. Both take the same page and give the same frame.
- With an NVIDIA graphics card (GPU). The GPU is the part of the computer built for images. The frame the browser draws stays on the card and goes straight to the card's video encoder (NVENC), without passing through the processor.
- With the processor only (CPU). On any machine, with no NVIDIA card, the browser paints the frame and hands that raw frame straight to the x264 encoder. It never becomes a PNG or a JPEG.
Three more ideas help:
- A declared timeline. Nothing moves on its own. For frame N, the engine puts every animation at the right moment. So frame N is always the same, whether the video starts at the beginning, in the middle or out of order.
- Repeated frames for almost nothing. When the page says a frame has not changed, the engine writes a mark of about 40 bytes that says "repeat the last one", with no drawing and no encoding.
- Footage outside the browser. The engine opens the filmed footage on the card itself and places it under the page, with the size and corners the page asks for.
How much faster is it?
On a 74.7 second production video, with a person talking, graphics and sound, compared with Remotion using the card:
| Format | CPU with Remotion | CPU with Kodecz |
|---|---|---|
| Landscape (16:9) | 473.5 s | 30.8 s |
| Vertical (9:16) | 481.1 s | 28.6 s |
- Waiting time dropped 67%: from 116.9 s to 38.8 s in landscape.
- Memory use dropped from 3.7 to 4.5 GB to 0.76 to 1.06 GB.
- Similarity to the Remotion video (SSIM, a score from 0 to 1 where 1 means identical) was between 0.991 and 0.992.
With no card at all, the card hidden from both tools and the same x264 setting, the CPU path used 1.2 and 3.1 times less processor than Remotion on two test videos.
Where does it lose?
The paper reports the bad cases too:
- On a test video with a lot of audio, Kodecz took longer on the clock: 19.1 s against 15.6 s for Remotion.
- The card path only works with NVIDIA on Linux. Mac, Windows and AMD cards are not supported.
- In real videos with animated text, two renders can differ by up to 2 color levels, because of how the browser draws. You cannot see it.
Frequently asked questions
Do I need a graphics card to use Kodecz? No. Without an NVIDIA card it uses the CPU path, with the same page and the same frame.
Can I use React, GSAP or Lottie? Yes. The page is a normal web page. CSS animations, GSAP and Lottie follow the engine's timeline.
Does Kodecz replace Remotion? Both turn code into video. Remotion asks for React components; Kodecz takes any page. The paper compares the two with numbers and shows where each one wins.
Full paper
This post is a summary. The full paper, with the method, the tables and what did not work, is at doi.org/10.6084/m9.figshare.34880682. The code is at github.com/konecz/kodecz.
How to cite: Lahr, Pedro Henrique. Kodecz: rendering web pages as video without screenshots, on the GPU and on the CPU, with a declared timeline and deterministic frames. Figshare, 1 Nov 2026. https://doi.org/10.6084/m9.figshare.34880682