Dot Field Background

Show Preview
Dot Field Background
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.

From Rajat Hooda

Rotating Text Badge

Related Components

Image Path Effect
Dot Grid Background
Light Bloom BG
silhouet animated BG