Lines unfold into place like creased paper opening flat.
Every prop is wired to the controls underneath. Any change replays the animation, and the refresh button replays it on demand.
| Prop | Type | Default | Description |
|---|---|---|---|
text | string | "Design unfolds" | The text content to split and fold into place. |
splitBy | "char" | "word" | "line" | "char" | Controls whether each character, word, or explicit line folds as a panel. |
hinge | "top" | "bottom" | "left" | "right" | "top" | The edge that acts as the 3D fold hinge. |
duration | number | 0.65 | Duration in seconds for each panel to unfold. |
stagger | number | 0.045 | Delay in seconds between panels; 0.03 to 0.08 keeps the cascade crisp. |
ease | string | "power3.out" | GSAP easing curve used by the unfold timeline. |
perspective | number | 700 | Perspective distance applied to each panel parent. |
creaseShading | number | 0.55 | Strength of the gradient shade while panels are folded. |
trigger | "mount" | "hover" | "scroll" | "loop" | "mount" | Determines when the unfold animation starts. |
fontSize | string | number | 80 | Font size applied to the root text. |
fontWeight | string | number | 800 | Font weight applied to the root text. |
color | string | "#f7f2e8" | Text color of the folded panels. |
Keyboard shortcuts and ARIA behavior.