---
title: "AnimatedGridX — Framer component · Best of Framer"
description: "$10.00 · Framer component · by Hamim Reza · Backgrounds. Animated grid background & hover"
canonical: "https://framer.elliotli.dev/component/animatedgridx"
---

[Home](/)/[Components](/components)/[Backgrounds](/components/category/backgrounds)/AnimatedGridX

# AnimatedGridX

Animated grid background & hover

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

![AnimatedGridX preview image 1](https://framer.elliotli.dev/og/component/animatedgridx/e2e959f266f4369f/1600x1200.jpg)

## Summary

Animated grid background & hover

## Description

An animated cell grid background with three animation types, a mouse-follow glow spotlight, and a content slot for layering any Framer element on top. Auto-calculates rows and columns from a single cell size value — no manual grid setup needed. Built for hero sections, feature showcases, and landing pages that need a modern interactive animated background.

## Features

-   Three animation types — pulse, wave and random
    
-   Pulse — cells ripple outward from center
    
-   Wave — cells animate in a diagonal wave pattern
    
-   Random — each cell animates at a random time for organic feel
    
-   Mouse-follow radial glow spotlight effect
    
-   Configurable glow color, size, blur and opacity
    
-   Auto-calculates grid from cell size — no manual row/column setup
    
-   Spacing distribution fills container with no edge gaps
    
-   Configurable min and max cell opacity during animation cycle
    
-   Optional vignette overlay darkens edges for center focus
    
-   Random seed for varied random animation patterns
    
-   Content slot — add any Framer layer on top of the grid
    
-   Automatically recalculates grid on container resize
    
-   Animations disabled in static rendering for performance
    
-   No dependencies
    

## Property Controls

**Grid**

-   Cell Size — size of each square cell in pixels
    
-   Animation Type — pulse, wave, random
    
-   Random Seed — change for different random patterns
    

**Opacity**

-   Min Opacity — minimum cell opacity during animation cycle
    
-   Max Opacity — maximum cell opacity during animation cycle
    

**Mouse Glow**

-   Enable Glow — toggle mouse follow spotlight
    
-   Glow Color · Glow Size · Glow Blur · Glow Opacity
    

**Overlay**

-   Vignette — toggle edge darkening overlay
    

**Colors**

-   Cell Color
    
-   Background Color
    

**SEO Keywords**

framer animated grid · framer grid background · framer background component · framer grid animation · framer hero background · framer mouse glow · framer interactive background · framer pulse animation · framer cell grid · framer glow background · framer animated background · framer grid effect · framer landing page background · framer code component · framer background animation

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

-   All · #5739

## Details

- **Author**: Hamim Reza
- **Price**: $10.00
- **Published**: 2026-04-13
- **Updated**: 2026-07-04
- **Added**: 2026-04-02
- **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