Gooey Cursor

`<pura-gooey-cursor>` is the meta-ball cursor: a chain of liquid blobs chases the pointer, the lead blob hugging the cursor and each follower lerping toward the one ahead of it, so fast moves stretch the chain into a tail and pauses let it collapse back into a single ball. The blobs are plain circular divs fused by an inline SVG goo filter (`feGaussianBlur` plus an `feColorMatrix` alpha threshold), the classic metaball trick, so overlapping circles merge organically instead of just stacking. It is the organic sibling of `<pura-cursor>`'s dot + ring. `count` sets the chain length, `ease` how lazily it trails, `strength` how soft the merging is; `hide-native` suppresses the real cursor while connected and `blend` puts the overlay in `mix-blend-mode: difference`. The rAF loop runs only while the chain is catching up and stops once settled. Touch devices (`pointer: coarse`) and `prefers-reduced-motion` render nothing and never bind; SSR paints nothing visible until the first real pointer move. Size and color are tokens: `--pura-gooey-cursor-size`, `--pura-gooey-cursor-color`. Each instance registers in `window.__puraGooeyCursors` by `data-pura-id`.

Preview

<!-- one instance per page, anywhere; replaces the native cursor -->
<pura-gooey-cursor hide-native></pura-gooey-cursor>

<!-- bigger, lazier, gooier blobs in difference blend -->
<pura-gooey-cursor count="6" ease="0.14" strength="16" blend
  style="--pura-gooey-cursor-size: 48px;"></pura-gooey-cursor>

<link rel="stylesheet" href="/pura/tokens.css">
<script type="module" src="/pura/lib/gooey-cursor.js"></script>

import "./pura/lib/gooey-cursor.js";