Spider Dot Grid brings your Framer pages to life with a fluid, physics-driven dot grid that reacts to the user's cursor in real time. Dots nearest the cursor grow large and connect with animated lines — then smoothly shrink back to a quiet background grid as the cursor moves away.
Spring physics, not just easing. The cursor tracking uses a real spring-damper model — the same physics Framer Motion uses — so the feel is genuinely natural. You can tune it from bouncy and snappy to silky-smooth with two controls: Smoothing and Easing type.
Always alive. When no cursor is present (or on mobile before a tap), the spider enters an idle orbit — gently looping around the canvas so the component is never static. On first tap or touch, it snaps back to life instantly.
Fully customisable via Framer controls. Every visual parameter is exposed: dot shape (circle or square), dot spacing, base size, spider scale, effect radius, line width, max connections, accent colour, dot colour, line colour, and grid spread — all update live in the Framer panel.
Mobile-ready out of the box. Device pixel ratio is capped at 2× to prevent the 9× pixel workload of 3× retina screens. Touch taps register immediately via pointer events. Per-frame allocations are eliminated using persistent reusable arrays, and colour parsing is cached so the hot draw loop does minimal work per frame.
Great for: hero sections, loading screens, data-driven landing pages, portfolio sites, SaaS marketing pages, and any project that needs an ambient interactive background with zero external dependencies.
TAGS: interactive background, dot grid, spider animation, canvas component, cursor interaction, spring physics, particle effect, hero section, animated background, mouse tracking, touch support, mobile ready, framer component, no code, landing page, SaaS, portfolio, web animation, ambient UI, network graph
Chaman Verma
