A custom cursor that melts into the exact shape of whatever you hover, pill, circle or rounded rectangle, and inverts what is under it. Between targets it stretches along its path like a drop of liquid.
npx shadcn@latest add https://hyperblur.dev/r/hover-morph-cursor.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/hover-morph-cursor.tsx.
import { HoverMorphCursor } from "@/components/hyperblur/hover-morph-cursor"
<HoverMorphCursor><nav><a href="/docs">Docs</a><button>Sign in</button></nav></HoverMorphCursor>| Prop | Type | Default | Description |
|---|---|---|---|
| selector | string | "button, a, [data-morph]" | CSS selector for children the cursor morphs into. |
| size | number | 14 | Diameter of the free cursor in pixels. |
| padding | number | 0 | Extra space around a target when the cursor wraps it. |
| color | string | "#ededed" | Cursor color. |
| blend | boolean | true | Use difference blending so the content under the cursor inverts. |
| autoPlay | boolean | true | Glide from target to target on its own while the pointer is away, so touch screens see the morph. The real pointer, a tap or keyboard focus takes over at once. |
| children | ReactNode | Content to decorate. Without it an editor toolbar is shown. | |
| className | string | Extra classes on the root element. Other HTML attributes are forwarded too. |