Hero Expand
Click-to-expand hero gallery with fullscreen interactions.
Main Features of Hero Expand
How to Use Hero Expand in Next.js
Installation Guide for Hero Expand
Props
Customize the component with these props
| Property | Type | Default | Description |
|---|---|---|---|
items | Array<{id: string, title: string, col: string, img: string}> | [{id: '1', title: 'Cyber', col: 'col-span-2 row-span-2', img: '...'}, ...] | Array of items with id, title, grid span classes, and image URL (empty img for empty slots). |
backgroundColor | string | #18181b | #18181b Background color (hex, rgb, or hsl). |
emptySlotText | string | Empty | Text displayed in empty grid slots. |
fullScreenText | string | Full screen immersive view active. Click anywhere to return to the grid matrix. | Text displayed in fullscreen view. |
Related Components
Editorial Layout
Asymmetric fashion-inspired bento grid with sharp edges and editorial styling.
Swiss Layout
Clean Swiss design bento grid with precise typography and minimal aesthetics.
Neo-Brutal Layout
Bold neo-brutalist bento grid with chunky borders and vibrant colors.
When to Use
Best Practices
Why This Component Matters in Modern UI Development
Frequently Asked Questions
QIs the expansion 'Shared'?
Yes, the component uses Framer Motion's `layoutId` to animate the transition between the small grid module and the fullscreen immersive view seamlessly.
QCan I adjust the grid?
Absolutely, both the Tailwind col-spans and the primary background colors can be adjusted to create 'Industrial' or 'Cyber' expansion effects.
QHow does the 'Empty' state work?
The grid supports architectural 'Negative Space' modules (default text: Empty) to maintain visual balance and structural honesty within the technical matrix.