Mesh Gradient `<mv-mesh-gradient>`

애니메이션 WebGL 메시 그라디언트입니다. 기울어지고 접히는 평면 위에서 부드러운 색 리본 세 개가 기본 색 위를 떠돌며, Oklab으로 혼합되어 대비되는 브랜드 색상이 탁한 얼룩으로 만나지 않습니다. 선택적으로 평면이 포인터 쪽으로 기울어집니다.

작동 방식

애니메이션 WebGL 메시 그라디언트입니다. 기울어지고 접히는 평면 위에서 부드러운 색 리본 세 개가 기본 색 위를 떠돌며, Oklab으로 혼합되어 대비되는 브랜드 색상이 탁한 얼룩으로 만나지 않습니다. 선택적으로 평면이 포인터 쪽으로 기울어집니다. 자체 완결형이라(설치할 셰이더 런타임 없음) 화면 밖에서는 일시 정지하고, 페이지의 WebGL 컨텍스트 예산을 공유하며, 동작 줄이기 설정에서는 정지 프레임을 유지합니다.

카테고리	배경
유형	WebGL 요소 (`<mv-mesh-gradient>`)
상태	안정
Keywords	safe-rewrite, webgl, shader, gradient, mesh, oklab, hero

When to use

A polished SaaS or fintech hero needs a fluid, four-color brand gradient
Contrasting brand hues must blend smoothly without muddy patches
A launch page wants its gradient to respond gently to the pointer

Avoid when

The gradient must run without WebGL and stay very light; the CSS aurora is cheaper → use Aurora Background instead
A still brand gradient behind a section is enough → use Backdrop instead

설치

node scripts/add.mjs mesh-gradient --out ./src/marvelous

Marvelous UI MCP 서버를 사용하는 AI 에이전트: install_components({ slugs: ["mesh-gradient"], target_dir: "<absolute path>/src/marvelous", framework: "react" }).

복사되는 파일(의존성 포함): tokens/tokens.css, core/base.css, core/canvas.js, core/dom.js, core/element.js, core/motion.js, core/observe.js, core/webgl.js, components/mesh-gradient/mesh-gradient.js, components/mesh-gradient/mesh-gradient.css.

사용법

기본 마크업입니다. 여기서 시작해 속성, data-*, CSS 변수로 커스터마이즈하세요:

<mv-mesh-gradient data-fill></mv-mesh-gradient>
<div style="position:relative;display:grid;place-items:center;height:100%;min-height:320px;color:white;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;text-shadow:0 4px 24px rgb(0 0 0 / .35)">Payments that flow</p>
    <p style="margin:.5rem 0 0;opacity:.85;font-size:.9rem;text-shadow:0 2px 12px rgb(0 0 0 / .3)">&lt;mv-mesh-gradient colors="…"&gt;</p>
  </div>
</div>

API

Attributes

Name	유형	Default	Description
`colors`	CSS colors (4)	`var(--mv-accent), #ff5c8a, #5ec8f2, #ffc15e`	Base color, then the three ribbons (tokens accepted, re-read on theme change). Fewer than four colors repeat.
`scale`	number	`1`	Size of the flows.
`rotation`	number	`-0.22`	Tilt of the plane, in radians.
`flow`	number	`1`	Amplitude of the folds (0 = flat ribbons).
`speed`	number	`1`	Time multiplier.
`paused`	boolean		Freezes the animation on the current frame.
`interactive`	boolean		The plane leans toward the pointer while it is over the element.
`dpr`	number	`1.5`	Max pixel density (capped at 2).
`data-fill`	boolean		Fills the positioned parent (absolute, inset 0).

Content structure

Name	Description
`children`	Content placed inside the element sits above the gradient.

Accessibility

Decorative: the canvas is aria-hidden and never takes pointer events. 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 WebGL2 a static CSS mesh is shown instead; forced colors and print hide the canvas.