BorderBeam
border-beam边框光束 · motion offsetPath 绕边 + mask 只露边框
用法
基础用法
BorderBeam 是 absolute inset-0 叠加层，放在 relative + rounded + overflow-hidden 容器内即沿边框绕行一束光。默认 primary→chart-2 渐变。
Border Beam
tsx
<div className="relative h-40 w-72 overflow-hidden rounded-xl border border-border bg-surface">
<div className="grid h-full place-items-center text-sm text-muted">Border Beam</div>
<BorderBeam />
</div>反向 · 放慢
reverse 让光束逆向绕行，duration 调整一圈秒数，size 调光束方块边长。
Reverse
tsx
<BorderBeam reverse duration={10} size={80} />自定义颜色
colorFrom / colorTo 可换任意 CSS 颜色或 token，呈现品牌色光束。
Custom Color
tsx
<BorderBeam colorFrom="var(--color-chart-3)" colorTo="var(--color-chart-5)" borderWidth={2} />何时用
想给卡片/容器边框加一段沿边匀速绕行的彩色光点（强调、加载中、AI 卡片高亮）时用。它是绝对定位的覆盖件，需放进 relative 容器内。要的是整条边框持续流光渐变（非一个光点绕圈）用 ShineBorder；要连接两个元素的光束用 AnimatedBeam；要 hover 斜扫反光用 GlareHover。
导入
ts
import { BorderBeam } from "@hulianui/ui"Props
| 名称 | 类型 | 默认 | 说明 |
|---|---|---|---|
| size | number | 50 | 光束方块边长 px（showcase 默认演示用 60） |
| duration | number | 6 | 绕行一轮秒数 |
| delay | number | 0 | 起始延迟秒 |
| colorFrom | string | var(--color-primary) | 光束起色 |
| colorTo | string | var(--color-chart-2) | 光束止色 |
| reverse | boolean | false | 反向绕行 |
| initialOffset | number | 0 | 起始偏移 0–100 |
| borderWidth | number | 1 | 边框宽度 px |
| className | string | — | 透传 className |
| style | CSSProperties | — | 透传内联样式 |
禁忌 / 坑
- 必须置于
position:relative容器内，且容器一般overflow-hidden，否则光束绕到圆角外溢出。 - 颜色 prop 喂 token 时需带
--color-前缀（默认值已带），裸var(--primary)不解析——参见 [[hulian-token-color-var-needs-color-prefix]]。 - 基于 motion 动画，reduced-motion 偏好下应预期被弱化/停止。
相关
ShineBorder · GlareHover · Lens · AnimatedBeam · OrbitingCircles · ProgressiveBlur
Playground
Border Beam
<div className="relative">
...content
<BorderBeam duration={6} size={60} />
</div>