Spotlight Background
聚光燈掃射背景，內建掃射光錐、雷達旋轉、靜態舞台光束三款，可跟隨游標追焦。
載入預覽⋯
Playground
即時調整 props、程式碼片段同步更新——直接試出你要的樣子再複製。
1
<SpotlightBackground />
安裝
npx shadcn@latest add https://webberui.com/r/spotlight-background.json或在 components.json 設定 registries 後，改用 @webberui/spotlight-background 安裝。
安裝依賴後，從 registry JSON（/r/spotlight-background.json 的 files[0].content）複製 spotlight-background.tsx 原始碼到你的 components/ui/ 目錄：
npm install motion clsx tailwind-merge使用
import { SpotlightBackground } from "@/components/ui/spotlight-background";
<SpotlightBackground
variant="sweep"
interactive
className="flex h-[420px] items-center justify-center"
>
<h1 className="text-4xl font-bold text-neutral-50">Spotlight on you</h1>
</SpotlightBackground>前景內容以 children 傳入，會疊在光影之上；容器本身是深色底，淺色文字對比最佳。
款式
sweep（預設）：三道光錐自上緣支點左右掃射，週期各異形成交錯。radar：兩道對向光楔繞中心旋轉，像雷達或燈塔掃描。beam：一道自左上斜射的靜態舞台光束，配頂部柔光緩緩呼吸。
Props
| Prop | 型別 | 預設值 | 說明 |
|---|---|---|---|
variant | "sweep" | "radar" | "beam" | "sweep" | 聚光燈款式 |
colors | string[] | 近白 + 靛藍 + 天青 | 燈光色，依序對應各光束 |
speed | number | 1 | 動畫速度倍率，>1 更快、<1 更慢 |
interactive | boolean | false | 疊加一團跟隨游標的柔光（僅滑鼠生效） |
grain | boolean | false | 疊加低透明度噪點，柔化光暈色帶 |
children | ReactNode | — | 疊在光影之上的前景內容 |
className | string | — | 附加樣式；佈局、高度、圓角寫在這裡 |
細節
- 光束以
mix-blend-screen疊加，暗底上呈加色發光；容器預設bg-neutral-900 dark:bg-neutral-950，可用className覆蓋。 - 光錐以
clip-path收窄成錐形、外層與內層各自旋轉：外層朝游標傾斜、內層跑掃射迴圈，兩組 transform 互不干擾。 interactive的柔光經 spring 追焦，移動帶有慣性；觸控指標不觸發，避免行動裝置誤動作。- 邊緣暗角把光聚回中央，
grain進一步壓掉大面積漸層的色帶感。
可及性
- 使用者系統開啟「減少動態效果」時，光束停在靜止位置、不啟動掃射與旋轉，也不再跟隨游標。
- 整個光影層帶
aria-hidden且pointer-events-none，只作裝飾，不干擾前景內容的語意與互動。 - 前景內容的可讀性由你掌控：深色底搭配淺色文字，必要時自行加上文字陰影或半透明底板。