Fluted Gallery
Photos behind reeded glass that clears where the pointer passes, for interiors, spas and boutiques.
Controls
<GalleryFluted />About
Built on Fluted Glass. In Standard's proposed curated Pro set.
Use it when
- Spaces and objects with texture: interiors, spas, boutiques.
Skip it when
- Photos must be seen clearly at once (menus, products with prices): 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
Griddefault
grid
Portrait tiles, three across on desktop.
Wide
wide
Landscape tiles, two across.
Accessibility and motion
- Keyboard
- Nothing to focus.
- Screen readers
- A heading and a list of figures with alt text and captions.
- Touch
- Touch clears the glass where touched.
- Reduced motion
- The glass is still.
Edge cases and limits
- Twelve tiles share one WebGL2 context.
Related
Before and after, compared by dragging a liquid seam across each photo, then the rest of the gallery.
Gallery block · WebGL2
A swipeable row that snaps one photo at a time, each turning in 3D as it leaves the centre.
Gallery block · Server
Gallery Grid
FreePhotos of the work or the place in an even grid or with the first image large, with captions.
Gallery block · Server