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 motion-primitives
Text Effect per word
Animate your ideas with motion-primitives
Text Effect with preset
Animate your ideas with motion-primitives
Text Effect with custom variants
Animate your ideas with motion-primitives
Text Effect with custom delay
Animate your ideas
with motion-primitives
(and delay!)
Text Effect per line
now live on motion-primitives!now live on motion-primitives!now live on motion-primitives!
Text Effect with exit animation
Animate your ideas with motion-primitives
Text Effect with speed
You can control the speed of the animation by using the speedReveal and speedSegment props.
Animate your ideas with motion-primitives.
Installation
npx shadcn add "https://motion-primitives.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' | '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. |