ambient-section-particles

Ambient Section Particles

Build particles as a bounded atmosphere layer, not as a page-wide screensaver. Keep the content primary and stop work when the effect cannot be seen.

Choose the renderer

• Use canvas for roughly 40 or more small particles, frequent motion, pointer forces, or simple procedural shapes.
• Use DOM or inline SVG for a small count of branded fragments that need individual styling or semantic labels.
• Use WebGL only for thousands of particles, depth, shaders, or real 3D behavior. Cap device pixel ratio and provide a static fallback.

Start with the least expensive renderer that preserves the desired shape language.

Define one configuration

const particles = {
  count: 54,
  gravity: 7,
  wind: -3,
  sway: 16,
  speed: [8, 18],
  size: [4, 12],
  opacity: [0.18, 0.62],
  rotation: [-0.8, 0.8],
  mode: "recycle",
  pointerRadius: 110,
  maxDpr: 2
};

Scale density by container area, then clamp it for mobile and low-power devices. Do not derive count from viewport width alone.

Layer the section

1. Give the section a positioning context and clip overflow when particles should remain bounded.
2. Place the particle surface behind content but above the background.
3. Set the layer to pointer-events: none; listen for pointer movement on the section.
4. Reserve a quiet content zone or lower density behind long text and controls.
5. Keep controls and links in normal DOM stacking with visible focus.

Run the simulation

• Seed particles inside or just above the container bounds.
• Update gravity, wind, phase-based sway, rotation, opacity, and position from elapsed time.
• Clamp large time deltas after background tabs or stalled frames.
• Use one requestAnimationFrame loop for the whole layer.
• Resize with ResizeObserver; cap canvas backing resolution at min(devicePixelRatio, maxDpr).
• For pointer disturbance, apply a small distance-based force and let particles settle back naturally. Never attach a listener per particle.