Metaballs
平滑融合的液態黏球（metaballs／ferrofluid）背景。
以 2D canvas 的「模糊 + 對比」濾鏡近似 metaball 場：相鄰球體靠近時邊緣自然長出融合橋接，像水銀或磁流體般流動。可跟隨游標互動。
載入預覽⋯
Playground
即時調整 props、程式碼片段同步更新——直接試出你要的樣子再複製。
7
0.12
1
16
<Metaballs />
安裝
npx shadcn@latest add https://webberui.com/r/metaballs.json或在 components.json 設定 registries 後，改用 @webberui/metaballs 安裝。
安裝依賴後，從 registry JSON（/r/metaballs.json 的 files[0].content）複製 metaballs.tsx 原始碼到你的 components/ui/ 目錄：
npm install motion clsx tailwind-merge使用
元件會填滿父容器，請放在有明確高度的有界框裡（避免使用 viewport 高度單位）：
import { Metaballs } from "@/components/ui/metaballs";
<div className="relative h-[320px] w-full overflow-hidden rounded-xl">
<Metaballs interactive />
</div>Props
| Prop | 型別 | 預設值 | 說明 |
|---|---|---|---|
count | number | 7 | 黏球數量 |
colors | string[] | 洋紅/紫/青 | 黏球配色，依序循環套用 |
background | string | "#0a0a12" | 背景色，融合門檻的基準 |
size | number | 0.12 | 半徑倍率（相對容器短邊） |
speed | number | 1 | 漂移速度倍率 |
blur | number | 16 | 模糊半徑（px），撐開融合橋接 |
contrast | number | 18 | 對比強度，決定邊緣銳利度 |
interactive | boolean | true | 一顆球平滑跟隨游標（僅滑鼠） |
可及性
- 使用者系統開啟「減少動態效果」時，只繪製一幀靜態融合場、不啟動動畫、不做互動
- 純裝飾背景，容器標記
aria-hidden，不干擾輔助科技朗讀