---
title: "Shape Grid — Framer component · Best of Framer"
description: "$15.00 · Framer component · by Jeeth · Effects. Description Shape Grid is a powerful generative grid component that creates beautiful, animated shape patterns with advanced wave control."
canonical: "https://framer.elliotli.dev/component/shape-grid"
---

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

# Shape Grid

Powerful Grid Pattern Generator

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

![Shape Grid preview image 1](https://framer.elliotli.dev/og/component/shape-grid/0d6e024babf19539/1600x1067.jpg)

## Summary

Description Shape Grid is a powerful generative grid component that creates beautiful, animated shape patterns with advanced wave control.

## Description

### Description

Shape Grid is a powerful generative grid component that creates beautiful, animated shape patterns with advanced wave control.

You can generate circular ripples, linear waves, spirals, diagonal flows, and more. All are fully controllable from the properties panel.

A unique feature links scale directly to opacity, so shapes naturally shrink as they fade, creating smooth, organic depth. Directional glow support adds an extra layer of polish.

Highly customizable yet performance-conscious, with a smart Canvas Preview mode that lets you design without lag.

### Features

-   Multiple wave types: Circular Ripple, Linear Horizontal/Vertical, Diagonal, Spiral, Random, and Uniform Pulse,
    
-   Unique **Opacity-Linked Scaling** - shapes shrink as they fade (fully controllable intensity),
    
-   Directional Glow system with color, blur, opacity, distance, and angle controls,
    
-   7 base shapes: Circle, Square, Triangle, Pentagon, Hexagon, Octagon + Custom Polygon,
    
-   Adjustable Aspect Ratio for stretched or compressed shapes,
    
-   Canvas Preview mode (strong frozen wave for designing + quieter mode for performance),
    
-   Full control over speed, amplitude, frequency, stagger, and intensity,
    
-   Up to 50×50 grid density.
    

### What’s it perfect for?

-   Hero section backgrounds,
    
-   Abstract decorative sections,
    
-   Loading and waiting states,
    
-   Portfolio and agency websites,
    
-   SaaS / tech product pages,
    
-   Any design that needs dynamic, generative energy.
    

### How to use it

1.  Drag **Shape Grid** onto your canvas
    
2.  Resize the component to your desired area
    
3.  Use the property controls to choose:
    
    -   Grid density,
        
    -   Wave Type and Origin,
        
    -   Shape style and Aspect Ratio,
        
    -   Animation intensities (Fade, Scale, Float, Rotate),
        
    -   Optional Glow effects,
        
4.  Toggle **Canvas Preview** on to see a strong frozen version of the wave while designing
    
5.  Preview the page to see the full continuous animation
    

All controls are live, changes appear instantly.

### What’s included

-   Fully customizable code component,
    
-   7 wave algorithms,
    
-   Opacity-linked scale system,
    
-   Performance-optimized for Framer & more.
    

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

-   All · #7171

## Details

- **Author**: Jeeth
- **Price**: $15.00
- **Published**: 2026-07-19
- **Updated**: 2026-11-04
- **Added**: 2026-07-19
- **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