Infinite GridX

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