Reticle
A target-bracket cursor: four neutral corner brackets with bright white inner edges ride the pointer, then snap to frame any element matching a selector with an overshoot-then-bite clamp, a single white spark at each corner on contact, and a soft hairline frame while locked. Scoped or global, auto-disabled on coarse pointers.
motionpro
Pro
The preview is live. The source is Pro.
One purchase, lifetime access: every pro component's source, CLI install with your own registry token, and all future drops.
Installation
CLI
npx shadcn@latest add @crucible/reticleManual — install dependencies, then copy the source
npm install motionProps
| Prop | Type | Default | Description |
|---|---|---|---|
| className | string | ||
| selector | string | "[data-cursor-target]" | CSS selector that arms the lock-on. |
| size | number | 40 | Idle reticle edge length in px. |
| padding | number | 8 | Breathing room between a locked target and the brackets, in px. |
| colors | { /** Bracket body. @default "#e5e5e5" */ bracket?: string; /** Bright inner edge of each bracket. @default "#ffffff" */ edge?: string; /** Hairline frame + glow while locked. @default "rgba(255,255,255,0.6)" */ lock?: string; /** Spark fired at each corner on contact. @default "#ffffff" */ spark?: string; } | Palette of the clamp. | |
| snap | { stiffness?: number; damping?: number; mass?: number } | Spring physics for the snap/clamp motion. Lower damping = more overshoot before the bite. | |
| sparks | boolean | true | Fire a single ember spark at each corner on lock contact. |
| global | boolean | Attach to the whole viewport instead of the nearest containing element. Off by default — Reticle is scoped to its parent (place it inside a relative container) so it never hijacks the cursor page-wide unless you explicitly opt in. | |
| hideNativeCursor | boolean | false — Reticle augments rather than replaces | Hide the native system cursor while active. |
Honors prefers-reduced-motion with a designed static fallback, and passes className through.