Fluid Ink Trail

CursorVanilla JS · zero dependencieseach drop grows and fades on its own

-- fps

prefers-reduced-motion detected — a still ink splash

X-ray · layers

Bleedeach drop grows outward as it ages (off = fixed dots)

Tintthe ink cycles through colours (off = one colour)

Glowoverlapping ink adds up and glows (additive)

Parameters

Flow3

Spread40 px

Fade1.4 s

Drop size18 px

your version · updates as you tinker

How this effect works

There's no fluid simulation here — it's a crowd of tiny drops that only know how to do one thing: grow a little and fade. Each frame, while the cursor moves, a few new drops are dropped along its path. Every drop remembers its age; its radius is baseSize + (age / life) × SPREAD and its opacity is 1 - age / life — so it swells and dims until it's gone. Because the drops are drawn as soft radial gradients, hundreds of them overlapping read as one continuous, bleeding wash rather than separate circles.

The glow layer is the real fluid trick: it draws the ink with globalCompositeOperation = 'lighter', so where drops overlap their light adds up and brightens — exactly how backlit ink pools. Bleed is what lets the drops grow (off, and they stay dots you can count); tint cycles the hue so the trail is a rainbow; flow is how many drops per frame, and fade is how long each lives. Move across it — or watch it paint on its own.

Production notes: respects prefers-reduced-motion (a still splash) · live drops are hard-capped (LIMITS) so flow × fade can't grow unbounded · the canvas is cleared each frame — drops fade by their own age, never by ghosting · the copied snippet is self-contained HTML + JS.