Beta

Morphing Text `<mv-morphing-text>`

Wörter, die ineinander verschmelzen: Zwei gestapelte Kopien verwischen sich gegenseitig, während ein SVG-Filter mit Alpha-Schwelle die Glyphen zu einem „gooey“-Blob verschmilzt.

Kategorie	Animierter Text
Typ	Web Component (`<mv-morphing-text>`)
Status	Beta
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

KI-Agent mit dem MCP-Server von Marvelous UI: install_components({ slugs: ["morphing-text"], target_dir: "<absolute path>/src/marvelous", framework: "react" }).

Kopierte Dateien (inklusive Abhängigkeiten): 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.

Verwendung

Referenz-Markup zum Starten und Anpassen mit Attributen, data-* und CSS-Variablen:

<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	Typ	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.