Masked Reveal
A sophisticated text reveal component. Wraps elements in a hidden overflow mask and pushes them up into view with a slight, elegant rotation, resembling premium agency typography.
Last Modified:Aug 17, 2026
Install
CLI
masked-reveal
Or install a specific demo variant:
masked-reveal-headline-demo
Or install a specific demo variant:
masked-reveal-paragraph-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. |
as | React.ElementType | "div" | The HTML tag to render as. |
splitBy | "word" | "char" | "word" | Whether to split and animate by word or individual character. |
startOffset | string | number | "100%" | The starting vertical offset. Can be percentage or pixel value. |
startRotation | number | 5 | The starting rotation on the Z-axis. |
delay | number | 0 | Delay before the animation begins (in seconds). |
duration | number | 1.2 | Duration of the reveal for each element. |
stagger | number | 0.04 | Stagger delay between each element. |
ease | string | "expo.out" | GSAP easing string. |
viewportOnce | boolean | true | If true, plays once. If false, seamlessly reverses on scroll away. |
triggerStart | string | "top 90%" | Viewport threshold for when the animation should start. |