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.
Built something cool?
Share your work with 10k+ devs — or tell us how we can improve.