Text Effect

Easily animate text content with various effects. You can apply animations per character or per word, and customize the animation effects using custom variants or preset animations.

Text Effect

Easily animate text content with various effects. You can apply animations per character or per word, and customize the animation effects using custom variants or preset animations.

Examples

Text Effect per character

Animate your ideas with components

Text Effect per word

Animate your ideas with components

Text Effect with preset

Animate your ideas with components

Text Effect with custom variants

Animate your ideas with components

Text Effect with custom delay

Animate your ideas

with components

(and delay!)

Text Effect per line

now live on components!now live on components!now live on components!

Text Effect with exit animation

Animate your ideas with components

Text Effect with speed

You can control the speed of the animation by using the speedReveal and speedSegment props.

Animate your ideas with components.

Installation

npx shadcn@latest add "https://components.dylanwlim.com/c/text-effect.json"

Component API

TextEffect

Prop	Type	Default	Description
children	string		The text content to be animated.
per	'word' \| 'char' \| 'line'	'word'	Defines whether animation applies per word, character, or line.
as	keyof JSX.IntrinsicElements	'p'	The HTML tag to render, defaults to paragraph.
variants	`{ container?: Variants; item?: Variants; }`	undefined	Custom variants for container and item animations.
className	string	undefined	Optional CSS class for styling the component.
preset	'blur-sm' \| 'fade-in-blur' \| 'scale' \| 'fade' \| 'slide'	'fade'	Preset animations to apply to the text.
delay	number	0	Delay before the animation starts.
trigger	boolean	true	Controls whether the animation should be triggered.
onAnimationComplete	() => void	undefined	Callback function when the animation completes.
onAnimationStart	() => void	undefined	Callback function when the animation starts.
segmentWrapperClassName	string	undefined	Optional CSS class for styling segment wrappers.
style	CSSProperties	undefined	Optional inline styles for the component.
containerTransition	Transition	undefined	Optional transition for the container.
segmentTransition	Transition	undefined	Optional transition for the segments.
speedReveal	number	1	Controls the speed of the reveal animation.
speedSegment	number	1	Controls the speed of the animation.

Transition Panel Text Loop

On This Page

Text Effect Examples Text Effect per character Text Effect per word Text Effect with preset Text Effect with custom variants Text Effect with custom delay Text Effect per line Text Effect with exit animation Text Effect with speed Installation Component API TextEffect

Build with DWL Components

Use the copied registry, charts, blocks, and create tools in one place.

Start from the DWL Components create flow and customize from there.

Text Effect

Animate your ideas with componentsAnimate your ideas with components

Animate your ideas with componentsAnimate your ideas with components

Animate your ideas with components

Animate your ideas with components