Blur in by character
Installation
npx shadcn@latest add "https://magicui.design/r/text-animate"Examples
Blur In by Text
Blur in text
Slide Up by Word
Slide up by word
Scale Up by Text
Scale up by text
Fade In by Line
Fade in by line as paragraphFade in by line as paragraphFade in by line as paragraph
Slide Left by Character
Slide left by character
Props
| Prop | Type | Description | Default |
|---|---|---|---|
| children | string | The text content to animate | |
| className | string | The class name to be applied to the component | |
| delay | number | Delay before animation starts | 0 |
| duration | number | Duration of the animation | 0.3 |
| variants | Variants | Custom motion variants for the animation | |
| as | ElementType | The element type to render | "p" |
| by | "text" | "word" | "character" | "line" | How to split the text ("text", "word", "character") | "word" |
| startOnView | boolean | Whether to start animation when component enters viewport | true |
| animation | AnimationVariant | The animation preset to use | "fadeIn" |