Mesh Gradient `<mv-mesh-gradient>`

Dégradé en maillage WebGL animé : trois doux rubans de couleur errent sur une couleur de base, sur un plan incliné qui se replie, mélangés en Oklab pour que des teintes de marque contrastées ne se rencontrent jamais dans une zone boueuse ; en option, le plan se penche vers le pointeur. Autonome (aucun runtime de shader à installer), il se met en pause hors écran, partage le budget de contextes WebGL de la page et garde une image fixe en mouvement réduit.

Catégorie	Arrière-plans
Type	Élément WebGL (`<mv-mesh-gradient>`)
Statut	stable
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

Installation

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

Agent IA avec le serveur MCP de Marvelous UI : install_components({ slugs: ["mesh-gradient"], target_dir: "<absolute path>/src/marvelous", framework: "react" }).

Fichiers copiés (dépendances comprises) : 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.

Utilisation

Balisage de référence : partez de celui-ci et personnalisez-le avec les attributs, data-* et les 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	Type	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.