---
title: "MagneticGridGallery — Free Framer component · Best of Framer"
description: "Free Framer component · by Creative Apes · Galleries. Interactive high-fidelity physics grid."
canonical: "https://framer.elliotli.dev/component/magneticgridgallery"
---

[Home](/)/[Components](/components)/[Galleries](/components/category/galleries)/MagneticGridGallery

# MagneticGridGallery

Interactive high-fidelity physics grid.

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

![MagneticGridGallery preview image 1](https://framer.elliotli.dev/og/component/magneticgridgallery/e536f0c5cbe615c2/1600x1200.jpg)

## Summary

Interactive high-fidelity physics grid.

## Description

## Elevate Your Visual Storytelling

The Magnetic Grid Gallery isn't just a layout; it's an experience. Built for designers and developers who refuse to settle for static displays, this component brings premium, high-fidelity physics to the Framer canvas. By leveraging real-time cursor tracking and dynamic CSS transformations, it turns a standard image grid into a tactile installation that rewards user curiosity.

### High-Performance Motion Design

Efficiency is at the heart of this component. We utilize **RequestAnimationFrame (RAF)** and hardware-accelerated CSS properties to ensure that the magnetic attraction remains buttery smooth at 60FPS, even on high-refresh-rate monitors. The logic calculates proximity-based scales and blurs, creating a natural 'depth of field' effect that highlights what the user is looking at while subtly softening the surrounding content.

### Deep Customization & Control

Every brand has a different pulse. That’s why we’ve exposed the core physics engine through the Framer properties panel. You can adjust the **Attraction Strength** to make items feel light and airy or heavy and grounded. Define your layout with precision using customizable columns, rows, and padding, ensuring the gallery fits perfectly within your hero section or featured project list.

### Responsive & Production Ready

The component is built to be inherently responsive. The grid dynamically calculates item dimensions based on the available frame size, ensuring that your gallery looks stunning on everything from a 5K Studio Display to a mobile device. With built-in support for Framer’s Responsive Image type, your site stays fast without sacrificing visual quality.

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

-   All · #2304

## Details

- **Author**: Creative Apes
- **Published**: 2026-05-31
- **Updated**: 2026-04-16
- **Added**: 2026-04-06
- **Categories**: Galleries

## More like this

-   [Infinite Pan Canvas](/component/infinite-pan-canvas) — Aisol Studio · $15 — Endless image wall you can drag
-   [CMS Photo Pile](/component/cms-photo-pile) — Marso Angelov · $10 — Draggable Photo Gallery
-   [CMS Infinity Grid](/component/cms-infinity-grid) — 55N · Free — Boundless exploration.
-   [Endless CMS Reel](/component/endless-cms-reel) — Marso Angelov · $10 — Horizontal Momentum Gallery