Chroma Grid
Pro
Profile cards in grayscale, brought back to color by a soft spotlight that trails the pointer.
Meet the team. Move your pointer over the cards.
- NV
Nora Vale
Lead artist
@nora.paints
- KB
Kai Brennan
Gameplay engineer
@kaicodes
- IM
Ines Morel
Sound designer
@ines.hums
- TL
Theo Lund
Level designer
@theo.builds
- MO
Mara Okafor
Producer
@mara.ships
- SR
Sami Rook
Community lead
@sami.says
Customize
240px
0.45
Installation
Chroma Grid is part of Pro. After purchase you're invited to the private mekai-ui/mekai-ui-pro GitHub repository: copy chroma-grid.tsx into components/ui and run npm install motion.
Usage
import { ChromaGrid } from "@/components/ui/chroma-grid";
<ChromaGrid
items={team.map((p) => ({ name: p.name, role: p.role, accent: p.color, src: p.photo, href: p.url }))}
radius={260}
/>Props
7 properties| Property | Type | Default | Description |
|---|---|---|---|
| items | { name, role?, handle?, accent?, src?, avatar?, cover?, href? }[] | — | People. accent colors the header, avatar and hover border; href makes the card a link. |
| radius | number | 240 | Radius of the color spotlight, in pixels. |
| damping | number | 0.45 | 0 follows the pointer at once, 1 drifts after it slowly. |
| minCardWidth | number | 180 | Smallest card width before the grid drops a column. |
| gap | number | 16 | Space between cards in pixels. |
| restAt | { x, y } | null | null | Where the light rests when the pointer is away, as fractions of the grid. null fades it out. |
| className | string | — | Extra classes for the wrapper. |
Dependencies: motion