Text Morph
Animates text by morphing shared letters between words, creating fluid transitions
Examples
Text Morph Button
Text Morph Input
Installation
npx shadcn@latest add https://ui.ndekocode.dev/r/motion-text-morph.jsonComponent API
TextMorph
| Prop | Type | Default | Description |
|---|---|---|---|
| children | string | The text content to be animated. | |
| as | keyof JSX.IntrinsicElements | 'p' | The HTML tag to render, defaults to paragraph. |
| className | string | undefined | Optional CSS class for styling the component. |
| style | React.CSSProperties | undefined | Optional inline styles for the component. |
Credits
Inspired by Family iOS app. See also Family Values