Fold Reveal
A structural text reveal component. Distinct lines of text hinge downward into view like a cascading staircase or folding paper, providing a rigid, architectural feel.
Last Modified:Aug 17, 2026
Install
CLI
fold-reveal
Or install a specific demo variant:
fold-reveal-demo
Manual
1. Install Dependencies
Dependencies
2. Add Source Code
Props
| Prop | Type | Default | Description |
|---|---|---|---|
text | string | Required | Text to reveal. Use \n to define distinct folding panels/lines. |
as | React.ElementType | "h1" | The HTML tag to render as. |
startAngleX | number | -90 | The angle the paper folds out from. |
duration | number | 1.2 | Duration of the fold animation per line. |
delay | number | 0 | Delay before the animation begins (in seconds). |
stagger | number | 0.15 | The stagger delay between each line folding down. |
viewportOnce | boolean | true | If true, plays once. If false, seamlessly reverses on scroll away. |
triggerStart | string | "top 85%" | Viewport threshold for when the animation should start. |