Text Animate
Staggered entrance animations for headlines and copy, split by word, character, or line.
TextAnimate splits text into words, characters, or lines and staggers each fragment through an entrance animation.
Animate your ideas into reality
Installation
pnpm dlx shadcn@latest add "https://godui.design/r/text-animate.json"TextAnimate requires framer-motion as a peer dependency:
bash
npm install framer-motionUsage
tsx
import { TextAnimate } from "@/components/godui/text-animate";Word fade in
tsx
<TextAnimate animation="fadeIn" by="word" className="text-4xl">
Animate your ideas into reality
</TextAnimate>Character stagger
tsx
<TextAnimate animation="slideUp" by="character" stagger={0.03} className="text-3xl">
Character by character
</TextAnimate>Scroll into view
tsx
<TextAnimate animation="blurInUp" startOnView once className="text-5xl font-bold">
Scroll to reveal
</TextAnimate>Semantic heading
tsx
<TextAnimate as="h1" animation="scaleUp" by="word" className="text-5xl font-bold">
Hero headline
</TextAnimate>Examples
Hit the replay button on any preview to play the animation again.
Word fade in
Animate your ideas into reality
Character stagger
Character by character
Scale up
Scale up with spring
Slide from the right
Slide from the right
Semantic heading
Render a real h1 with as while keeping the staggered entrance.
Hero headline
Props
| Prop | Type | Default | Description |
|---|---|---|---|
children | string | — | Text content to animate |
animation | "fadeIn" | "blurIn" | "blurInUp" | "blurInDown" | "slideUp" | "slideDown" | "slideLeft" | "slideRight" | "scaleUp" | "scaleDown" | "fadeIn" | Entrance animation preset |
by | "text" | "word" | "character" | "line" | "word" | How to split text for staggering |
as | "p" | "h1"–"h6" | "span" | "div" | … | "p" | Root element to render |
delay | number | 0 | Delay before animation starts (seconds) |
duration | number | 0.3 | Total animation duration; also drives default stagger when stagger is omitted |
stagger | number | derived | Delay between each segment |
startOnView | boolean | true | Animate when the element enters the viewport |
once | boolean | true | Animate only the first time it enters view, then never again |
viewportAmount | number | "some" | "all" | 0.3 | How much of the element must be visible to trigger |
accessible | boolean | true | Screen-reader text with aria-hidden on animated segments |
className | string | — | Classes on the root element |
segmentClassName | string | — | Classes on each animated segment |
variants | Variants | — | Custom Framer Motion item variants |
Respects prefers-reduced-motion — text renders immediately without animation when the user has reduced motion enabled.