Overview
A canvas animation that runs while it is off-screen is just a heater. The same applies to tabs in the background and to users who have asked the browser to reduce motion. Treat canvas like any other expensive resource.
Highlights
- Pause the rAF loop when the canvas leaves the viewport via Intersection Observer
- Batch state updates inside the rAF callback — never inside event handlers
- Bail out entirely when prefers-reduced-motion: reduce is set
Comments