Liquid Metal Button

Liquid Metal Button wraps a React pill button in a Three.js WebGL shader that flows around the rim like liquid chrome. Highlight lobes travel the border continuously, hovering and pressing speed up the flow, and clicks fire a ripple through the metal. The palette, lobe count, flow angle, and dispersion are all props, and the button falls back to a plain CSS rim when WebGL is unavailable. Use it for premium CTAs on AI and developer tool landing pages where the primary action deserves extra attention.

Installation

Usage

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

<LiquidMetalButton onClick={() => console.log("clicked")}>
  Get Started
</LiquidMetalButton>

Icon-only: make it square and give it a label, since there is no text to read.

<LiquidMetalButton
  className="aspect-square w-12 px-0 py-0"
  aria-label="Get started"
>
  <Sparkles className="size-4" aria-hidden />
</LiquidMetalButton>

Recolour the rim by passing any subset of the palette:

<LiquidMetalButton
  colors={{ warm: "#ff6ec7", cool: "#7af0ff", highlight: "#f5f5ff" }}
>
  Get Started
</LiquidMetalButton>

The two tints are applied as brightness-preserving multipliers, so they shift the hue of the metal without lightening or darkening it — pass saturated colours and let chromaticShift control how strongly they read.

Props

Accepts every standard <button> attribute in addition to the below.