Liquid Chrome `<mv-liquid-chrome>`

Fonctionnement

Bassin WebGL de métal liquide sous une lumière annulaire : de larges houles dérivent le long d’un lent flux tourbillonnaire, et le pointeur soulève le métal en une bosse qu’il remue en un doux vortex. Le métal suit le thème, argent satiné sur une page claire et chrome noir sur une page sombre, avec l’accent en lumière de contre sur les bords rasants. Il se met en pause hors écran, partage le budget de contextes WebGL de la page et garde une image fixe en mouvement réduit.

Catégorie	Arrière-plans
Type	Élément WebGL (`<mv-liquid-chrome>`)
Statut	stable
Installe aussi	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

Agent IA avec le serveur MCP de Marvelous UI : install_components({ slugs: ["liquid-chrome"], target_dir: "<absolute path>/src/marvelous", framework: "react" }).

Fichiers copiés (dépendances comprises) : 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.

Utilisation

Balisage de référence : partez de celui-ci et personnalisez-le avec les attributs, data-* et les variables CSS :

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