Add a layer of motion to any Framer page. The Magnetic Dots Grid is a lightweight, canvas-rendered background that reacts to the cursor with subtle magnetic pull and a spring-driven settle. Minimal by design, fully customizable, and gracefully static on touch.
Magnetic cursor interaction. Dots near the cursor lean toward it on a smooth radial falloff, the closer they are, the more they pull.
Spring physics, not lerp. Motion lingers after the cursor leaves. Dots overshoot, wave back, and settle naturally over ~2 seconds.
Works behind anything. Cursor tracking runs on the window, so the grid stays responsive even when text, cards, or navigation sit on top.
Edge fade mask. A built-in radial mask softens the grid edges so it blends into the page instead of cutting off hard.
Canvas-rendered & idle-aware. One paint per frame. The animation loop pauses entirely when dots are at rest, zero CPU on a static page.
Touch-safe. On coarse pointers (phones, tablets), the grid renders once and stays static. No listeners, no animation, no battery drain.
Fully customizable. Color, size, spacing, effect radius, intensity, and edge fade, every key parameter is in the property panel.
DPR-aware. Sharp on Retina and standard displays. Auto-adjusts on container resize.
Page or section backgrounds
Hero textures behind headlines
Footer and CTA accents
Empty-state and 404 page illustrations
Modal and overlay backdrops
Built on a single HTML5 canvas with one paint per frame. Dots are tracked as plain objects with position and velocity, no DOM nodes per dot, no React re-renders during animation. The render loop pauses automatically when nothing is moving, so the component carries zero ongoing CPU cost on a static page. Tested smooth at 60fps with thousands of dots.
Works in every modern browser (Chrome, Safari, Firefox, Edge). Mobile-safe with automatic touch detection. No external dependencies and no Framer Motion runtime required.
Due to the digital nature of this component and its immediate delivery within Framer, all sales are final. We recommend exploring the live demo and technical documentation to ensure it fits your workflow before purchasing. For any integration assistance, our support team is ready to help.
By completing your purchase, you agree to these terms.
Ahmed Walid
