| Prop | Type | Default | Description |
|---|---|---|---|
text
|
string
|
'Design unfolds'
|
The text to unfold. Use
\n
for line breaks.
|
split-by
|
'char' | 'word' | 'line'
|
'char'
|
Fold each character, each word, or each line. |
hinge
|
'top' | 'bottom' | 'left' | 'right'
|
'top'
|
The edge each piece hinges on. |
fold-style
|
'paper' | 'blinds' | 'flip'
|
'paper'
|
Paper folds from one edge, blinds open as two slats, flip turns a full half-turn. |
duration
|
number
|
0.65
|
Seconds each piece takes to unfold. |
stagger
|
number
|
0.045
|
Seconds between pieces starting. |
stagger-from
|
'start' | 'center' | 'end' | 'edges' | 'random'
|
'start'
|
Where the stagger starts. |
fold-angle
|
number
|
92
|
Angle, in degrees, a piece starts folded at. Flip always uses 180. |
ease
|
string
|
'power3.out'
|
GSAP-style ease name:
power1
–
power4
,
sine
,
expo
,
circ
,
back(n)
,
bounce
with
.in
,
.out
or
.inOut
.
|
perspective
|
number
|
700
|
Perspective distance in pixels. |
crease-shading
|
number
|
0.55
|
Strength, 0 to 1, of the shadow along the crease while a piece is folded. |
trigger
|
'mount' | 'hover' | 'scroll' | 'loop'
|
'mount'
|
When the text unfolds.
scroll
plays once when the top reaches 82% of the viewport.
|
loop-delay
|
number
|
1.4
|
Seconds the unfolded text holds before folding back up. Only for
loop
.
|
hover-refold
|
boolean
|
false
|
Pieces near the pointer fold partly back. |
refold-radius
|
number
|
140
|
Pointer reach, in pixels, of the refold. |
refold-angle
|
number
|
45
|
Largest refold angle, in degrees. |
font-size
|
string | number
|
80
|
Font size. Numbers are pixels. |
font-weight
|
string | number
|
800
|
Font weight. |
color
|
string
|
'currentColor'
|
Text color. |
class
|
string
|
''
|
Extra classes for the root element. |