Shadcn.io is not affiliated with official shadcn/ui
Shuffle
Random character shuffling with slot machine settling animations using GSAP for React applications.
Shuffle preview
Slot-machine style text reveals where characters shuffle through random values before settling into place. Each character is wrapped in a clipped container with a vertical strip of scramble characters that slide into position. Supports even/odd stagger patterns for dramatic reveal sequences, custom scramble character sets, and color transitions during animation. Triggers on scroll into view with optional hover re-trigger. Uses GSAP ScrollTrigger for viewport detection and SplitText for character isolation. Perfect for impactful headlines, gaming interfaces, or retro-computing aesthetics.
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 shuffle text effect into my projectRelated Components
Decrypted Text
Matrix-style decryption with character cycling
Scrambled Text
Proximity-based character scrambling with GSAP
Glitch Text
Digital glitch effects with RGB channel separation
Text Generate Effect
Progressive character generation
Typing Text
Realistic typewriter effects with cursor
Falling Text
Physics-based falling with Matter.js
FAQ
Was this page helpful?
Sign in to leave feedback.