背景
Beams Background
光束沿對角路徑持續流動的 canvas 背景，支援色盤、角度、光暈與游標加速。
把這個效果裝進你的專案
在專案資料夾執行指令，CLI 會加入原始碼與依賴套件，再依下方使用範例引用元件。
npx webberui@latest add beams-backgroundPlayground
即時調整 props、程式碼片段同步更新——直接試出你要的樣子再複製。
18
14
1
2
8
編輯中的呼叫預設屬性
<BeamsBackground/>
完整範例包含預覽的排版與資料。先安裝元件，再把範例檔貼入你的專案。
安裝
npx webberui@latest add https://webberui.com/r/beams-background.json或在 components.json 設定 registries 後，改用 @webberui/beams-background 安裝。
使用
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，不留背景迴圈。