Cursor & Pointer · What the pointer touches
Pointer spotlight指针聚光
- focusing
- directional
- restrained
A light follows the pointer, brightening what is near and lighting the border of that patch. Unlike hover highlight it has a radius and a falloff, so it can catch two neighbouring cards at once.
When to use it
For a row of cards or icons that are peers and all want to be clicked: recommendations, feature entries, a template list. Avoid it where there is a clear hierarchy — lighting everything equally erases the answer to “which one matters”. And always provide a resting state: with no pointer (touch, keyboard) the row must still look intentional rather than greyed out.
Parameters
exp(−d²/2·78²) falloff · 90px pool · per frame, no easing · border lights above k 0.45 · two tiles may light at once
Recipe
per-frame integration, no easingPointer spotlight → exp(−d²/2 · 78²) falloff · 90px pool · per frame, no easing · border lights above k 0.45 · two tiles may light at once
One sentence for your AI
Let a light follow the pointer across this row of cards: each card's brightness falls off with exp(−d²/(2·78²)) by the distance from its centre to the pointer, where d is in pixels. Overlay each card with a 90px radial gradient of the accent colour centred on the pointer's position relative to that card, using that computed value as its opacity. When brightness exceeds 0.45, switch that card's border to the accent colour. Let two neighbouring cards be lit at once — forcing a single nearest winner makes the decision flip back and forth as the pointer crosses between two cards, which reads as flicker. Return every light to 0 when the pointer leaves.