Gooey Cursor

The "gooey" effect is usually an SVG filter with feGaussianBlur and feColorMatrix. You can get the same result with two CSS filter functions, no SVG, no canvas, no JavaScript math.

#Step 1 - CSS filters

Two CSS properties do all the work. blur() softens each blob's edge, and extreme contrast snaps every soft pixel back to fully solid or fully transparent. When two blobs overlap, their blurred edges combine, and the contrast threshold fuses them.

Loading...

#Step 2 - Spring follow

Each blob tracks the cursor with useSpring at a different stiffness. The first blob is snappy (stiffness 300), the second is laggy (stiffness 225). The difference creates a trailing effect without separate animation logic for each blob.

Loading...

#Step 3 - Blob styling

Style the blobs as claret circles with bg-primary. The contrast filter on the parent container merges overlapping blobs into one continuous membrane. The wrapper background must match or be transparent, otherwise the contrast will posterize it.

Loading...

#Step 4 - Multiple blobs

Scale to 5 blobs with decreasing size (52px to 16px) and stiffness (300 to 160). The larger blobs lead and the smaller ones trail, creating an organic taper instead of a string of identical beads.

Loading...

#Step 5 - Configuration

Adjust blob count, base stiffness, blur radius, and blob size. Lower blur values create less gooey stretch. Higher stiffness makes the trail shorter and more responsive.

Loading...

#Configuration

Tune everything: number of blobs, spring stiffness, blur amount, and blob size. The code updates in real-time.

Loading...