A configurable grid of cards that stacks to the center while scrolling, without hard stick.
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 cards to place in the grid. The number of children determines the number of rows. |
slot | ReactNode | — | Static content pinned to the screen, unaffected by the animation. Fills the viewport with no layout of its own, above the items. |
columns | number | 4 | Number of grid columns. |
scatter | number | 20 | Maximum random offset of a card from its cell, as a percentage of the cell size. 0 keeps the grid even. |
rotation | number | 10 | Maximum tilt of a stacked card in degrees. Each card gets a random fraction of it, in a random direction. |
seed | number | 1 | Seed for the randomness. The same seed always produces the same arrangement; change it to reshuffle the cards. |
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. |
className | string | — | Extra classes for the grid container. |