Spotlight Hover Mask Grid Features Block for React

A handler on the grid reads the pointer's position (or, for keyboard focus, the centre of the focused cell), writes it as --x and --y and sets a data-lit attribute. Two decorative layers read them: a faint glow at the point, and a veil of the page's background colour that is masked clear around it, so everything farther away is dimmed. When the pointer leaves, the attribute goes and the layers fade out in 300 ms.

Yes. Each cell ends in a real link; when one takes focus, the light moves to the middle of its cell and the others dim, and it fades when focus leaves the grid. The link keeps its own focus ring, and the veil is masked clear over the focused cell, so it is always fully readable.

The handlers check (prefers-reduced-motion: reduce), (pointer: coarse) and do nothing when it matches, and ignore touch pointers. So with reduced motion, on a phone or tablet, or with a coarse pointer, the grid is just a grid at full contrast.

Only while the light is on, and only away from it: the veil is the page's background at 62%, masked fully clear within about five rem of the pointer, so the text under the light is untouched and the text elsewhere is softened but legible. At rest, and with the light off, nothing covers the text.

Edit FEATURES: each has a value, a measure, a trend of eight numbers (oldest first) and a link label. The sparkline is drawn from the trend by a small pure function. It is decoration, and the figure and its measure are real text.

The Shine Button is a link to your sign-up on every target. It renders the link it's given with render, with nativeButton={false}.