Fluid Layout
Fluid animated bento grid with smooth transitions and organic shapes.
Main Features of Fluid Layout
How to Use Fluid Layout in Next.js
Installation Guide for Fluid Layout
Props
Customize the component with these props
| Property | Type | Default | Description |
|---|---|---|---|
items | Array<{id: string, title: string, color: string, span: string}> | [{id: '1', title: 'Photography', color: 'bg-rose-500', span: 'col-span-1 row-span-1'}, ...] | Array of grid items with id, title, color (Tailwind class), and span (grid span classes). |
backgroundColor | string | bg-slate-50 | Background color (Tailwind class or hex). |
expandedDescription | function | (title: string) => `A deeper dive into the world of ${title.toLowerCase()}...` | Function that returns expanded description text based on item title. |
expandedButtonText | string | Explore Collection | Text for the expanded view button. |
Related Components
Editorial Layout
Asymmetric fashion-inspired bento grid with sharp edges and editorial styling.
View Component
Swiss Layout
Clean Swiss design bento grid with precise typography and minimal aesthetics.
View Component
Neo-Brutal Layout
Bold neo-brutalist bento grid with chunky borders and vibrant colors.
View Component
When to Use
Ideal for creative portfolios, interactive showrooms, and Next.js applications that want a smooth 'Fluid' aesthetic. Use this layout to create 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 in Modern UI Development
Fluid animations communicate digital excellence, playfulness, and digital craft. This production-ready UI template helpsคุณ build an interface that feels responsive and alive, adding a unique architectural signature to your brand interaction.
Frequently Asked Questions
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?
Yes, each item can have its own primary background color passed through the data array, allowing for a vibrant, diverse grid feel.
QIs it mobile responsive?
Absolutely, the col-spans and expansion logic scale for mobile, ensuring the 'Fluid' transition remains impactful on small screens.