Shutter Reveal

An image gallery that changes images in slices: sliding in, opening like blinds, or folding round in 3D.

1 / 5

pnpm dlx shadcn@latest add @latheui/shutter-reveal

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

Shutter Reveal 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 16:10 by default.

Prop	Type	Default	Description
images* (required)	{ src: string; alt: string }[]	—	The images, in order.
label* (required)	string	—	Accessible name for the gallery.
index	number	—	Controlled index of the image shown.
defaultIndex	number	0	Image to start on.
onIndexChange	(index: number) => void	—	Called when the image changes.
slices	number	8	How many slices the next image arrives in.
orientation	"vertical" \| "horizontal"	"vertical"	Columns or rows.
effect	"slide" \| "blinds" \| "fold"	"slide"	How each slice arrives.
order	"sweep" \| "center" \| "random"	"sweep"	The order slices start in. Random is seeded, so it repeats.
stagger	number	45	Milliseconds between one slice starting and the next.
interval	number	0	Milliseconds between images when playing on its own. 0 is off.
controls	boolean	true	Previous and next buttons, and the counter.
curve	Curve	expo out	How each slice moves. Any curve from the Animation Lab.
duration	number	750	Milliseconds each slice takes, for curves that are not springs.

The gallery is a focusable group with the carousel role description. Each new image is announced by its alt text and place.
Slices are decoration; only the image's alt text is read.
Playing on its own stops while the pointer or focus is on the gallery, and while a preview is paused.
With reduced motion the next image fades in whole.

Each slice moves on an expo-out curve over 750ms by default, starting 45ms after the one before it in the chosen order.
A change started mid-change finishes the first at once, so clicks never queue up.

<ShutterReveal label="Work" images={images} effect="blinds" order="center" slices={12} />

<ShutterReveal label="Work" images={images} effect="fold" orientation="horizontal" curve={{ type: "spring", stiffness: 160, damping: 18 }} />

API reference

Also accepts native div attributes. Size it with className; it is 16:10 by default.

Prop	Type	Default	Description
images* (required)	{ src: string; alt: string }[]	—	The images, in order.
label* (required)	string	—	Accessible name for the gallery.
index	number	—	Controlled index of the image shown.
defaultIndex	number	0	Image to start on.
onIndexChange	(index: number) => void	—	Called when the image changes.
slices	number	8	How many slices the next image arrives in.
orientation	"vertical" \| "horizontal"	"vertical"	Columns or rows.
effect	"slide" \| "blinds" \| "fold"	"slide"	How each slice arrives.
order	"sweep" \| "center" \| "random"	"sweep"	The order slices start in. Random is seeded, so it repeats.
stagger	number	45	Milliseconds between one slice starting and the next.
interval	number	0	Milliseconds between images when playing on its own. 0 is off.
controls	boolean	true	Previous and next buttons, and the counter.
curve	Curve	expo out	How each slice moves. Any curve from the Animation Lab.
duration	number	750	Milliseconds each slice takes, for curves that are not springs.

Accessibility

The gallery is a focusable group with the carousel role description. Each new image is announced by its alt text and place.
Slices are decoration; only the image's alt text is read.
Playing on its own stops while the pointer or focus is on the gallery, and while a preview is paused.
With reduced motion the next image fades in whole.