Morphing Text <mv-morphing-text>
서로 녹아드는 단어들입니다. 겹쳐진 두 사본이 교차 블러되는 동안 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.