Target Cursor
Pro
A cursor of four corner brackets that spins while idle and snaps around buttons and links.
Choose a mode
Ready, player one?
Hover a mode, or press Tab
Customize
#ff784f
8px
12px
4s
Installation
Target Cursor is part of Pro. After purchase you're invited to the private mekai-ui/mekai-ui-pro GitHub repository: copy target-cursor.tsx into components/ui and run npm install motion.
Usage
import { TargetCursor } from "@/components/ui/target-cursor";
<TargetCursor className="min-h-96">
<button type="button" data-cursor-target>Play</button>
<a href="/settings" data-cursor-target>Settings</a>
</TargetCursor>Props
8 properties| Property | Type | Default | Description |
|---|---|---|---|
| children | ReactNode | — | Content of the area. |
| targetSelector | string | "[data-cursor-target]" | Elements the brackets snap around. |
| color | string | "#ff784f" | Color of the brackets and the dot. |
| padding | number | 8 | Gap between a target and the brackets, in pixels. |
| cornerSize | number | 12 | Length of each corner bracket, in pixels. |
| spinDuration | number | 4 | Seconds for one idle turn. 0 stops the spin. |
| idleSize | number | 30 | Size of the cursor away from targets, in pixels. |
| className | string | — | Extra classes for the area. |
Dependencies: motion