Flip 3D Reveal
A premium, mechanical text reveal component. Characters or words rotate into view along the Y-axis, creating a Rolodex or split-flap display effect with a microscopic physics bounce.
Last Modified:Aug 17, 2026
Install
CLI
flip-3d-reveal
Or install a specific demo variant:
flip-3d-headline-demo
Or install a specific demo variant:
flip-3d-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. Preserves native wrapping. |
as | React.ElementType | "h1" | The HTML tag to render as. |
splitBy | "word" | "char" | "char" | Splitting by character is great for headlines. Splitting by word optimizes paragraphs. |
startAngle | number | 90 | The starting rotation on the Y-axis in degrees. |
startX | string | "-0.2em" | Tiny starting horizontal offset to create a sliding flap effect. |
duration | number | 0.8 | Duration of the flip animation per item. |
delay | number | 0 | Delay before the animation starts (in seconds). |
stagger | number | 0.03 | Stagger time between each item flipping. |
viewportOnce | boolean | true | If true, animates only once. If false, seamlessly reverses on scroll. |
triggerStart | string | "top 90%" | Viewport threshold for when the animation should start. |