Text Animate

Pro

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

Customize

This item has no props to tune. Use the lens above to change theme, density, direction and more.

Guide and examples

Installation


pnpm dlx shadcn@latest add @tealmac-pro/text-animate

Examples

Usage

Props

Prop	Type	Default	Description
`children`	`string`	`-`	The text content to animate
`className`	`string`	`-`	The class name to be applied to the component
`segmentClassName`	`string`	`-`	The class name to be applied to each segment
`delay`	`number`	`0`	Delay before animation starts
`duration`	`number`	`0.3`	Duration of the animation
`variants`	`Variants`	`-`	Custom motion variants for the animation
`as`	`"article" \| "div" \| "h1" \| "h2" \| "h3" \| "h4" \| "h5" \| "h6" \| "li" \| "p" \| "section" \| "span"`	`"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
`once`	`boolean`	`false`	Whether to animate only once
`animation`	`AnimationVariant`	`"fadeIn"`	The animation preset to use
`accessible`	`boolean`	`true`	Whether to render an accessible screen-reader label

Customize

Guide and examples

Installation

Examples

Blur In by Text

Code

Slide Up by Word

Code

Scale Up by Text

Code

Fade In by Line

Code

Slide Left by Character

Code

With Delay

Code

With Duration

Code

With Custom Motion Variants

Code

Usage

Props

Customize

Guide and examples

Installation

Examples

Blur In by Text

Code

Slide Up by Word

Code

Scale Up by Text

Code

Fade In by Line

Code

Slide Left by Character

Code

With Delay

Code

With Duration

Code

With Custom Motion Variants

Code

Usage

Props