bêta

Morphing Text `<mv-morphing-text>`

Des mots qui fondent les uns dans les autres : deux copies superposées se floutent en alternance pendant qu’un filtre SVG de seuil alpha fusionne les glyphes en une masse « gluante ».

Catégorie	Texte animé
Type	Web Component (`<mv-morphing-text>`)
Statut	bêta
Keywords	morph, gooey, blur, svg-filter, hero, rotating-text

When to use

A hero keyword should cycle through several words with a soft, gooey melt
A centered standalone word loop is needed with no layout shift between words

Avoid when

The changing word sits inline inside a sentence and its width should adapt → use Word Rotate instead
A typed, letter-by-letter feel with a caret fits the tone better → use Typewriter instead
Critical information appears in only one word of the loop; many readers will miss it

Installation

node scripts/add.mjs morphing-text --out ./src/marvelous

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

Fichiers copiés (dépendances comprises) : tokens/tokens.css, core/base.css, core/dom.js, core/element.js, core/motion.js, components/morphing-text/morphing-text.js, components/morphing-text/morphing-text.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:grid;gap:1.25rem;justify-items:center;text-align:center">
  <p style="margin:0;font-size:.8rem;letter-spacing:.14em;text-transform:uppercase;color:var(--mv-fg-muted)">Our process</p>
  <h2 style="margin:0;font:800 clamp(2.6rem,8vw,5.2rem)/1 var(--mv-font-display);letter-spacing:-.045em">
    <mv-morphing-text words="Imagine, Design, Prototype, Ship"></mv-morphing-text>
  </h2>
  <p style="margin:0;max-width:30rem;color:var(--mv-fg-muted);font-size:1.05rem;line-height:1.55">
    Each step melts into the next: one continuous flow, from sketch to production.
  </p>
  <p style="margin:.5rem 0 0;font:700 clamp(1.4rem,3vw,2rem)/1.2 var(--mv-font-display);letter-spacing:-.03em">
    Studios in <mv-morphing-text words="New York, London, Berlin, Tokyo" duration="900" pause="1400" style="color:var(--mv-accent);--mv-morphing-text-align:start"></mv-morphing-text>
  </p>
</div>

API

Attributes

Name	Type	Default	Description
`words`	string		Comma-separated words (or \|). Otherwise: one child per word.
`duration`	number (ms)	`1100`	Duration of one morph.
`pause`	number (ms)	`1700`	Reading time between two morphs.
`paused`	boolean		Pauses the loop.

Events

Name	Description
`mv-change`	New word at rest (detail.index, detail.word).

CSS variables

Name	Default	Description
`--mv-morphing-text-align`	`center`	Word alignment within the box (start \| center \| end).

Accessibility

A hidden copy reads the word list once; the animated part is aria-hidden. The box is sized to the longest word (no reflow). The loop is suspended off-screen and in hidden tabs; with reduced motion, the first word stays crisp and still. The filter is only active during the morph, so text at rest stays perfectly readable.