---
title: "Dots Grid Pattern — Framer component · Best of Framer"
description: "$5.00 · Framer component · by Kevin Hardmeier · Sections. DotGrid is a modern Framer component that creates an animated grid of dots which respond dynamically to user interaction.On hover,…"
canonical: "https://framer.elliotli.dev/component/dots-grid-pattern"
---

[Home](/)/[Components](/components)/[Sections](/components/category/sections)/Dots Grid Pattern

# Dots Grid Pattern

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

![Dots Grid Pattern preview image 1](https://framer.elliotli.dev/og/component/dots-grid-pattern/8aced34c4b3ed814/1600x1200.jpg)

## Summary

DotGrid is a modern Framer component that creates an animated grid of dots which respond dynamically to user interaction.On hover, dots scale smoothly and trigger wave-like…

## Description

DotGrid is a modern Framer component that creates an animated grid of dots which respond dynamically to user interaction.On hover, dots scale smoothly and trigger wave-like animations for a premium, interactive feel.

Perfect for SaaS websites, portfolio backgrounds, or modern landing pages, DotGrid instantly adds depth and motion to your design.

## Instructions

-   Paste the component into your project.
    
-   Customize dot color, size, and scale factor.
    
-   Adjust proximity range for hover interactions.
    
-   Fine-tune animation physics with stiffness and damping.
    
-   Control amplitude and speed for continuous wave motion.
    

## How It WorksDotGrid includes 8+ property controls:

-   **Dot Color / Size**: Adjust base visuals.
    
-   **Hover Scale**: Define how much dots enlarge on hover.
    
-   **Proximity Radius**: Set the interaction distance.
    
-   **Amplitude / Speed**: Control wave effect dynamics.
    
-   **Stiffness / Damping**: Physics-based controls for responsiveness and bounce.
    

## Main Features

-   Responsive interactive dot grid.
    
-   Smooth hover and wave animations.
    
-   Fully customizable via property controls.
    
-   Works as background, hero, or section filler.
    
-   Plug & play in any Framer project.
    

## Use Cases

-   SaaS and tech landing pages needing interactive visuals.
    
-   Portfolio sites showcasing modern motion design.
    
-   Hero sections with subtle interactive depth.
    
-   Background animations for contact or signup forms.
    
-   Editorial layouts with a dynamic twist.
    

Made with love by Le Lab Framer.

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

-   All · #5138

## Details

- **Author**: Kevin Hardmeier
- **Price**: $5.00
- **Published**: 2025-10-08
- **Updated**: 2025-10-08
- **Added**: 2025-10-02
- **Categories**: Sections

## More like this

-   [Project Index](/component/project-index) — Bernardo Lickfold · Free — Editorial index: hover & scroll
-   [Face Parade](/component/face-parade) — RAjan · Free — Animated team profiles
-   [Staircase Cover Flow](/component/staircase-cover-flow) — Karim Saif · $7 — editorial-inspired image gallery
-   [In Their Words](/component/in-their-words) — Majed Monem · $9 — A wall of customer quotes