Liquid Chrome `<mv-liquid-chrome>`

So funktioniert es

WebGL-Becken aus flüssigem Metall unter einem Ringlicht: Breite Wogen treiben entlang einer langsamen Wirbelströmung, und der Zeiger zieht das Metall zu einem Buckel hoch, den er zu einem sanften Strudel verrührt. Das Metall folgt dem Theme, satiniertes Silber auf einer hellen Seite und schwarzes Chrom auf einer dunklen, mit dem Akzent als Kantenlicht an den streifenden Rändern. Es pausiert außerhalb des Bildschirms, teilt das WebGL-Kontextbudget der Seite und behält bei reduzierter Bewegung ein Standbild.

Kategorie	Hintergründe
Typ	WebGL-Element (`<mv-liquid-chrome>`)
Status	stabil
Installiert auch	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

Installation

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

KI-Agent mit dem MCP-Server von Marvelous UI: install_components({ slugs: ["liquid-chrome"], target_dir: "<absolute path>/src/marvelous", framework: "react" }).

Kopierte Dateien (inklusive Abhängigkeiten): 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.

Verwendung

Referenz-Markup zum Starten und Anpassen mit Attributen, data-* und CSS-Variablen:

<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	Typ	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.