Dot Field Background
Animated dot-and-link background with optional cursor repel/attract. Responsive, lightweight Canvas 2D, and click-through by default (Global tracking).
Make it with Workshop
Build your own component with AI
About this Component
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 noteHigher Density and Link Distance increase work per frame. For very large sections, reduce Density slightly.
