---
title: "Shuffling Squares — Free Framer component · Best of Framer"
description: "Free Framer component · by Jirei · Buttons. Screenshots, details, and remix links on Best of Framer."
canonical: "https://framer.elliotli.dev/component/shuffling-squares"
---

[Home](/)/[Components](/components)/[Buttons](/components/category/buttons)/Shuffling Squares

# Shuffling Squares

Interactive image grid.

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

![Shuffling Squares preview image 1](https://framer.elliotli.dev/og/component/shuffling-squares/95bbe2ff144dc21b/1600x1200.jpg)

## Summary

Interactive image grid.

## Description

**\### Key Features**

\*   **Dynamic Scatter Animation:** As you scroll down your page, the image squares fly in from the sides and below, seamlessly snapping together into a perfect grid using smooth spring physics.

\*   **Magnetic Hover Effects:** Hovering over the grid brings it to life. The highlighted section gently pops out, while the neighboring squares physically push away and glaze over with a beautiful frosted glass effect.

\*   **Smart Hover Brush:** The component automatically adapts to your grid complexity. Small grids highlight individual squares, while massive grids dynamically highlight entire clusters, ensuring the interaction always feels perfect.

\*   **SEO & Performance Optimized:** Under the hood, your image remains 100% crawlable by search engines (via visually hidden tags) and implements an advanced static fallback for the Framer canvas and Server-Side Rendering (SSR), ensuring your site stays blazing fast.

**\### Customization Options**

\*   **Image:** Upload any image or pull directly from your CMS.

\*   **Grid Size (2-20):** Choose anything from a subtle 4-piece split to a complex 400-piece mosaic.

\*   **Gap & Spacing:** Dial in exactly how much space you want between the slices.

\*   **Borders:** Add and style borders around the grid cells with custom width, color, and border radius.

\*   **Independent Animations:** Full control to independently disable the initial appear scatter animation or the hover interaction.

\*   **Image Fit:** Switch between _Cover_, _Contain_, or _Fill_ depending on your layout constraints.

\*   **Entry Delay:** Control exactly how long the component waits to assemble once it scrolls into view, perfect for staggering multiple animations on a page.

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

-   All · #7414

## Details

- **Author**: Jirei
- **Published**: 2026-05-05
- **Updated**: 2026-07-30
- **Added**: 2026-04-19
- **Categories**: Buttons

## More like this

-   [Liquid Blob Button](/component/liquid-blob-button) — Oddframe · Free — Interactive Liquid Blob CTA Button
-   [Pixel Face Toggle](/component/pixel-face-toggle) — Zac Nielson · $9 — Dark mode switch with a pixel face
-   [Liquid Hover Media](/component/liquid-hover-media) — Bardia Madani · $5 — Fluid media distortion on hover
-   [Eye Glow Button](/component/eye-glow-button) — Frame Native · Free — Cursor-following eyes, soft glow