Shadcn.io is not affiliated with official shadcn/ui
Text Reveal
Cinematic text reveal with clip-path animation following cursor position for React applications.
Text Reveal preview
Dramatic before/after text reveal controlled by your cursor position. Move left to right across the text to progressively reveal a second message hidden underneath. Uses CSS clip-path to create a wipe effect that follows mouse position precisely. The revealed text appears in white against black while the base text shows muted gray—perfect for before/after comparisons or interactive storytelling. Touch-friendly with full mobile support. Built with Motion for React. Perfect for hero sections with hidden messages, interactive reveals, or creative text interactions.
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 text-reveal text effect into my projectRelated Components
Text Hover Effect
SVG text with radial gradient mask reveal
Blur Text
Text animation from blur to focus
Text Generate Effect
Progressive character generation
Splitting Text
Character, word, or line splitting with timing
Decrypted Text
Matrix-style decryption with character cycling
Gradient Text
Flowing gradient color animations
FAQ
Was this page helpful?
Sign in to leave feedback.