Spotlight gridPro
A feature grid where light follows the pointer, cards play live demos, and a click morphs a card into its detail.
- A product landing page section that shows four features with live, hands-on previews.
- Developer tool marketing where a small working demo explains a feature better than copy.
- Pages that want a bento grid with one wide card per row and a detail view that opens in place.
- Use use-case-gallery for a browsable set of customer or use case stories.
- Use expandable-card when you need a single card that expands, not a whole feature grid.
- Use feature-illustration for one static feature explained with an illustration.
Installation
Install animui once, then import any component or block from its typed package entry.
React 19 and React DOM 19 are required. The package includes Free and Pro entries, styles and TypeScript declarations.
npm install https://animui.stracture.net/__local/package.tgzLoad the stylesheet once at your app root, then use the typed component import:
import 'animui/styles.css';
import { SpotlightGrid } from 'animui/spotlight-grid';Read the Code tab for the implementation files and the API reference below for required props.
Download animui 0.3.0 · Agent guideUsage
Use this as a starting point and replace the sample data with your own.
import { SpotlightGrid } from "animui/spotlight-grid"; export function FeaturesSection() { return ( <section style={{ padding: "96px 24px" }}> <SpotlightGrid /> </section> );}SpotlightGrid
A marketing feature grid of four cards (latency, deploys, flags, review). A soft light follows the mouse along the card borders, hovering a card plays a small live preview, and opening a card morphs it into a working detail view in place. Copy, charts, and people are sample data inside the file. Also the default export.
No props.
- 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.
Notes for AI
Give your coding assistant the Markdown reference instead of screenshots.
- 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 animui/lib, and animui AnimatedCounter for numbers.
The full library index for assistants is at /llms.txt.
