Liquid Chrome `<mv-liquid-chrome>`

WebGL pool of liquid metal under a ring light: broad swells drift along a slow curl flow, and the pointer draws the metal up into a hump that it stirs into a soft vortex.

How it works

WebGL pool of liquid metal under a ring light: broad swells drift along a slow curl flow, and the pointer draws the metal up into a hump that it stirs into a soft vortex. The metal follows the theme, satin silver on a light page and black chrome on a dark one, with the accent as a kick light on the grazing edges. It pauses off screen, shares the page's WebGL context budget and keeps a still frame under reduced motion.

Category	Backgrounds
Type	WebGL element (`<mv-liquid-chrome>`)
Status	stable
Also installs	shader
Keywords	safe-rewrite, webgl, shader, chrome, metal, liquid, hero

When to use

A luxury, automotive or hardware brand wants a polished metal surface as a hero backdrop
The hero should feel tactile: the metal rises and swirls under the visitor's pointer
The same metallic hero must look right in both light and dark themes without extra tuning

Avoid when

Chrome should be a material on cards or buttons rather than a full background → use Surface instead
A colorful oil-film or holographic sheen fits better than neutral metal → use Iridescence instead
A still section background is enough and no WebGL should run → use Backdrop instead

Install

node scripts/add.mjs liquid-chrome --out ./src/marvelous

AI agent with the Marvelous UI MCP server: install_components({ slugs: ["liquid-chrome"], target_dir: "<absolute path>/src/marvelous", framework: "react" }).

Files copied (dependencies included): tokens/tokens.css, core/base.css, core/canvas.js, core/dom.js, core/element.js, core/i18n.js, core/motion.js, core/observe.js, core/webgl.js, components/shader/shader.js, components/shader/shader.css, components/liquid-chrome/liquid-chrome.js, components/liquid-chrome/liquid-chrome.css.

Usage

Canonical markup, to start from and customize with attributes, data-* and CSS variables:

<mv-liquid-chrome data-fill></mv-liquid-chrome>
<div style="position:relative;display:grid;place-items:center;height:100%;min-height:320px;padding:2rem 1rem;box-sizing:border-box;text-align:center;pointer-events:none">
  <div>
    <p style="margin:0;font:700 clamp(1.6rem,4vw,2.6rem)/1.1 var(--mv-font-sans);letter-spacing:-.03em;color:var(--mv-fg);text-shadow:0 0 28px var(--mv-bg),0 0 10px var(--mv-bg)">Forged in motion</p>
    <p style="margin:.6rem auto 0;max-width:26rem;color:var(--mv-fg);text-shadow:0 0 16px var(--mv-bg),0 0 6px var(--mv-bg)">Hover the surface: the metal rises and swirls under your pointer.</p>
  </div>
</div>

API

Attributes

Name	Type	Default	Description
`color`	CSS color	`color-mix(in oklch, var(--mv-accent) 14%, #d9dde4)`	Tint of the metal; only its hue counts, the light sets the brightness (tokens accepted, read again on theme change).
`rim`	CSS color	`var(--mv-accent)`	Kick light caught by the grazing edges of the swells.
`scale`	number	`1`	Size of the swells.
`amplitude`	number	`1`	Surface relief (0 = a flat mirror).
`ripple`	number	`1`	Strength of the pointer's pull: how high the metal rises and how far it swirls (0 = none, max 3).
`speed`	number	`1`	Time multiplier.
`paused`	boolean		Freezes the animation on the current frame.
`interactive`	boolean		Follows the pointer only over the element (otherwise across the whole window).
`dpr`	number	`1.5`	Max pixel density (capped at 2).
`data-fill`	boolean		Fills the positioned parent (absolute, inset 0).

Events

Name	Description
`mv-error`	The shader failed to compile on this GPU. detail: { message }. The element gets data-error and shows its fallback.

Content structure

Name	Description
`children`	Content placed inside the element sits above the metal.

Accessibility

Decorative: the canvas is aria-hidden and never takes pointer events, and content placed inside stays in the normal reading order. The loop stops off screen and in hidden tabs; reduced motion (OS or <html data-motion="reduce">) and paused keep a still, representative frame without the pointer's pull. Without WebGL2 a still band of metal in the theme tokens is shown; forced colors and print hide the canvas. The surface mixes bright and dark bands, so text placed over it needs a halo or a backing panel to stay readable.