Spotlight gridPro

Tab

Moves between the card buttons. Each card title is a button that stretches over the whole card.

EnterorSpace

Opens the focused card into its detail view; focus moves to the close button.

Escape

Closes the open detail view and returns focus to the card that opened it.

Arrow keys

Inside a detail view, move and select within the time range and rollout segmented controls.

• The section is labelled by its heading. Card buttons carry aria-expanded and aria-controls pointing at the open detail region.
• The open detail is a role="region" labelled by its title, and the grid behind it is made inert.
• Segmented controls are radiogroups with roving tabindex; the flag toggle is a role="switch"; Approve uses aria-pressed.
• The latency chart is a role="img" SVG whose label states the range and p95. Deploy and approval results are announced through a polite live region.
• Mini previews are aria-hidden; the card title and blurb carry the meaning.

• The card surface and title share layoutIds with the detail view, so opening grows the card on a spring with a little bounce and closing settles without overshoot.
• The border light tracks the pointer through springs and fades in and out; it only runs for mouse pointers.
• Hover previews: the latency sparkline redraws every 1.1s, the deploy counter ticks every 0.9s, the flag switch and comment pin spring in.
• Charts morph their path between time ranges; changed labels crossfade with a short blur.
• Reduced motion drops the layout morph, the pointer light, and the preview timers. Content fades or switches instantly and previews show their end state.

• The root is a size container named spotlight. Below 520px the grid is one column, from 520px two columns with wide cards spanning both, from 820px three columns.
• Below 520px the detail view opens at the card's own position instead of the top of the grid, and cards, padding, and the chart get smaller.
• The pointer light and hover previews only run for a mouse; on touch, cards simply open on tap.

• The pointer light is driven by motion values and CSS variables, so pointer moves do not re-render React.
• Each card reads its offset with a ResizeObserver. Preview intervals only run while a card is hovered or focused.
• useInView starts the first sparkline and tick animations once, when the grid is 30% visible.

• Use for a landing page feature section where each feature can be tried, not just described.
• All content lives in constants at the top of the file (CARDS, RANGES, SHIPS, COMMENTS). Edit those and the matching Mini and Detail components to present your own features.
• There are no props or callbacks; the deploy, flag, and approval interactions are simulated locally.
• Uses next/image with shared demo portraits from @/lib/media, and Arc AnimatedCounter for numbers.

The full library index for assistants is at /llms.txt.