Cursor
A custom cursor component with optional spring animations. It can be globally applied to the page or attached specifically to a parent element.
Examples
Cursor with image and spring
Cursor with custom component
Cursor with image and spring
Installation
npx shadcn@latest add https://ui.ndekocode.dev/r/motion-cursor.jsonComponent API
| Prop | Type | Default | Description |
|---|---|---|---|
| children | ReactNode | required | Children to be rendered within the custom cursor. Mandatory. |
| className | string | Optional CSS class for styling the custom cursor container. | |
| springConfig | SpringOptions | Configuration for the spring physics used in the cursor's movement. | |
| attachToParent | boolean | false | If true, the cursor will only be visible when hovering over its parent component. |
| transition | Transition | Transition settings from motion for animation effects. | |
| variants | Object (with initial, animated, exit properties) | Variants for controlling the animation states with specific properties for initial, animate, and exit states. | |
| onPositionChange | (position: { x: number, y: number }) => void | Callback function that is called when the cursor position changes. |