Morphing Text
Seamless character-level FLIP morphing animation between words or phrases with pause-on-hover capability.
5.3 KB
•Updated on September 14, 2026
A fluid character-morphing typography component that rearranges matching letters into their next positions using shared layout IDs and blur transitions.
Installation
Bash
pnpm dlx shadcn@latest add @spaceui/components-spaceui-morphing-textExamples
Full Phrases & Sentences
Morph seamlessly across full multi-word sentences and headlines with fluid character travel.
Usage
Code
import { MorphingText } from '@/components/spaceui/morphing-text'
const words = ['Morphing', 'Motion', 'Animation', 'Dimension', 'Precision']
export default function RotatingHeadline() {
return (
<MorphingText
texts={words}
interval={2400}
pauseOnHover
blurAmount="10px"
className="text-4xl font-bold tracking-tight"
/>
)
}Props
MorphingText
| Prop | Type | Default | Description |
|---|---|---|---|
texts | string[] | required | The list of words or phrases to cycle through sequentially. |
interval | number | 2400 | Time in milliseconds before advancing to the next phrase. |
pauseOnHover | boolean | true | When true, pauses timer when cursor is hovered over the text. |
blurAmount | string | 10px | Blur radius applied to entering and exiting characters. |
springBounce | number | 0.14 | Spring bounce factor (0 to 1) for layout transitions. |
className | string | - | Custom styling for the wrapper container. |
textClassName | string | - | Custom styling for the text component. |
renderChar | (char: string) => ReactNode | - | Overrides how each character token renders — e.g. through Textmoji so emoji stay styled across the morph. |
TextMorph (Single Morph)
You can also use <TextMorph /> directly for fine-grained control when morphing between custom state values:
Code
import { TextMorph } from '@/components/spaceui/morphing-text'
export function DynamicStatus({ status }: { status: string }) {
return <TextMorph className="text-xl font-medium">{status}</TextMorph>
}Keep in mind
- MIT License: Free and open-source for personal and commercial use. Feel free to copy, tweak, and adapt the components to match your exact needs.
- Credits & Inspiration: Some components on this site are inspired by or recreated from great ideas across the web. I'm not here to take credit; just to learn, experiment, and push interface craft further.
- Reach out & Claims: If an attribution was missed, or if you have any inquiry or claim, feel free to reach out directly on X to @adrielzimbril. I'll be glad to update or resolve it right away.