Fx Target Reticle

ProNew

Opt-in pointer effect: a reticle that snaps onto the nearest target and onto whatever has keyboard focus.

Customize

This item has no props to tune. Use the lens above to change theme, density, direction and more.

Pointer-driven. This is an opt-in component: nothing in the library mounts it for you, and it renders nothing under reduced motion.


pnpm dlx shadcn@latest add @tealmac-pro/fx-target-reticle

Prop	Type	Default	Description
`children`	`ReactNode`	-	Content with targets inside.
`enabled`	`boolean`	`false`	Turns the effect on. Pointer effects are opt-in.
`selector`	`string`	`"[data-reticle-target]"`	Elements the reticle can lock onto.
`reach`	`number`	`72`	Pointer distance, in pixels, within which it locks on.
`className`	`string`	-	Classes for the root element.

Pointer-driven and opt-in: nothing happens until enabled is set, and it never mounts under prefers-reduced-motion.
Keyboard focus on a target also moves the reticle onto it, so it is not only a pointer effect.
The overlay is decorative: it is hidden from assistive technology and never captures pointer events or focus.

Guide and examples

Pointer-driven. This is an opt-in component: nothing in the library mounts it for you, and it renders nothing under reduced motion.


pnpm dlx shadcn@latest add @tealmac-pro/fx-target-reticle

Prop	Type	Default	Description
`children`	`ReactNode`	-	Content with targets inside.
`enabled`	`boolean`	`false`	Turns the effect on. Pointer effects are opt-in.
`selector`	`string`	`"[data-reticle-target]"`	Elements the reticle can lock onto.
`reach`	`number`	`72`	Pointer distance, in pixels, within which it locks on.
`className`	`string`	-	Classes for the root element.

Pointer-driven and opt-in: nothing happens until enabled is set, and it never mounts under prefers-reduced-motion.
Keyboard focus on a target also moves the reticle onto it, so it is not only a pointer effect.
The overlay is decorative: it is hidden from assistive technology and never captures pointer events or focus.