Shuffling Squares

Interactive image grid.

* 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. * 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.

Interactive image grid.