Waves `<mv-waves>`

Lignes de vagues sur un seul canvas : une mer de courbes de niveau vue en perspective, qui arrive d’un horizon brumeux et enfle en approchant, ou quelques rubans torsadés faits de fins brins.

Fonctionnement

Lignes de vagues sur un seul canvas : une mer de courbes de niveau vue en perspective, qui arrive d’un horizon brumeux et enfle en approchant, ou quelques rubans torsadés faits de fins brins. Avec interactive, les lignes se soulèvent en une douce houle sous le pointeur et des ondes se propagent là où il bouge ou appuie. Les couleurs viennent de variables CSS et suivent le thème ; la boucle se repose hors écran, et le mouvement réduit affiche une image fixe.

Catégorie	Arrière-plans
Type	Web Component (`<mv-waves>`)
Statut	stable
Keywords	safe-rewrite, waves, lines, ribbons, noise, perspective, ripple, interactive, hero, canvas

When to use

A SaaS or product hero needs a calm sea of moving lines behind the headline, in light or dark themes
Visitors should feel the page respond: the lines swell under the pointer and ripple where it moves or taps
Flowing lines or twisting ribbons are wanted from one 2D canvas, without a WebGL context

Avoid when

A still wave pattern is enough and nothing should move → use Backdrop instead

Installation

node scripts/add.mjs waves --out ./src/marvelous

Agent IA avec le serveur MCP de Marvelous UI : install_components({ slugs: ["waves"], 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/i18n.js, core/motion.js, core/pointer.js, components/waves/waves.js, components/waves/waves.css.

Utilisation

Balisage de référence : partez de celui-ci et personnalisez-le avec les attributs, data-* et les variables CSS :

<div style="display:flex;flex-wrap:wrap;min-height:320px">
  <section style="flex:1.6 1 22rem;position:relative;display:grid;place-items:center;text-align:center;overflow:hidden;padding:2rem 1.5rem">
    <mv-waves data-fill interactive></mv-waves>
    <div style="position:relative">
      <p style="margin:0;font:700 clamp(1.6rem,4vw,2.6rem)/1.1 var(--mv-font-sans);letter-spacing:-.03em">Ride the next wave</p>
      <p style="margin:.6rem auto 1.2rem;max-width:30rem;color:var(--mv-fg-muted)">Lines roll in from the horizon. Move your cursor to send ripples across them.</p>
      <a class="mv-button" href="#waves">Get started</a>
    </div>
  </section>
  <section style="flex:1 1 14rem;position:relative;display:grid;place-items:center;text-align:center;overflow:hidden;border-left:1px solid var(--mv-border);min-height:220px;padding:1.5rem">
    <mv-waves data-fill variant="ribbons" interactive></mv-waves>
    <div style="position:relative">
      <strong style="display:block;font-size:1.1rem">Ribbons</strong>
      <span style="font-size:.85rem;color:var(--mv-fg-muted)">variant="ribbons"</span>
    </div>
  </section>
</div>

API

Attributes

Name	Type	Default	Description
`variant`	lines \| ribbons	`lines`	A sea of lines in perspective, or twisting ribbons made of strands.
`count`	number	`44 (lines) / 3 (ribbons)`	Number of lines on the sea (2 to 80) or of ribbons (1 to 8).
`colors`	list of CSS colors	`--mv-waves-1, -2, -3`	Comma-separated palette (tokens and var() accepted, follows the theme). Lines run through it from left to right, ribbon strands from one edge to the other.
`amplitude`	number	`1`	Swell height (0 flattens the lines).
`speed`	number	`1`	Speed multiplier for the flow and the ripples.
`interactive`	boolean		The lines rise in a soft swell under the pointer, moving it sends ripples and a press sends a stronger one (listens on the parent with data-fill).
`radius`	number	`220`	Pointer reach in px: how far a ripple travels before it dies out, and the size of the swell.
`data-fill`	boolean		Fills the positioned parent (absolute, inset 0) and lets the pointer through.

Content structure

Name	Description
`children`	Without data-fill, content placed inside the element sits above the waves.

CSS variables

Name	Default	Description
`--mv-waves-1 / -2 / -3`	`accent hue −40° / accent / +95°`	Default palette, darker in light theme and lighter in dark theme.
`--mv-waves-weight`	`1`	Line width multiplier.
`--mv-waves-haze`	`1`	Strength of the glow along the horizon (lines variant, 0 removes it).
`--mv-waves-mask`	`none`	Mask applied to the canvas, for example a fade on the sides.

Accessibility

Decorative: the canvas is aria-hidden and never takes pointer events, and content placed inside stays readable by assistive tech. With data-fill the whole element ignores the pointer; ripples come from pointer events on the parent and never block clicks. The loop stops off screen and in hidden tabs. Reduced motion (OS or [data-motion="reduce"]): one still frame, no swell and no ripples. Forced colors and print hide the canvas. Keep text readable over the lines: the far lines near the horizon are the faintest, so a centered headline sits well there.