Liquid metal — Animated metal shader effect

React 用の npm パッケージ metal-fx。<MetalFx> で要素を包むだけで、ボタンやアイコンに WebGL のメタルシェーダーが乗る。

プリセットは Chromatic / Silver / Gold の3種類。strength スライダーで反射の強さを 0〜1 で調整できる。Default と Shadcn の2スタイル、Button と Circle の2形状をサポートし、グローと反射はそれぞれ切り替えられる。

import { MetalFx } from 'metal-fx';

<MetalFx preset="chromatic" strength={1}>
  <button>Upgrade to Pro</button>
</MetalFx>

reflectionTargets に隣接要素の ref を渡せば、その要素を反射ソースとして取り込める。CTA や「Upgrade to Pro」のように目を引かせたい一点に絞って使うと効く。