Coverflow Gallery
A swipeable row that snaps one photo at a time, each turning in 3D as it leaves the centre.
Controls
<GalleryCoverflow />About
An original coverflow on scroll timelines, from the catalogue's gallery ideas.
Use it when
- Six or more photos worth browsing.
Skip it when
- Visitors must see every photo at once: use
gallery-grid.
Install
The demo above is live today. Installing Pro items opens with VibeBox Motion Pro; join the waitlist to hear first.
Code
The source is part of VibeBox Motion Pro.
Licensed per seat; it installs with the same shadcn command once Pro opens.
See Pro and join the waitlistContent
Typed slots from schema.ts. Facts (hours, prices, quotes, names) come only from the business; until then they render as fill-ins.
| Slot | Label | Type | Limit | Fact |
|---|---|---|---|---|
| eyebrow | Kicker | text | 32 chars | — |
| heading | Heading | text | 60 chars | — |
| lead | Intro | text | 160 chars | — |
| items | Images | list | up to 12 | — |
| items[].media | Image | image | — | — |
| items[].caption | Caption | text | 60 chars | Can be a fill-in |
Variants
Coverflowdefault
coverflow
Centred, snapping, turning photos.
Filmstrip
filmstrip
A flat row of tall photos aligned to the content edge.
Accessibility and motion
- Keyboard
- The row is focusable; arrow keys scroll it.
- Screen readers
- A labelled region with a list of figures.
- Touch
- Swipe; each photo snaps to centre.
- Reduced motion
- A flat snapping row.
Edge cases and limits
- Without scroll timelines the row is flat but still snaps.
Related
Gallery Grid
FreePhotos of the work or the place in an even grid or with the first image large, with captions.
Gallery block · Server
Gallery Masonry
FreeImages at their own proportions in balanced columns, so portraits and landscapes sit together.
Gallery block · Server
Before and after, compared by dragging a liquid seam across each photo, then the rest of the gallery.
Gallery block · WebGL2