Liquid Metal
反光液態鉻／金屬流動表面，以 2D canvas 即時繪製，含鏡面條紋與可選滑鼠漣漪。
用域扭曲的多層正弦場模擬流動的液態金屬，映到三段色階並疊上銳化的鏡面亮帶，繪製在低解析緩衝上再由 CSS 平滑放大。
載入預覽⋯
Playground
即時調整 props、程式碼片段同步更新——直接試出你要的樣子再複製。
1
3
0.6
3
<LiquidMetal />
安裝
npx shadcn@latest add https://webberui.com/r/liquid-metal.json或在 components.json 設定 registries 後，改用 @webberui/liquid-metal 安裝。
安裝依賴後，打開 liquid-metal.json，把 files[0].content 的內容複製到你的 components/ui/liquid-metal.tsx：
npm install motion clsx tailwind-merge使用
前景內容放進 children，佈局（如置中、高度）寫在 className 上：
import { LiquidMetal } from "@/components/ui/liquid-metal";
<LiquidMetal className="flex h-[400px] items-center justify-center rounded-2xl">
<h1 className="text-4xl font-bold text-white mix-blend-difference">
Chrome
</h1>
</LiquidMetal>自訂色階、開啟滑鼠漣漪並調快流速：
<LiquidMetal
colors={["#1a1005", "#b45309", "#fef3c7"]}
specular="#fffbeb"
interactive
speed={1.4}
distortion={0.8}
className="flex h-[320px] items-center justify-center rounded-2xl"
>
<p className="text-lg text-white mix-blend-difference">熔金</p>
</LiquidMetal>Props
| Prop | 型別 | 預設值 | 說明 |
|---|---|---|---|
colors | [string, string, string] | 鉻銀配色 | 三段金屬色階：[陰影, 中間調, 高光] |
specular | string | "#f8fafc" | 鏡面反射亮帶的顏色 |
speed | number | 1 | 流動速度倍率 |
scale | number | 3 | 空間頻率，越大表面紋理越密 |
distortion | number | 0.6 | 域扭曲強度，越大液態感越強 |
reflections | number | 3 | 鏡面亮帶密度 |
interactive | boolean | false | 滑鼠在表面拖出漣漪（觸控不作用） |
resolution | number | 192 | 內部繪製緩衝寬度，越小越省效能 |
children | React.ReactNode | — | 前景內容，疊在金屬表面之上 |
className | string | — | 附加到最外層容器的 class |
細節
- 低解析緩衝 + CSS 放大。 逐像素運算跑在固定寬度（預設
192）的離散緩衝上，putImageData後由 CSS 把 canvas 拉伸填滿容器，瀏覽器的雙線性內插自然把像素抹成平滑的液態表面，成本與容器實際大小無關 - 表面由三層正弦疊加成連續場，座標本身再被正弦推移（域扭曲），形成錯位流動；鏡面條紋是對場值取高頻正弦後
pow4銳化的亮帶，疊在三段色階之上做出鉻的反射 - 緩衝長寬比透過
ResizeObserver跟著容器調整，避免金屬紋理被拉伸變形；離開時cancelAnimationFrame與disconnect一併清理 - 會變動的 props 存進 ref，動畫迴圈每幀讀最新值，改參數不必重啟
requestAnimationFrame interactive開啟時，游標位置正規化為 0~1，在該點注入環狀漣漪並隨距離高斯衰減；只在pointerType === "mouse"時作用，離開後漣漪淡出- 使用者系統開啟「減少動態效果」時，只繪製單一靜態金屬表面，不啟動動畫迴圈