Text Animations

Redact

Copy that arrives fully classified under solid bars, then declassifies word by word. Each bar clears its own word and leaves an amethyst edge behind as the only evidence it was ever there.

Cook BookReveal Mask Clip-path Stagger Enter / Exit Ease-out Loop

Controls

mode

direction

duration420 ms

stagger70 ms

startDelay300 ms

barPadding3.0 px

loop

interval3.5 s

barColor

#15101f

edgeColor

#a855f7

Install

bun add clsx tailwind-merge

Then 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

Appears In

"use client"; import { useEffect, useMemo, useState } from "react"; import { cn } from "@/lib/utils"; export interface RedactProps { text?: string; mode?: "wipe" | "slide" | "lift"; direction?: "ltr" | "rtl" | "center-out" | "random"; duration?: number; stagger?: number; startDelay?: number; barPadding?: number; loop?: boolean; interval?: number; barColor?: string; edgeColor?: string; reducedMotion?: boolean; className?: string; } const EASE = "cubic-bezier(0.22, 1, 0.36, 1)"; export default function Redact({ text = "Every record of the assignment was destroyed at the subject's request.", mode = "wipe", direction = "ltr", duration = 420, stagger = 70, startDelay = 300, barPadding = 3, loop = false, interval = 3.5, barColor = "#15101f", edgeColor = "#a855f7", reducedMotion = false, className, }: RedactProps) { const tokens = useMemo(() => text.split(/(\s+)/).filter((t) => t.length > 0), [text]); const wordIndices = useMemo( () => tokens.map((t, i) => (/^\s+$/.test(t) ? -1 : i)).filter((i) => i >= 0), [tokens], ); const count = wordIndices.length; const slots = useMemo(() => { const order = Array.from({ length: count }, (_, i) => i); if (direction === "rtl") return order.map((i) => count - 1 - i); if (direction === "center-out") { const mid = (count - 1) / 2; const byDistance = [...order].sort((a, b) => Math.abs(a - mid) - Math.abs(b - mid)); const rank = new Array<number>(count); byDistance.forEach((word, r) => { rank[word] = r; }); return rank; } if (direction === "random") { const rank = [...order]; let seed = 0x9e3779b9; for (let i = count - 1; i > 0; i--) { seed = (seed * 1103515245 + 12345) & 0x7fffffff; const j = seed % (i + 1); [rank[i], rank[j]] = [rank[j], rank[i]]; } return rank; } return order; }, [count, direction]); const [revealed, setRevealed] = useState(reducedMotion); useEffect(() => { if (reducedMotion) { setRevealed(true); return; } const sweep = startDelay + Math.max(0, count - 1) * stagger + duration; if (!loop) { setRevealed(true); return; } let alive = true; let timer: ReturnType<typeof setTimeout> | null = null; const step = (next: boolean) => { setRevealed(next); timer = setTimeout( () => { if (alive) step(!next); }, next ? sweep + interval * 1000 : sweep, ); }; step(true); return () => { alive = false; if (timer !== null) clearTimeout(timer); }; }, [reducedMotion, loop, interval, startDelay, stagger, duration, count]); const hp = barPadding * 0.6; let slot = -1; return ( {tokens.map((token, i) => { if (/^\s+$/.test(token)) return {token}; slot += 1; const delay = reducedMotion ? 0 : revealed ? startDelay + slots[slot] * stagger : slots[slot] * stagger; const transition = reducedMotion ? "none" : `transform ${duration}ms ${EASE} ${delay}ms, clip-path ${duration}ms ${EASE} ${delay}ms, opacity ${duration}ms ${EASE} ${delay}ms`; const carried = mode === "slide" ? `translateX(${revealed ? "110%" : "0%"})` : mode === "lift" ? `translate(${revealed ? "6%" : "0%"}, ${revealed ? "-150%" : "0%"}) rotate(${revealed ? -7 : 0}deg)` : `translateX(${revealed ? "100%" : "0%"})`; const edgeCarried = mode === "slide" ? `translateX(${revealed ? "110%" : "-4px"})` : mode === "lift" ? carried : `translateX(${revealed ? "calc(100% + 4px)" : "-4px"})`; const edgeStyle: React.CSSProperties = { transition, transform: edgeCarried, opacity: mode === "lift" && revealed ? 0 : 1, }; if (mode === "lift") edgeStyle.borderBottom = `2px solid ${edgeColor}`; else edgeStyle.borderLeft = `2px solid ${edgeColor}`; return ( {token} <span className="absolute inset-0" style={{ backgroundColor: barColor, transition, transform: mode === "wipe" ? undefined : carried, clipPath: mode === "wipe" ? `inset(0 0 0 ${revealed ? "100%" : "0%"})` : undefined, opacity: mode === "lift" && revealed ? 0 : 1, }} /> ); })} ); }

Redact

Controls

Install

Props

What It Demonstrates

Related Components

InlayPro

Letters Pull

Split Flap

Reflow

Metallic Text

Neon

Appears In

Controls