Shadcn.io is not affiliated with official shadcn/ui
Redact Text
Black redaction bars over selected words that slide off via clip-path on mount, hover, or click to reveal the hidden copy underneath in React, Next.js, and motion projects.
Redact Text preview
Classified-document aesthetics, but interactive. The component renders normal text with thick black bars laid over selected words; on the configured trigger the bars peel away via an animated clip-path inset, revealing the redacted words underneath one after another with a configurable stagger. The text is always rendered in the DOM (it's just visually covered) so layout never reflows when the bars retract — the line height and word spacing stay rock solid. Three triggers ship out of the box: mount (auto-reveals after a delay), hover (peels open while the pointer is over the line), and click (toggles on each press). Perfect for privacy-themed marketing, before/after reveals, FOIA-aesthetic launch teasers, or any moment where you want the user to feel like they're declassifying something.
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 redact-text text effect into my projectRelated Components
Mask Reveal Text
Sliding panel sweeps to reveal text
Decrypted Text
Matrix-style decryption with character cycling
Scrambled Text
Proximity-based character scrambling on hover
Splitting Text
Character, word, or line splitting with timing
Fuzzy Text
Glitchy, distorted text with noise effects
Shuffle
Random character shuffling with settling animations
FAQ
Was this page helpful?
Sign in to leave feedback.