ChromaGrid
chroma-grid光标聚光揭示的卡片墙 · 整片灰度暗化、光标圈内透出全彩 + 单卡 hover 径向高光（弹性跟随·reduced-motion）
用法
基础用法
不传 items 时回退内置占位卡墙；移入鼠标在光标周围揭示出全彩窗口。
tsx
<ChromaGrid columns={3} />自定义团队卡
传 items 数组，每项含标题/副标题/句柄与 chart token 描边渐变。
tsx
const team = [
{
title: "林屿",
subtitle: "全栈工程师",
handle: "@linyu",
borderColor: "var(--color-chart-1)",
gradient: "linear-gradient(145deg, var(--color-chart-1), transparent)",
},
// …
];
<ChromaGrid items={team} columns={2} radius={260} />小半径聚焦
调小 radius 收紧揭示窗口，聚光更集中。
tsx
<ChromaGrid items={team} columns={2} radius={180} />高阻尼慢跟随
调大 damping 让揭示窗更黏地跟随光标，fadeOut 控制移出后的淡出时长。
tsx
<ChromaGrid items={team} columns={2} damping={0.8} fadeOut={1.2} />何时用
需要一面卡片墙、整体灰度暗化、靠光标聚光圈在指针附近透出全彩的展示位时用，多见于团队/成员墙、作品集封面墙。要 3D 自动洗牌的卡堆用 CardSwap；要扇形铺开+入场弹跳用 BounceCards；要规整数据表格用 Table。卡片色彩通过每项 borderColor / gradient 喂 chart token 定制。
导入
ts
import { ChromaGrid } from "@hulianui/ui"Props
| 名称 | 类型 | 默认 | 说明 |
|---|---|---|---|
| items | ChromaGridItem[] | 内置占位 demo | 卡片数据数组，缺省回退占位便于空状态预览 |
| radius | number | 300 | 聚光揭示半径（px），此半径内全彩、外侧渐隐为灰度 |
| columns | number | 3 | 栅格列数（桌面端），窄屏自动回落单列 |
| damping | number | 0.45 | 光标跟随阻尼（0~1，越大越黏/越慢）；reduced-motion 下忽略直接吸附 |
| fadeOut | number | 0.6 | 光标移出后灰度遮罩恢复全覆盖的淡出秒数 |
| className | string | — | 透传根容器类名 |
| style | CSSProperties | — | 透传根容器内联样式 |
ChromaGridItem：{ image?; title?; subtitle?; handle?; location?; borderColor?; gradient?; url?; children? }。borderColor / gradient 建议喂 var(--color-chart-1)~var(--color-chart-5)；url 提供时卡片可点击（新标签打开）；children 覆盖默认 image+文字布局。
禁忌 / 坑
- 卡片色彩 token 必须带
--color-前缀（如var(--color-chart-1)）；裸var(--chart-1)在渐变/描边里不解析。 - 揭示效果靠灰度对比，深色底容器观感最佳（showcase 用
oklch(0.16 0.02 255)）。 - reduced-motion 下光标弹性跟随退化为直接吸附，属预期。
相关
Table · Book3D · ProTable · PricingTable · JsonViewer · EditableTable
Playground
<ChromaGrid
items={team}
radius={300}
columns={3}
damping={0.45}
fadeOut={0.6}
/>