Shadcn.io is not affiliated with official shadcn/ui
Mask Reveal Text
Colored panel sweeps across text in a two-phase wipe to dramatically reveal the content from behind a sliding mask for React applications.
Mask Reveal Text preview
A solid panel sweeps across the text in a two-phase wipe — first sliding in to fully cover the content, then sliding out the opposite side to leave the text revealed. It feels like a stage curtain, a swipe-to-unlock gesture, or a film cut transition. The text itself is always rendered, never animated; only the overlay panel moves, which keeps the type crisp and the motion buttery. Direction is fully configurable (left, right, up, down) and the panel color is a single prop, so it slots neatly into any brand. Drop it into a hero, a section divider, or a "what's new" announcement when you want a single decisive reveal instead of a per-letter cascade.
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 mask-reveal-text text effect into my projectRelated Components
Text Reveal
Cinematic text reveals with clip-path animations
Blur Text
Text animation from blur to focus
Splitting Text
Character, word, or line splitting with timing
Shimmering Text
Wave-like color shimmer across text
Highlight Text
Animated marker highlight effect
Wave Text
Letters undulating along a continuous sine wave
FAQ
Was this page helpful?
Sign in to leave feedback.
Magnify Text
Cursor-driven magnifying glass that scales a circular region of text in place with a glass rim and spring-smoothed motion for React, Next.js, and motion.
Morph Text
Per-character glyph morphing that smoothly cross-fades and scales each letter as text cycles between strings for React applications.