Mesh Gradient <mv-mesh-gradient>
アニメーションする WebGL メッシュグラデーション：傾いて折れ曲がる平面上で、3 本の柔らかな色のリボンがベースカラーの上をさまよいます。Oklab でブレンドされるため、対照的なブランドカラー同士が濁った色で混ざることはありません。オプションで平面をポインターの方へ傾けられます。
仕組み
アニメーションする WebGL メッシュグラデーション：傾いて折れ曲がる平面上で、3 本の柔らかな色のリボンがベースカラーの上をさまよいます。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/marvelousMarvelous 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)"><mv-mesh-gradient colors="…"></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.