Staggered entrance animations for headlines and copy, split by word, character, or line.

Animate your ideas into reality

Installation

pnpm dlx shadcn@latest add @godui/text-animate

Requires the @godui namespace in your components.json (one-time setup):

{  "registries": {    "@godui": "https://godui.design/r/{name}.json"  }}

TextAnimate requires framer-motion as a peer dependency:

npm install framer-motion

Usage

import { TextAnimate } from "@/components/godui/text-animate";

<TextAnimate animation="fadeIn" by="word" className="text-4xl">
  Animate your ideas into reality
</TextAnimate>

<TextAnimate animation="slideUp" by="character" stagger={0.03} className="text-3xl">
  Character by character
</TextAnimate>

<TextAnimate animation="blurInUp" startOnView once className="text-5xl font-bold">
  Scroll to reveal
</TextAnimate>

<TextAnimate as="h1" animation="scaleUp" by="word" className="text-5xl font-bold">
  Hero headline
</TextAnimate>

Hit the replay button on any preview to play the animation again.

Animate your ideas into reality

Character by character

Scale up with spring

Render a real h1 with as while keeping the staggered entrance.

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.