---
title: "Bento Shuffle Grid — Framer component · Best of Framer"
description: "$5.00 · Framer component · by Russet Supply · Sections. Live Preview Grab more componnets for free Bento Shuffle Grid is a 5-tile interactive layout designed to showcase projects,…"
canonical: "https://framer.elliotli.dev/component/bento-shuffle-grid"
---

[Home](/)/[Components](/components)/[Sections](/components/category/sections)/Bento Shuffle Grid

# Bento Shuffle Grid

Responsive bento grid with shuffle

[View on Framer](https://framer.com/marketplace/components/bento-shuffle-grid/?via=elliot-li)

![Bento Shuffle Grid preview image 1](https://framer.elliotli.dev/og/component/bento-shuffle-grid/9d7d53a0471884a9/1600x1200.jpg)

## 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](https://dotsgrid.framer.website/)

[Grab more componnets for free](https://www.framer.com/@design-by-saqlain/)

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.

## Rank history [How rankings work →](/terms#rankings)

-   All · #2352

## Details

- **Author**: Russet Supply
- **Price**: $5.00
- **Published**: 2026-09-10
- **Updated**: 2026-11-04
- **Added**: 2026-09-10
- **Categories**: Sections

## More like this

-   [Project Index](/component/project-index) — Bernardo Lickfold · Free — Editorial index: hover & scroll
-   [Face Parade](/component/face-parade) — RAjan · Free — Animated team profiles
-   [Staircase Cover Flow](/component/staircase-cover-flow) — Karim Saif · $7 — editorial-inspired image gallery
-   [In Their Words](/component/in-their-words) — Majed Monem · $9 — A wall of customer quotes