KQ-1403 · LOCK/ON

Lock On

A target cursor bounded to the container it wraps: a hotspot dot sits exactly under the pointer while a reticle of four corner brackets trails it on a house spring and turns slowly, a little faster as it travels. When the pointer reaches an interactive child the brackets snap outward to frame it on springs.snap while the rotation unwinds to square, with a lock flash and an optional tick, and leaving releases them back to the pointer on springs.glide. Keyboard focus locks onto the focused control the same way and gives the system cursor back.

KQ-1403 · LOCK/ON

Gaugeworks · bench 4

Pressure rig

2.41bar

scanning · point at a control or press Tab

Open it on the Canvas stage

Install

One command — the source lands in your repo. Or copy it from the Code tab.

$ pnpm dlx shadcn@latest add @kinetiq/lock-on

Props

corner: number; default 10; Length of each bracket's arms, in px.
spin: number; default 40; How fast the idle reticle turns, in degrees per second; travel adds a little more.
color: "cobalt" | "signal" | "amber" | "ink" | string; default "cobalt"; The reticle's colour: a named tone or any CSS colour.
size: number; default 32; The idle reticle's size, in px.
padding: number; default 6; Space between a locked target and its frame, in px.
thickness: number; default 2; Bracket stroke width, in px.
follow: "flick" | "snap" | "glide"; default "snap"; The house spring the idle reticle trails the pointer on.
targets: string; default interactive elements; What the reticle locks onto, as a CSS selector; disabled controls never lock.
hideCursor: boolean; default true; Hide the system cursor inside the container while a mouse is there; text fields keep theirs.
flash: boolean; default true; Flash the frame when it locks.
dot: boolean; default true; Show a hotspot dot exactly under the pointer.
rest: boolean; default true; With nobody pointing, rest the frame dimly on the first target, or on one marked data-lock-home.
sound: boolean; default false; Play a tick when the reticle locks, pitched by the target's width; never before the page has had a click, tap or key.
disabled: boolean; default false; Turn the reticle off and give the cursor back.
onLock: (target: HTMLElement | null) => void; default —; Called with the element the reticle locks onto, and with null when it lets go.
className: string; default —; Classes for the container.
children: React.ReactNode; default —; The content the reticle roams over; it keeps every click, focus and key.

Prop	Type	Default	Description
corner	number	10	Length of each bracket's arms, in px.
spin	number	40	How fast the idle reticle turns, in degrees per second; travel adds a little more.
color	"cobalt" \| "signal" \| "amber" \| "ink" \| string	"cobalt"	The reticle's colour: a named tone or any CSS colour.
size	number	32	The idle reticle's size, in px.
padding	number	6	Space between a locked target and its frame, in px.
thickness	number	2	Bracket stroke width, in px.
follow	"flick" \| "snap" \| "glide"	"snap"	The house spring the idle reticle trails the pointer on.
targets	string	interactive elements	What the reticle locks onto, as a CSS selector; disabled controls never lock.
hideCursor	boolean	true	Hide the system cursor inside the container while a mouse is there; text fields keep theirs.
flash	boolean	true	Flash the frame when it locks.
dot	boolean	true	Show a hotspot dot exactly under the pointer.
rest	boolean	true	With nobody pointing, rest the frame dimly on the first target, or on one marked data-lock-home.
sound	boolean	false	Play a tick when the reticle locks, pitched by the target's width; never before the page has had a click, tap or key.
disabled	boolean	false	Turn the reticle off and give the cursor back.
onLock	(target: HTMLElement \| null) => void	—	Called with the element the reticle locks onto, and with null when it lets go.
className	string	—	Classes for the container.
children	React.ReactNode	—	The content the reticle roams over; it keeps every click, focus and key.