React Animated Text Components.
100 copy-paste animated text effects for React, Next.js, shadcn/ui — typewriter, gradient, glitch, scramble, counting, flip words, and more.
- components
- 100
- free
- 10
- deps
- motion
- extra deps
- 0
Beautiful components that make React development a joy!
- Anagram Text text effect
- Annotation Text text effect
- Backspace Text text effect
- Binary Text text effect
- Blur Text text effect
- Bouncing Text text effect
- Breathing Text text effect
- Caps Toggle text effect
- Chromatic Text text effect
- Chrome Text text effect
- Circular Text text effect
- Clock Text text effect
- Colourful Text text effect
- Container Flip text effect
- Copy Text text effect
- Countdown text effect
- Counting Number text effect
- Curved Loop text effect
- Decrypted Text text effect
- Diff Text text effect
- Dot Matrix text effect
- Drift Text text effect
- Drop Cap text effect
- Echo Text text effect
- Elastic Text text effect
- Emboss Text text effect
- Erase Text text effect
- Falling Text text effect
- Flickering Text text effect
- Flip Words text effect
- Foil Text text effect
- Fuzzy Text text effect
- Glitch Text text effect
- Gloss Text text effect
- Gradient Text text effect
- Gravity Text text effect
- Highlight Text text effect
- Hover Effect text effect
- Inertia Text text effect
- Iris Text text effect
- JSON Text text effect
- Kerning Text text effect
- LCD Text text effect
- Line Shadow text effect
- Liquid Text text effect
- Log Stream text effect
- Magnet Text text effect
- Magnify Text text effect
- Mask Reveal text effect
- Morph Text text effect
- Motion Highlight text effect
- Neon Text text effect
- Outline Text text effect
- Paint Text text effect
- Paper Cut text effect
- Paper Fold text effect
- Password Text text effect
- Pendulum Text text effect
- Pop Text text effect
- Progress text effect
- Rainbow Text text effect
- Redact Text text effect
- Regex Text text effect
- Relative Time text effect
- Ripple Text text effect
- Rolling Text text effect
- Rotating Text text effect
- Scrambled Text text effect
- Scroll Velocity text effect
- Search Highlight text effect
- Shatter Text text effect
- Shimmering Text text effect
- Shuffle text effect
- Skeleton Text text effect
- Sliding Number text effect
- Small Caps text effect
- Spiral Text text effect
- Splitting Text text effect
- Spotlight Text text effect
- Stamp Text text effect
- Status Pulse text effect
- Stretch Text text effect
- Syntax Text text effect
- Terminal Text text effect
- Text Cursor text effect
- Text Generate text effect
- Text Pressure text effect
- Text Reveal text effect
- Text Trail text effect
- Tilt Text text effect
- Timecode text effect
- True Focus text effect
- Typing Indicator text effect
- Typing Text text effect
- Variable Proximity text effect
- Wave Text text effect
- Waveform Text text effect
- Wobble Text text effect
- Writing Text text effect
- X-Ray Text text effect
Every text effect, grouped by family
7 families · 100 components total · 10 free. Click any card for a live preview, install command, and prop reference.
Every text effect. One prompt away.
Prompt Claude Code, Cursor, Windsurf — or any MCP-ready AI agent — to drop any of these 100 text effects into your project in seconds.
Grab your MCP URL
Copy from /dashboard/account — your personal Pro token is baked in.
Paste into your editor
Any MCP-ready client. Here's the command for Claude Code:
Prompt as usual
Your AI agent auto-discovers all 15 MCP tools — search, preview and install any shadcn.io resource straight from your prompt.
- Claude Code MCP setup guide
- Claude Desktop MCP setup guide
- ChatGPT MCP setup guide
- Opencode MCP setup guide
- OpenAI Codex MCP setup guide
- Antigravity MCP setup guide
- Cursor MCP setup guide
- Kiro MCP setup guide
- Kilo Code MCP setup guide
- Roo Code MCP setup guide
- Cline MCP setup guide
- Augment Code MCP setup guide
- Windsurf MCP setup guide
- VS Code MCP setup guide
- Visual Studio MCP setup guide
- Copilot Coding Agent MCP setup guide
- Copilot CLI MCP setup guide
- JetBrains MCP setup guide
- Trae MCP setup guide
- Gemini CLI MCP setup guide
- Qwen Code MCP setup guide
- Warp MCP setup guide
- Amp MCP setup guide
- Amazon Q MCP setup guide
- LM Studio MCP setup guide
- Crush MCP setup guide
- BoltAI MCP setup guide
- Rovo Dev MCP setup guide
- Zencoder MCP setup guide
- Qodo Gen MCP setup guide
- Perplexity MCP setup guide
- Factory MCP setup guide
- Hermes MCP setup guide
- Zed MCP setup guide
- Smithery MCP setup guide
Frequently Asked Questions
Everything you need to know about shadcn React animated text components — the 100-component collection, how to install with the shadcn CLI, motion + reduced-motion support, and how to contribute.