Gallery 137 - Overlap Spotlight Carousel

Pro

A looping row of overlapping framed product photos where the centre frame widens, re-crops its photo and opens a one-line caption strip while its neighbours tuck back underneath, with drag, wheel, keys, arrows and autoplay.

Shadcn Gallery 137 block

Component data

ID
gallery137
Access
pro
Created
Nov 4, 2026
Type
block
Libraries
Radix UI, Base UI, React Aria

Gallery 137 block design & features

Gallery137 is a spotlight carousel built with shadcn/ui and motion. A centred heading and one short line sit above a row of narrow portrait frames that overlap like cards fanned on a table, each one partly covered by the neighbour closer to the middle. The frame in the centre sits on top, grows wider and lets its photo settle from a slight zoom into a landscape crop, and a thin strip opens along its bottom edge with the piece's name and material. Two round arrow buttons sit underneath.

Everything moves from one continuous position, so while you drag the frames slide, widen and narrow together and the caption fades in only as a frame reaches the middle. Releasing a drag carries on with a little inertia and snaps to the nearest frame. A wheel or trackpad gesture moves one step, the arrow keys, Home and End work when the row has focus, and clicking a side frame brings it to the centre. The row loops without an end and advances on its own every few seconds, pausing while the pointer is over it or it has focus. With reduced motion it jumps straight to each frame and autoplay is off.

It suits product studios, hardware makers and design portfolios that want to show a set of objects with a name and one detail each. Every piece needs a photo, a short title and a note, with an optional object position to keep the subject framed in the narrow crop.