Chroma Grid
Cards & Layout
A grid of cards rendered in grayscale that reveal vibrant colors within a configurable radius as the cursor moves over them.
Loading preview...
Customize
Reveal Radius (px)300
Columns3
Gap (px)16
Damping0.45
Props
| Prop | Type | Default | Description |
|---|---|---|---|
items | ChromaGridItem[] | — | Array of card objects with title, subtitle, color, optional image and className. |
radius | number | 300 | Color reveal radius in pixels from the cursor position. |
columns | number | 3 | Number of grid columns. |
gap | number | 16 | Gap between cards in pixels. |
damping | number | 0.45 | Mouse follow smoothness factor between 0 and 1. |
className | string | '' | Additional CSS classes for the grid container. |