A grid where the item nearest the cursor scales up while the others scatter around it.
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 | — | Items wrapped in ScatteredGridItem. |
className | string | — | Container classes. The layout goes here. |
hoverScale | number | 1.65 | Scale of the active item. The surrounding items scale toward this value the closer they are. |
pushDistance | number | 0.9 | How far the items next to the active one are pushed away, as a fraction of the active item's width. |
falloffRadius | number | 2 | Radius of the effect, in multiples of the active item's width. Push, scatter, rotation, and scale fade to zero as items get further from the active one. |
scatterDistance | number | 0.2 | Random offset added on top of the push, as a fraction of the active item's width. |
maxRotation | number | 10 | Random tilt of the surrounding items, in degrees. |
duration | number | 0.3 | How long the movement visually takes, in seconds. |
bounce | number | 0.45 | Bounciness of the spring, from 0 to 1. |
| Name | Type | Default | Description |
|---|---|---|---|
children | ReactNode | — | The cell content, usually an image. |
className | string | — | Cell classes, such as col-span-2. |
Motion
React animation library.