11Phase 11 of 12
Compositing
The compositor stacks all the painted layers into the final image.
layer 1 · background
layer 2 · content
layer 3 · fixed nav
layer 4 · modal
layer 5 · tooltip
compositor stacks painted layers · GPU-friendly · runs off the main thread
Animation loop, let it play, or use the controls.
Once each layer is painted, the compositor takes over. It transforms layers (translate, scale, rotate), blends them with their opacity and blend modes, and asks the GPU to draw the final composited frame to the screen.
Compositing is GPU-accelerated and runs in a separate pipeline from the main thread (in Chromium, on a dedicated compositor thread). That's why a smooth CSS transform animation can keep running at 60fps even when the main thread is busy parsing JSON.
Takeaway
Compositing is layered, GPU-friendly, and runs off the main thread. Animating compositor-only properties is the cheap way to stay buttery.