Dot Field Grid

A background component built for Framer. Live preview below — interact with it directly before you buy.

Buy this component — $8 Preview Get All-Access instead

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. Includes two components: DotField — production-ready, clean canvas for your pages, and DotFieldDemo — live control panel for presentations and client demos.

Features

→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
→Optional gradient mask fades the grid edges for a seamless blend with your page
→Full touch support — works on phones and tablets

Use Cases

→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

Best value

Get every component with All-Access — $129

Dot Field Grid and all 122 others, current and future.

Get All-Access

More Background

Soft Background

Free

Compare Slider Pro X

Aura Cursor