---
title: "DotGrid Component — Framer component · Best of Framer"
description: "$5.00 · Framer component · by NOMAN · Backgrounds. Dot grid background cursor component"
canonical: "https://framer.elliotli.dev/component/dotgrid-component"
---

[Home](/)/[Components](/components)/[Backgrounds](/components/category/backgrounds)/DotGrid Component

# DotGrid Component

Dot grid background cursor component

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

![DotGrid Component preview image 1](https://framer.elliotli.dev/og/component/dotgrid-component/5665d711b218efe4/1600x1200.jpg)

## Summary

Dot grid background cursor component

## Description

**Transform Ideas with Dot Grid**An interactive, responsive, and visually engaging background component built for Framer. Use it to add life, depth, and personality to hero sections, headers, or full-page layouts, while keeping your design clean and modern.Key Features & Capabilities-

-   **Dynamic Interaction**Dots respond to cursor movement: the closest dots zoom in and lighten, while others smoothly fall off in scale based on distance.
    
-   **Customizable Appearance**Configure dot size, gap, base color, highlight color, scale ranges, and influence radius to match your brand style.
    
-   **Smooth Animations**
    
    Transitions in scaling and coloring are subtle and fluid—no jarring jumps or snapping.
    
-   **Responsive & Adaptive**
    
    Automatically rebuilds the dot grid on container resize to maintain alignment and consistency across devices.
    
-   **Performance-aware Rendering**
    
    Uses canvas for rendering and minimal calculations per frame to maintain smooth frame rates.
    
-   **Content Overlay Support**
    
    Designed to allow layering of text, buttons, or other content over the dot grid without interference.
    
-   **Easy to Integrate**
    
    Drop-in component for Framer projects—just wrap it, configure props, and place your hero content inside.
    

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

-   All · #8525

## Details

- **Author**: NOMAN
- **Price**: $5.00
- **Published**: 2025-10-10
- **Updated**: 2026-01-23
- **Added**: 2025-10-04
- **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