Depth Field

Photos floating at different depths in 3D. The pointer steers the camera; a click brings one forward while the rest fade back.

pnpm dlx shadcn@latest add @latheui/depth-field

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

Depth Field 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. Size it with className; it is 460px tall by default.

Prop	Type	Default	Description
items* (required)	{ src: string; alt: string; title?: string }[]	—	The photos.
label* (required)	string	—	Accessible name for the field.
itemWidth	number	150	Width of a photo at the front of the field, in px.
aspect	number	4 / 5	Width divided by height.
depth	number	900	How far back the field goes, in px.
spread	number	1	How far photos spread toward the edges.
parallax	number	1	How much the camera turns with the pointer, from 0 to 2.
drift	boolean	true	A slow drift, so the field moves when nobody is pointing.
perspective	number	900	Camera distance in px.
seed	number	3	Changes the layout. The same seed always lays out the same way.
curve	Curve	smooth spring	How a chosen photo comes forward. Any curve from the Animation Lab.
duration	number	—	Milliseconds, for curves that are not springs.

Each photo is a toggle button named by its title or alt text, pressed while it is forward.
Photos overlap by design. Keep the count and size modest for the space, so each keeps a comfortable part showing to tap.
The camera's drift stops while its preview is paused, and never runs with reduced motion.
With reduced motion the camera stays still and photos move without travelling.

Photos sit on a loose grid with a random nudge in each cell, so they never pile up, at random depths.
The camera follows the pointer on a soft spring (stiffness 60, damping 18), plus a slow sway.
A chosen photo flies to the front and straightens; the others fade to a quarter and blur.

<DepthField label="Archive" items={photos} depth={1400} spread={1.2} drift={false} className="h-[600px]" />

API reference

Also accepts native div attributes. Size it with className; it is 460px tall by default.

Prop	Type	Default	Description
items* (required)	{ src: string; alt: string; title?: string }[]	—	The photos.
label* (required)	string	—	Accessible name for the field.
itemWidth	number	150	Width of a photo at the front of the field, in px.
aspect	number	4 / 5	Width divided by height.
depth	number	900	How far back the field goes, in px.
spread	number	1	How far photos spread toward the edges.
parallax	number	1	How much the camera turns with the pointer, from 0 to 2.
drift	boolean	true	A slow drift, so the field moves when nobody is pointing.
perspective	number	900	Camera distance in px.
seed	number	3	Changes the layout. The same seed always lays out the same way.
curve	Curve	smooth spring	How a chosen photo comes forward. Any curve from the Animation Lab.
duration	number	—	Milliseconds, for curves that are not springs.

Accessibility

Each photo is a toggle button named by its title or alt text, pressed while it is forward.
Photos overlap by design. Keep the count and size modest for the space, so each keeps a comfortable part showing to tap.
The camera's drift stops while its preview is paused, and never runs with reduced motion.
With reduced motion the camera stays still and photos move without travelling.