Mesh Gradient `<mv-mesh-gradient>`

Gradiente em malha WebGL animado: três fitas suaves de cor vagueiam sobre uma cor de base num plano inclinado que se dobra, misturadas em Oklab para que tons de marca contrastantes nunca se encontrem numa mancha turva; opcionalmente, o plano se inclina na direção do ponteiro. Autônomo (nenhum runtime de shader para instalar), ele pausa fora da tela, compartilha o orçamento de contextos WebGL da página e mantém um quadro estático com movimento reduzido.

Categoria	Fundos
Tipo	Elemento WebGL (`<mv-mesh-gradient>`)
Status	estável
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

Instalação

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

Agente de IA com o servidor MCP do Marvelous UI: install_components({ slugs: ["mesh-gradient"], target_dir: "<absolute path>/src/marvelous", framework: "react" }).

Arquivos copiados (dependências incluídas): 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.

Uso

Marcação de referência, para usar como ponto de partida e personalizar com atributos, data-* e variáveis 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	Tipo	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.