component
Dot Field Background
By Rajat Hooda
Details
- Rajat HoodaAuthor
- componentType
- 2026-01-12Published
- 2026-01-12Updated
- 2025-12-25Added
- BackgroundsCategories
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.
- All · #2900