A lock-on reticle with four corner brackets and a rotating dashed ring. It follows the pointer and shrinks onto buttons and links when you hover or tab to them.
Release 4.2
Checks passedReady to ship to production
npx shadcn@latest add https://hyperblur.dev/r/cursor-target.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/cursor-target.tsx.
import { CursorTarget } from "@/components/hyperblur/cursor-target"
<CursorTarget><button>Deploy</button></CursorTarget>| Prop | Type | Default | Description |
|---|---|---|---|
| accent | string | "#2f7bff" | Bracket color while locked onto a target. |
| size | number | 44 | Reticle size in pixels while it follows the pointer freely. |
| padding | number | 6 | Space in pixels between a locked target and the brackets. |
| thickness | number | 2 | Bracket line thickness in pixels. |
| selector | string | "a, button, [data-hb-target]" | CSS selector for children the reticle locks onto. |
| showLabel | boolean | true | Show a chip under the reticle with coordinates, or the target name when locked. Uses data-hb-label, aria-label or the text. |
| idle | boolean | true | Play a slow scripted path while the pointer is away. The effect hands over to the real pointer when it enters and eases back when it leaves. |
| children | ReactNode | Content rendered inside the stage. The stage fills its parent, so give the parent a height. |