Aurora Background
極光流動背景：大型模糊色塊以 transform 緩慢漂移，可選噪點疊層與滑鼠跟隨。
把這個效果裝進你的專案
在專案資料夾執行指令，CLI 會加入原始碼與依賴套件，再依下方使用範例引用元件。
npx webberui@latest add aurora-backgroundAurora Background 是用 React、Tailwind CSS 與 Motion 做的極光背景（aurora background）元件：三個大型模糊的 radial-gradient 色塊以 transform 緩慢漂移，不使用 canvas 或 WebGL，前景內容直接放在 children 裡。
Playground
即時調整 props、程式碼片段同步更新——直接試出你要的樣子再複製。
<AuroraBackground/>
完整範例包含預覽的排版與資料。先安裝元件，再把範例檔貼入你的專案。
適用情境
- SaaS 或 AI 產品首頁的 hero 區塊，在標題與 CTA 後面加一層柔和的動態背景。
- 登入、註冊頁的整頁背景，讓表單卡片浮在色塊上。
- 產品發表、活動報名頁的主視覺區。
- 定價頁或 CTA 區塊的背景，用品牌色區隔出重點段落。
安裝
npx webberui@latest add https://webberui.com/r/aurora-background.json或在 components.json 設定 registries 後，改用 @webberui/aurora-background 安裝。
使用
前景內容直接放進 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>範例
全螢幕 hero
外層高度與置中寫在 className，前景內容維持一般的文字與按鈕。
import { AuroraBackground } from "@/components/ui/aurora-background";
export default function HomePage() {
return (
<AuroraBackground className="flex min-h-svh flex-col items-center justify-center px-6 text-center">
<h1 className="text-4xl font-semibold tracking-tight md:text-6xl">把客服紀錄整理成待辦清單</h1>
<p className="mt-4 max-w-xl text-neutral-600 dark:text-neutral-300">
串接信箱與表單，自動分類問題並指派給負責的同事。
</p>
<a href="/signup" className="mt-8 rounded-full bg-neutral-900 px-6 py-3 text-sm text-white dark:bg-white dark:text-neutral-900">
免費建立工作區
</a>
</AuroraBackground>
);
}深色品牌配色
底色來自容器的 bg-neutral-50 dark:bg-neutral-950，透過 cn（tailwind-merge）可以直接用 className 覆寫；colors 依序對應三個色塊。
<AuroraBackground
colors={["#f97316", "#e11d48", "#7c3aed"]}
grain
className="flex h-[480px] items-center justify-center bg-zinc-950 text-white dark:bg-zinc-950"
>
<h2 className="text-3xl font-semibold">年度產品發表會</h2>
</AuroraBackground>登入頁背景
開啟 interactive 讓色塊輕微跟隨滑鼠，表單放在半透明卡片裡。
<AuroraBackground interactive className="flex min-h-svh items-center justify-center p-4">
<form className="w-full max-w-sm rounded-2xl border border-white/40 bg-white/70 p-6 backdrop-blur dark:bg-neutral-900/70">
<h1 className="text-lg font-medium">登入帳號</h1>
{/* 表單欄位 */}
</form>
</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 結構不變
常見問題
可以在 Next.js App Router 使用嗎？
可以。原始碼開頭已有 "use client"，直接在 Server Component 頁面 import，children 仍可以放伺服器端渲染的內容。首次渲染與 SSR 輸出一致，掛載後才依「減少動態效果」設定切換靜態版本。
會影響效能嗎？
色塊的漂移只動 x、y、scale 這些 transform，不觸發 layout；模糊由 blur-3xl 處理。動畫是 Motion 的無限迴圈，元件沒有在離開畫面時暫停的邏輯。
可以調整顏色或速度嗎？
顏色用 colors 傳入三個色碼，底色用 className 覆寫。三個色塊的漂移週期（17、23、19 秒）寫在原始碼的 BLOBS 常數裡，沒有對應的 prop，需要改速度時直接編輯原始碼。
滑鼠跟隨在手機上有作用嗎？
沒有。interactive 只在 pointerType 為滑鼠時更新位置，觸控不會移動色塊；指標離開容器時色塊回到原位。
減少動態效果時會怎樣？
漂移與滑鼠跟隨全部停用，色塊以靜態漸層呈現。背景層帶 aria-hidden 與 pointer-events-none，不影響前景內容的點擊與朗讀。