Animations

Text Animate

new

Reveals text by word, character or line with ten motion presets.

Interfaces that move with intent

Motion that explains a change, then gets out of the way. Every preset respects reduced motion.

Installation

npx shadcn@latest add @blank/text-animate

Usage

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

<TextAnimate as="h2" animation="blurInUp" by="word" once>
  Interfaces that move with intent
</TextAnimate>

The string is split into segments that animate in turn, spread over duration seconds. Screen readers get the whole string once from a visually hidden copy; the segments are aria-hidden, so they are never read letter by letter.

By default it plays when scrolled into view and again each time it comes back; once plays it a single time, and startOnView={false} plays it on mount. Under reduced motion the text is shown as is.

Examples

Presets

Ship the change, not the boilerplate

Props