← All effects

Fluid Cursor

BackgroundWebGL · zero dependenciesthe shader IS the code
-- fps
prefers-reduced-motion detected — the ink is shown frozen
move the cursor through the ink

X-ray · layers

a curl-noise field sweeps the ink like liquid (off = still blobs)
the ink blooms additively (off = flat paint)
the whole path lingers (off = just the tip)

Parameters

Radius0.12
Flow0.90
Fade0.40
Hue speed0.12
your version · updates as you tinker

How this effect works

This runs on the GPU. JavaScript keeps one small list: the last couple of seconds of cursor positions, each with an age. That list is handed to a fragment shader — a tiny program run once for every pixel — as an array of points. Each pixel asks how close it is to each point on the trail, adds up a soft blob for each, and returns the total as ink. No shapes are drawn in a loop; the graphics card fills the whole screen at once.

The liquid look is curl noise. Before a pixel measures its distance to a trail point, it offsets the sample along a curl of a noise field — a smooth, swirling, divergence-free flow, exactly the kind of motion a real fluid has. Turn the Flow layer off and the ink freezes into plain round blobs, which shows how much that one curl step adds. Glow switches between an additive bloom and flat paint; Trail chooses the whole lingering path or just the tip at your cursor. This is the shader-tier promise: a fluid you can take apart — every slider is one uniform, and the Full-code tab is the real GLSL.

Production notes: respects prefers-reduced-motion (one static frame) · falls back to a CSS gradient where WebGL is unavailable · the trail is a fixed-size ring buffer, so cost is bounded no matter how fast you move · the shader is fixed and ours; only numeric uniforms and your own cursor path feed it — never code from a visitor · the copied snippet is self-contained HTML + GLSL + JS.