Canvas Particle System
Overview
Particle systems are one of the most popular interactive effects on the web, and they don't need WebGL or any library. This showcase runs entirely on Canvas 2D with vanilla JavaScript — 200 particles, proximity-based connections, mouse attraction, and click scatter at 60fps.
Technical Approach
Proximity Connections
Every frame, all particle pairs within a distance threshold are connected with a line. Line opacity fades with distance using a simple linear falloff. The O(n²) comparison is fast enough for 200 particles on modern hardware.
Mouse Interaction
The cursor acts as a gravity well — particles within range receive a velocity nudge toward it proportional to proximity. Lines also draw from each nearby particle to the cursor. Clicking applies an explosive outward force, blasting particles away from the click point.
Physics
Each particle has position, velocity, radius, and opacity. Velocity is damped by 2% per frame to prevent runaway acceleration. Particles wrap at screen edges. The result is a natural drifting motion that responds smoothly to mouse forces without ever feeling chaotic.
Real-World Applications
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.