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