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.