The Orb publishes where it is as CSS variables. Everything else — the light on the page, the gradient along each card's border, the brightening of a headline as the light passes — reads those variables. No component subscribes to scroll, and nothing but the stage does layout work.
Four things that each cost about ten frames a second
Every one of these was measured before and after, on the same machine, at the same point on the page.
- A filter on the whole page for the time-of-day grading: every frame went through one enormous filtered layer. The grading moved onto the air alone.
- Gradients positioned from the Orb's variables: moving the Orb repainted the full viewport. The light became one fixed-size disc moved by transform, which the compositor handles without repainting anything.
- A blurred layer for the caustics, and a blurred reflection under the download cards. Both are gradients now; the softness is in the colour stops.
- Eight feature drawings animating at once in the finale. They arrive one at a time and hold still once gathered.
Richer where there is room
After all that the page still costs more on a slow machine than a fast one, so it measures a second of frames after load and drops the light and the weather if it cannot afford them. The grain and the dot matrix stay, because they are painted once and never again.