Text Animations
Redact
Copy that arrives fully classified under solid bars, then declassifies word by word — each bar clearing its own word and leaving an amethyst edge behind as the only evidence it was ever there.
Install
bun add clsx tailwind-mergeThen copy 2 files into your project:
- components/registry/redact/redact.tsx
- lib/utils.ts
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| mode | "wipe" | "slide" | "lift" | "wipe" | How a bar leaves. Wipe retracts it into its own edge, slide throws it clear of the word, lift peels it off the page — wipe reads as redaction being undone, slide reads as tape being pulled. |
| direction | "ltr" | "rtl" | "center-out" | "random" | "ltr" | The order words declassify in. Random is the only one that reads as a machine working through a document rather than a person reading it. |
| duration | number | 420 | How long one bar takes to clear its own word. |
| stagger | number | 70 | Gap between one word starting to clear and the next. At 0 the whole block lifts at once and the espionage goes out of it. |
| startDelay | number | 300 | Dead air after the classified block lands before the first bar moves. The pause is what makes the reveal feel authorised. |
| barPadding | number | 3 | How far each bar overhangs its word. Drawn tight to the glyphs it reads as a highlighter; give it a couple of pixels and it reads as tape laid over the page. |
| loop | boolean | false | Bring the bars back down and run the whole sweep again, forever, instead of settling on plain text. |
| interval | number | 3.5 | Seconds the plain text stays legible before the bars come back down. |
| barColor | string (hex) | "#15101f" | Solid ink of the bars. Near-black on purpose — a censor bar that lets any of the word through is not a censor bar. |
| edgeColor | string (hex) | "#a855f7" | Amethyst hairline riding the retreating edge of each bar. It is the only part of the effect the eye actually tracks. |
What It Demonstrates
- Reveal
- Content is uncovered gradually, often by animating a clip-path or mask.
- Mask
- Hiding or revealing parts of an element using a shape or gradient — like clip-path, but with soft, fadeable edges.
- Clip-path
- Clipping an element to a shape, used for reveals, masks, and before/after sliders.
- Stagger
- Animate several items one after another with a small delay between each, creating a cascade.
- Enter / Exit
- The animation an element plays when it's added to or removed from the screen.
- Ease-out
- Starts fast, ends slow. The default for most UI and anything responding to the user.
- Loop
- An animation that repeats, a set number of times or infinitely.
Related Components
Letters Pull
A per-letter pull-up reveal — letters rise, sharpen from a blur, and fade in with a stagger.
Split Flap
A Solari departure board. Every column walks the charset one flap at a time until it reaches its letter, so the word is never revealed — it is arrived at, with a real hinged half falling away as the next one seats behind it.
Reflow
Text whose words keep their identity when the line breaks move — narrow the measure and the sentence travels instead of re-wrapping.
Metallic Text
Chrome poured into a headline — a metal ramp clipped to real glyphs, a specular travelling across them, and a tinted wake following a beat behind.
Neon
A neon sign, with everything that is wrong with a neon sign. Tubes strike one at a time rather than together, each settling at its own moment inside the ignition; the steady state carries a mains hum; and every so often one tube gives up for a third of a second and comes back. The glow is baked once per letter into a sprite, so a frame is a handful of draws no matter how wide the word — and the word itself never stops being a real, selectable text node underneath.
Rime
Hoarfrost taking a word — Molten's opposite number, the same idea of type as a coverage field run cold. Crystal tips seeded on the glyph edges creep across the letters, fork at a fixed lattice angle, and die where they run out of glyph or hit ice already there, so the cost tracks the growing edge rather than the area. The text underneath is never redrawn: it stays a real span at its real colour the whole time, which makes the thaw nothing more than fading the ice off type that was always there.