Component
Magnetic Grid Component for Framer
This is a magnetic grid animation component for Framer. Drop it into your site, set your image and interaction mode, adjust the spacing and intensity in the properties panel, and watch the grid respond smoothly to your cursor.
Created by
About the resource
To use the Magnetic Grid component, drop it into your Framer project and upload the image you want displayed in each grid cell — this image will repeat across the grid. In the properties panel, you can adjust the mode to control how the grid items react to your mouse: choose from Repel (pushes items away), Magnet (pulls them toward the cursor), Look (rotates them to face the cursor), or Scale (makes them grow in size).
Use the Count settings to define how many grid items appear horizontally and vertically, and adjust Spacing to set the gaps between them in both directions. You can also use the Padding control to create space around the entire grid layout.
To fine-tune interactivity, adjust the Intensity to control how strongly each item reacts, and use the Trigger Area setting to decide how close the mouse needs to be for the effect to activate. Everything is fully customizable in the properties panel — no code required.
About the resource
To use the Magnetic Grid component, drop it into your Framer project and upload the image you want displayed in each grid cell — this image will repeat across the grid. In the properties panel, you can adjust the mode to control how the grid items react to your mouse: choose from Repel (pushes items away), Magnet (pulls them toward the cursor), Look (rotates them to face the cursor), or Scale (makes them grow in size).
Use the Count settings to define how many grid items appear horizontally and vertically, and adjust Spacing to set the gaps between them in both directions. You can also use the Padding control to create space around the entire grid layout.
To fine-tune interactivity, adjust the Intensity to control how strongly each item reacts, and use the Trigger Area setting to decide how close the mouse needs to be for the effect to activate. Everything is fully customizable in the properties panel — no code required.
About the resource
To use the Magnetic Grid component, drop it into your Framer project and upload the image you want displayed in each grid cell — this image will repeat across the grid. In the properties panel, you can adjust the mode to control how the grid items react to your mouse: choose from Repel (pushes items away), Magnet (pulls them toward the cursor), Look (rotates them to face the cursor), or Scale (makes them grow in size).
Use the Count settings to define how many grid items appear horizontally and vertically, and adjust Spacing to set the gaps between them in both directions. You can also use the Padding control to create space around the entire grid layout.
To fine-tune interactivity, adjust the Intensity to control how strongly each item reacts, and use the Trigger Area setting to decide how close the mouse needs to be for the effect to activate. Everything is fully customizable in the properties panel — no code required.
The magnetic grid component properties with four interaction modes.
The magnetic grid component properties with four interaction modes.
The magnetic grid component properties with four interaction modes.
