← All effects

Rain on Glass

BackgroundVanilla JS · zero dependenciesrunners wipe the fog, then it re-mists
-- fps
prefers-reduced-motion detected — the rain is shown frozen

X-ray · layers

the small droplets clinging to the glass
big drops slide down and wipe a clear trail
the misted glass the drops clear (off = clear glass)

Parameters

Density50
Run speed1.0×
Drop size1.0×
Haze0.70
your version · updates as you tinker

How this effect works

There is a colourful scene painted behind the glass, and a sheet of fog drawn on a separate off-screen canvas on top of it. The fog is what you normally see. When a runner — a big drop — slides down, it doesn't paint anything: it erases the fog along its path with destination-out, so the vivid scene shows through the clear streak it leaves. Each cleared spot is remembered with an age, and the older it gets the more the fog is allowed back — so trails slowly re-mist, exactly like real breath-fogged glass.

The beads are the small droplets clinging in place; they keep a permanent clear dot under themselves and a bright highlight on top, which is what sells them as glass. Haze is just the fog sheet's opacity, density sets how many beads and runners there are, and run speed scales how fast the runners fall. Turn the fog off and you're looking straight at the scene, drops and all.

Production notes: respects prefers-reduced-motion (frozen frame) · the fog is one off-screen canvas rebuilt per frame; cost scales with the trail-segment cap · trails are capped (LIMITS) so a fast, dense setting can't grow unbounded · the copied snippet is self-contained HTML + JS.