Animated Text

A powerful text animation component with 5 preset effects (fade, slide, blur, fade-in-blur, scale) and support for word, character, and line-based animations. Fully customizable with advanced Framer Motion controls and TypeScript support.

Smooth fade animation

Words slide up smoothly

Blur into focus

Fade and blur combined

Scale up animation

Character by character

Installation

animated-text.tsx

Props

The TextEffect component accepts the following props:

Name	Type	Default	Description
`children`	`string`	—	The text content to be animated.
`preset`	`"blur" \| "fade-in-blur" \| "scale" \| "fade" \| "slide"`	`"fade"`	Animation preset style: "fade", "slide", "blur", "fade-in-blur", or "scale".
`per`	`"word" \| "char" \| "line"`	`"word"`	Animation unit: "word" (animates word by word), "char" (animates character by character), or "line" (animates line by line).
`className`	`string`	—	Additional CSS classes to apply to the text container. Use for styling text size, color, font, etc.
`delay`	`number`	`0`	Delay before animation starts in seconds. Applies to the entire text animation sequence.
`speedReveal`	`number`	`1`	Controls the stagger speed between animated units. Higher values = faster reveal. Multiplier applied to default stagger timing.
`speedSegment`	`number`	`1`	Controls the animation duration of each segment. Higher values = faster individual animations.
`trigger`	`boolean`	`true`	Whether the animation should play. Set to false to unmount/hide the animation.
`as`	`keyof React.JSX.IntrinsicElements`	`"p"`	HTML element to render as (e.g., h1, h2, p, span, div). Useful for semantic markup and accessibility.
`variants`	`{ container?: Variants; item?: Variants }`	`undefined`	Custom Framer Motion variants for advanced animation control. Overrides preset animations.
`onAnimationComplete`	`() => void`	`undefined`	Callback function triggered when the animation completes.
`onAnimationStart`	`() => void`	`undefined`	Callback function triggered when the animation starts.
`segmentWrapperClassName`	`string`	`undefined`	Additional CSS classes to apply to each animated segment wrapper. Useful for fine-grained styling control.
`containerTransition`	`Transition`	`undefined`	Custom Framer Motion transition configuration for the container element. Overrides default transition timing.
`segmentTransition`	`Transition`	`undefined`	Custom Framer Motion transition configuration for each animated segment. Allows per-segment animation customization.
`style`	`React.CSSProperties`	`undefined`	Inline CSS styles to apply to the container element. Use for dynamic styling that can't be achieved with className.