Particle assemble icon

Use it for

• Hero moments that introduce a product mark or a feature icon
• Feature sections that move between two or three ideas
• Launch pages that want one playful, interactive centrepiece

Avoid

• Small icons below about 120px, where the particles cannot draw a shape
• Several canvases on one screen, which compete and cost frames

How it works

Each icon path is filled into a small offscreen canvas and its alpha channel is sampled, mixing outline pixels with interior ones so the silhouette stays crisp. About 220 particles spring toward their sampled point with damping and a staggered start, then get an outward kick and drift to random spots before springing into the next icon. The pointer pushes nearby particles away with a falloff, a tap sends a shockwave, and the canvas is sized for devicePixelRatio and paused off screen.

Accessibility

The canvas is an image labelled with the current icon and the icon switches are real toggle buttons with aria-pressed. Touch users get the tap shockwave and the automatic loop. Reduced motion draws the icon already assembled and redraws it when you pick the other one.