---
title: "Dot Field Grid — Framer component · Best of Framer"
description: "$5.00 · Framer component · by Ahmet Loca · Backgrounds. dot Field Grid DotField is a high-performance canvas-based background component for Framer."
canonical: "https://framer.elliotli.dev/component/dot-field-grid"
---

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

# Dot Field Grid

Dot Field Grid - Mouse Interaction

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

![Dot Field Grid preview image 1](https://framer.elliotli.dev/og/component/dot-field-grid/08ded2425841d633/1600x1200.jpg)

## Summary

dot Field Grid DotField is a high-performance canvas-based background component for Framer.

## Description

**MORE FRAMER COMPONENTS LIKE THIS**

**✦ Browse +38 FREE + 85 premium components:** [**https://frameze.com/components**](https://frameze.com/components)

**✦ Background Bundle:** [**https://frameze.com/components/category/background?ref=bundles**](https://frameze.com/components/category/background?ref=bundles)

## About dot Field Grid

DotField is a high-performance canvas-based background component for Framer. As the cursor moves, dots repel or attract toward it — creating a smooth, liquid-like motion effect that reacts in real time.

Designed to drop directly into any Framer project as a background layer, with zero configuration required. Every parameter is exposed via property controls so non-developers can customize it entirely from the Framer panel.

**Shapes:** Circle, Square, Triangle, Diamond, Cross, Star, Ring

**Interaction:** Repel or Attract mode — dots push away or pull toward the cursor

**Customization:** Dot color, background color, grid spacing, influence radius, push strength, easing speed, max dot size

**Visual:** Optional gradient mask fades the grid edges for a seamless blend with your page

**Mobile:** Full touch support — works on phones and tablets

**Best used for:**

-   Hero sections that need motion and depth without overwhelming the content
    
-   Portfolio backgrounds that show personality and interactivity
    
-   SaaS and tech landing pages where visual polish builds trust
    
-   Agency and studio websites looking for a signature aesthetic
    
-   Creative showcases, digital art projects, and experimental interfaces
    
-   Loading screens and transition backgrounds
    

**Includes two components:** DotField — production-ready, clean canvas for your pages DotFieldDemo — live control panel for presentations and client demos.

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

-   All · #7586

## Details

- **Author**: Ahmet Loca
- **Price**: $5.00
- **Published**: 2026-05-29
- **Updated**: 2026-09-29
- **Added**: 2026-05-16
- **Categories**: Backgrounds

## More like this

-   [Live_Backgrounds.exe](/component/live-backgrounds-exe) — S̶̈́͂IX BILLIÖ̴́N HERSELF · $19 — Animated backgrounds, 19 presets
-   [Drumskin](/component/drumskin) — KOJA Studios · Free — Interactive dot grid background
-   [Eclipse Ring](/component/eclipse-ring) — Lunaut Studio · $9 — A total eclipse for your hero
-   [Pixel Flicker](/component/pixel-flicker) — Design Foundry · $10 — premium animated pixel background