Gooey cursor trail

Use it for

• Playful hero sections and campaign pages
• Empty or loading areas that need a little life

Avoid

• Over text or controls, since the blob covers what is under it
• Pages with heavy filters already, as the SVG filter repaints every frame

How it works

Twelve absolutely positioned circles sit inside a layer with an SVG filter: feGaussianBlur softens them and feColorMatrix multiplies alpha by 22 and subtracts 9, which snaps the blur back into a hard edge so touching circles fuse. A requestAnimationFrame loop moves the first circle toward the pointer and every other circle toward the one ahead of it, so the chain stretches while moving and pools when still.

Accessibility

The blob layer is aria-hidden and pointer-events none, so nothing underneath is blocked. Touch input is ignored to keep scrolling free; instead the blob follows a slow figure eight whenever there is no pointer input. Reduced motion shows a still cluster and runs no loop, and the loop pauses off screen.