Expanding Gallery
Luxury testimonial gallery with expanding card animations.
Props
| Property | Type | Default | Description |
|---|---|---|---|
| items | Array<{id: string, title: string, img: string, quote: string}> | [{id: '1', title: 'Elegant Workflow', img: '...', quote: '...'}, ...] | Array of gallery items with id, title, image URL, and quote. |
| backgroundColor | string | #f5f5f4 | Background color (hex, rgb, or hsl). |
When to Use
Perfect for premium brands, creative agencies, and Uilora portfolio sites that want an editorial testimonial experience. The expanding interaction transforms a passive quote list into an immersive story.
Best Practices
Use high-resolution, high-contrast photography for each gallery item. Keep quotes concise (1–2 sentences) — the expansion animation is the storytelling mechanism, not the text length.
Why This Component Matters
Shared-element transitions create a seamless visual continuity that communicates design craftsmanship. When a testimonial expands smoothly from a thumbnail, it signals that the product itself has the same level of polish.
FAQ
QHow does the expansion work?
Each item uses Framer Motion's layoutId to share geometry between the thumbnail and the expanded state, creating a fluid morph without any position calculations.
QHow many items should I use?
3–6 items work best. Too few loses the gallery feel; too many makes the row feel cluttered before any interaction.
QIs it mobile responsive?
On small screens the items stack vertically and the expansion fills the screen width, maintaining the immersive feel.