The brief

Cursor-driven ripples for a dark hero field. The first ten are technique surveys — most read as spotlights, hairline rings, or binary cell pops, which is why they feel cheap. 11 and 12 are the premium pass: soft refractive optics and a viscous height field, no expanding rings, no white flashlight.

Move the pointer across each stage. Prefer reduced motion is respected — the stages go still.

CSS radial wash

A single radial-gradient parked on --rx/--ry, mixed so lightly into the ground that it only reads as a warmer patch under the hand.

Soft DOM ring

One absolutely positioned disc that follows the pointer with a long ease, opacity so low it almost is not there.

Canvas gaussian blob

A 2D canvas paints a low-alpha circle each frame and fades the buffer, so the trail dissolves instead of snapping off.

SVG displacement

An feDisplacementMap nudged by the pointer — the field itself warps a few pixels, no highlight drawn on top.

Expanding ring pulse

On pointer move, a hairline ring is born and scales out while fading — like a drop in still water, almost not drawn.

Conic sheen

A conic-gradient centred on the pointer, spun a few degrees as you move — a gloss rather than a ripple.

Grid of dim cells

A field of tiny squares; cells near the pointer lift a few percent in opacity. No continuous shape, just a soft neighbourhood.

Stacked delayed washes

Three CSS radials on staggered transitions, so the wash trails the hand by a breath instead of locking to it.

WebGL soft metaball

A minimal fragment shader draws one low-contrast blob that eases toward the pointer. Falls back to the CSS wash if WebGL is missing.

Noise grain breathe

A fixed noise tile whose opacity peaks under the pointer — the surface seems to wake locally without any geometric ripple.