Browse components
Follow Cursor
A pill label that trails the cursor across a card on a spring, leans into motion and squishes on click.
Installation
npx shadcn@latest add @glint-ui/follow-cursorFirst time using @glint-ui? Add the registry to components.json once, or install by URL: npx shadcn@latest add https://glint-ui-seven.vercel.app/r/follow-cursor.json
Usage
import { FollowCursor } from "@/components/ui/follow-cursor";
<FollowCursor label="View project" className="rounded-3xl">
<img src="/cover.jpg" alt="" />
</FollowCursor>Props
| Prop | Type | Default | Description |
|---|---|---|---|
| children | ReactNode | — | The area the label follows the cursor over. |
| label | string | "View project" | Text on the pill. |
| stiffness | number | 0.12 | Spring pull toward the cursor. |
| damping | number | 0.7 | Velocity kept per frame. Higher is bouncier. |
| tilt | boolean | true | Lean the pill into horizontal motion. |
| hideCursor | boolean | true | Hide the system cursor over the area (mouse only). |
| className | string | — | Extra classes for the root element. |