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.