Redaction Reveal
NewPro
Black bars wipe off a line of text word by word, like a document being declassified, with optional words that stay covered and a stamp at the end.
Customize
0.2s
#0c0a09
Stamp
When to use it
- Teaser pages that uncover a project name, date or feature
- Mission briefings and titles for spy, thriller or mystery games
- Roadmaps and changelogs that show what is still under wraps
Good to know
- Plan
- Pro
- Dependencies
- motion
- Rendering
- DOM and CSS
- Reduced motion
- Respected
- Lines of code
- 151
Installation
Redaction Reveal is part of Pro. After purchase you're invited to the private mekai-ui/mekai-ui-pro GitHub repository: copy redaction-reveal.tsx into components/ui and run npm install motion.
Usage
import { RedactionReveal } from "@/components/ui/redaction-reveal";
<div className="bg-bone p-8 text-ink-950">
<RedactionReveal
text="Project Hollow enters early access on 14 March"
keepRedacted={["Hollow"]}
stamp="Declassified"
className="font-mono text-2xl font-bold"
/>
</div>Props
11 properties| Property | Type | Default | Description |
|---|---|---|---|
| text | string | — | The line of text, split into words. |
| delay | number | 0 | Seconds before the first bar starts. |
| stagger | number | 0.2 | Seconds between one bar starting and the next. |
| duration | number | 0.5 | Seconds a five-letter word takes to clear. Longer words take a little longer. |
| keepRedacted | string[] | [] | Words that stay covered, matched without case or punctuation. Screen readers hear "redacted" instead. |
| barColor | string | "#0c0a09" | Color of the bars. The default is near black, made for a light sheet. Pass a light color on dark pages. |
| edgeColor | string | "#ff784f" | Color of the thin line along the edge of a bar as it clears. |
| stamp | string | — | Text stamped over the line once every bar has cleared. |
| stampColor | string | "#e2552b" | Color of the stamp. |
| once | boolean | true | Play only the first time the text enters the viewport. |
| className | string | — | Extra classes for the text. |
Dependencies: motion