Optimize Web Animations

Profile, audit, and optimize frontend page performance with emphasis on animation work, memory-leak risks, long-session slowdowns, CSS animations, canvas/WebGL requestAnimationFrame loops, marquees, skeletons, GSAP/Three/Matter effects, timers, listeners, and observers. Use when the user asks to make animations performant, pause offscreen animations, look for memory leaks, profile pages that slow the computer over time, fix janky scrolling, reduce CPU/GPU use, or repeat the "only play in view" optimization on React/Vite/Next/frontend pages using Codex Browser.

Scenario: Reduce CPU use on an animation-heavy marketing page.

Example input

# Performance report

- three requestAnimationFrame loops run continuously
- offscreen canvas remains active
- resize listeners are added on every route visit
- marquee duplicates animate under reduced motion

Expected output

# Optimization result

- consolidated animation work into one scheduled loop
- paused canvas and marquee while offscreen
- added listener cleanup on route change
- disabled continuous motion for reduced-motion users
- verified idle CPU returns near baseline