Shadcn.io is not affiliated with official shadcn/ui
Scrambled Text
Proximity-based character scrambling with GSAP ScrambleText plugin for React applications.
Scrambled Text preview
Characters scramble and reform as your cursor approaches—an interactive reveal effect powered by GSAP's ScrambleText plugin. Text splits into individual characters, each monitoring cursor distance. When the pointer enters the configurable radius, characters cycle through scramble characters before resolving back to their original form. The closer the cursor, the faster the scramble resolves. Built with GSAP SplitText for character isolation and ScrambleTextPlugin for the scramble animation. Perfect for interactive hero sections, mysterious reveals, or curiosity-driving UI elements.
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 scrambled-text text effect into my projectRelated Components
Decrypted Text
Matrix-style decryption with character cycling
Glitch Text
Digital glitch effects with RGB channel separation
Text Cursor
Blinking cursor following text input
Variable Proximity
Variable font weight responding to cursor position
Text Trail
Character trails that follow cursor movement
Shuffle
Random character shuffling with settling animations
FAQ
Was this page helpful?
Sign in to leave feedback.