Break free from static layouts. The Magnetic Grid Gallery is a physics-driven, highly interactive image showcase. As the user moves their cursor across the screen, the individual images intelligently pull toward the mouse, scale up, and snap into focus, while the surrounding items gently blur into the background to create a massive sense of depth.

✨ Key Highlights

• Magnetic Physics: Items calculate their distance to the cursor in real-time, pulling slightly off their grid axis to "reach" for the user.

• Depth of Field: As the hovered item comes into sharp focus and scales up, the items further away from the cursor fall into a cinematic, customizable blur.

• Zero-WebGL DOM Performance: Built entirely with heavily optimized React Refs and requestAnimationFrame, ensuring it runs buttery smooth without the heavy overhead of a WebGL canvas.

⚙️ Complete Design Control

• Grid Layout: Easily define the number of columns, rows, padding, and gap spacing directly from the Framer sidebar.

• Attraction Physics: Take absolute control over how far the items can move (Max Offset), how hard they pull (Attraction), and how much they grow (Scale Boost).

💡 Perfect For: Photography portfolios, design agency case study grids, and interactive team/about pages.