Dot Field Background

Show Preview
Dot Field Background

About 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.