ambient-section-particles

Create a positioned section with a canvas layer behind the content, seed particles inside its bounds, and animate them with a single requestAnimationFrame loop applying gravity, wind, and sway. Use IntersectionObserver to start the loop only when the section is visible.

Use canvas for roughly 40 or more small moving particles or pointer forces, DOM or inline SVG for a small count of branded fragments needing individual styling, and WebGL only for thousands of particles, depth, or shaders. Start with the least expensive renderer that preserves the desired shapes.

Use IntersectionObserver on the section to start the animation frame loop when it enters the viewport and cancel it when it exits. Also listen for document visibility changes so background tabs stop the loop, and resume from the current simulation state rather than spawning a second loop.

Under the prefers-reduced-motion: reduce media query, render a sparse deterministic static arrangement or remove the particle layer entirely instead of running a continuous loop. Keep particles decorative and hidden from assistive technology with aria-hidden.

Large time deltas accumulate when requestAnimationFrame stalls in background tabs, causing particles to jump. Clamp the delta time per frame, for example to 0.034 seconds, and cancel the loop when document.hidden becomes true.

Derive the count from container area rather than viewport width, then clamp it with strict minimum and maximum limits for mobile and low-power devices. The demo scales density as width times height divided by a constant, capped between 28 and 76 particles.