# Liquid Chrome (Moonarc)

Draws a pool of liquid metal. Coordinates are folded through six octaves of sine warps on the GPU and read through a chrome ramp (a deep body, a sharp bright horizon, a soft sky), tinted by one colour with a highlight tone. Opaque, like metal. The pointer sends ripples across the surface. Every constant is a custom property re-read when the element's style changes. Without WebGL2 or JavaScript a still brushed-metal gradient stands in. Fills its positioned parent.

- Pro block. Install: `npx shadcn@latest add @moonarc-pro/liquid-chrome` (license key required)
- Tier C · category background · trigger always, pointer
- Readout: `<LiquidChrome warp={1} ripple={1}>`
- Browser support: widely (Chrome 56 · Firefox 51 · Safari 15); elsewhere: without WebGL2, a still brushed-metal gradient in the tint
- Measured cost: 744 B raw JS · 508 B gzip · + runtime + shader + canvas + gl, 10.3 kB raw in all (with dependencies 10.3 kB raw; CSS 5.1 kB raw)
- Page: https://moonarc.dev/components/liquid-chrome/

## Props

| Prop | Type | Default | Description |
|---|---|---|---|
| `color` | `string` | `'oklch(0.72 0.03 250)'` | Metal tint; any CSS colour, theme tokens included. |
| `highlight` | `string` | `'oklch(0.99 0.01 250)'` | The brightest reflections. |
| `scale` | `number` | `2` | Surface scale: larger is busier. |
| `speed` | `number` | `1` | Flow speed multiplier; accumulated, so a change never jumps. |
| `warp` | `number` | `1` | How liquid the surface is: 0.4 is nearly flat, 1.6 churns. |
| `ripple` | `number` | `1` | Pointer ripple strength; 0 turns the pointer off. |

## Usage

```astro
<section class="relative min-h-[60vh] text-white">
  <LiquidChrome />
  <h1 class="relative mix-blend-difference">Liquid metal background</h1>
</section>
```

## Reduced motion

No loop: one frame at a fixed moment, drawn once; no ripples.

## With ClientRouter

Bound through the shared runtime: loop, observers and pointer listener are released before the swap and the WebGL context is lost on purpose after it; five round trips leave one context. Under transition:persist the canvas keeps its context and starts again on the next page.

## Craft

- Metal is a ramp, not a colour: one warped sine value read through a body, a sharp horizon band and a sky gives the mirror look with no environment map.
- Six octaves of alternating x/y sine warps at falling amplitude: the folds nest into each other like a poured surface.
- The highlight tone appears only where the ramp overshoots, so reflections burn out to the second colour instead of clipping to white.
- Ripples are a damped radial sine added to the coordinates before the warp, so they bend the reflections the way a disturbed surface does.
- Opaque by design: chrome over a page ground would read as smoke; the tint follows the theme when you pass a token.

## Replaces

- LiquidChrome (React Bits)
- Liquid metal shader backgrounds

## Source

Pro block. The source is served by the license-gated registry: `npx shadcn@latest add @moonarc-pro/liquid-chrome` with a key in components.json (https://moonarc.dev/account/). Related free primitives: aurora.