# AnimatedGridPattern

Source: https://lumeo.nativ.sh/components/animated-grid-pattern

# AnimatedGridPattern

SVG grid where individual cells fade in and out at random with stagger. Adds subtle ambient motion to section backgrounds.

## When to Use

-   Feature section backgrounds on dark or light themes.
-   Empty state illustrations needing subtle life.
-   Hero backgrounds when Aurora or RetroGrid feel too heavy.

Preview Code

Default Grid

## Animated Grid

Copy Code

Preview Code

Small Cells

Copy Code

## API Reference

### AnimatedGridPattern

Property

Type

Default

Description

CellSize

int

40

Grid cell size in pixels.

MaxLit

int

10

Maximum number of simultaneously illuminated cells.

Cols

int

20

Approximate number of columns.

Rows

int

12

Approximate number of rows.

## Related Components

-   [RetroGrid](/components/retro-grid) — Perspective grid floor with scroll animation.
-   [AuroraBackground](/components/aurora-background) — Multi-layer gradient aurora effect.