Text, images and any other element that wave across the screen while scrolling.
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 | ReactNode | — | The sentence. Text is split per letter, other elements are animated as one block. |
amplitude | number | 80 | Maximum wave height in pixels. |
wavelength | number | 1000 | Distance in pixels between two wave crests. |
intensity | number | 1.5 | How strongly the wave reacts to scrolling. 2 gives a full wave at half the scroll speed. |
scrollDistance | number | 400 | 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. |
Motion
React animation library.
Text Split (Atelier)
A utility that splits text for animation.
Smooth Scroll (Atelier)
Smooth scrolling for the whole page.