In the world of software development, a GitHub contribution graph—the grid of green squares—is the standard visual for a developer’s activity. But for many, those flat squares don’t tell the full story. A new open-source project called Git City has changed that, transforming the abstract data of commits and repositories into a persistent, 3D pixel-art metropolis.
The Vision: Code as Infrastructure
Created by developer @srizzon, Git City isn’t just a visualizer; it’s an interactive environment where every GitHub user is represented as a skyscraper. The project was built using a modern stack including Next.js 15, Three.js (via React Three Fiber), and Supabase.
The “vibe-coding” approach used in its development—leveraging tools like Claude Code—allowed for rapid prototyping, turning a complex data visualization idea into a fly-through city in record time.
How Your Profile Shapes the Skyline
The architecture of each building is strictly dictated by the user’s GitHub API data. This ensures that the city is a literal reflection of the developer landscape.
- Building Height: Determined by your total contribution count (commits). The more you build, the higher your skyscraper reaches.
- Building Width: Based on the number of repositories you maintain.
- Window Brightness: Reflects your “stars.” Popular projects result in glowing, vibrant windows across the city skyline.
- Color Palette: The dominant colors of your building correspond to your most-used programming languages (e.g., yellow for JavaScript, blue for TypeScript).
Beyond the Blocks
Git City offers more than just static views. Users can enter a “Flight Mode,” piloting a tiny paper plane avatar to navigate between the buildings of the global developer community.
The project’s roadmap points toward even deeper gamification:
- Multiplayer Elements: Seeing other developers as “ghosts” roaming the streets.
- Visual Decay: Buildings may show signs of wear or “rust” if a user becomes inactive for long periods.
- NPCs and Real-Time Pulses: A living city that “pulses” when a user makes a live commit.
Why It Matters
For engineers, Git City shifts the perspective from a private productivity tracker to a shared social space. It transforms the “lonely” act of coding into a contribution to a collective infrastructure. While the green squares of a standard profile are informative, a 3D city provides a visceral sense of presence, neighborhood, and scale in the open-source world.
References:
