Bottom Hinge Text Reveal
A high-impact 3D text reveal component. Elements start deep in the Z-axis, leaning backward, and aggressively swing up and slam into place using a tight perspective and heavy overshoot.
Last Modified:Aug 17, 2026
Install
CLI
bottom-hinge-text-reveal
Or install a specific demo variant:
bottom-hinge-text-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. |
as | React.ElementType | "h1" | The HTML tag to render as. |
splitBy | "word" | "char" | "char" | Whether to split and animate by word or individual character. |
startZ | string | number | "-400px" | How deep into the screen the element starts. |
startAngleX | number | -70 | The starting backward tilt of the element. |
duration | number | 0.7 | Duration of the snap animation. |
delay | number | 0 | Delay before the animation begins (in seconds). |
stagger | number | 0.04 | Stagger delay between each element slamming into place. |
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. |