Bento Shuffle Grid is a 5-tile interactive layout designed to showcase projects, products, services, or visual content. One large hero tile sits alongside four supporting cards. Click any supporting card to smoothly swap it with the hero, bringing that content into focus without moving the rest of the grid.
Each item supports its own image, label, heading, description, and optional CTA, while animated text reveals add a polished transition whenever the active content changes.
Features
Interactive 5-tile bento layout
Click-to-swap hero card
Smooth card transitions
Animated text reveals
Optional autoplay
Custom images and content
Optional CTA links
Responsive mobile layout
Fully customizable from Framer
Fully Customizable
Adjust the layout, content, typography, colors, spacing, animation speed, autoplay, and more directly through Framer's property panel.
Customize
Images, labels, headings & descriptions
CTA text and links
Grid scale, gap, radius & padding
Animation speed
Autoplay & interval
Heading, label, description & CTA fonts
Text, background & overlay colors
How It Works
The first card acts as the hero. Clicking any supporting card swaps it into the hero position with a smooth transition. You can also enable autoplay to cycle through the cards automatically.
On mobile, the layout automatically changes into a stacked responsive arrangement.