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.
Ahmet Loca
