Shadcn.io is not affiliated with official shadcn/ui
Scrambled Text
Proximity-based character scrambling with GSAP ScrambleText plugin for React applications.
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.
Scrambled Text preview
Installation
Related 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