Letters that come together into readable text as you scroll, then scatter again.
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. |
Motion
React animation library.
Text Split (Atelier)
A utility that splits text for animation.
Smooth Scroll (Atelier)
Smooth scrolling for the whole page.