Liquid Chrome `<mv-liquid-chrome>`

リングライトに照らされた液体金属の WebGL プール：大きなうねりがゆっくりとしたカールフローに乗って漂い、ポインターは金属を盛り上げてこぶを作り、それを柔らかな渦へとかき混ぜます。

仕組み

リングライトに照らされた液体金属の WebGL プール：大きなうねりがゆっくりとしたカールフローに乗って漂い、ポインターは金属を盛り上げてこぶを作り、それを柔らかな渦へとかき混ぜます。金属はテーマに従い、ライトページではサテンのシルバー、ダークページではブラッククロームになり、かすめるような縁にはアクセントカラーがキックライトとして入ります。画面外では一時停止し、ページの WebGL コンテキストの予算を共有し、モーション軽減では静止フレームを保ちます。

カテゴリー	背景
タイプ	WebGL 要素（`<mv-liquid-chrome>`）
ステータス	安定版
同時にインストールされるもの	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

インストール

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

Marvelous UI の MCP サーバーを使う AI エージェント：install_components({ slugs: ["liquid-chrome"], target_dir: "<absolute path>/src/marvelous", framework: "react" })。

コピーされるファイル（依存関係を含む）：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。

使い方

基本となるマークアップです。ここから属性、data-*、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	タイプ	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.