Mesh Gradient `<mv-mesh-gradient>`

Degradado de malla animado en WebGL: tres suaves cintas de color vagan sobre un color base en un plano inclinado que se pliega, mezcladas en Oklab para que tonos de marca contrastados nunca se encuentren en una mancha turbia; opcionalmente, el plano se inclina hacia el puntero. Autónomo (sin runtime de shaders que instalar), se pausa fuera de pantalla, comparte el presupuesto de contextos WebGL de la página y conserva un fotograma fijo con movimiento reducido.

Categoría	Fondos
Tipo	Elemento WebGL (`<mv-mesh-gradient>`)
Estado	estable
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

Instalación

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

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

Archivos copiados (dependencias incluidas): 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

Marcado de referencia: parte de él y personalízalo con atributos, data-* y variables 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.