Beams Background
光束沿對角路徑持續流動的 canvas 背景，支援色盤、角度、光暈與游標加速。
載入預覽⋯
Playground
即時調整 props、程式碼片段同步更新——直接試出你要的樣子再複製。
18
14
1
2
8
<BeamsBackground />
安裝
npx shadcn@latest add https://webberui.com/r/beams-background.json或在 components.json 設定 registries 後，改用 @webberui/beams-background 安裝。
安裝依賴後，從 registry JSON（/r/beams-background.json 的 files[0].content）複製 beams-background.tsx 原始碼到你的 components/ui/ 目錄：
npm install motion clsx tailwind-merge使用
import { BeamsBackground } from "@/components/ui/beams-background";
<BeamsBackground
interactive
grain
className="flex h-[420px] items-center justify-center"
>
<h1 className="text-4xl font-bold">Ship in the light.</h1>
</BeamsBackground>光束以 canvas 2D 繪製並用 requestAnimationFrame 驅動，透過旋轉座標系讓每束沿統一角度的路徑流動。前景內容疊在光束之上，佈局（置中、高度、圓角）直接寫在 className。
Props
| Prop | 型別 | 預設值 | 說明 |
|---|---|---|---|
beamCount | number | 18 | 光束數量 |
colors | string[] | 冷色系配色 | 光束顏色，依序循環套用 |
angle | number | 14 | 流動方向角度（度），0 為垂直向下，正值向右傾斜 |
speed | number | 1 | 流速倍率，數值越大流動越快 |
beamWidth | number | 2 | 基準光束寬度（px），各束在此基準上隨機變化 |
glow | number | 8 | 光暈強度：施加在畫布上的模糊量（px） |
interactive | boolean | false | 游標進入容器時光束加速流動（僅滑鼠生效） |
grain | boolean | false | 疊加低透明度噪點，減少大面積光暈的色帶感 |
children | ReactNode | — | 疊在光束之上的前景內容 |
className | string | — | 容器樣式（佈局、高度、圓角等） |
細節
- 每束光在旋轉後的座標系中沿本地 Y 軸掃動，因此所有光束共用同一流向；
angle只旋轉整個場，效能不受影響。 - 光束寬度、長度、流速與不透明度皆隨機分佈，避免整齊劃一造成機械感；
glow以 CSSfilter: blur由 GPU 加速柔化，不逐束模糊。 - 每束的顏色由
colors依序循環取用，色盤長度不需等於beamCount。 - 畫布依
devicePixelRatio縮放（上限 2x）並以 CSS 像素繪製，ResizeObserver監看容器尺寸自動重繪。
可及性
- 使用者系統開啟「減少動態效果」時，只繪製一幀靜態光束、不啟動動畫迴圈，也停用游標互動。
- 整個光束層帶
aria-hidden且pointer-events-none，純裝飾、不干擾前景內容的點擊與朗讀。 - 元件卸載時會清理
requestAnimationFrame與ResizeObserver，不留背景迴圈。