GlareHover
glare-hover反光悬停 · hover 斜向扫光 + reduced-motion + RSC
用法
基础用法
包裹任意内容，悬停时一道斜向反光自左向右扫过。
悬停看反光
tsx
<GlareHover className="grid h-40 w-72 place-items-center rounded-xl border border-border bg-surface">
<span className="text-lg font-semibold text-foreground">悬停看反光</span>
</GlareHover>扫光时长
用 duration 控制反光扫过的快慢，慢扫更显高级质感。
缓慢扫光 1s
tsx
<GlareHover
duration="1000ms"
className="grid h-40 w-72 place-items-center rounded-xl border border-border bg-surface"
>
<span className="text-lg font-semibold text-foreground">缓慢扫光 1s</span>
</GlareHover>自定义反光色
glareColor 覆盖默认半透明白，可染成品牌色调的光泽。
紫色光泽
tsx
<GlareHover
glareColor="rgba(124,58,237,0.5)"
className="grid h-40 w-72 place-items-center rounded-xl border border-border bg-surface"
>
<span className="text-lg font-semibold text-foreground">紫色光泽</span>
</GlareHover>套在图片卡上
对图片/封面同样生效，反光让卡片更有交互生命力。
精选作品
tsx
<GlareHover className="h-40 w-72 overflow-hidden rounded-xl border border-border">
<div className="flex h-full w-full items-end bg-gradient-to-br from-primary/60 to-chart-2/60 p-4">
<span className="text-lg font-semibold text-white">精选作品</span>
</div>
</GlareHover>何时用
想让卡片/按钮/图块在 hover 时被一道斜向玻璃反光扫过（精致感、可交互暗示）时用。它是包裹容器，把要反光的内容作为 children 传入，并接受所有原生 div 属性。要边框上持续绕行的光点用 BorderBeam；要整条边框流光用 ShineBorder；要悬停放大内容用 Lens。
导入
ts
import { GlareHover } from "@hulianui/ui"Props
继承全部原生 div 属性（ComponentPropsWithoutRef<"div">），另有：
| 名称 | 类型 | 默认 | 说明 |
|---|---|---|---|
| glareColor | string | 半透明白 | 反光色，默认玻璃光泽（明暗皆宜） |
| duration | string | "650ms" | 扫光时长（showcase 可选 "450ms" / "650ms" / "1000ms"） |
Slots
| 插槽 | 类型 | 说明 |
|---|---|---|
| children | ReactNode | 被反光扫过的内容 |
禁忌 / 坑
- reduced-motion 偏好下扫光被弱化/停用，不要把关键信息只放在反光动画里。
- 它是包裹件而非覆盖件——直接给它布局/样式 className，无需额外
relative容器。
相关
BorderBeam · ShineBorder · Lens · AnimatedBeam · OrbitingCircles · ProgressiveBlur
Playground
悬停看反光
<GlareHover duration="650ms">...</GlareHover>