Text, images and any other element that wave across the screen while scrolling.
Unlock the source code and CLI installation with a one-time license.
| Name | Type | Default | Description |
|---|---|---|---|
children | ReactNode | — | The sentence. Text is split per letter, other elements are animated as one block. |
amplitude | number | 60 | Maximum wave height in pixels. |
wavelength | number | 900 | Distance in pixels between two wave crests. |
intensity | number | 1 | How strongly the wave reacts to scrolling. 2 gives a full wave at half the scroll speed. |
scrollDistance | string | "500vh" | How much scrolling the effect takes. Any CSS height. Ignored when scrollTargetRef is set. |
scrollTargetRef | RefObject<HTMLElement | null> | — | External scrolled section driving the animation. Disables the built-in section. |