127 Components
Cursor Follower
MotionDual-spring custom pointer stage with a high-stiffness inner core and morphing outer ring that expands into contextual HUD pills.
X:000 Y:000
Installation
Install directly into your project using the shadcn CLI or copy the source code manually.
Requires:framer-motionclsxtailwind-merge
$npx shadcn@latest add "https://boseui.site/r/cursor-follower.json"
Props
TypeScript props supported by <CursorFollower />.
| Prop | Type | Default | Description |
|---|---|---|---|
| accentColor | string | undefined | Optional hex or CSS color override applied to the inner core dot and trailing ring border. |
| ringStiffness | number | 260 | Spring stiffness of the trailing outer ring. |
| ringDamping | number | 22 | Spring damping of the trailing outer ring. |
| ringSize | number | 34 | Idle diameter in pixels of the outer ring. |
| showCoordinates | boolean | true | Displays a live X/Y coordinate telemetry badge in the top-right corner. |
Key Features
- High-stiffness inner core dot paired with a damped trailing outer ring.
- Declarative contextual label morphing via the data-cursor-label HTML attribute.
- Built-in live X/Y coordinate telemetry HUD in the stage corner.
Keyboard & Accessibility
- Automatically restores native OS pointer and hides custom follower rings when prefers-reduced-motion is enabled.
- Follower layers use pointer-events-none so underlying buttons and links remain 100% clickable.
- Decorative follower elements are hidden from screen readers via aria-hidden='true'.