GridField Custom

Interactive Grid Background

How it works Move your cursor across the grid. Each cell calculates its distance to the pointer and reacts: cells close to the cursor glow in your accent color, scale up, and rotate. The effect fades smoothly with distance, creating a ripple of light across the field. 4 shapes, infinite combos Square, Circle, Diamond, or Cross. Switch between them with one click. Each shape reacts differently to rotation and scale, giving a distinct feel per mode. Fully customizable All settings exposed as property controls in Framer: Cell size (8–80px) Gap between cells (0–20px) Cursor influence radius (40–500px) Rotation intensity (0–180°) Scale on hover (1× to 4×) Glow intensity Base opacity at rest Accent color Background color Layer content on top GridField accepts children. Drop text, images, or any Framer element on top of the grid. The interactive background stays behind your content. One component, plug and play No setup, no dependencies, no code to write. Drag it onto your canvas, set it to Fill, choose your accent color. Done.

Interactive Grid Background