Studio
Editorial photographer studio gallery with click-to-reveal profile panel, central image, and vertical thumbnail strip.
Props
| Property | Type | Default | Description |
|---|---|---|---|
| items | Array<{image: string, name: string, firstName?: string, lastName?: string, location?: string, description?: string}> | [{image: '...', name: 'MERILLE RAAGAS', firstName: 'MERILLE', lastName: 'RAAGAS', location: 'Australia', description: '...'}, ...] | Array of studio items — each represents a subject with their image and profile details. |
| brandName | string | FELIX MELCHNER | Studio or photographer brand name in the top bar. |
| backgroundColor | string | #e4e4e7 | Outer background color (hex, rgb, or hsl). |
| cardBackground | string | #ffffff | Inner card background color (hex, rgb, or hsl). |
| textColor | string | #18181b | Primary text color (hex, rgb, or hsl). |
| accentColor | string | #18181b | Accent color for selected thumbnail outline and brand dot. |
When to Use
Ideal for photographer portfolios, model agencies, and creative studios that want a sharp editorial 'Studio' aesthetic. The click-based navigation between subjects makes it perfect for showcasing a curated roster.
Best Practices
Use portrait-oriented images for best visual impact in the center panel. Keep descriptions to 2–3 sentences for readability. The `firstName`/`lastName` split creates the bold stacked-name effect — provide both for best results.
Why This Component Matters
The studio layout communicates authority and curation — it positions the brand as the curator, not just a container. The thumbnail strip creates an implicit sense of depth and roster, suggesting quality through quantity while keeping focus on a single subject at a time.
FAQ
QHow does the image transition work?
Clicking a thumbnail triggers AnimatePresence with a crossfade (opacity + subtle scale) on the main image, and a vertical slide on the profile text — all powered by Framer Motion.
QCan I add more than 6 items?
Yes — the thumbnail strip is scrollable, so you can add as many items as needed. The right panel will overflow-y: auto to accommodate the extra thumbnails.
QIs the layout responsive?
The layout is optimized for medium to large screens. For mobile, consider rendering only the center image and a horizontal thumbnail scroll by conditionally applying Tailwind classes at the sm breakpoint.