---
title: "Interactive Pattern — Free Framer component · Best of Framer"
description: "Free Framer component · by Michael Slotta · Backgrounds · ranked #54 among Framer components. Interactive Grid Background"
canonical: "https://framer.elliotli.dev/component/interactive-pattern"
---

[Home](/)/[Components](/components)/[Backgrounds](/components/category/backgrounds)/Interactive Pattern

# Interactive Pattern

Interactive Grid Background

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

![Interactive Pattern preview image 1](https://framer.elliotli.dev/og/component/interactive-pattern/1db53d270f97a503/1600x1200.jpg)

## Summary

Interactive Grid Background

## Description

Transform your Framer projects with a polished, interactive grid background designed to elevate modern interfaces. This component reacts smoothly to cursor movement, creating subtle proximity-based animations that feel responsive, elegant, and professional.

Choose from **five distinct grid styles**—Dots + Lines, Lines Only, Dots Only, Plus Symbols, or Plus + Lines—giving you full creative flexibility to match any visual identity. Grid elements gently fade in as the cursor approaches, adding depth and motion without overwhelming your content.

Every detail is fully customizable. Adjust grid spacing, element size, thickness, colors, opacity levels, proximity radius, hover darkening, and fade delay to create exactly the interaction you want. You can also toggle the background on or off, making it easy to layer the grid behind text, images, or UI elements.

Built with performance in mind, the component delivers smooth animations even when other layers sit above it. It’s fully responsive and adapts automatically to any container size, supporting both fixed and flexible layouts.

Perfect for hero sections, landing pages, portfolios, presentations, and modern web applications—this interactive grid helps your designs feel dynamic, refined, and alive.\*\*\* Feedback -> [https://docs.google.com/forms/d/e/1FAIpQLSexopfTprHsvLOJI0daTpvbRVr-KdTrfjEvCXEfr9nDh8ZwcQ/viewform?usp=header](https://docs.google.com/forms/d/e/1FAIpQLSexopfTprHsvLOJI0daTpvbRVr-KdTrfjEvCXEfr9nDh8ZwcQ/viewform?usp=header) \*\*\*

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

-   All · #54

## Details

- **Author**: Michael Slotta
- **Published**: 2026-01-22
- **Updated**: 2026-01-22
- **Added**: 2026-01-06
- **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