# Liquid metal

One word as flowing polished metal on black, its reflection streaming as the pointer moves. Live at https://design.how/vault#liquid-metal.

Install the skill, which carries the template, the brief and a check script:

```sh
npx skills add https://design.how/vault/liquid-metal
```

## What it is

The word "metal", set heavy and tight so the letters nearly touch, rendered as poured polished metal on a near-black backdrop. A bright horizon line runs through every letter, with cool sky above it and a dark band and teal ground below, the way a polished object reflects a studio. Moving the pointer tilts the reflection, so the horizon slides and the metal seems to stream; glints twinkle on the brightest, most curved ridges, and the valleys where strokes meet darken. A click crossfades metal and backdrop together to the next of eight colourways.

There is no geometry. The word is rasterised once into a texture with three channels: crisp coverage, a wide blur that becomes the big rounded bulge of each letter, and a tighter blur that adds a little surface curvature. The shader takes the gradient of the combined height as a normal and looks the reflected direction up in a five-stop vertical ramp (sky, horizon light, horizon dark, ground, base), a matcap in all but name. Two blurs instead of one avoid the stair-stepping an 8-bit single blur gives a normal.

Around that sits the rest of the look: an edge bloom that keeps the soft poured rim rather than clipping it, a soft reflected horizon and a two-tone temperature split in the backdrop taken from the same ramp, so the backdrop changes colour with the metal, highlights compressed rather than clipped to white, and a fine grain. The ramp's 18 floats ease toward the next preset every frame, so a colourway change is a crossfade, not a cut.

## How it works

- Rasterise the word once, fitted to about 82% of the width with slightly negative tracking, into R crisp coverage, G a wide blur and B a tight blur.
- Draw one quad; in the fragment shader, take the normal from the gradient of the combined height and reflect a view direction tilted by the eased pointer.
- Shade by indexing a five-stop ramp with the reflected vector's vertical component, with a sharp horizon between the light and dark stops.
- Add edge bloom, sparks on bright ridges from a hash, a backdrop derived from the same ramp, soft highlight compression and grain.
- Ease the ramp's 18 floats toward the target preset each frame so a colourway change crossfades metal and backdrop together.
- Rebuild the field only when the size, word or font changes, deferred to idle time.
- Cap the pixel ratio at 2, stop the loop on webglcontextlost, and on destroy delete the program, buffer and texture and lose the context.
- Under reduced motion, draw one still frame in the first colourway.

## What you can change

- `WORD` (metal): The word. Short and bold reads best: the metal needs surface.
- `RAMPS` (Silver Teal, Gold, Iridescent, Rose Gold and four more): The colourways, each five ramp stops from sky to base plus a spark tint.
- `DEFAULT_RAMP` (0): The colourway it starts in.
- `FONT_CSS, FONT_WEIGHT` (var(--visual-sans), 600): The face and weight. Heavy weights give the blur more to round.

Last updated: 2026-11-02