ChromaGrid
chroma-gridDisplays a dimmed card grid that reveals full color inside a pointer-following spotlight.
Usage
Basic usage
Revert to the built-in placeholder wall when items is not passed; move the mouse in to reveal a full-color window around the cursor.
<ChromaGrid columns={3} />Custom team card
Pass items array, each item contains title/subtitle/handle and chart token stroke gradient.
const team = [
{
title: "Linyu",
subtitle: "Full Stack Engineer",
handle: "@linyu",
borderColor: "var(--color-chart-1)",
gradient: "linear-gradient(145deg, var(--color-chart-1), transparent)",
},
// …
];
<ChromaGrid items={team} columns={2} radius={260} />Small radius focus
Turn down radius to tighten the display window and focus the light more.
<ChromaGrid items={team} columns={2} radius={180} />High damping slow follow
Increase damping to make the reveal window follow the cursor more stickily, and fadeOut to control the fade-out duration after moving out.
<ChromaGrid items={team} columns={2} damping={0.8} fadeOut={1.2} />When to use
Use ChromaGrid for a team, member, or portfolio wall that is muted in grayscale until a pointer spotlight reveals full color. Use CardSwap for a cycling 3D stack, BounceCards for a fanned entrance, or Table for structured data. Customize item color with borderColor and gradient chart tokens.
Import
import { ChromaGrid } from "@hulianui/ui"Props
| Name | Type | Default | Description |
|---|---|---|---|
| items | ChromaGridItem[] | Built-in placeholders | Cards; omission uses six built-in Chinese sample profiles for preview. |
| radius | number | 300 | Full-color reveal radius in pixels. |
| columns | number | 3 | Desktop columns, falling back to one on narrow screens. |
| damping | number | 0.45 | Pointer damping from 0 to 1; larger follows more slowly. |
| fadeOut | number | 0.6 | Seconds for grayscale to return after pointer exit. |
| className | string | — | Root class name. |
| style | CSSProperties | — | Root inline styles. |
ChromaGridItem is { image?; title?; subtitle?; handle?; location?; borderColor?; gradient?; url?; children? }. Use var(--color-chart-1) through 5 for color. url opens in a new tab; children replace the default layout.
Example
<ChromaGrid columns={2} radius={260} items={[
{ title: "Lin Yu", subtitle: "Full-stack engineer", handle: "@linyu", borderColor: "var(--color-chart-1)", gradient: "linear-gradient(145deg, var(--color-chart-1), transparent)" },
{ title: "Chen Mo", subtitle: "DevOps engineer", handle: "@chenmo", borderColor: "var(--color-chart-2)", gradient: "linear-gradient(210deg, var(--color-chart-2), transparent)" },
]} />Built-in preview:
<ChromaGrid columns={3} />Usage guidelines
- Use the
--color-prefix for chart tokens; bare chart variables do not resolve reliably in gradients and borders. - Grayscale contrast looks best on a dark container.
- Reduced motion changes spring following to direct positioning.
- The six built-in sample title and role pairs are
"\u6797\u5c7f"/"\u5168\u6808\u5de5\u7a0b\u5e08"(“Lin Yu” / “Full-stack engineer”),"\u9648\u58a8"/"DevOps \u5de5\u7a0b\u5e08"(“Chen Mo” / “DevOps engineer”),"\u82cf\u9ece"/"UI/UX \u8bbe\u8ba1\u5e08"(“Su Li” / “UI/UX designer”),"\u5468\u91ce"/"\u6570\u636e\u79d1\u5b66\u5bb6"(“Zhou Ye” / “Data scientist”),"\u91d1\u6eaa"/"\u79fb\u52a8\u7aef\u5f00\u53d1"(“Jin Xi” / “Mobile developer”), and"\u5510\u884d"/"\u4e91\u67b6\u6784\u5e08"(“Tang Yan” / “Cloud architect”). Passitemsfor production content.
Related
Table · Book3D · ProTable · PricingTable · JsonViewer · EditableTable
Playground
<ChromaGrid
items={team}
radius={300}
columns={3}
damping={0.45}
fadeOut={0.6}
/>