A row of overlapping images that grow as they pass the center of 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 items in the row, usually images. |
magnify | number | 1.7 | Scale of an item as it passes the center. 1 turns off the magnification. |
slant | number | 0.3 | How far items move up and down as they cross, as a fraction of half the viewport. Each item comes in from the top and leaves toward the bottom. 0 keeps them level. |
tilt | number | 45 | How much items rotate as they cross, in degrees. They tilt one way coming in and the other way going out. 0 keeps them straight. |
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 it starts sooner. 100 equals one viewport of scrolling. |