Particle Shapes

ParticleShapes turns any layer into a living particle field. Thousands of light-points assemble into one of 10 forms — Heart, Star, Disk, Ring, Galaxy, Wave, Infinity, Triangle, Square, or your own text (particles sample the glyph pixels) — and hold formation with spring physics.

The pointer is the interaction. Move the cursor and the field repels, gathers or vortices around it; flick fast and your stroke velocity throws the particles like a hand through smoke. Release, and everything flows home.

Fully controllable from the panel — particle count, dot size & variance, fuzz, scale, rotation, position, two-colour ramp, glow/normal blend, pointer mode, radius and force, return spring, damping, idle drift, twinkle, speed, quality caps and a touch-capture toggle for mobile drags.

Built to be safe everywhere • Canvas & exports: useIsStaticRenderer() swaps WebGL for a still SVG dot field (or your own static image) — no animation, no timers, no GPU cost while designing. • Published site: one gl.POINTS draw call, typed-array physics, loop paused off-screen and in hidden tabs, device-aware quality caps, reduced-motion support. • No WebGL or lost context degrades to the same still field, never a broken layer.

Use it behind a hero headline, as a logo reveal ("Text" shape + your brand ramp), or full-bleed with Glow (Add) blend on dark sections.