---
title: "Dot Field Background — Free Framer component · Best of Framer"
description: "Free Framer component · by Rajat Hooda · Backgrounds. Dot Field Background is a lightweight, responsive animated background that renders a field of dots with proximity links."
canonical: "https://framer.elliotli.dev/component/dot-field-background"
---

[Home](/)/[Components](/components)/[Backgrounds](/components/category/backgrounds)/Dot Field Background

# Dot Field Background

[View on Framer](https://framer.com/marketplace/components/dot-field-background/?via=elliot-li)

![Dot Field Background preview image 1](https://framer.elliotli.dev/og/component/dot-field-background/6e6630f734a3ca36/1600x1200.jpg)

## 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**

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 note**Higher Density and Link Distance increase work per frame. For very large sections, reduce Density slightly.

## Rank history [How rankings work →](/terms#rankings)

-   All · #3155

## Details

- **Author**: Rajat Hooda
- **Published**: 2026-01-12
- **Updated**: 2026-01-12
- **Added**: 2025-12-25
- **Categories**: Backgrounds

## More like this

-   [Pixel Flicker](/component/pixel-flicker) — Design Foundry · $10 — premium animated pixel background
-   [Fractal Glass Wave](/component/fractal-glass-wave) — Hienn Ng · $3 — Dynamic Fractal Glass Background
-   [Particle Flow Pro](/component/particle-flow-pro) — Interface Studio · $10 — Bring Your Background to Life
-   [Silk Gradient](/component/silk-gradient) — Kaisa A · Free — Silk Gradient Background