Ever needed a banner image with text and thought "I'll get an LLM to create that", but then the words come out weird? That's exactly how GitMap was born - a fun little project to level up my frontend chops and generate a decent looking banner image at the same time, win-win.

TL;DR

GitMap lets you turn any text into a GitHub-style heatmap, downloadable as PNG or GIF.
Built with Vite, React-TS, and TailwindCSS.
Planned, built, and debugged with LLMs - everything from PRDs and sprint plans, to code and documentation.
Open-sourced for anyone to slice, dice and chop-up as they like.

Why I Built GitMap

I wanted a unique header for my X (Twitter) profile - something that wouldn't just look cool, but also give a nod to the dev community. My idea: spell out my X handle using a GitHub-style "contributions" heatmap. My first stop? Generative AI of course. The result… well, see for yourself. Not bad, but it looks more like something from The Matrix than readable text. Not exactly what I was hoping for.

That got me thinking... instead of forcing an LLM to generate a single image, why not just use it to build something that could? And so, GitMap was born.

The Stack

This was a frontend-only project, so I reached for tools I’m getting more comfortable with:

Cursor IDE
Vite
React-TS
TailwindCSS

Planning & Setup

Before writing a single line of code, I went back to the LLM and asked it to outline a PRD (Product Requirements Document) for a React/Vite/Tailwind application that could generate the original image I asked for. I then initialised the project and dropped the PRD into a '/docs' folder for future reference.

Next, I set up some "cursor rules" to make sure the agent documented all features and files as they are created or changed. Seriously, if you haven't tried this, it's a game changer for keeping your project organised, and gives better context for agents scanning your codebase. I'm impressed, I'll be using these rules for all my cursor projects from now.

With the PRD and rules in place, I had the cursor agent review everything in the PRD, understand the project, and spit out a sprint plan to work through. Ready to vibe.

First Hurdle: TailwindCSS + Vite

Kicked things off by trying to set up TailwindCSS… and immediately hit a wall. Apparently Vite doesn't play nice with the @latest tailwindcss version. A quick downgrade sorted that out, and I was off to the races.

Core Features

At the bare minimum, GitMap needed:

An input field for your text
A color picker (maybe not "needed")
A heatmap display component

The agent had a working example up pretty fast, but there were still gaps to fill. To display each character as a matrix, I needed a mapping for every letter, number, and special character (about 80 in total). Cursor gave me a partial set, so I roped in the original LLM again to "fill in the blanks" and provide the full set of mappings.

Random Bonus Feature

Some letters the LLM provided needed a few visual tweaks. Instead of manually editing and checking each one, I just asked the agent to build a component for editing and saving the character mappings. It worked so well I kept it in the final app. Is it overkill? Maybe. But it's there, it works, and it's actually quite a fun feature.

Next up, I added:

A toggle for a "fixed grid" (to mimic GitHub's 52-week grid)
Month/day labels with a toggle to turn them on/off
Dark/light mode (because every project needs a dark mode right?)

Downloadable PNGs & Animated GIFs

With the basics done, I added a "Download PNG" button/function and could've called it a day. But why stop there? Animation would be cool. I asked cursor if we could animate the heatmap and download it as a GIF - all client side? "Yeah, of course" cursor said, so we added it to the feature list. After some wrangling with html2canvas (used to generate the PNG), we ended up dropping the HTML elements and just rendering the heatmap SVG without the labels for GIF export. This worked much better with the gifshot package and reduced the GIF compilation time from over 30 seconds to virtually instant.

Open Sourcing It

I got what I needed from this project (a custom profile banner for socials), but rather than let another tool gather dust on my hard drive, why not open-source it on GitHub? Seems fitting. Maybe someone else will find it useful or feel up to adding a new feature or two.

If you want to check out the code, it’s all up on GitHub.

If you want to try it for yourself, check out the demo here.

Questions, feedback, or want to show off your own GitMap banner? Drop a comment or tag me @BlakeyVibes!

GitMap: Turning Text Into GitHub-Style Heatmaps (and Learning Frontend Along the Way)

Table of contents