Skip to content

component

Dot Field Background

By Rajat Hooda

Details

Summary

Dot Field Background is a lightweight, responsive animated background that renders a field of dots with proximity links.

Description

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 Drop the component into a Frame/Section and set Width/Height to Fill. Place it behind content. Keep Tracking = Global if you want it interactive without blocking clicks on buttons/links above it. 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 note Higher Density and Link Distance increase work per frame. For very large sections, reduce Density slightly.

Rank history

Daily rank per list, from the first snapshot — lower is better.

110012001300134398/148/228/309/79/15
  • All · #2900