Settle Grid

Photos tossed loosely on a table that settle into a neat grid as they come into view, or in step with the scroll.

pnpm dlx shadcn@latest add @latheui/settle-grid

Part of Lathe Pro. Set up your project once with your license key: npx latheui init --key <key>. See Lathe Pro.

Settle Grid is part of Lathe Pro

The preview is live and free to try. The source, the install and every assembly come with Pro: $79 once, with lifetime updates.

Depends on

API reference

Also accepts native div attributes.

Prop	Type	Default	Description
items* (required)	{ src: string; alt: string }[]	—	The photos, in grid order.
columns	number	3	Columns in the settled grid.
gap	number	12	Space between photos, in px.
aspect	number	4 / 5	Width divided by height of each photo.
trigger	"view" \| "scroll"	"view"	Settle once seen, or in step with the scroll. Ignored when settled is given.
settled	boolean	—	Controlled: true lays the photos in the grid, false scatters them.
scatter	number	1	How wild the scatter is, from 0 to 1.5.
stagger	number	55	Milliseconds between one photo settling and the next.
container	RefObject<HTMLElement>	—	The scrolling element for trigger="scroll", when not the window. Give it position: relative.
curve	Curve	spring with a little give	How each photo settles. Any curve from the Animation Lab.
duration	number	900	Milliseconds, for curves that are not springs.
radius	number \| string	10	Corner radius of a photo.

Photos are plain images with their alt text, in grid order, whatever pose they are in.
With reduced motion the photos start in the grid and stay there.

Scattered, each photo is drawn toward the middle of the grid, thrown off at random and turned up to 16°, always the same way.
Photos settle in a shuffled order, 55ms apart, and their shadows tighten as they land.

<SettleGrid items={items} scatter={1.4} stagger={30} curve={{ type: "spring", stiffness: 260, damping: 20 }} />

API reference

Also accepts native div attributes.

Prop	Type	Default	Description
items* (required)	{ src: string; alt: string }[]	—	The photos, in grid order.
columns	number	3	Columns in the settled grid.
gap	number	12	Space between photos, in px.
aspect	number	4 / 5	Width divided by height of each photo.
trigger	"view" \| "scroll"	"view"	Settle once seen, or in step with the scroll. Ignored when settled is given.
settled	boolean	—	Controlled: true lays the photos in the grid, false scatters them.
scatter	number	1	How wild the scatter is, from 0 to 1.5.
stagger	number	55	Milliseconds between one photo settling and the next.
container	RefObject<HTMLElement>	—	The scrolling element for trigger="scroll", when not the window. Give it position: relative.
curve	Curve	spring with a little give	How each photo settles. Any curve from the Animation Lab.
duration	number	900	Milliseconds, for curves that are not springs.
radius	number \| string	10	Corner radius of a photo.