Docs

Text Animate

A text animation component that animates text using a variety of different animations.

Blur in by character

Installation

npx shadcn@latest add "https://magicui.design/r/text-animate"

Examples

Slide up by word

Scale up by text

Fade in by line as paragraphFade in by line as paragraphFade in by line as paragraph

Slide left by character

Prop	Type	Default	Description
`children`	`string`	`-`	The text content to animate
`className`	`string`	`-`	The class name to be applied to the component
`delay`	`number`	`0`	Delay before animation starts
`duration`	`number`	`0.3`	Duration of the animation
`variants`	`Variants`	`-`	Custom motion variants for the animation
`as`	`ElementType`	`"p"`	The element type to render
`by`	`"text" \| "word" \| "character" \| "line"`	`"word"`	How to split the text ("text", "word", "character")
`startOnView`	`boolean`	`true`	Whether to start animation when component enters viewport
`animation`	`AnimationVariant`	`"fadeIn"`	The animation preset to use

Contribute