Shadcn.io is not affiliated with official shadcn/ui
Text Reveal
Cinematic text reveal with clip-path animation following cursor position for React applications.
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.
Text Reveal preview
Installation
Related 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