---
title: "Magnet Grid — Free Framer component · Best of Framer"
description: "Free Framer component · by Muhmad Hmdo · Backgrounds. Dot grid that pulls toward your cursor."
canonical: "https://framer.elliotli.dev/component/magnet-grid"
---

[Home](/)/[Components](/components)/[Backgrounds](/components/category/backgrounds)/Magnet Grid

# Magnet Grid

Dot grid that pulls toward your cursor.

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

![Magnet Grid preview image 1](https://framer.elliotli.dev/og/component/magnet-grid/28f8ee5830b7bd3c/1600x1200.jpg)

## Summary

Dot grid that pulls toward your cursor.

## Description

Magnetic Grid is an interactive dot-grid background. Dots sit on a quiet lattice until your cursor enters - the nearest few then drift toward the pointer, leave a tapering trail, and snap back home when you move away. A dotted hairline traces each pulled dot back to its true position so the motion feels measured, not random.

**Features**

-   Configurable rectangular grid (default 6 x 6, scales up to 40 x 40 for hero backgrounds).
    
-   Tunable physics: stiffness, damping, magnet range, peak pull, and a displacement clamp keep the motion under control.
    
-   Tapering motion trails on the N closest dots, fading quickly when focus moves on.
    
-   Optional dotted connector from each pulled dot back to its home position - a small "you've been here" trace.
    
-   Custom cursor: outline ring + center pin replace the system cursor when Hide Cursor is on.
    
-   Marketplace-safe: static-render fallback (paints a still grid on canvas/export), viewport pause, tab-visibility pause, animation stops automatically once every dot has settled, no runtime CDN imports.
    

**What you can customise**

Colors are exposed flat at the top so you can bind each one to a Framer Color Style for instant theming:

-   **Background** - stage background.
    
-   **Dot** - fill of the active grid dots.
    
-   **Lattice** - fill of the faint home-position lattice underneath the active dots.
    
-   **Trail** - base color of the tapering trails (per-segment alpha is applied automatically).
    
-   **Link** - color of the dotted home-to-displaced connectors.
    
-   **Ring** - outline color of the cursor ring.
    
-   **Pin** - fill of the cursor pin dot.
    

Grouped controls:

-   **Grid** - columns, rows, edge margin, regular and nearest dot sizes, and lattice dot size.
    
-   **Magnet** - stiffness, damping, range, peak pull, displacement clamp, and the count of nearest dots that get trails and connectors.
    
-   **Trail** - show toggle, length, and opacity / width multipliers.
    
-   **Connector** - show toggle, line thickness, dash size, gap size, and opacity multiplier.
    
-   **Ring** - show toggle, diameter, stroke thickness, and fade duration.
    
-   **Pin** - show toggle and dot size.
    
-   **Hide Cursor** - hide the system cursor inside the stage for a fully immersive look.
    
-   **Max FPS** - frame-rate cap. Lower saves CPU on dense grids.
    

**How to use**

1.  Drop the component on the canvas. It appears at its default 400 x 400 with the source physics dialled in - resize freely from the corners and the grid auto-redistributes inside the margin.
    
2.  Move the cursor in. The five nearest dots drift toward the pointer, leave a tapering trail, and a dotted line marks each one's true home position.
    
3.  Tune the Magnet group to change the feel. Lower Stiffness gives a heavier swing; higher Damping settles faster; larger Range pulls more dots at once.
    
4.  Increase the Columns and Rows for denser fields (16 x 16 is a great hero background) or shrink them for chunkier focal blocks (3 x 3).
    
5.  Bind colors to Framer Color Styles to support light and dark theming out of the box.
    
6.  The cursor is hidden by default for a clean editorial look - the outline Ring and the small center Pin replace it. Toggle Hide Cursor off if you'd rather show the system cursor too.
    

**Tips**

-   **Hero background**: 16 x 16 grid, smaller dot sizes (1.5 / 2.0), Connector off, large Margin - calm under content.
    
-   **Snappy**: Stiffness 0.12, Damping 0.78, Pull 1.8 - feels electric.
    
-   **Ghostly**: Stiffness 0.05, Damping 0.88, Pull 1.0, Trail Length 60 - long fading echoes.
    
-   Set Magnet -> Nearest Count to 0 to disable trails and connectors entirely while keeping the magnet pull active.
    
-   To remove the ring or pin entirely, just toggle their Show off - the element stops rendering and is removed from the DOM.
    

Free email support: [framer@muhmad.me](mailto:framer@muhmad.me)

More Components: [sbarah.com](http://sbarah.com)

Thanks 🌵🎉

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

-   All · #589

## Details

- **Author**: Muhmad Hmdo
- **Published**: 2026-06-03
- **Updated**: 2026-05-30
- **Added**: 2026-05-16
- **Categories**: Backgrounds

## More like this

-   [Pixel Flicker](/component/pixel-flicker) — Design Foundry · $10 — premium animated pixel background
-   [Fractal Glass Wave](/component/fractal-glass-wave) — Hienn Ng · $3 — Dynamic Fractal Glass Background
-   [Particle Flow Pro](/component/particle-flow-pro) — Interface Studio · $10 — Bring Your Background to Life
-   [Silk Gradient](/component/silk-gradient) — Kaisa A · Free — Silk Gradient Background