#What is Product?

Dot Field Background is an animated background framer component that renders a dynamic field of dots connected by proximity lines. The dots move smoothly across the screen while forming links between nearby points, creating a futuristic network-style visual effect.

Built for websites created with Framer, this component is ideal for hero sections, tech landing pages, startup websites, and creative portfolios. Designers can control how the dots move, how they react to the cursor, and how dense the network appears, making it easy to create a visually engaging background without heavy animations.

#Features ⚡

• Animated Dot Network: Displays moving dots connected by proximity-based lines.

• Motion Modes: Choose between Drift or Orbit animation styles.

• Cursor Interaction: Enable repel or attract effects based on pointer movement.

• Responsive Canvas Rendering: Automatically adapts to container resizing.

• Custom Visual Controls: Adjust density, dot size, link distance, speed, colors, and opacity.

• Lightweight Performance: Built using Canvas 2D with no external dependencies.

#Included Components/Templates

The component provides multiple visual and interaction controls through Framer property settings.

• Dot Field Background Component: Core animated dot network background.

• Motion Mode Controls: Switch between Drift and Orbit movement styles.

• Interaction Settings: Enable Off, Repel, or Attract cursor effects.

• Tracking Modes: Choose Off, Global (click-through), or Local interaction capture.

• Density & Speed Controls: Adjust number of dots and animation speed.

• Visual Styling Settings: Customize dot color, size, link distance, and transparency.

#Pricing 💸

Dot Field Background follows a free component model.

• Free Download: Available at no cost in the Framer marketplace.

• Unlimited Usage: Use in personal or commercial projects.

• No Subscription Required: Install and use instantly.

#Integrations 🧰

Dot Field Background is commonly used in visually dynamic Framer layouts.

• Hero section animated backgrounds

• Tech startup landing pages

• SaaS product websites

• Creative portfolios

• Futuristic UI designs