Letters that rise from below the screen and settle into readable text mid-scroll.
Unlock component
One license unlocks every pro feature for life, including the ones we haven't built yet.
Already have an account? Sign in
| Name | Type | Default | Description |
|---|---|---|---|
children | string | — | The text content to animate. Split per letter. |
depth | number | 10 | Distance every letter starts below its resting spot. 100 equals one viewport height. |
scatter | number | 60 | Extra random distance added per letter on top of depth. 100 equals one viewport height. |
spread | number | 2 | Multiplies scatter to stretch the letters apart. Higher values make their speeds differ more. |
rotation | number | 50 | Maximum starting tilt of a letter in degrees. Each letter gets a random fraction of it, in a random direction. |
fade | number | 1 | Amount of transparency letters start and end with. 1 fades them in from invisible, 0 disables the fade. |
seed | number | 2 | Seed for the randomness. The same seed always produces the same arrangement; change it to reshuffle the letters. |
scrollDistance | number | 500 | How long the animation lasts. 100 equals one viewport of scrolling. |
overlap | number | 0 | Shortens the empty space before and after the animation, so the animation starts sooner. 100 equals one viewport of scrolling. |
render | ReactElement | function | <span/> | Override the wrapper element. |