Editorial Reveal
A premium, Awwwards-level text reveal component. Uses GSAP and ScrollTrigger to create a sophisticated, staggered redaction-block reveal that triggers exactly when the text enters the viewport.
Last Modified:Aug 17, 2026
Install
CLI
editorial-reveal
Or install a specific demo variant:
editorial-reveal-demo
Manual
1. Install Dependencies
Dependencies
2. Add Source Code
Props
| Prop | Type | Default | Description |
|---|---|---|---|
text | string | Required | The full string of text to reveal. Automatically splits by words. |
as | React.ElementType | "p" | The HTML tag to render as (e.g., 'h1', 'h2', 'p'). |
blockClassName | string | "bg-foreground" | Tailwind class for the redaction block color. |
triggerStart | string | "top 85%" | Viewport threshold for when the animation should start. |
duration | number | 0.5 | The duration of the reveal for each individual block in seconds. |
stagger | number | 0.015 | The stagger delay between each word revealing in seconds. |
ease | string | "power3.in" | GSAP easing function for the scale animation. |
reverseOnScroll | boolean | true | Whether the blocks should close again when scrolling back up. |