MorphingText
Text morphs between two strings using an SVG blur+contrast filter trick — one word visually melts into the next.
When to Use
- Hero headings that alternate between two key value propositions.
- Tagline animations where a smooth morph feels more polished than a simple swap.
Hello
Design
API Reference
MorphingText
| Property | Type | Default | Description |
|---|---|---|---|
| From | string | "" | First string (shown initially). |
| To | string | "" | Second string (morphed to). |
| DurationMs | int | 1500 | Duration of the morph transition in milliseconds. |
| PauseMs | int | 2000 | Time each text is held before morphing again. |
Related Components
- WordRotate — Slide-fade word rotation for hero headings.
- TypingAnimation — Character-by-character typing effect.