Canvas 2D
Connected Particles
Move your mouse to attract. Click to scatter. Zero dependencies.
The Technique
Particles from Scratch
Proximity Links
Each frame, every pair of particles within a distance threshold gets a connecting line. Opacity fades with distance — close particles glow, distant ones whisper.
Mouse Attraction
The cursor acts as a gravity well. Particles within range accelerate toward it, creating a swarming, magnetic effect. Move fast and they trail behind.
Click Scatter
Clicking applies an explosive radial force — particles blast outward from the cursor and slowly drift back to their natural flow. A satisfying burst every time.
Performance
Under the Hood
In the Wild
Who Uses This
Network & Connectivity Brands
Telecom, cloud, and infrastructure companies use connected particle fields to visually represent networks, nodes, and data flow. The connections form and break in real time — a living network diagram.
Hero Backgrounds
Particle systems are the most popular interactive hero effect on the web. Lightweight, mesmerizing, and universally compatible — they work on every device and never look dated.
Loading & Transition States
Particle animations during page loads, data fetches, and transitions keep users engaged during wait states. The movement signals that the system is alive and working.
Interactive Data Exploration
Each particle can represent a data point. Clusters form around similarities, connections show relationships, and mouse interaction lets users explore datasets spatially.
Simple code. Mesmerizing result.
No WebGL, no Three.js, no libraries at all. Just Canvas 2D, requestAnimationFrame, and basic physics. Sometimes the simplest tools make the strongest impression.