Shuffling Squares

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