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.
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.
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
GridField accepts children. Drop text, images, or any Framer element on top of the grid. The interactive background stays behind your content.
No setup, no dependencies, no code to write. Drag it onto your canvas, set it to Fill, choose your accent color. Done.