CardSpotlight
聚光卡片 · 鼠标跟随径向高光(纯 CSS 变量 + radial-gradient) + color-mix 高光色 + surface token(零依赖)
✦
瑚琏组件
宗庙玉器,至美又大用——鼠标悬停感受柔和聚光。
全状态
✦
瑚琏组件
宗庙玉器,至美又大用——鼠标悬停感受柔和聚光。
⚡
主题色高光
color 传 var(--color-primary),高光随主题联动。
🔍
聚焦光束
radius=180 光晕更紧,适合强调核心内容区域。
🎨
设计
像素级还原,主题随系统联动。
⚙️
工程
TypeScript 全覆盖,类型即文档。
♿
无障碍
WCAG AA·键盘/屏幕阅读器全线兼容。
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>