KQ-368 · DROPLET/CURSOR
Droplet Cursor
A chain of droplets that trails the cursor and refracts the interface behind it. Each drop follows the one ahead, shrinking along the chain, and the drops merge as one liquid surface where they touch; light bends through them, catches on a highlight, and tints the rim. Draws only where the drops are, so the page is itself everywhere else.
KQ-368 · DROPLET/CURSOR
Fernworks · misting schedule
Three zones, one wet season.
The nozzles fire on their own clock; this card is just where the greenhouse crew checks it. Drag the cursor across the list — the glass trails in a chain and bends the times beneath it.
- Propagation bench06:00active
- Terrarium wall12:30queued
- Fern alcove18:45holding
drag it across
Install
One command — the source lands in your repo. Or copy it from the Code tab.
$ pnpm dlx shadcn@latest add @kinetiq/droplet-cursor
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| count / size / taper | number | — | How many drops, the lead drop's radius, and how much each successive drop shrinks. |
| follow | number | — | How tightly each drop tracks the one ahead — lower is more liquid. |
| refraction / dispersion / color / tint / highlight | number · number · string · number · number | — | How far the drops bend the view, the colour split at their edges, and the rim tint and specular strength. |