Shadcn.io is not affiliated with official shadcn/ui
Caps Toggle Text
Per-letter cross-fade between lowercase and uppercase forms with staggered timing for typographic interactions in React, Next.js, and motion projects.
Caps Toggle Text preview
A miniature type design demo. The component renders the same string twice — once forced to lowercase, once forced to uppercase — and cross-fades between the two layers letter by letter so the eye reads a wave of casing flipping across the line. Each glyph fades and scales independently with a per-index stagger, which is what makes it feel typographic rather than a flat opacity swap. Three triggers ship out of the box: hover (default — toggles while the pointer is over the text), loop (auto-cycles on a configurable interval), and click (toggles on each press). Drop it into a marketing callout, a button label, or an interactive style guide where you want copy that reacts to the user without screaming for attention.
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 caps-toggle-text text effect into my projectRelated Components
Morph Text
Per-character cross-fade glyph morphing between strings
Flip Words
3D word flipping with letter-by-letter reveals
Rotating Text
Smooth vertical text cycling between strings
Scrambled Text
Proximity-based character scrambling on hover
Typing Text
Typewriter-style sequential character reveals
Splitting Text
Character, word, or line splitting with timing
FAQ
Was this page helpful?
Sign in to leave feedback.
Breathing Text
Calm meditative text that gently scales and pulses opacity in a slow synchronized breath cycle for React applications.
Chromatic Text
RGB chromatic aberration that smoothly separates the red and blue color channels in response to cursor proximity, with spring-eased offsets and an idle breathing mode for React, Next.js, and motion.