Chroma Grid
A desaturated grid that reveals each tile's color under a pointer spotlight.
pointerhoverreveal
Customize
Grid
Columns3
Gap14px
Tile height150px
Corner radius16px
Spotlight
Spotlight size260px
Resting brightness0.5
Desaturate at rest
Pointer glow
Props
| Prop | Type | Default | Description |
|---|---|---|---|
items | ChromaGridItem[] | built-in set | Tiles ({ title, subtitle?, background?, color? }). |
columns | number | 3 | Number of columns. |
gap | number | 14 | Gap between tiles in pixels. |
tileHeight | number | 150 | Tile height in pixels. |
radius | number | 16 | Tile corner radius in pixels. |
spotlightSize | number | 260 | Diameter of the color-reveal spotlight in pixels. |
dim | number | 0.5 | Brightness of the resting (desaturated) grid, 0–1. |
grayscale | boolean | true | Drain color from the resting grid (vs. only dimming it). |
glow | boolean | true | Show a soft brand glow that trails the pointer. |
label | string | "Chroma grid" | Accessible name for the grid region. |