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.