Gradient Mesh
網格漸層背景：四到五個柔和 radial-gradient 色點以 transform 緩慢漂移，交織成流動的 mesh。
載入預覽⋯
安裝
npx shadcn@latest add https://webberui.com/r/gradient-mesh.json或在 components.json 設定 registries 後，改用 @webberui/gradient-mesh 安裝。
安裝依賴後，打開 gradient-mesh.json，把 files[0].content 的內容複製到你的 components/ui/gradient-mesh.tsx：
npm install motion clsx tailwind-merge使用
前景內容直接放進 children，佈局（如置中、高度）寫在 className 上：
import { GradientMesh } from "@/components/ui/gradient-mesh";
<GradientMesh className="flex min-h-[400px] items-center justify-center">
<h1 className="text-4xl font-bold">Hero 標題</h1>
</GradientMesh>自訂配色與漂移速度：
<GradientMesh
colors={["#f0abfc", "#c4b5fd", "#7dd3fc", "#6ee7b7"]}
speed={1.5}
className="flex h-[320px] items-center justify-center rounded-2xl"
>
<p className="text-lg">更快、更粉的 mesh</p>
</GradientMesh>Props
| Prop | 型別 | 預設值 | 說明 |
|---|---|---|---|
colors | string[] | 柔和多彩配色 | mesh 色點顏色，依序對應各色點，不足時循環取用 |
speed | number | 1 | 漂移倍速，數值越大流動越快（週期除以此值） |
children | React.ReactNode | — | 前景內容，疊在 mesh 之上 |
className | string | — | 附加到最外層容器的 class |
細節
- 效能：只動 transform。 每個色點的漂移全部走
x/y，不觸碰top/left，不觸發 layout 與 paint；will-change由 Motion 在動畫期間自動管理，毋須手動設定 - 每個色點的 x 軸與 y 軸各自使用不同週期（12s–22s）搭配
repeat: Infinity+repeatType: "mirror"，兩軸錯開後色點走出弧形軌跡，五點之間永不同步，看起來像自然流動的 mesh - 色點是
blur-3xl的radial-gradient圓形，模糊由 GPU 合成一次後隨 transform 平移，成本固定，不隨動畫累加 - 背景層整層
pointer-events-none並以-z-10沉到內容之下（容器有isolate建立獨立堆疊上下文），前景互動完全不受影響 speed會做防呆：非正數時回退為1，避免週期變成Infinity或反向- 底色為
neutral-50/neutral-950，淺色與深色模式下 mesh 皆清晰耐看
可及性
- 背景層帶
aria-hidden，純裝飾不干擾輔助科技朗讀 - 使用者系統開啟「減少動態效果」時，所有色點停止漂移、以靜態漸層渲染，DOM 結構不變