---
title: "GithubCommit — Framer component · Best of Framer"
description: "$10.00 · Framer component · by Hamim Reza · Text. Pixel grid text animation heatmap"
canonical: "https://framer.elliotli.dev/component/githubcommit"
---

[Home](/)/[Components](/components)/[Text](/components/category/text)/GithubCommit

# GithubCommit

Pixel grid text animation heatmap

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

![GithubCommit preview image 1](https://framer.elliotli.dev/og/component/githubcommit/f8b44e8345b9e41e/1600x1200.jpg)

## Summary

Pixel grid text animation heatmap

## Description

A pixel grid text animation inspired by the iconic GitHub commit heatmap. Display any text in a glowing pixel matrix style with smooth animations and light, dark, or auto theme support. Built for portfolios, SaaS landing pages, and developer-focused sites that need a bold tech-inspired design element.

## Features

-   Pixel grid matrix text animation inspired by GitHub heatmap
    
-   Glowing flash effect for extra visual impact
    
-   Light, dark and auto theme mode — matches site theme automatically
    
-   Custom text input — display anything
    
-   Left, center and right text alignment
    
-   Configurable animation speed
    
-   Lightweight and responsive across all screen sizes
    
-   No external dependencies
    

## Property Controls

**Content** — custom text input

**Theme** — light, dark, auto mode toggle

**Layout** — text alignment (left, center, right)

**Animation** — animation speed, flash effect toggle

## Use Cases

Developer portfolios · SaaS landing pages · Tech company websites · Hero section headings · Coming soon pages · Personal branding · Interactive typography sections

**SEO Keywords**

framer pixel animation · framer text animation · framer github heatmap · framer pixel text · framer typography component · framer animated text · framer pixel grid · framer developer component · framer tech animation · framer glow effect · framer dark mode component · framer hero text · framer code component · framer matrix animation · framer creative typography

![](https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/description-image-1czvylvt-9lZUwSX6YddhkZxIAAO1sW2oDQKape)![](https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/description-image-1czvylvt-FNbEsCMK4nFEG6Kt8430a4g2N2wtpY)

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

-   All · #5820

## Details

- **Author**: Hamim Reza
- **Price**: $10.00
- **Published**: 2025-09-27
- **Updated**: 2026-07-12
- **Added**: 2025-09-23
- **Categories**: Text

## More like this

-   [Text Reveal Effect](/component/text-reveal-effect) — Lera · $4 — Text reveal effect over "ghost" layer.
-   [Soft Heading](/component/soft-heading) — Kaisa A · Free — Animated Soft Heading in 2 colors
-   [Curved Text Marquee](/component/curved-text-marquee) — Ahmet Loca · Free — Animated Bend
-   [Type Write Effect](/component/type-write-effect) — Russet Supply · Free — Animated Text & Interactive Typing