Shadcn.io is not affiliated with official shadcn/ui
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.
Chromatic Text preview
Three pure-channel text layers (red, green, blue) stacked with mix-blend-mode: screen so they recombine into clean white type when perfectly aligned. As the cursor approaches, the red layer drifts left and the blue layer drifts right while green stays anchored, producing a smooth, lens-style chromatic aberration that eases in and out via spring physics rather than snapping. An autoplay mode breathes the offsets gently on a sine wave when there's no pointer input — perfect for hero headlines that subtly come alive on idle. Configure intensity to scale the maximum drift, switch between hover and auto modes, and pass any Tailwind sizing through className. Designed to look gorgeous on dark backgrounds where the additive RGB channels read as crisp white.
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 chromatic-text text effect into my projectRelated Components
Glitch Text
Cyberpunk RGB separation with clip-path slicing
Fuzzy Text
Soft fuzzy hover distortion on letters
Decrypted Text
Matrix-style decryption with character cycling
Scrambled Text
Proximity-based character scrambling on hover
Shimmering Text
Wave-like color shimmer across the text
Blur Text
Text animation from blur to focus
FAQ
Was this page helpful?
Sign in to leave feedback.
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.
Chrome Text
Polished metallic chrome finish on text with a vertical reflectance gradient and a slow-traversing shimmer band, with polished, brushed, and blackened variants for React, Next.js, motion, and Tailwind CSS.