Cursor & Pointer · What the pointer touches
Lock-on reticle锁定准星
- precise
- targeting
- game-like
The pointer becomes four corner brackets; over anything pressable they snap onto its bounds, saying “this is what I am aiming at”. Leave it and they fall back to a small square.
When to use it
For games, editors and demos where aiming is the point, or pages with only one or two clear actions. Do not use it over ordinary forms, lists and dense links: replacing the system pointer leaves people unsure where they are, and brackets that keep snapping about are distracting. And always leave a keyboard path — this interaction only exists for a pointer.
Parameters
free 22px box / locked to target bounds · lock follow 62ms / free 120ms · first-order follow, no easing
Recipe
Lock-on reticle → 62msLock-on reticle → free 22px box / locked to target bounds · lock follow 62ms / free 120ms · first-order follow, no easing
One sentence for your AI
Replace the pointer with a four-corner reticle: hide the system cursor and draw four L-shaped brackets (2px stroke, 11px arms, rounded), driven by one shared rectangle state. When the pointer is over a pressable element (button, card), the target rectangle expands to that element’s bounds plus 3px of padding; otherwise it is a 22px square centred on the pointer. Use elementFromPoint to decide what is under it. Interpolate with a first-order filter — 62ms when locked, 120ms when free, because aiming is a pull and should feel faster; interpolate width and height along with x and y, or the rectangle will jump first and the corners arrive late.