Morphing Text <mv-morphing-text>
言葉が溶け合うように移り変わります。重ねた 2 つのコピーが互いにぼけながら入れ替わり、SVG のアルファしきい値フィルターが文字を「gooey」な塊へと融合させます。
| カテゴリー | アニメーションテキスト |
|---|---|
| タイプ | Web Component（<mv-morphing-text>） |
| ステータス | 安定版 |
| 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
インストール
node scripts/add.mjs morphing-text --out ./src/marvelousMarvelous UI MCP サーバーを使う AI エージェント：install_components({ slugs: ["morphing-text"], target_dir: "<absolute path>/src/marvelous", framework: "react" })。
コピーされるファイル（依存関係を含む）：tokens/tokens.css, core/base.css, core/dom.js, core/element.js, core/motion.js, core/svg.js, components/morphing-text/morphing-text.js, components/morphing-text/morphing-text.css。
使い方
基本となるマークアップです。ここから属性、data-*、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 | タイプ | 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. Known limit: the cycle never ends on its own, and WCAG 2.2.2 asks for a way to stop motion that lasts more than 5 seconds next to other content: wire the paused attribute to a visible control (or stop it after a few cycles on mv-change) when the text sits in a reading area.