Turn your GitHub profile into a 3D city

By GitHub

Categories: Product, Tools

Summary

Git City transforms GitHub profiles into interactive 3D pixel art cities where building height reflects commits, width represents repositories, and window brightness shows stars—a creative visualization tool built with Next.js 15, Three.js, and Fiber that gamifies developer contributions through flight mode and achievement systems.

Key Takeaways

  1. Visualize contribution metrics through 3D mapping: building height = commit count, building width = repository count, window brightness = GitHub stars. Creates immediate visual feedback for developer productivity.
  2. Built with modern stack: Next.js 15, Three.js, Fiber, and Superbase. Demonstrates practical 3D visualization implementation for web applications without specialized game engines.
  3. Gamification through achievement systems and profile comparison tools drives engagement. Flying through 3D representation of your work creates psychological motivation to increase contributions.
  4. Open source project design enables community adoption and extension. Creates network effects as developers want to build taller/wider cities, incentivizing GitHub activity.
  5. 3D data visualization transforms abstract metrics into tangible, explorable environments. Flight mode interaction model makes technical achievement data intuitive and shareable.

Topics

Transcript Excerpt

Someone built a 3D pixel art city out of your commit history. Git City is an open source project that turns your GitHub profile into a 3D pixel art city. And yes, it's exactly as wonderful as it sounds. Here's how your digital real estate is valued. Building height equal your contribution count, building width equals repository count, window brightness equals your GitHub stars. Built with Next.js, 15, Three.js, Fiber, and Superbase, the project includes a flight mode explore your city, achieveme...