Shadcn.io is not affiliated with official shadcn/ui
Glitch Text
Digital glitch effects with RGB channel separation and clip-path animations for React applications.
Glitch Text preview
Cyberpunk-style glitch effects that fracture and distort text with retro VHS aesthetics. Creates chromatic aberration through offset layers—cyan shifts left while red shifts right, producing that classic RGB separation look. Clip-path animations slice through the text randomly, simulating digital corruption. Toggle between always-on or hover-triggered glitches, with adjustable speed and optional shadow trails. Built with pure CSS animations, no external dependencies. Perfect for gaming sites, tech themes, or anywhere needing that corrupted digital edge.
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 glitch-text text effect into my projectRelated Components
Fuzzy Text
Soft blur transitions with particle-like text effects
Decrypted Text
Matrix-style decryption with character cycling
Scrambled Text
Proximity-based character scrambling with GSAP
Text Pressure
Variable font weight responding to cursor proximity
Blur Text
Text animation from blur to focus
Text Reveal
Cinematic text reveals with clip-path animations
FAQ
Was this page helpful?
Sign in to leave feedback.