Bug Fix Particle Banner DOM enhancement #1389
Conversation
Replace DOM particle simulation with canvas and pause when idle/offscreen Why The banner’s DOM-based particle simulation was CPU-intensive due to many per-frame DOM mutations running continuously even when not interacting or visible. What changed Switched to canvas renderer: Added src/components/ui/CanvasParticles.tsx to draw all particles in one <canvas>, removing per-particle DOM nodes and style recalculations. Paused when idle/offscreen: In src/components/ui/InteractiveBanner.tsx, particles only render when the banner is hovered, in viewport (IntersectionObserver), and tab is visible (Page Visibility API). Throttled frame rate: Simulation capped at ~30fps. Reduced work per frame: Fewer particles, softer physics, and trails disabled when idle. Brand-aligned color: Particles now render using theme --primary via hsl(var(--primary)). Cleanup: Removed src/components/ui/PhysicsParticles.tsx and its import. Files Updated: src/components/ui/InteractiveBanner.tsx Added: src/components/ui/CanvasParticles.tsx Removed: src/components/ui/PhysicsParticles.tsx Impact Significant CPU reduction on idle pages and when the banner is offscreen. Fewer layout/paint invalidations; smoother interactions. Visuals preserved with primary brand color and subtle glow.
✅ Deploy Preview for snowplow-docs ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
|
Although this switches to canvas this seems to increase the load on the CPU from ~50% to closer to ~85% - this includes when the banner is not in the hover state. The DOM mutations still occur without hovering as well - it seems to be doing some calculation to dynamically calculate a gradient even without interaction. 
|
- lowered the frame rate even further - reduced FPS from 30 to 20 - hard cap per frame drawing time
|
@miike reduced some of the rendering values even more. Let me know if this helps. |
|
It's down to about 15% now (it is still re-rendering the DOM without interaction to compute a gradient) ideally we'd want it somewhere below 1% (you can check in Chrome what the performance looks like compared to your other tabs). |
|
@miike, I have removed the canvas particle from the ui. I will think of another way of adding interactivity without so much rendering power. |
Replace DOM particle simulation with canvas and pause when idle/offscreen
Why
What changed
Switched to canvas renderer: Added src/components/ui/CanvasParticles.tsx to draw all particles in one , removing per-particle DOM nodes and style recalculations.
Paused when idle/offscreen: In src/components/ui/InteractiveBanner.tsx, particles only render when the banner is hovered, in viewport (IntersectionObserver), and tab is visible (Page Visibility API).
Throttled frame rate: Simulation capped at ~30fps.
Reduced work per frame: Fewer particles, softer physics, and trails disabled when idle.
Brand-aligned color: Particles now render using theme --primary via hsl(var(--primary)).
Cleanup: Removed src/components/ui/PhysicsParticles.tsx and its import.
Files
Updated: src/components/ui/InteractiveBanner.tsx
Added: src/components/ui/CanvasParticles.tsx
Removed: src/components/ui/PhysicsParticles.tsx
Impact
Significant CPU reduction on idle pages and when the banner is offscreen.
Fewer layout/paint invalidations; smoother interactions.
Visuals preserved with primary brand color and subtle glow.