shadcn.io is not affiliated with official shadcn/ui
Spotlight Hover Mask Grid Features Block for Vue
Six funnel-analytics features on shared hairlines in a framed figure, each with a key figure and a sparkline, where a light follows the pointer and keyboard focus and dims the rest of the grid.
Installation
Overview
A spotlight feature grid for Vue with Ark UI. Six cells share hairlines inside a framed figure with + marks on its corners, three across from lg, two from md and one on a phone. Each cell has a title, a sentence, one key figure with a sparkline of the week behind it, and a text link with an arrow. Move the pointer over the grid and a soft light follows it while the rest of the grid dims, so the cell under it reads clearest; tab to a link and the light moves to that cell. The header row holds the Shine Button. The light is two layers that read two CSS variables, --x and --y, which a pointer handler writes: no animation loop and no library. On a touch screen, with a coarse pointer or with reduced motion, nothing lights and nothing dims. It's built from Guides, Shine Button and plain CSS with your theme's tokens for every colour. For analytics, reporting and any product whose features are views of the same data.
FAQ
How does the spotlight work?
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.
Does it work from the keyboard?
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.
When is the light turned off?
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.
Does the dimming hurt readability?
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.