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.
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
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 — grid cell color
Background Color — container background
Content
Children — add any Framer layer as content slot
CSS Grid for layout with auto-calculated rows and columns
CSS animations for GPU-accelerated cell transitions
Spacing distribution algorithm fills container with no edge gaps
RequestAnimationFrame for smooth mouse glow tracking
CSS custom properties for mouse position on glow effect
ResizeObserver recalculates grid on container resize
Static renderer detection disables animations on export
startTransition for React 18 performance
24px cell size · Pulse animation · Random seed 0
Mouse glow enabled · Min opacity 0.1 · Max opacity 0.8
Vignette enabled
Hero sections · Feature showcases · Landing page backgrounds · Loading screens · SaaS homepages · Tech company sites · Interactive backgrounds · Dashboard headers · Coming soon pages
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
Hamim Reza
