Founding price: $35, then $99 after 23:59 UTC on 4 November, then $99
Get ProTrack the pointer inside an element as pixels and as 0 to 1 fractions, with an inside flag, updated once per frame for spotlight, tilt and parallax effects.
This item has no props to tune. Use the lens above to change theme, density, direction and more.
Use it for effects driven by the pointer position inside a box: a spotlight that follows the cursor, a 3D tilt card, a magnifier or a coordinate readout.
Do not use it for dragging (use useDragGesture) or to track the pointer over the whole page when a CSS custom property set once per frame is enough.
import { usePointerPosition } from "@/hooks/use-pointer-position"const { ref, x, y, nx, ny, inside } = usePointerPosition<HTMLDivElement>()
<div ref={ref} style={{ "--x": `${x}px`, "--y": `${y}px` }} />usePointerPosition<T extends HTMLElement>(): { ref, x, y, nx, ny, inside }
| Return | Description |
|---|---|
x, y | Pointer offset in px from the element's top-start corner (physical top-left of its box). |
nx, ny | The same, as a fraction from 0 to 1 of the width and height. |
inside | True while the pointer is over the element. |
Updates are coalesced with requestAnimationFrame. Touch and pen pointers are tracked too. The listeners and the pending frame are removed on unmount.
Pointer effects are decoration: never put information or controls only in them. Keep the effect subtle, honour prefers-reduced-motion (disable tilt and parallax) and keep full keyboard access to the content.
The hook ships with renderHook tests (use-pointer-position.test.ts) covering its behaviour, cleanup on unmount and server-safe defaults. It is safe to render on the server.