液態金屬背景 Liquid Metal｜免費 React 元件

反光液態鉻／金屬流動表面，以 2D canvas 即時繪製，含鏡面條紋與可選滑鼠漣漪。

用域扭曲的多層正弦場模擬流動的液態金屬，映到三段色階並疊上銳化的鏡面亮帶，繪製在低解析緩衝上再由 CSS 平滑放大。

把這個效果裝進你的專案

在專案資料夾執行指令，CLI 會加入原始碼與依賴套件，再依下方使用範例引用元件。

npx webberui@latest add liquid-metal

Liquid Metal 是 React 的液態金屬（liquid metal／chrome）背景元件，以 canvas 2D 逐像素繪製流動的鉻金屬表面，外框用 Tailwind CSS，不需要 WebGL 或 shader；Motion 只用來偵測減少動態效果設定。

Playground

即時調整 props、程式碼片段同步更新——直接試出你要的樣子再複製。

流動速度speed

紋理密度scale

扭曲強度distortion

0.6

反射條紋數reflections

滑鼠漣漪interactive

高光顏色specular

import * as React from "react";

export default function Example() {
  return (
    <div className="flex min-h-[320px] w-full items-center justify-center p-6">

編輯中的呼叫預設屬性

<LiquidMetal/>

    </div>
  );
}

完整範例包含預覽的排版與資料。先安裝元件，再把範例檔貼入你的專案。

適用情境

產品發表頁或 hero 區的主視覺背景，搭配大標題文字。
硬體、音訊或高階方案的介紹區塊，需要金屬質感的底圖。
活動或倒數頁面的橫幅，用 colors 換成金色、銅色等配色。
卡片或按鈕大小的小面積裝飾，調低 resolution 進一步省效能。

安裝

npx webberui@latest add https://webberui.com/r/liquid-metal.json

或在 components.json 設定 registries 後，改用 @webberui/liquid-metal 安裝。

使用

前景內容放進 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>

範例

Hero 區背景

把 LiquidMetal 當作區塊容器，標題與按鈕放在 children，佈局寫在 className。

import { LiquidMetal } from "@/components/ui/liquid-metal";

export function LaunchHero() {
  return (
    <LiquidMetal className="flex min-h-[480px] flex-col items-center justify-center gap-6 px-6 text-center">
      <h1 className="text-5xl font-semibold text-white mix-blend-difference">
        新一代音訊介面
      </h1>
      <a href="/preorder" className="rounded-full bg-white px-5 py-2 text-sm font-medium text-black">
        預購登記
      </a>
    </LiquidMetal>
  );
}

銅色配色、紋理更細

colors 依序是陰影、中間調、高光三段色；調高 scale 讓紋理更密，調低 reflections 讓亮帶較少。

<LiquidMetal
  colors={["#1c0f0a", "#9a3412", "#fed7aa"]}
  specular="#fff7ed"
  scale={5}
  reflections={2}
  speed={0.6}
  className="h-[280px] rounded-2xl"
/>

小面積卡片、降低解析度

resolution 是內部繪製緩衝的寬度（px），小卡片用較低的值即可，CSS 會把畫面平滑放大。

<LiquidMetal resolution={96} className="flex h-40 w-72 items-end rounded-xl p-4">
  <span className="text-sm font-medium text-white">Pro 方案</span>
</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" 時作用，離開後漣漪淡出
使用者系統開啟「減少動態效果」時，只繪製單一靜態金屬表面，不啟動動畫迴圈

常見問題

可以在 Next.js App Router 使用嗎？

可以。原始碼已有 "use client"，在 Server Component 頁面直接 import 即可；canvas 只在 effect 裡繪製，伺服器端只輸出空的容器。

捲出畫面後還會一直運算嗎？

不會。元件用 IntersectionObserver 在 canvas 離開視窗時取消 requestAnimationFrame，捲回來再接上。若想進一步降低成本，可以調小 resolution。

`colors` 可以用 `rgb()` 或 Tailwind 色名嗎？

不行。colors 與 specular 只解析 #rgb 或 #rrggbb 格式的十六進位色碼，無法解析時會改用中性灰。

手機上滑鼠漣漪會作用嗎？

不會。interactive 的漣漪只在 pointerType 為 mouse 時觸發，觸控不作用。

使用者開啟減少動態效果時會怎樣？

只繪製一張靜態的金屬表面，不啟動動畫迴圈。

Liquid Metal

把這個效果裝進你的專案

本頁目錄