Border Beam
沿容器邊框巡遊的發光光束，用來凸顯卡片、定價方案或當前選取項目。
一段帶漸層拖尾的光束，沿著容器邊框持續繞行。以 CSS offset-path 的矩形路徑驅動，並用遮罩把光束裁切在邊框環上，效果輕量、不需 canvas。
載入預覽⋯
Playground
即時調整 props、程式碼片段同步更新——直接試出你要的樣子再複製。
60
6
1.5
<BorderBeam />
安裝
npx shadcn@latest add https://webberui.com/r/border-beam.json或在 components.json 設定 registries 後，改用 @webberui/border-beam 安裝。
安裝依賴後，從 registry JSON（/r/border-beam.json 的 files[0].content）複製 border-beam.tsx 原始碼到你的 components/ui/ 目錄：
npm install motion clsx tailwind-merge使用
BorderBeam 是一層絕對定位的覆蓋層。把它放進一個 relative、overflow-hidden 且有圓角的容器內，並讓 borderRadius 與容器圓角一致，光束才會貼齊轉角。
import { BorderBeam } from "@/components/ui/border-beam";
<div className="relative overflow-hidden rounded-xl border p-6">
{/* 你的內容 */}
<BorderBeam size={70} duration={6} borderRadius={12} />
</div>想做雙色對向光束時，疊兩個 BorderBeam，其中一個加 delay 與不同顏色即可。
Props
| Prop | 型別 | 預設值 | 說明 |
|---|---|---|---|
size | number | 60 | 光束長度（px），越大拖尾越長 |
duration | number | 6 | 巡遊一圈的時長（秒） |
delay | number | 0 | 起跑延遲（秒） |
colorFrom | string | "#22d3ee" | 光束頭端顏色 |
colorTo | string | "#818cf8" | 光束尾端顏色（之後淡出透明） |
borderWidth | number | 1.5 | 邊框（光束環）寬度（px） |
borderRadius | number | 12 | 圓角半徑（px），需與容器 rounded 一致 |
reverse | boolean | false | 反向（逆時針）巡遊 |
initialOffset | number | 0 | 起始位置偏移（0–100，百分比） |
transition | Transition | — | 覆蓋預設的 motion transition |
可及性
- 使用者系統開啟「減少動態效果」時，光束靜止不巡遊
- 覆蓋層帶
aria-hidden，屬純裝飾，不干擾輔助科技朗讀