CardSpotlight
card-spotlight聚光卡片 · 鼠标跟随径向高光(纯 CSS 变量 + radial-gradient) + color-mix 高光色 + surface token(零依赖)
用法
基础用法
包裹卡片内容，鼠标悬停时在光标处出现柔和聚光（默认 chart-1）。
✦
瑚琏组件
宗庙玉器，至美又大用——鼠标悬停感受柔和聚光。
tsx
<CardSpotlight className="w-64">
<div className="mb-3 text-3xl">✦</div>
<h3 className="mb-1.5 text-base font-semibold">瑚琏组件</h3>
<p className="text-sm text-muted">鼠标悬停感受柔和聚光。</p>
</CardSpotlight>自定义高光色
color 传任意 CSS 颜色（含 token），高光随主题色联动。
⚡
主题色高光
color 传 var(--color-primary)，高光随主题联动。
tsx
<CardSpotlight color="var(--color-primary)" className="w-64">
<div className="mb-3 text-3xl">⚡</div>
<h3 className="mb-1.5 text-base font-semibold">主题色高光</h3>
<p className="text-sm text-muted">高光随主题联动。</p>
</CardSpotlight>聚焦小半径
radius 越小光晕越紧，适合强调单个核心内容区域。
🔍
聚焦光束
radius=180 光晕更紧，适合强调核心内容区域。
tsx
<CardSpotlight radius={180} color="var(--color-chart-3)" className="w-64">
<div className="mb-3 text-3xl">🔍</div>
<h3 className="mb-1.5 text-base font-semibold">聚焦光束</h3>
<p className="text-sm text-muted">radius=180 光晕更紧。</p>
</CardSpotlight>多卡并列
每张卡独立追踪光标，配不同高光色构成特性栅格。
🎨
设计
像素级还原，主题随系统联动。
⚙️
工程
TypeScript 全覆盖，类型即文档。
tsx
<div className="flex flex-wrap gap-4">
<CardSpotlight color="var(--color-chart-1)" className="w-64">...</CardSpotlight>
<CardSpotlight color="var(--color-chart-2)" className="w-64">...</CardSpotlight>
</div>何时用
包裹特性卡 / 作品卡 / 定价卡等内容，鼠标悬停时跟随出现一束柔和径向高光，增强可交互的「活」感。聚光锚在卡片自身、随指针移动；要做整页鼠标跟随的边框走光用 BorderBeam，要做悬停时整面眩光扫过用 GlareHover，要做局部内容放大用 Lens。
导入
ts
import { CardSpotlight } from "@hulianui/ui"Props
继承 HTMLAttributes<HTMLDivElement>（className、style、onClick 等照常透传）。
| 名称 | 类型 | 默认 | 说明 |
|---|---|---|---|
| radius | number | 350 | 聚光灯半径(px)，越大高光扩散越广，越小越聚焦。 |
| color | string | chart-1 token | 聚光高光色，接受任意 CSS 颜色串，如 "#7c3aed"、"var(--color-primary)"。 |
Slots
| 插槽 | 类型 | 说明 |
|---|---|---|
| children* | ReactNode | 卡片内容。 |
禁忌 / 坑
color若要随主题联动，传 CSS 变量时务必带--color-前缀（如var(--color-primary)），裸var(--primary)在 Tailwind v4@theme下不解析。- 高光是指针跟随的客户端效果，纯 SSR / 无指针（触屏）环境下不显示高光，属预期降级。
相关
BorderBeam · ShineBorder · GlareHover · Lens · AnimatedBeam · OrbitingCircles
Playground
✦
CardSpotlight
悬停感受聚光效果，移动鼠标追踪光晕中心。
<CardSpotlight className="w-64">
<div className="mb-3 text-3xl">✦</div>
<h3 className="mb-1.5 text-base font-semibold">标题</h3>
<p className="text-sm text-muted">卡片描述文字。</p>
</CardSpotlight>