Dot Field Background

Dot Field Background is a lightweight, responsive animated background that renders a field of dots with proximity links. It supports drift/orbit motion and optional cursor interaction (repel/attract). Designed for hero sections and large backgrounds.

Key features

• Canvas 2D (no external dependencies)

• Responsive: fills its layer and adapts to resizing

• Modes: Drift / Orbit

• Interaction: Off / Repel / Attract

• Tracking: Off / Global (click-through) / Local (captures)

• Custom controls for density, speed, dot size, link distance, colors, and alpha

How to use

1. Drop the component into a Frame/Section and set Width/Height to Fill.

2. Place it behind content.

3. Keep Tracking = Global if you want it interactive without blocking clicks on buttons/links above it.

4. Use Local only when you want the background layer to capture pointer input.

Suggested defaults

• Mode: Drift

• Interaction: Repel

• Tracking: Global (click-through)

• Cursor Ease: 40

Performance noteHigher Density and Link Distance increase work per frame. For very large sections, reduce Density slightly.