---
title: "Contour Grid BG — Framer component · Best of Framer"
description: "$3.00 · Framer component · by Edi Priatama · Backgrounds. Contour Grid BG is a modern animated canvas component that generates a fluid, topographic-style grid with dynamic wave…"
canonical: "https://framer.elliotli.dev/component/contour-grid-bg"
---

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

# Contour Grid BG

Grid Dots/line Background Effect

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

![Contour Grid BG preview image 1](https://framer.elliotli.dev/og/component/contour-grid-bg/7e8542372c68ddc2/1600x1200.jpg)

## Summary

Contour Grid BG is a modern animated canvas component that generates a fluid, topographic-style grid with dynamic wave motion and interactive pulse effects.

## Description

Contour Grid BG is a modern animated canvas component that generates a fluid, topographic-style grid with dynamic wave motion and interactive pulse effects. Inspired by contour maps and terrain visualization, it creates a visually rich background using either dots or lines that move organically over time. Perfect for Hero sections, AI / SaaS landing page, and Futuristic UI backgrounds.

## Customize Options :

-   **Background Color** – Set the base canvas color
    
-   **Line / Dot Color** – Main visual color of the grid
    
-   **Grid Type** – Choose between Dots or Lines
    

-   **Density** – Controls spacing between grid elements
    
-   **Dot Size** _(dots mode only)_ – Adjust size of each particle
    
-   **Line Width** _(lines mode only)_ – Thickness of grid lines
    

-   **Wave Height** – Controls how strong the wave distortion is
    
-   **Speed** – Defines animation movement speed
    

-   **Pulse point** – Number of active pulse points
    
-   **Pulse Intensity** – Strength of ripple effect across the grid
    

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

-   All · #3281

## Details

- **Author**: Edi Priatama
- **Price**: $3.00
- **Published**: 2026-05-16
- **Updated**: 2026-11-01
- **Added**: 2026-05-04
- **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