Shadcn.io is not affiliated with official shadcn/ui
Writing Text
Word-by-word text reveal with staggered spring animations for React applications.
Writing Text preview
Words appear one by one with gentle spring physics—a calm, natural text reveal. Each word fades in and slides up from below with staggered timing based on the delay parameter. Supports scroll-triggered animation via intersection observer for reveals timed to user scroll. Configurable word spacing ensures proper layout. Built with Motion for React using spring physics for organic motion. Perfect for hero taglines, quote reveals, or any text that deserves a measured, thoughtful entrance.
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 writing-text text effect into my projectRelated Components
Typing Text
Realistic typewriter effects with cursor
Text Generate Effect
Progressive character generation
Blur Text
Text animation from blur to focus
Splitting Text
Character, word, or line splitting with timing
Flip Words
3D word flipping with letter reveals
Text Reveal
Cinematic text reveals with clip-path animations
FAQ
Was this page helpful?
Sign in to leave feedback.
Wobble Text
Letters wiggling with continuous rotational oscillation and a soft scale pulse for a gelatin-like animated text effect for React applications.
Xray Text
Cursor-driven hole punched through visible text to reveal a hidden secret string layered behind, with spring-smoothed circular cutout for React, Next.js, and motion.