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.