Infinite GridX

Infinite scroll grid, mouse reveal

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. Features 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 Property Controls 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 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

Infinite scroll grid, mouse reveal