Interactive Canvas · Vanilla JS
Firefly
Physics-based particle engine.
Move your cursor to push them away.
55
Particles
110
Repulsion Radius
0.17
Speed
3.5
Size
Color Preset
How it works
- Angle-based wandering — each firefly drifts on a slowly rotating heading vector, never snapping back to an origin.
- Permanent deflection — mouse repulsion updates the firefly's heading angle, so it continues in the new direction after the cursor leaves.
- Radial gradient glow — three-stop gradient drawn per frame on a single Canvas element.
- Boundary wrap — fireflies teleport across edges with a 20 px buffer for smooth transitions.
- Zero dependencies — pure Canvas 2D API, no frameworks.