MagicCard
magic-card魔法卡片 · 鼠标跟随径向高光(motion) + surface token
用法
基础用法
鼠标移入卡片，径向高光跟随光标位置。
Magic Card把鼠标移上来看高光
tsx
<MagicCard className="h-44 w-72">
<div className="flex h-full flex-col items-center justify-center gap-1 p-6">
<span className="text-lg font-semibold text-foreground">Magic Card</span>
<span className="text-sm text-muted">把鼠标移上来看高光</span>
</div>
</MagicCard>高光半径与强度
gradientSize 控制高光直径，gradientOpacity 控制 hover 时强度。
更大更亮的高光
tsx
<MagicCard className="h-44 w-72" gradientSize={320} gradientOpacity={0.3}>
<div className="flex h-full items-center justify-center p-6">
<span className="text-sm text-muted">更大更亮的高光</span>
</div>
</MagicCard>自定义高光色
gradientColor 可换任意 CSS 颜色（默认吃 var(--color-primary) 随主题）。
换一种高光色
tsx
<MagicCard className="h-44 w-72" gradientColor="var(--color-chart-3)">
<div className="flex h-full items-center justify-center p-6">
<span className="text-sm text-muted">换一种高光色</span>
</div>
</MagicCard>何时用
给单张卡片加鼠标跟随的径向高光，用于落地页/特性墙里需要一点交互质感的容器。要一组错落特性卡片用 BentoGrid；要静态信息卡片直接用普通 Card 即可，不必引入这个带运动监听的组件。
导入
ts
import { MagicCard } from "@hulianui/ui"Props
继承 ComponentPropsWithoutRef<"div">。
| 名称 | 类型 | 默认 | 说明 |
|---|---|---|---|
| gradientSize | number | 200 | 高光半径（px） |
| gradientColor | string | var(--color-primary) | 高光色 |
| gradientOpacity | number | 0.15 | 高光不透明度 |
| ...div | ComponentPropsWithoutRef\<"div"\> | — | 透传（className 控尺寸） |
Slots
| 插槽 | 类型 | 说明 |
|---|---|---|
| children | ReactNode | 卡片内容 |
禁忌 / 坑
- 依赖鼠标
pointermove（motion 驱动），是客户端组件——在纯触屏/无指针环境高光不会触发，仅作渐进增强。 - 高光色默认
var(--color-primary)；若自定义gradientColor走裸var(...)，注意瑚琏色彩 token 须带--color-前缀才解析（[[hulian-token-color-var-needs-color-prefix]]）。
相关
Table · Book3D · ProTable · PricingTable · JsonViewer · EditableTable
Playground
Magic Card把鼠标移上来看高光
<MagicCard gradientSize={200} gradientOpacity={0.15}>...</MagicCard>