Bento Focus
Uilora Bento Focus — interactive bento grid with shared-element expand animations.
Props
| Property | Type | Default | Description |
|---|---|---|---|
| items | Array<{id: number, title: string, category: string, img: string}> | [{id: 1, title: 'Uilora Solitude', category: 'Uilora Landscape', img: '...'}, ...] | Array of gallery items with id, title, category label, and image URL. |
| backgroundColor | string | #0a0a0a | Background color (hex, rgb, or hsl). |
| heading | string | Uilora — Selected Works | Section heading displayed above the gallery grid. |
| subheading | string | A curated collection of space, texture, and light by Uilora. | Subtitle shown below the section heading. |
When to Use
Excellent for creative agencies, interactive showrooms, and Next.js applications that want a smooth 'Bento' aesthetic. Use this feature grid for an engaging experience where cards expand and contract with organic Framer Motion transitions.
Best Practices
Maintain consistent spacing within your design system by keeping the grid items centered. Follow React best practices by managed the layout-id for the 'Shared Element' transition. Optimize for performance by using efficient Tailwind col-spans.
Why This Component Matters
Bento-based animations communicate digital excellence, playfulness, and craft. This Uilora-ready template helps you build an interface that feels responsive and alive, adding a unique architectural signature to your brand interaction.
FAQ
QHow does the expand work?
The component uses Framer Motion's `layoutId` to animate the transition between the small grid card and the full-page expanded view seamlessly.
QAre colors dynamic?
While the background is typically neutral, each item's specific imagery and typography can be adjusted to fit your project's environmental theme.
QIs it mobile responsive?
Absolutely, the col-spans and expansion logic scale for mobile, ensuring the 'Focus' transition remains impactful on small screens.
Related Components
Editorial Layout
Asymmetric fashion-inspired bento grid with sharp edges and editorial styling, branded for Uilora.
Swiss Layout
Clean Swiss design bento grid with precise typography and minimal aesthetics, branded for Uilora.
Wabi Sabi Layout
Japanese-inspired bento grid with wabi-sabi aesthetics, imperfections, and Uilora branding.