Shadcn.io is not affiliated with official shadcn/ui
Splitting Text
Character, word, or line splitting with staggered reveal animations for React applications.
Splitting Text preview
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.
Install with AI
If you've connected the shadcn.io MCP server to Claude Code, Cursor, Windsurf, or any MCP-ready AI editor, prompt your agent to install this text effect for you — no copy-paste, no CLI:
use shadcnio to install the splitting-text text effect into my projectRelated Components
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
Was this page helpful?
Sign in to leave feedback.
Spiral Text
Letters arranged along an inward Archimedean spiral with arc-length distribution and optional continuous rotation for React applications.
Spotlight Text
Cursor-driven radial mask spotlight that reveals dim text inside a soft circular beam following the pointer with spring-smoothed motion for React, Next.js, and motion.