Vortex Background
旋轉漩渦狀波動背景，粒子流線在中心匯聚，適合 CTA 區塊。
以 canvas 2D 粒子流場模擬的漩渦背景：數百條流線沿螺旋向中心收束，疊加有機波動與輝光，游標可擾動附近流線。
載入預覽⋯
Playground
即時調整 props、程式碼片段同步更新——直接試出你要的樣子再複製。
420
1
1
2.2
0
<VortexBackground />
安裝
npx shadcn@latest add https://webberui.com/r/vortex-background.json或在 components.json 設定 registries 後，改用 @webberui/vortex-background 安裝。
安裝依賴後，從 registry JSON（/r/vortex-background.json 的 files[0].content）複製 vortex-background.tsx 原始碼到你的 components/ui/ 目錄：
npm install motion clsx tailwind-merge使用
import { VortexBackground } from "@/components/ui/vortex-background";
<VortexBackground
interactive
className="flex h-[320px] w-full items-center justify-center rounded-xl"
>
<h3 className="text-3xl font-semibold text-white">走進漩渦中心</h3>
</VortexBackground>容器高度、置中等佈局直接寫在 className；請避免使用視口高度單位（如 h-screen），改用固定或內容高度讓背景自足有界。
Props
| Prop | 型別 | 預設值 | 說明 |
|---|---|---|---|
particleCount | number | 420 | 粒子數量，行動裝置可調低省效能 |
colors | string[] | 品紫→靛→青 | 流線顏色，依序循環套用 |
speed | number | 1 | 轉速倍率，越大旋轉越快 |
spin | number | 1 | 漩渦強度，越大向心收束越猛 |
turbulence | number | 2.2 | 波動幅度，疊加在流向上的擾動 |
particleWidth | number | 1.4 | 基準線寬（px） |
backgroundColor | string | "#070316" | 拖尾底色，建議用深色突顯輝光 |
glow | number | 0 | 光暈模糊量（px），越大越夢幻 |
interactive | boolean | false | 游標擾動附近流線（僅滑鼠生效） |
grain | boolean | false | 疊加低透明度噪點，減少色帶感 |
className | string | — | 透傳容器樣式（佈局、高度、圓角） |
可及性
- 使用者系統開啟「減少動態效果」時，只繪製一幀靜態漩渦、不啟動動畫迴圈與互動
- 背景層帶
aria-hidden，前景內容照常朗讀 - 離開元件時
cancelAnimationFrame與ResizeObserver皆會清理