Git City 3d Github Visualization

This turns GitHub profiles into 3D pixel art buildings where your contribution count sets the height, repo count determines width, and stars control window brightness. Built with Next.js, React Three Fiber, and Supabase, it uses instanced rendering to handle lots of buildings without killing performance. The code shows how to map GitHub GraphQL API data to building metrics, set up instanced meshes for windows, and animate selections with useFrame. Good starting point if you want to visualize developer activity spatially or learn R3F patterns for data-driven 3D scenes. The compare mode for side-by-side profiles is a nice touch.

skills.sh installs: 1.3K
GitHub stars: 61
last updated: Jul 14, 2026

View on GitHub

Install

$ npx -y skills add aradotso/trending-skills --skill git-city-3d-github-visualization --agent claude-code

Installs into .claude/skills of the current project.

Files

Git City — 3D GitHub Profile Visualization

Skill by ara.so — Daily 2026 Skills collection.

Git City transforms GitHub profiles into a 3D pixel art city. Each user becomes a unique building: height from contributions, width from repos, window brightness from stars. Built with Next.js 16 (App Router), React Three Fiber, and Supabase.

Quick Setup

git clone https://github.com/srizzon/git-city.git
cd git-city
npm install

# Copy env template
cp .env.example .env.local   # Linux/macOS
copy .env.example .env.local  # Windows CMD
Copy-Item .env.example .env.local  # PowerShell

npm run dev
# → http://localhost:3001

Environment Variables

Fill in .env.local after copying:

# Supabase — Project Settings → API
NEXT_PUBLIC_SUPABASE_URL=https://your-project.supabase.co
NEXT_PUBLIC_SUPABASE_ANON_KEY=your-anon-key
SUPABASE_SERVICE_ROLE_KEY=your-service-role-key

# GitHub — Settings → Developer settings → Personal access tokens
GITHUB_TOKEN=github_pat_your_token_here

# Optional: comma-separated GitHub logins for /admin/ads access
ADMIN_GITHUB_LOGINS=your_github_login

SKILL.md on GitHub