← All effects
Particle Network
-- fps
prefers-reduced-motion detected — animation paused, static frame shown
X-ray · layers
the particles themselves
lines between close dots
dots flee your cursor
Parameters
Particles70
Speed1.0
Link distance90
Dot size2.2
your version · updates as you tinker
How this effect works
A particle network is three simple layers stacked on top of each other — turn them off above and see for yourself. The dots layer is just particles drifting with a tiny random velocity, bouncing off the edges. The links layer measures the distance between every pair of dots each frame and draws a line when they're closer than LINK_DIST — the closer the pair, the more opaque the line, which is what creates the living "web" look.
The mouse repel layer adds one rule: if a dot is near the cursor, push it away. That single rule is what makes the whole thing feel alive and interactive. Everything runs on a plain <canvas> redrawn every frame with requestAnimationFrame — no libraries, no dependencies.
Production notes: respects prefers-reduced-motion (renders one static frame instead of animating) · cost grows with the square of particle count because links check every pair — keep it under ~120 particles for mid-range phones · the copied snippet is self-contained HTML + JS.