Your GitHub profile as a 3D pixel art building in an interactive city.
Git City transforms every GitHub profile into a unique pixel art building. The more you contribute, the taller your building grows. Explore an interactive 3D city, fly between buildings, and discover developers from around the world.
- 3D Pixel Art Buildings — Each GitHub user becomes a building with height based on contributions, width based on repos, and lit windows representing activity
- Free Flight Mode — Fly through the city with smooth camera controls, visit any building, and explore the skyline
- Profile Pages — Dedicated pages for each developer with stats, achievements, and top repositories
- Achievement System — Unlock achievements based on contributions, stars, repos, referrals, and more
- Building Customization — Claim your building and customize it with items from the shop (crowns, auras, roof effects, face decorations)
- Social Features — Send kudos, gift items to other developers, refer friends, and see a live activity feed
- Compare Mode — Put two developers side by side and compare their buildings and stats
- Share Cards — Download shareable image cards of your profile in landscape or stories format
| Metric | Affects | Example |
|---|---|---|
| Contributions | Building height | 1,000 commits → taller building |
| Public repos | Building width | More repos → wider base |
| Stars | Window brightness | More stars → more lit windows |
| Activity | Window pattern | Recent activity → distinct glow pattern |
Buildings are rendered with instanced meshes and a LOD (Level of Detail) system for performance. Close buildings show full detail with animated windows; distant buildings use simplified geometry.
- Framework: Next.js 16 (App Router, Turbopack)
- 3D Engine: Three.js via @react-three/fiber + drei
- Database & Auth: Supabase (PostgreSQL, GitHub OAuth, Row Level Security)
- Payments: Stripe
- Styling: Tailwind CSS v4 with pixel font (Silkscreen)
- Hosting: Vercel
# Clone the repo
git clone https://github.com/srizzon/git-city.git
cd git-city
# Install dependencies
npm install
# Set up environment variables
# Linux / macOS
cp .env.example .env.local
# Windows (Command Prompt)
copy .env.example .env.local
# Windows (PowerShell)
Copy-Item .env.example .env.local
# Fill in Supabase and Stripe keys
# Run the dev server
npm run devOpen http://localhost:3001 to see the city.
AGPL-3.0 — You can use and modify Git City, but any public deployment must share the source code.
Built by @samuelrizzondev