Chroma Grid

A grayscale card grid that regains color locally under a spotlight as the cursor passes over it.

A grid of cards that are grayscale by default; as the cursor moves it lights up the surroundings like a flashlight, letting the cards it passes bloom into full color and fading back to gray once it leaves.

Loading preview…

npx shadcn@latest add https://webberui.com/r/chroma-grid.json

Playground

Tune the props live — the code snippet updates as you go, so you can dial in the look you want before copying it.

Grid columnscolumns

Spotlight radius (px)radius

260

Card height (px)cardHeight

160

<ChromaGrid />

Installation

npx shadcn@latest add https://webberui.com/r/chroma-grid.json

Or, once registries are configured in components.json, install it as @webberui/chroma-grid.

Usage

import { ChromaGrid, type ChromaGridItem } from "@/components/ui/chroma-grid";

const items: ChromaGridItem[] = [
  {
    title: "Aurora",
    subtitle: "Product Designer",
    gradient: "linear-gradient(150deg, #22d3ee, #0e7490)",
    glowColor: "#22d3ee",
  },
  // ...
];

<ChromaGrid items={items} columns={3} radius={240} />

Props

ChromaGrid

Prop	Type	Default	Description
`items`	`ChromaGridItem[]`	—	Card data
`columns`	`number`	`3`	Number of grid columns
`radius`	`number`	`260`	Radius of the coloring spotlight (px)
`cardHeight`	`number`	`260`	Height of a single card (px)
`className`	`string`	—	Appended to the outermost container's className

ChromaGridItem

Field	Type	Default	Description
`title`	`string`	—	Main card title
`subtitle`	`string`	—	Secondary descriptive text
`handle`	`string`	—	Small tag in the bottom-right corner
`gradient`	`string`	`linear-gradient(...)`	Gradient backdrop for the card; any valid CSS `background` value
`glowColor`	`string`	`#6366f1`	Color of the border and the glow

Accessibility

When the user has "reduce motion" enabled at the system level, a full-color static grid renders with no cursor tracking and no grayscale
The coloring layer and the spotlight are both aria-hidden and decorative only, and the card text underneath stays readable