Cursor / pointer · 2.4
Gooey cursor
Lava-lamp wax chasing your finger across the glass.
Cursor movement lights cells of an invisible grid; an SVG filter melts them into one blobby mass.
4 knobs
How it actually works
Nothing else in this catalog teaches "a threshold is an aesthetic" this directly. Two numbers in a colour matrix decide whether you are looking at a handful of separate dots or a single liquid organism. There is no in-between setting that looks intentional, which is the whole lesson.
The classic Lucas Bebber goo filter: feGaussianBlur into feColorMatrix with the alpha row cranked. The published values, verbatim: 1 0 0 0 0 / 0 1 0 0 0 / 0 0 1 0 0 / 0 0 0 20 -7. The 20 and the -7 ramp alpha into a hard step, and that step is what fuses neighbouring blurred blobs into one silhouette. Blur alone gives you fog. Blur plus a threshold gives you goo.
The knobs, named
Blur stdDeviation is blob softness. The alpha matrix pair, 20 and -7, is the fuse threshold. Cell size and decay rate are the grid underneath.
| Knob | Source | What it teaches |
|---|---|---|
| Blur stdDeviation | sourced | How far each cell bleeds. Below about 4 nothing can fuse; above 14 it is fog. |
| Alpha multiplier | sourced | The matrix's 20. Contrast on the alpha channel: this steepens the ramp. |
| Alpha offset | sourced | The matrix's -7. Where the step sits. Together with the multiplier this IS the fuse threshold. |
| Cell size | sourced | The invisible grid. Small cells trace your path finely; large cells give chunky lava. |
sourced means the source names this parameter. ours means the source names none and the knob is our design against the mechanism. No knob here is invented and passed off as sourced.
Evidence
VERIFIED (author)
Codrops "Gooey Cursor Effect" (2023; credited to the Lama Lama team, implementation by Lorenzo Dal Dasso). The colour matrix is verbatim.
- Seen on
- Codrops "Gooey Cursor Effect".
- Dependencies
- vanilla + an SVG filter
- Difficulty
- moderate
- Performance
- SVG filters are the expensive part. feGaussianBlur over a large animated area is a known repaint cost, worse on Safari. Keep the filtered region small: ours is confined to the stage box, never the page. The generalisable fix from the index is to attach the filter on animation start and remove it on complete, so no filter is live at rest.
- Accessibility and the floor
- Purely decorative, pointer-events: none, hidden on coarse pointers and under reduced motion.
Notes
Composability. The filter is generic. Point it at any group of overlapping shapes and they will fuse.