Stop Rebuilding UI

Shadcn.io is not affiliated with official shadcn/ui

Previous: Sliding Number
Next: Text Cursor

Splitting Text

Character, word, or line splitting with staggered reveal animations for React applications.

Split text into individually animated units—characters, words, or lines—each sliding in with staggered timing. Flexible animation system lets you define custom variants for initial and animate states, with configurable stagger delays. Supports scroll-triggered reveals via intersection observer, multi-line text arrays, and delay offsets for sequenced compositions. Built with Motion for React using variants and staggerChildren for orchestrated animations. Perfect for hero text reveals, section headers, or any typography needing dramatic entrance effects.

Splitting Text preview

Scroll to load preview

Installation

Blur Text

Text animation from blur to focus

Text Reveal

Cinematic text reveals with clip-path animations

Text Generate Effect

Progressive character generation

Writing Text

Word-by-word reveals with natural rhythm

Flip Words

3D word flipping with letter reveals

Rolling Text

3D character rolling with realistic rotation

FAQ

Sliding Number

Animated number counter with spring physics and individual digit rolling for React applications.

Text Cursor

Character trails that follow cursor movement with floating animations for React applications.