ComponentsReveal
Wipe reveal
A soft edge uncovers the line.
Unveil the headline
Installation
$ npx shadcn@latest add @textlab/wipe-revealNeeds @textlab in your components.json. Setup takes a minute.
Usage
usage.tsx
import { WipeReveal } from "@/components/textlab/wipe-reveal/wipe-reveal";
<WipeReveal as="h2" variant="center" text="Unveil the headline" />Variants
leftrightcenterdiagonalProps
| Prop | Type | Default | Description |
|---|---|---|---|
| text* | string | – | The copy. |
| variant | "left" | "right" | "center" | "diagonal" | "left" | Direction of the sweep; center opens from the middle. |
| softness | number | 0.18 | Width of the feathered edge as a share of the text, 0 to 0.5. |
| as | ElementType | "span" | Rendered element. |
| trigger | "mount" | "inView" | "hover" | "manual" | "inView" | What starts the animation. manual follows `active`. |
| active | boolean | false | Drives trigger="manual". |
| once | boolean | true | In view: play once instead of on every entry. |
| delay | number | 0 | Seconds before the first part moves. |
| duration | number | 1 | Seconds each part takes. |
| ease | EaseName | [number, number, number, number] | "standard" | Easing token or cubic bezier. |
| reducedMotion | "user" | "always" | "never" | "user" | user follows the OS setting; always shows the still version. |
| className | string | – | Merged onto the root. |
| onComplete | () => void | – | Called when a one-shot animation finishes. |
When to use it
Reach for it
- Titles that should feel unveiled rather than assembled.
- Text that must stay selectable and unsplit.
Skip it
- Multi-line paragraphs; the sweep crosses the whole block at once.
- When you need per-word timing; use word-reveal.
Accessibility and motion
Accessibility
- The text is never split, so assistive tech reads it as plain text.
- Mask padding keeps descenders inside without changing layout.
Motion
- The edge travels with the standard ease so the sweep speed feels even.
- It overshoots by the soft width so the last letter finishes fully opaque.
Reduced motion. Shows the text with no mask.
Performance
- Animates one CSS variable on one element; the mask is GPU composited.