Text Morph
Words blur and cross-fade into each other with smooth AnimatePresence transitions.
Props
| Property | Type | Default | Description |
|---|---|---|---|
| words | string[] | ["Innovative", "Scalable", "Production-Ready", "Beautiful"] | Array of words to morph between |
| duration | number | 2.5 | Seconds each word is displayed before morphing |
When to Use
Great for hero adjective cycling, feature description carousels, and any place a smooth, cinematic word transition is desired.
Best Practices
Use single adjectives or short phrases of similar length. Pair with a static prefix/suffix for full sentence flow.
Why This Component Matters
Blur morphing creates an organic transition that feels designed rather than mechanical — elevating a simple word cycle to a premium experience.
FAQ
QHow is this different from TypeWriter?
TextMorph uses blur cross-fades instead of character-by-character typing — it's more cinematic and less mechanical.
QCan I use it for phrases?
Yes, multi-word phrases work well — keep them short enough to fit on one line.
Related Components
Broken Shard Gallery
Images explode outward from center into a chaotic gallery layout as you scroll.
Velocity Smear
Gallery that skews and stretches in real-time based on scroll velocity — the faster you scroll, the more the images smear.
Curtain Split
Two image panels split apart like stage curtains on scroll, revealing editorial text content hidden beneath.