---
title: "Wavy Grid — Framer component · Best of Framer"
description: "$12.00 · Framer component · by Shivani Das · Backgrounds. Wavy Grid Hero visualizer."
canonical: "https://framer.elliotli.dev/component/wavy-grid"
---

[Home](/)/[Components](/components)/[Backgrounds](/components/category/backgrounds)/Wavy Grid

# Wavy Grid

An interactive grid shader

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

![Wavy Grid preview image 1](https://framer.elliotli.dev/og/component/wavy-grid/ba0b98efa182e8ab/1600x963.jpg)

## Summary

Wavy Grid Hero visualizer.

## Description

## **Wavy Grid Hero**

Create futuristic, high-performance, and immersive backdrops with the **Wavy Grid Hero** visualizer. Built in raw, optimized WebGL2, this component renders an organic, glowing cybernetic grid that flows smoothly in real time and bends dynamically under the cursor.

## **Key Features**

-   🌊 **Dynamic Wave Terrain:** Three distinct layers of sinusoidal waves (primary, secondary, and tertiary) combine to generate complex, flowing three-dimensional grid motions.
    
-   🖱 **Fluid Cursor Interaction:** Mesh vertices react dynamically to your pointer, warping lines as you move. Supports standard linear smoothing or customizable spring physics.
    
-   💡 **Glowing Elevation Gradient:** Grid lines shift color dynamically between customizable start and end values based on height, creating a vibrant elevation-glow effect.
    
-   🌀 **Circular Vignette Fade:** Smoothly blends the edges of the grid into your background using customizable inner and outer fade bounds.
    

## **Controls & Customization**

-   **Line Start / End:** Define the color spectrum of the grid lines as they elevate.
    
-   **Ambient Color & Intensity:** Customize the background tint color behind the grid lines.
    
-   **Grid Density:** Adjust the spacing and count of horizontal/vertical lines.
    
-   **Line Thickness & Sharpness:** Control the thickness of the grid lines and the intensity of their neon glow.
    
-   **Wave Parameters:** Independently tune frequency and amplitude for all three wave layers.
    
-   **Mouse Strength & Physics:** Toggle mouse interaction, adjust cursor influence bounds, and fine-tune spring stiffness or damping settings.
    
-   **Circular Fade:** Control vignette inner/outer radius boundaries to control how the grid culls near edges.
    

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

-   All · #8684

## Details

- **Author**: Shivani Das
- **Price**: $12.00
- **Published**: 2026-07-19
- **Updated**: 2026-07-19
- **Added**: 2026-07-19
- **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