MagneticGrid BG

MagneticGrid is a full-width, full-height background component that fills any Framer frame with a procedurally generated grid of dots. Every dot reacts to cursor proximity using real Framer Motion spring physics — scaling up, shifting color, and physically displacing toward or away from the cursor depending on your chosen mode.

Unlike similar dot backgrounds that only change opacity or color on hover, MagneticGrid moves each dot individually using per-dot spring animations with configurable stiffness and damping. The result is a background that feels genuinely physical and alive, not just decorative.

Two interaction modes

Switch between Repel and Attract from the property panel. In Repel mode, dots scatter away from the cursor — great for a forcefield or energy effect. In Attract mode, dots flow toward it — perfect for magnetic or gravitational aesthetics.

Fully customizable from the property panel — no code needed

• Dot color and active (hover proximity) color with smooth real-time interpolation

• Background fill color

• Dot size and grid spacing

• Influence radius, max displacement, spring stiffness, and spring damping

• Base dot opacity

• Mobile cutoff — automatically disables the effect below a screen width you set

Performance-first architecture

The grid is generated procedurally using a ResizeObserver, so it always fills its container regardless of frame size. A single requestAnimationFrame loop drives all dot motion. Dot count is automatically capped to keep performance smooth. The component renders a static, no-animation fallback on the Framer canvas and on mobile — so your editor stays fast and smaller devices are never taxed.

Where to use it

Hero sections, full-page backgrounds, SaaS landing pages, portfolio intros, AI product pages, agency homepages — anywhere you want motion that responds to the visitor without distracting from your content.

Drop it on your canvas, resize the frame, and customize from the right panel. No configuration files, no wrappers, no extra steps.

Key Features (bullet format for scannable listing)

• Spring-physics dot displacement — each dot moves individually, not just fades

• Repel and Attract mode toggle directly from the property panel

• Real-time color interpolation between base color and active color on proximity

• Dot size, spacing, influence radius, and displacement all fully adjustable

• Spring stiffness and damping controls for precise feel tuning

• Auto-scaling grid via ResizeObserver — fills any frame size

• Automatic dot count cap for consistent performance

• Static canvas fallback — no lag in the Framer editor

• Auto-disables on mobile below a configurable screen width cutoff

• Zero dependencies beyond Framer Motion, which is already built into Framer