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