這是什麼

一個 React 元件庫，把即時渲染的液態金屬效果套到按鈕、圖示、文字和徽章上。官方描述是「游走的光暈、映在鄰近元素上的反射、會被游標拉彎的環」。

它是 libraries.dev 上五個庫之一，其他四個是 Border Beam、Thinking Orbs、Gooey、Image。作者 Jakub Antalik，Metal 這個由 Martin Petercak 共同開發。

核心概念怎麼運作

效果不是圖片也不是影片，是顯示卡即時算出來的——跑在 WebGL2 上的 shader。所以它能反應游標位置、反射旁邊的元素，這些是預先輸出的動畫做不到的。

用法是拿元件包住你原本的東西，例如 MetalFx、MetalText、MetalBadge，然後用屬性調外觀：預設材質（chromatic、silver、gold）、強度、深淺主題，以及要不要接游標互動。

引擎有兩代：v2 跑在 Paper Shaders 上，v1 還留著。瀏覽器不支援 WebGL2 時會自動退回一般樣式。

解決什麼問題

這種質感過去要自己寫 shader，門檻卡在圖形程式。它把參數包成 React 屬性，不碰 shader 也能用。

用到哪些東西

React、WebGL2、Paper Shaders。安裝是 npm install metal-fx。網站上有 Get Pro 選項，但價格跟授權條款頁面上沒寫。libraries.dev 自稱是「給 AI agent 用的高完成度 UI 元件庫」。

前置知識

要會裝 npm 套件並寫一點 React。不需要懂 shader——除非你想拆開看。Framer 支援 React code component，所以技術上搬得進去，但需要自己包一層。

怎麼用

一、先在網站上調出想要的樣子

頁面中段有一個 Playground，左邊即時預覽、右邊是控制面板。四組開關：

調完，下方的程式碼區會跟著變，按右上角複製就好。這是這個網站真正的用法——不要先讀文件，先在 Playground 玩出你要的樣子，程式碼是副產品。

預覽區有個 Play 按鈕，效果要按了才會跑。

二、裝起來

npm install metal-fx

三、最小可用的寫法

包住你原本的元素就行：

import { MetalFx, MetalText, MetalBadge } from 'metal-fx'

然後用 <MetalFx> 把按鈕包起來，帶三個屬性：preset="chromatic"（材質）、strength={1}（強度）、theme="dark"（配合深淺色）。

文字和徽章有各自的元件：MetalText、MetalBadge。

網站上的完整範例長這樣：

這裡有幾個 Playground 沒有暴露的屬性：

• variant="circle" —— 形狀，搭配圓形按鈕

• innerShadow —— 內陰影，讓金屬看起來有厚度

• strength={0.90} —— 強度可以給小數，不是只能 0 或 1

• reflectionTargets={[siblingRef]} —— 指定要反射哪些鄰近元素，這是「反射旁邊東西」那個效果的接法

四、游標互動要另外接

那個「游標把金屬環拉彎」的效果不是自動的，要用 hook：

useMetalBend(ref) — 傳入元素的 ref，游標移過去會產生凹陷。

文字的反射則是 useMetalTextReflection。

五、兩個網站上的按鈕

Copy prompt — 把整份用法複製成一段提示詞，直接貼給 Claude 或 Cursor 讓它幫你接。這是 libraries.dev 主打「給 AI agent 用的元件庫」的意思。

Tune in Studio — 20 多個細部參數的視覺化調校工具，要付費（Get access）。免費版就是 Playground 那四組開關。

搬進 Framer 的路徑

Framer 支援 React code component，所以技術上可行，但不是直接貼上就好：

需要在 Framer 建一個 code component，把 MetalFx 包一層再匯出。npm 套件在 Framer 裡的載入方式跟一般專案不同，這一步要試。

先確認的事：頁面上沒寫授權條款和 Pro 版價格。商業案子要用之前得先問清楚。

沒查到的

實際效果的截圖我拍不到——WebGL 需要顯示卡即時運算，自動截圖工具跑不起來。要看效果只能自己開網站按 Play。