---
title: "Modern Dot Grid — Free Framer component · Best of Framer"
description: "Free Framer component · by Kristaps Reinfelds · Sections. InteractiveDotGrid Feature Overview Dot Size – Adjust the size of each dot to create either a subtle texture or a bold, stylized pattern."
canonical: "https://framer.elliotli.dev/component/interactive-dot-gird"
---

[Home](/)/[Components](/components)/[Sections](/components/category/sections)/Modern Dot Grid

# Modern Dot Grid

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

![Modern Dot Grid preview image 1](https://framer.elliotli.dev/og/component/interactive-dot-gird/38bc9f7825760855/1600x1200.jpg)

## Summary

InteractiveDotGrid Feature Overview Dot Size – Adjust the size of each dot to create either a subtle texture or a bold, stylized pattern.

## Description

**InteractiveDotGrid Feature Overview**

-   **Dot Size** – Adjust the size of each dot to create either a subtle texture or a bold, stylized pattern.
    
-   **Dot Spacing** – Control the distance between dots to make the grid tighter or more open.
    
-   **Dot Color** – Customize the color of the dots to match your design or brand palette.
    
-   **Background** – Set the background color for the grid, ensuring the right contrast and overall look.
    
-   **Distortion Radius** – Defines how far the interaction effect reaches when the cursor moves nearby.
    
-   **Distortion Strength** – Controls how strongly the dots react or distort around the cursor.
    
-   **Animation Speed** – Adjusts how fast the distortion and movement animations play.
    
-   **Show Mouse Cursor** – Toggle the cursor visibility for a cleaner, more minimal interactive effect.
    

Perfect as an interactive background element for websites, hero sections, or modern UI builds.

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

-   All · #2930

## Details

- **Author**: Kristaps Reinfelds
- **Published**: 2025-11-24
- **Updated**: 2025-12-02
- **Added**: 2025-11-20
- **Categories**: Sections

## More like this

-   [Sale Bar](/component/sale-bar) — Brandon Grimes · $12 — Auto-start Black Friday promo bar
-   [Show and Tell](/component/show-and-tell) — Majed Monem · $9 — Feature tabs that play themselves
-   [Infinite Picker Whee](/component/infinite-picker-whee) — Karim Saif · Free — Rotating 3D text selector
-   [Resource Preview Dec](/component/resource-preview-dec) — felix strobel · Free — Editorial guides with folding cove