Building a liquid-metal UI kit for React

After shipping Glacé, the liquid-glass kit, I wanted the opposite material. Glass bends the world behind it. Metal reflects a world that isn't there. So: Argent (npm i argentui), chrome, gold, gunmetal, and obsidian surfaces that flow like mercury. Everything below is the real package running live. Hover the tiles.

CSS couldn't fake this one

Glacé works in pure CSS + SVG because glass is refraction. You displace the actual backdrop with an feDisplacementMap and the eye believes it. I tried the same trick for metal: a seven-stop chrome gradient, animated, warped through feTurbulence. It looked like what it was, a gradient with a wobble.

The difference is that metal is reflection. A chrome surface shows you a warped environment (bright sky bands, dark horizon bands) and that environment has to come from somewhere. There's nothing behind the element to borrow. You have to synthesize the world, and that's a fragment shader's job.

The best implementation of this on the web is Paper's liquid-metal shader. It's what the chrome-logo demos you've seen lately are built on. The recipe inside is worth knowing: a hard light→dark stripe ramp (the faux environment), a curvature term that bends stripes as if wrapping a bulged surface, simplex noise scrolling through the coordinate space (the "liquid"), and the stripes sampled three times at small offsets (once per color channel) which gives the prismatic fringing that reads as polished chrome.

A shader is not a component

Paper gives you a <LiquidMetal> canvas. A kit needs buttons. The bridge is one idea: run the shader with shape="none" so it fills the element edge to edge, drop the canvas behind your content, and clip it to the surface's radius. Tones are just tuned parameter sets. Suddenly the shader is a material you can apply to anything:

import { MetalButton, MetalCard } from "argentui";
import "argentui/styles.css";
 
<MetalButton tone="silver">Get started</MetalButton>
<MetalCard tone="gunmetal" revealOnHover>…</MetalCard>

(@paper-design/shaders-react is a peer dependency, more on why that matters at the end. Install it alongside: npm i argentui @paper-design/shaders-react.)

The first version filled every surface with chrome and it was a lot, like a website made entirely of hubcaps. The fix became Argent's defining default: the metal is the edge, not the background. A quiet dark panel with a liquid-metal rim, and revealOnHover floods the surface on interaction. Calm until you touch it. (Full chrome is still there via variant="fill".)

The browser will eat your canvases

Here's the thing nobody tells you about building a kit where every component is a WebGL canvas: browsers cap concurrent WebGL contexts at around 16. When I added the fifth demo section to the docs site, the page hit 23 canvases and Chrome started silently killing contexts. Seven surfaces just went black. No error, no event you'd notice. Your oldest contexts simply stop existing.

The fix is to treat contexts like the scarce resource they are. Each surface mounts its shader only while it's on or near the screen (an IntersectionObserver with a 250px margin) and releases the context the moment it scrolls away, with a static gradient standing in. The same page now peaks at six live canvases while scrolling, zero lost. If you ship anything WebGL-per-component, you need this, and it has a happy side effect: offscreen metal costs nothing.

One more bug for the road: my surfaces had overflow: hidden to clip the canvas, and any metal element inside a flex row collapsed to 2px wide. overflow other than visible zeroes a flex item's automatic minimum size. The canvas was already clipped by its own wrapper, so the outer overflow was doing nothing except destroying layout. Two days of "why is the nav shrunk" for one deleted line.

One shader doesn't fit every shape

I shipped one tuned parameter set for "silver" and called it done. Then I looked at the components side by side and the cracks showed: the broad reflection bands that look right on a card became a single grey smear on a 10px progress bar, the same diagonal stripe on every toggle thumb so a row of them looked photocopied, and a badge's hairline rim landed in a dark band and vanished.

The fix was two orthogonal sets of presets. Finishes tune the shader to the shape. surface for cards, bar for thin strips (near-vertical stripes crossing it), orb for round thumbs (one soft highlight like a ball bearing, with a little per-instance angle jitter so a row doesn't look cloned), rim for hairlines (dense bands so any visible slice catches light). Effects tune the motion independently, from mirror-still chrome to a heavy molten churn. Components pick a sensible finish by default; you compose the rest:

Mercury as a control surface

The fun part of a metal kit is that liquid metal wants to be interactive. The toggle's thumb is a drop of mercury that squishes (scale(1.12, 0.9)) while you hold it. The progress bar is molten fill rising in a dark channel.

Text gets both treatments. The default is a metallic gradient with background-clip: text, pure CSS, costs nothing, works everywhere. But pass shader and the component measures your string, renders it into an SVG silhouette, and pours the actual shader into the letterforms, the same liquid-logo treatment, for type. There's also variant="outline", the border idea applied to text: the metal runs around the edge of each glyph while the interior takes a dark or gradient fill (the second and third lines below, the gradient stands in until the shader loads):

And the classic use of this shader: MetalLogo. Pass any image with a transparent background and the metal pours into its silhouette. The shader processes your image into a height field and flows the bands inside it. Swap the mark and the tone:

The same trick works for icons, which is what makes this usable in a real UI. MetalIcon takes any lucide-react or Heroicons element (or raw SVG, or a URL), serializes it to a silhouette, and pours metal in across all eight tones, including the coloured metals (cobalt, crimson, amethyst, emerald). Buttons take an icon prop too:

The buttons also vibrate on press where the platform allows it (navigator.vibrate, so Android; iOS Safari pretends not to hear you).

The license, and writing my own shader

One honest wrinkle. Paper's shaders ship under PolyForm Shield: free to use, but with a noncompete clause, and "a component library built on your shader library" lives uncomfortably close to the line. Argent keeps @paper-design/shaders-react as a peer dependency (you install it; I don't redistribute it), which is the polite reading. But the real way out is to not need it.

So Argent ships its own engine: about 120 lines of clean-room GLSL written from the recipe, not the source: stripe ramp, curvature, two octaves of simplex noise, per-channel dispersion, rim lift. Pass engine="native" to any surface and there's no Paper code in your bundle at all, MIT end to end:

The native engine is already indistinguishable on rims and borders; Paper's still wins on full-bleed fills (their dispersion and edge handling have had a lot more love). It stays opt-in until that gap closes, and then it becomes the default and the peer dependency becomes optional.

Caveats, because every shiny thing has them

• Every metal surface is a WebGL canvas. The viewport gating makes this fine in practice, but a grid of 200 metal buttons is still a bad idea. Use metal where it earns its keep.
• prefers-reduced-motion freezes the flow (the surfaces still look like metal, just still). Haptics are opt-out via setHaptics(false).
• SSR renders a static gradient until the canvas mounts, fine for below-fold content, a brief visible swap if a metal hero is your LCP element.

The kit: npm i argentui · argentui docs + lab · GitHub · glass sibling: Glacé.