Skip to content

component

Bento Shuffle Grid

By Saqlain Nasir

Details

Summary

Live Preview Grab more componnets for free Bento Shuffle Grid is a 5-tile interactive layout designed to showcase projects, products, services, or visual content.

Description

Live Preview Grab more componnets for free 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.

Introduction

Responsive bento grid with shuffle

Rank history

Daily rank per list, from the first snapshot — lower is better.

15011001150116859/119/129/139/149/15
  • All · #1161