← All effects

Fireflies

BackgroundVanilla JS · zero dependenciesCanvas · one gradient per fly
-- fps
prefers-reduced-motion detected — fireflies shown resting

X-ray · layers

the bright specks
the soft light around each
each fly pulses on its own beat

Parameters

Fireflies24
Wander speed0.8×
Blink rate1.0×
Halo size18 px
your version · updates as you tinker

How this effect works

The organic wandering comes from one idea: a firefly doesn't pick destinations, it just keeps turning a little. Each fly stores a heading angle, and every frame that angle gets a small random nudge — a += (random() - 0.5) * turn — before the fly takes a step forward. A dot moving in straight lines reads as a machine; a dot whose direction drifts reads as something alive. That's the entire physics.

The light is two draws per fly. The halo is a radial gradient — bright center, transparent edge — whose size and opacity follow the fly's brightness; the body is a two-pixel speck on top. Brightness itself comes from the blink layer: each fly runs a slow sine wave with its own phase and rhythm, sharpened by a cube so the fly spends most of its cycle dark and then blooms — real fireflies flash, they don't fade in and out evenly. Because every fly has a different phase, the swarm never pulses in unison.

Production notes: respects prefers-reduced-motion (a resting frame, no motion) · one radial gradient per fly per frame is the cost driver — the fly count slider is the honest dial · flies wrap softly at the edges rather than bouncing · the copied snippet is self-contained HTML + JS.