---
title: "Infinite GridX — Framer component · Best of Framer"
description: "$10.00 · Framer component · by Hamim Reza · Backgrounds. Infinite scroll grid, mouse reveal"
canonical: "https://framer.elliotli.dev/component/infinite-gridx"
---

[Home](/)/[Components](/components)/[Backgrounds](/components/category/backgrounds)/Infinite GridX

# Infinite GridX

Infinite scroll grid, mouse reveal

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

![Infinite GridX preview image 1](https://framer.elliotli.dev/og/component/infinite-gridx/fb3b7166b4da6c26/1600x1200.jpg)

## Summary

Infinite scroll grid, mouse reveal

## Description

An infinite scrolling grid background with a mouse-follow spotlight that reveals a brighter grid layer beneath the cursor. Dual-layer grid system, 8-directional animation, three gradient blobs, and full opacity and speed controls. Built for hero sections, portfolio headers, dashboard backgrounds, and any landing page that needs an interactive animated background.

## Features

-   Dual-layer grid system — subtle base layer plus bright mouse reveal layer
    
-   Mouse-follow radial spotlight reveals high-opacity grid around cursor
    
-   Configurable reveal radius (100–800px)
    
-   8-directional animation — right, left, up, down and four diagonals
    
-   Independent X and Y speed controls (−5 to 5)
    
-   Seamless infinite loop via 40px modulo offset
    
-   Three gradient blob overlays with individual color controls
    
-   Toggle gradient blobs on or off
    
-   Background color and grid line color controls
    
-   Base layer and reveal layer opacity controls independently
    
-   SVG-based grid pattern for crisp rendering at any scale
    
-   useAnimationFrame for smooth 60fps animation
    
-   No dependencies
    

## Property Controls

**Visual**

-   Background — container background color
    
-   Grid Color — grid line color
    
-   Grid Opacity — base layer opacity (0–1)
    
-   Reveal Opacity — mouse reveal layer opacity (0–1)
    
-   Reveal Radius — spotlight circle size (100–800px)
    

**Animation**

-   Direction — 8-way directional control
    
-   Speed X — horizontal speed (−5 to 5)
    
-   Speed Y — vertical speed (−5 to 5)
    

**Gradients**

-   Show Gradients — toggle visibility
    
-   Gradient 1 — top right large blob color
    
-   Gradient 2 — top right small blob color
    
-   Gradient 3 — bottom left large blob color
    

**SEO Keywords**

framer infinite grid · framer grid background · framer mouse reveal · framer animated background · framer grid animation · framer interactive background · framer spotlight effect · framer cursor effect · framer grid component · framer background effect · framer hero background · framer animated grid · framer mouse interaction · framer code component · framer background animation

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

-   All · #1142

## Details

- **Author**: Hamim Reza
- **Price**: $10.00
- **Published**: 2026-05-05
- **Updated**: 2026-06-23
- **Added**: 2026-04-17
- **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