A grid of cards that stays grayscale except under a soft spotlight that follows the pointer, where each card lights up in its own accent.
Core runtime
Docs and DX
Design system
Build tooling
Accessibility
Release lead
npx shadcn@latest add https://hyperblur.dev/r/card-chroma-grid.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/card-chroma-grid.tsx.
import { CardChromaGrid } from "@/components/hyperblur/card-chroma-grid"
<CardChromaGrid items={[{ title: "Ada Okafor", subtitle: "Core runtime", accent: "#ff6a5c" }]} columns={3} />| Prop | Type | Default | Description |
|---|---|---|---|
| items | { title: string; subtitle?: string; tag?: string; accent?: string; href?: string }[] | 6 sample people | Cards in reading order. A card with an href renders as a link. |
| columns | number | 3 | Number of grid columns. |
| radius | number | 130 | Radius of the color spotlight in pixels. |
| gap | number | 8 | Gap between cards in pixels. |
| idle | boolean | true | Move the spotlight along a slow path until the pointer arrives. |