Crosshair
Crosshair is scoped to this card.
Hover inside to activate
Magnetic Crosshair
Smoothly interpolated guide lines that react to pointer movement. Links inside the container trigger a subtle distortion burst.
Explore DocsCustomize Crosshair
Supply any valid CSS color. Hex, rgb(), or CSS variables all work.
Scoped to container
Toggle to switch between card-scoped tracking and full screen behaviour.
Props
| Property | Type | Default | Description |
|---|---|---|---|
| color | string | white | The color of the crosshair lines. |
| containerRef | RefObject<HTMLElement | HTMLDivElement> | - | Optional container reference to scope the crosshair movement within a specific element. |
Dependencies
gsap
Created with ❤️ by Cybershoora