Liquid Chrome

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.

Chrome.

move your cursor

Live, from the library itself: scroll, hover, navigate away and back. The demo is never gated.

Measured

JavaScript with its libs

10.3 kB raw

744 B raw of its own, 508 B gzip. The rest is the runtime, the shader runner, the canvas helper and the GL core, loaded once for every effect on the page.

CSS 5.1 kB raw including the base tokens. Measured from a production build, and again in CI for every change that can move it.

Browser support

Baseline · widely available

Chrome 56 · Firefox 51 · Safari 15; needs webgl2. Elsewhere: without WebGL2, a still brushed-metal gradient in the tint.

Install Pro

The demo above is never gated; the source is. With a key in components.json (see account), the registry serves it like any other item:

terminal

npx shadcn@latest add @moonarc-pro/liquid-chrome

src/pages/index.astro

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

Without a key the registry answers 401 with an upgrade message. Related free primitives: aurora.

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.

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.

Why it is built this way

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. See the migration table.

Aurora Background

Backgrounds

Ambient gradient field: three soft colour fields drifting at three coprime speeds, a slow hue rotation so the colours themselves move, and a film-grain layer stepped at 12 fps.

every browseralways

Liquid Image

Pro

Makes an image turn liquid under the cursor and settle back.

every browserpointer

Plasma

Pro

Draws glowing ribbons of light drifting through each other: four sine fields interfere on the GPU, the sum folds into soft bands, and each band glows in a colour sliding between two tones with a hot core at its peak.

every browseralwayspointer

Silk

Pro

Draws a sheet of fabric drifting in slow folds, lit from one side: a warped height field on the GPU, normals from finite differences, a diffuse body in the colour and a narrow sheen in a second tone.