Cursor Gallery

A list of titles where pointing at one brings up its image, which trails the pointer, leans as it moves and crossfades as you go.

pnpm dlx shadcn@latest add @latheui/cursor-gallery

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

Cursor Gallery 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)	{ title: string; meta?: string; image: string; href?: string }[]	—	The rows. With href a row is a link; without, a button.
label* (required)	string	—	Accessible name for the list.
onSelect	(item, index) => void	—	Called when a row without an href is chosen.
imageWidth	number	280	Width of the image that follows the pointer, in px.
aspect	number	4 / 3	Width divided by height.
lag	number	0.45	How far the image trails the pointer, from 0 (glued) to 1 (lazy).
tilt	number	8	Degrees the image leans with the pointer's speed.
radius	number \| string	12	Corner radius of the image.
dimOthers	boolean	true	Fade the other rows while one is under the pointer.

Each row is a real link or button named by its title, so the list works fully without a pointer.
The floating image is decorative; the row's title says what it shows.
On touch screens there is no hover, so rows behave as plain links.
With reduced motion the image appears in place, without trailing or leaning.

The image follows the pointer on a spring whose stiffness comes from lag, and leans by its speed on a softer spring.
It grows in from 60% as the pointer arrives and shrinks away as it leaves. Images crossfade with a slight zoom.

<CursorGallery label="Work" items={items} lag={0} tilt={0} />

API reference

Also accepts native div attributes.

Prop	Type	Default	Description
items* (required)	{ title: string; meta?: string; image: string; href?: string }[]	—	The rows. With href a row is a link; without, a button.
label* (required)	string	—	Accessible name for the list.
onSelect	(item, index) => void	—	Called when a row without an href is chosen.
imageWidth	number	280	Width of the image that follows the pointer, in px.
aspect	number	4 / 3	Width divided by height.
lag	number	0.45	How far the image trails the pointer, from 0 (glued) to 1 (lazy).
tilt	number	8	Degrees the image leans with the pointer's speed.
radius	number \| string	12	Corner radius of the image.
dimOthers	boolean	true	Fade the other rows while one is under the pointer.

Accessibility

Each row is a real link or button named by its title, so the list works fully without a pointer.
The floating image is decorative; the row's title says what it shows.
On touch screens there is no hover, so rows behave as plain links.
With reduced motion the image appears in place, without trailing or leaning.