---
title: "GridField Custom — Framer component · Best of Framer"
description: "$14.00 · Framer component · by AltKey · Backgrounds. Interactive Grid Background"
canonical: "https://framer.elliotli.dev/component/gridfield-custom"
---

[Home](/)/[Components](/components)/[Backgrounds](/components/category/backgrounds)/GridField Custom

# GridField Custom

Interactive Grid Background

[View on Framer](https://framer.com/marketplace/components/gridfield-custom/?via=elliot-li)

![GridField Custom preview image 1](https://framer.elliotli.dev/og/component/gridfield-custom/daa616039fb58a7e/1600x1200.jpg)

## Summary

Interactive Grid Background

## Description

### 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.

![](https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/description-image-3wacd0z5-1p9zmxIxlL8P44Q6nq3qVVyOPA14zG)

### Fully customizable

![](https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/description-image-3wacd0z5-mkW9C5xgHL64xiCKw7bqT7CCcJacXx)

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.

## Rank history [How rankings work →](/terms#rankings)

-   All · #1932

## Details

- **Author**: AltKey
- **Price**: $14.00
- **Published**: 2026-06-05
- **Updated**: 2026-09-07
- **Added**: 2026-05-27
- **Categories**: Backgrounds

## More like this

-   [Pixel Flicker](/component/pixel-flicker) — Design Foundry · $10 — premium animated pixel background
-   [Fractal Glass Wave](/component/fractal-glass-wave) — Hienn Ng · $3 — Dynamic Fractal Glass Background
-   [Particle Flow Pro](/component/particle-flow-pro) — Interface Studio · $10 — Bring Your Background to Life
-   [Silk Gradient](/component/silk-gradient) — Kaisa A · Free — Silk Gradient Background