---
title: "Commit Grid — Free Framer component · Best of Framer"
description: "Free Framer component · by Filip Banasiak · Backgrounds. Set the background in motion."
canonical: "https://framer.elliotli.dev/component/commit-grid"
---

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

# Commit Grid

Set the background in motion.

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

![Commit Grid preview image 1](https://framer.elliotli.dev/og/component/commit-grid/8e9ea91689078f23/1600x1200.jpg)

## Summary

Set the background in motion.

## Description

**A grid that breathes.**

CommitGrid drops a soft, animated grid of tinted cells behind any section — an ambient background inspired by the GitHub commit graph, built for atmosphere rather than data. Set a single color and it generates the whole tonal scale for you; pick a motion pattern and it quietly comes alive.

**Eight motion patterns** Every pattern is a different way for the cells to light up — choose the mood that fits your page:

-   **Flat** — a still, evenly tinted grid (great as a quiet texture)
    
-   **Twinkle** — cells fade in and out at their own random rhythm
    
-   **Ripple** — concentric rings pulse out from a point you choose
    
-   **Wave** — a band of brightness sweeps across the grid
    
-   **Scan** — a single line sweeps through like a radar
    
-   **Rain** — streaks fall column by column
    
-   **Spiral** — a slow rotating pinwheel
    
-   **Noise** — an organic, drifting cloud of activity
    

**Tune it to your brand** Simple controls, no code: base color (with opacity), cell size, gap, corner radius, animation speed, intensity, and max opacity. Set the speed to **0** to freeze any pattern into a static background, and choose an origin or direction for the directional patterns.

**Fast and considerate** Rendered to a single canvas — not hundreds of DOM nodes — so it stays smooth even full-screen, on Safari included. It caps its own frame rate, pauses when scrolled off-screen, and respects **prefers-reduced-motion** by rendering a static grid for visitors who opt out of motion. Drop it in as a full-bleed background and put your content on top.

**Perfect for** Hero sections, headers, footers, CTAs, login screens, and empty states — anywhere a page needs a little life without stealing focus.

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

-   All · #1545

## Details

- **Author**: Filip Banasiak
- **Published**: 2026-06-17
- **Updated**: 2026-10-07
- **Added**: 2026-06-17
- **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