Aurora Background
極光流動背景：大型模糊色塊以 transform 緩慢漂移，可選噪點疊層與滑鼠跟隨。
載入預覽⋯
Playground
即時調整 props、程式碼片段同步更新——直接試出你要的樣子再複製。
<AuroraBackground />
安裝
npx shadcn@latest add https://webberui.com/r/aurora-background.json或在 components.json 設定 registries 後，改用 @webberui/aurora-background 安裝。
安裝依賴後，打開 aurora-background.json，把 files[0].content 的內容複製到你的 components/ui/aurora-background.tsx：
npm install motion clsx tailwind-merge使用
前景內容直接放進 children，佈局（如置中、高度）寫在 className 上：
import { AuroraBackground } from "@/components/ui/aurora-background";
<AuroraBackground className="flex min-h-[400px] items-center justify-center">
<h1 className="text-4xl font-bold">Hero 標題</h1>
</AuroraBackground>自訂配色、開啟噪點與滑鼠跟隨：
<AuroraBackground
colors={["#f472b6", "#a78bfa", "#38bdf8"]}
grain
interactive
className="flex h-[320px] items-center justify-center rounded-2xl"
>
<p className="text-lg">暖色系極光</p>
</AuroraBackground>Props
| Prop | 型別 | 預設值 | 說明 |
|---|---|---|---|
colors | string[] | 冷色系極光配色 | 三個極光漸層色，依序對應三個色塊 |
interactive | boolean | false | 色塊輕微跟隨滑鼠（僅滑鼠指標生效，觸控不作用） |
grain | boolean | false | 疊加低透明度噪點，減少大面積漸層的色帶感 |
children | React.ReactNode | — | 前景內容，疊在極光之上 |
className | string | — | 附加到最外層容器的 class |
細節
- 效能：只動 transform。 三個色塊的漂移全部走
x/y/scale，不觸碰top/left，不觸發 layout 與 paint；will-change由 Motion 在動畫期間自動管理，毋須手動設定 - 每個色塊各自不同週期（17s / 23s / 19s）搭配
repeat: Infinity+repeatType: "mirror"，在原點與目標間往返，三塊永不同步，看起來像自然流動 - 色塊是
blur-3xl的radial-gradient圓形，模糊由 GPU 合成一次後隨 transform 平移，成本固定，不隨動畫累加 - 背景層整層
pointer-events-none並以-z-10沉到內容之下（容器有isolate建立獨立堆疊上下文），前景互動完全不受影響 interactive開啟時，游標位置正規化為 -1 ~ 1，經低剛性useSpring平滑後，各色塊乘上不同的 depth 幅度（含正負值），形成輕微視差；只在pointerType === "mouse"時作用- 噪點是內嵌
feTurbulenceSVG 的 data URI，無額外網路請求，以 180px 平鋪、低透明度疊在色塊之上 - 使用者系統開啟「減少動態效果」時，漂移與滑鼠跟隨全部停用，色塊以靜態漸層渲染，DOM 結構不變