Metal

A real-time WebGL liquid-metal ring around buttons and icons, with a wandering halo of animated chrome.

Preview Install Usage

Tune in Studio Copy prompt

Add the Metal effect from Libraries.dev to my React app.

Install:
npm install metal-fx

Usage:
import { MetalFx } from 'metal-fx';

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

Props:
- preset: "chromatic" | "silver" | "gold" — each ships dark and light tunings
- strength: 0-1, multiplies the shader opacity and glow alpha
- theme: "light" | "dark", picks the preset's matching side

Metal wraps a button or icon in a real-time WebGL liquid-metal ring with a
wandering halo. Needs React 18 or newer.
Docs: https://libraries.dev/metal.html