Dot Field Grid

dot Field Grid DotField is a high-performance canvas-based background component for Framer.

MORE FRAMER COMPONENTS LIKE THIS ✦ Browse +38 FREE + 85 premium components: https://frameze.com/components ✦ Background Bundle: https://frameze.com/components/category/background?ref=bundles About dot Field Grid DotField is a high-performance canvas-based background component for Framer. As the cursor moves, dots repel or attract toward it — creating a smooth, liquid-like motion effect that reacts in real time. Designed to drop directly into any Framer project as a background layer, with zero configuration required. Every parameter is exposed via property controls so non-developers can customize it entirely from the Framer panel. Shapes: Circle, Square, Triangle, Diamond, Cross, Star, Ring Interaction: Repel or Attract mode — dots push away or pull toward the cursor Customization: Dot color, background color, grid spacing, influence radius, push strength, easing speed, max dot size Visual: Optional gradient mask fades the grid edges for a seamless blend with your page Mobile: Full touch support — works on phones and tablets Best used for: Hero sections that need motion and depth without overwhelming the content Portfolio backgrounds that show personality and interactivity SaaS and tech landing pages where visual polish builds trust Agency and studio websites looking for a signature aesthetic Creative showcases, digital art projects, and experimental interfaces Loading screens and transition backgrounds Includes two components: DotField — production-ready, clean canvas for your pages DotFieldDemo — live control panel for presentations and client demos.

Dot Field Grid - Mouse Interaction