Cursor follower
A dot that follows the mouse and inverts what is under it.
Behaviour
- Reduced motion: it sits exactly on the pointer, no trail and no grow.
- Follows the mouse and inverts what is under it (mix-blend-difference).
- data-cursor-scale on any element grows it while hovered: no context, no hooks.
- One passive pointer listener moves motion values; React never re-renders while it moves. Mouse only, and it hides when the pointer leaves the window.
Props
| Prop | Type | Description |
|---|---|---|
| size | numberdefault 20 | Diameter of the dot in px. |
| className | string | Extra classes on the dot. |
Installation
npx shadcn@latest add https://purrfectui.com/r/cursor-follower.jsonHow to use
import { CursorFollower } from "@/components/ui/cursor-follower";
// once, near the root
<CursorFollower />
// anything can grow it while hovered
<a href="/work" data-cursor-scale="4">Work</a>Source code
Loading…
License
MIT. Copy it into your project and change it as you like.