---
title: "Scroll Dot Gradient — Framer component · Best of Framer"
description: "$7.00 · Framer component · by Sirrah Space · Backgrounds. Create a breathtaking, cinematic journey through your website with the Scroll Dot Gradient background."
canonical: "https://framer.elliotli.dev/component/scroll-dot-gradient"
---

[Home](/)/[Components](/components)/[Backgrounds](/components/category/backgrounds)/Scroll Dot Gradient

# Scroll Dot Gradient

Scroll-driven animated dot grid.

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

![Scroll Dot Gradient preview image 1](https://framer.elliotli.dev/og/component/scroll-dot-gradient/4caf90bc451daa48/1600x1200.jpg)

## Summary

Create a breathtaking, cinematic journey through your website with the Scroll Dot Gradient background.

## Description

Create a breathtaking, cinematic journey through your website with the **Scroll Dot Gradient** background. This high-performance **WebGL component** renders a precise grid of dots that organically scale and shift in color as invisible floating blobs drift over them.

What sets this component apart is its **Scroll-Driven Palettes**. You can define an array of distinct color schemes, and as the user scrolls down your page, the entire aesthetic—the background, the base dots, and the glowing blobs—smoothly interpolates to the next palette. Built with raw GLSL shaders, it guarantees 60fps performance and includes a smart visibility sensor that pauses the GPU load when the component scrolls out of view, ensuring your site remains lightning fast.

**Functions (Key Features):**

-   📜 **Scroll-Linked Colors:** Seamlessly crossfades between multiple custom color palettes based on the user's scroll depth.
    
-   🌊 **Dynamic Dot Interaction:** Dots organically grow and blend colors as invisible floating blobs pass over them.
    
-   ⚡ **WebGL Efficiency:** Raw GLSL shader rendering ensures perfectly smooth, high-fidelity animations.
    
-   🛑 **Smart Visibility Sensor:** Automatically pauses rendering when off-screen to save CPU/GPU and battery life.
    
-   📱 **Responsive Auto-Scaling:** Intelligently adjusts dot sizing and blob radiuses to look perfect on mobile devices.
    

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

-   All · #5136

## Details

- **Author**: Sirrah Space
- **Price**: $7.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