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
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.
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.
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.
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).
Bind colors to Framer Color Styles to support light and dark theming out of the box.
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
More Components: sbarah.com
Thanks 🌵🎉
