漂浮光球背景
大型模糊漸層光球緩慢漂浮交錯，柔和氛圍背景。
數顆大型模糊漸層光球以各自不同的週期緩慢漂移、縮放呼吸，並以 mix-blend 疊色交錯出柔和的氛圍背景，內容透過 children slot 疊在光球之上，適合 Hero 區塊、登入頁與空狀態。
載入預覽⋯
Playground
即時調整 props、程式碼片段同步更新——直接試出你要的樣子再複製。
4
1
80
0.55
<FloatingOrbsBackground />
安裝
npx shadcn@latest add https://webberui.com/r/floating-orbs-background.json或在 components.json 設定 registries 後，改用 @webberui/floating-orbs-background 安裝。
安裝依賴後，從 registry JSON（/r/floating-orbs-background.json 的 files[0].content）複製 floating-orbs-background.tsx 原始碼到你的 components/ui/ 目錄：
npm install motion clsx tailwind-merge使用
import { FloatingOrbsBackground } from "@/components/ui/floating-orbs-background";
<FloatingOrbsBackground className="rounded-3xl border">
<div className="px-8 py-24 text-center">
<h1 className="text-4xl font-semibold">柔和氛圍的 Hero 區塊</h1>
</div>
</FloatingOrbsBackground>Props
| Prop | 型別 | 預設值 | 說明 |
|---|---|---|---|
palette | string[] | 內建五色（紫/粉/藍/綠/琥珀） | 光球顏色調色盤，依索引循環取用 |
count | number | 4 | 光球數量，會被限制在 1–8 之間 |
speed | number | 1 | 漂浮速度倍率，數值越大漂得越快 |
blur | number | 80 | 模糊半徑（px），越大光暈越柔和 |
opacity | number | 0.55 | 光球圖層整體不透明度（0–1） |
children | React.ReactNode | — | 疊在光球上方顯示的內容 |
className | string | — | 透傳到最外層容器 |
可及性
- 光球圖層標記
aria-hidden，純裝飾內容不會進入輔助科技的可及性樹 - 使用者系統開啟「減少動態效果」時，光球停止漂浮動畫，保留靜態漸層氛圍
- 光球圖層設定
pointer-events-none，不攔截任何滑鼠與觸控事件，children 內容保持完全可互動 - 光球僅為裝飾用途，請透過
opacity控制疊色強度，確保前景文字維持足夠對比