Cursor Follower
A smooth spring-based cursor follower with customizable physics, velocity scaling, and custom child icons or badges.
Spring Tracked (stiffness: 450, damping: 32)
Interactive Follower Stage
Move your pointer across this page to experience fluid spring-damped momentum and velocity scaling.
Installation
Add the component directly to your repository using shadcn CLI:
npx shadcn@latest add Surajmaurya1/easyui/cursor-follower
API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
| children | React.ReactNode | undefined | Custom icon, text badge, or React element displayed inside the cursor follower. |
| size | number | 40 | Width and height of the cursor follower in pixels. |
| offsetX | number | 0 | Horizontal offset from the cursor coordinates. |
| offsetY | number | 0 | Vertical offset from the cursor coordinates. |
| stiffness | number | 450 | Spring stiffness controlling how rapidly the follower catches up to the cursor. |
| damping | number | 32 | Spring damping controlling the smoothness and friction of deceleration. |
| mass | number | 0.5 | Spring mass controlling inertia and physical weight. |
| scaleOnMove | boolean | true | Scales the cursor follower slightly while the pointer is in active motion. |
| hideOnLeave | boolean | true | Hides the cursor follower when the pointer leaves the browser window or viewport. |
| className | string | undefined | Optional custom Tailwind CSS utility classes. |