← All effects

Meteor Shower

BackgroundVanilla JS · zero dependenciesCanvas · one gradient stroke per meteor
-- fps
prefers-reduced-motion detected — static night sky shown

X-ray · layers

the bright falling heads
a gradient streak behind each
the quiet backdrop

Parameters

Meteors / sec1.2
Speed1.0×
Tail length90 px
Fall angle35°
your version · updates as you tinker

How this effect works

A meteor is a point moving along a straight diagonal — and its tail is drawn, not remembered. Each frame we stroke one line from the head backwards along the direction of travel, painted with a linear gradient that starts white-hot at the head and fades to nothing at the tail's end. No canvas trails, no frame blending: the streak is an honest gradient recomputed every frame, which is why this stays crisp at any speed.

Meteors spawn from a Poisson-style dice roll — random() < RATE × dt — so gaps and clusters happen naturally, the way real showers surprise you, instead of a metronome tick. Each one also rolls its own small speed and size variation. The star field behind is a hundred static dots with a slow twinkle; it exists so the meteors have a sense of depth to fall through — switch it off and they're marks on a blackboard.

Production notes: respects prefers-reduced-motion (static sky, no meteors) · cost is one gradient stroke per live meteor — even a storm is a dozen strokes · angle changes the mood: shallow = cinematic, steep = rain · the copied snippet is self-contained HTML + JS.