Scattered Grid

A grid where the item nearest the cursor scales up while the others scatter around it.

Motion

Tailwind CSS

https://atelier-ui.com/scattered-grid

Unlock component

Unlock the source code and CLI installation with a one-time license.

One-time payment. Lifetime access to all current and future pro components.

API

Name	Type	Default	Description
`children`	`ReactNode`	—	Items wrapped in `ScatteredGrid.Item`.
`className`	`string`	—	Container classes. The layout goes here.
`hoverScale`	`number`	`1.4`	Scale of the active item.
`pushDistance`	`number`	`15`	How far the other items are pushed away, in pixels.
`scatterDistance`	`number`	`40`	Random offset added on top of the push, in pixels.
`maxRotation`	`number`	`15`	Random tilt of the other items, in degrees.
`fadeOpacity`	`number`	`0.05`	Opacity of the other items, from 0 to 1.
`duration`	`number`	`0.35`	How long the movement visually takes, in seconds.
`bounce`	`number`	`0.4`	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`.