About AnimatedGridX

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