---
title: "Animated Dot Grid — Framer component · Best of Framer"
description: "$5.00 · Framer component · by Sirrah Space · Backgrounds. Elevate your website's design with the Animated Dot Grid background."
canonical: "https://framer.elliotli.dev/component/animated-dot-grid"
---

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

# Animated Dot Grid

Animated dot grid background.

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

![Animated Dot Grid preview image 1](https://framer.elliotli.dev/og/component/animated-dot-grid/75f9b6dd6943d83e/1600x1200.jpg)

## Summary

Elevate your website's design with the Animated Dot Grid background.

## Description

Elevate your website's design with the **Animated Dot Grid** background. This premium WebGL component creates a mesmerizing, interactive aesthetic by rendering a precise grid of dots that react to three floating, invisible color blobs. As the blobs drift across the canvas, the underlying dots smoothly scale up and transition into vibrant colors, creating a dynamic neon gradient effect.

Engineered for top-tier performance, it is built with raw GLSL shaders and includes a built-in Intersection Observer. This smart visibility sensor automatically pauses the animation when the component is scrolled out of view, saving your users' CPU, GPU, and battery life. Perfect for modern SaaS, Web3, and creative agency landing pages looking for a high-tech touch.

**Functions (Key Features):**

-   ⚡ **WebGL Performance:** Raw GLSL shader rendering ensures silky smooth 60fps animations without bloating your site.
    
-   🛑 **Smart Visibility Sensor:** Automatically pauses rendering when off-screen to conserve battery and system resources.
    
-   🌊 **Dynamic Dot Reaction:** Dots organically grow in size and blend into new colors as the invisible floating blobs pass over them.
    
-   📱 **Responsive Auto-Scaling:** Automatically adjusts dot size, spacing, and blob radius for perfect viewing on mobile and tablet devices.
    
-   🎨 **Full Color Control:** Granular control over the background, base dots, and the 3 distinct floating blob colors.
    

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

-   All · #4015

## Details

- **Author**: Sirrah Space
- **Price**: $5.00
- **Published**: 2026-04-28
- **Updated**: 2026-07-26
- **Added**: 2026-04-22
- **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