Liquid Metal Button

Interactive

A pill button ringed by a live WebGL liquid-metal shader — chromatic, silver, or gold reflections that intensify on hover. Polymorphic like Shimmer Button; the shader freezes to a single static frame under reduced-motion.

Inspired by metal-fx by Jakub Antalik — independently built, not affiliated. Attribution policy

Installation

npx shadcn@latest add https://parable-three.vercel.app/r/liquid-metal-button.json

Runs the shadcn CLI — the component source is copied intocomponents/parable/liquid-metal-button.tsx. You own it from there.

Usage

The exact code rendering the preview above.

<div className="flex flex-wrap items-center justify-center gap-4">
    <LiquidMetalButton>Chromatic</LiquidMetalButton>
    <LiquidMetalButton preset="silver">Silver</LiquidMetalButton>
    <LiquidMetalButton preset="gold">Gold</LiquidMetalButton>
  </div>

Props

LiquidMetalButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement>

Prop	Type	Default	Description
preset	LiquidMetalPreset	"chromatic"	Metal look for the ring. `"chromatic"` hue-rotates iridescent reflections.
strength	number	0.6	Reflection intensity / turbulence, 0–1. Hover nudges it up. Default `0.6`.
paused	boolean	false	Freeze the shader on a single rendered frame.
ringWidth	string	"2.5px"	Visual thickness of the metal ring. Default `"2.5px"`.
radius	string	"9999px"	Corner radius of the pill. Default `"9999px"`.
background	string	"#0f0f10"	Solid colour of the inner button face (mirrors `--pb-ink`). Default `#0f0f10`.
as	React.ElementType	—	Render as a different element for navigation semantics — e.g. an `<a>` or a router `Link`. Defaults to `"button"`. Pass `href` alongside for links.
href	string	—	Destination, used when rendering as a link element via `as`.