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.
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
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
SVG pattern with 40×40px cells for crisp infinite scroll
useAnimationFrame and useMotionValue for animation without re-renders
useMotionTemplate creates dynamic radial gradient mask for mouse reveal
Modulo operation at 40px for seamless infinite loop
getBoundingClientRect for accurate cursor position tracking
WebKit mask fallback for broad browser support
Conditional gradient rendering for performance
White background · Light gray grid lines
Grid opacity 0.05 · Reveal opacity 0.4 · Reveal radius 300px
Direction down-right · Speed X 0.5 · Speed Y 0.5
Gradient blobs enabled — orange, dark, blue
Hero sections · Portfolio headers · Dashboard backgrounds · Product showcases · Landing page backgrounds · Loading states · Presentation slides · SaaS homepages
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
Hamim Reza
