---
title: "Animated Grid — Free Framer component · Best of Framer"
description: "Free Framer component · by Brice Deguigne · Effects. Animated Grid component generates a responsive grid of shapes or images that animate with noise-driven flow and smooth hover reactions."
canonical: "https://framer.elliotli.dev/component/animated-grid"
---

[Home](/)/[Components](/components)/[Effects](/components/category/effects)/Animated Grid

# Animated Grid

Living backgrounds, zero effort.

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

![Animated Grid preview image 1](https://framer.elliotli.dev/og/component/animated-grid/ba28665ce551194a/1600x1200.jpg)

## Summary

Animated Grid component generates a responsive grid of shapes or images that animate with noise-driven flow and smooth hover reactions.

## Description

## Animated Grid – Interactive, Customizable Backgrounds

The **Animated Grid** component generates a responsive grid of shapes or images that animate with noise-driven flow and smooth hover reactions. Whether you’re building a hero section, a dynamic background, a creative footer, or an interactive portfolio, Animated Grid adds a layer of depth and energy that feels modern and polished.

## Engaging Motion & Interaction

-   **Organic noise animation**: Add flowing, natural movement with fully adjustable amplitude, scale, and speed.
    
-   **Hover effects**: Shapes smoothly grow and react to cursor proximity with customizable boost, radius, and easing.
    
-   **Dynamic control**: Enable or disable noise for either a lively animated look or a clean, static grid.
    

## Full Customization Controls

Animated Grid includes property controls so you can easily match your design style:

-   **Grid layout**: Adjust cell size and base shape size for density and scale.
    
-   **Shapes or custom images**: Choose from preset shapes (circle, square, triangle, diamond) or upload your own.
    
-   **Colors & styling**: Define shape colors, opacity, and cursor visibility.
    
-   **Performance-friendly**: Preview toggle ensures smooth editing inside Framer while running full animation on live sites.
    

## Perfect For Modern Web Experiences

Use **Animated Grid** to:

-   Create subtle animated backgrounds for hero sections.
    
-   Add interactive texture to landing pages and SaaS websites.
    
-   Enhance portfolio showcases with reactive visuals.
    
-   Design creative footers with engaging motion.
    

![](https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/description-image-ts33drw7-EKdk89AIKOFKiqcU5qcquTn6S6VxHr)

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

-   All · #6212

## Details

- **Author**: Brice Deguigne
- **Published**: 2025-10-03
- **Updated**: 2026-03-09
- **Added**: 2025-09-24
- **Categories**: Effects

## More like this

-   [Particle Image](/component/particle-image) — Jamik · $12 — Logos and photos as 3D points
-   [Ascii Portrait](/component/ascii-portrait) — The Black Sheep · Free — Photos that dissolve into ASCII
-   [Sandfall](/component/sandfall) — Cyedi Creative Studio · $5 — Your headline, buried in coloured
-   [Still Water](/component/still-water) — DariStudio · $9 — Water ripples over any photo