A WebGL visualization that turns any public GitHub repository into a living, breathing blob. Each repo gets a unique shape, color palette, and personality based on its characteristics — and realtime activity animates as particles that spiral inward and absorb into the surface.
The blob's three-color gradient comes from the repo's top 3 programming languages (by bytes), using GitHub's official Linguist color palette:
| Language | Color |
|---|---|
| JavaScript | Yellow (#f1e05a) |
| TypeScript | Blue (#3178c6) |
| Python | Deep blue (#3572A5) |
| Rust | Peach (#dea584) |
| Go | Cyan (#00ADD8) |
| Ruby | Dark red (#701516) |
| Swift | Orange-red (#F05138) |
If a repo has fewer than 3 languages, the missing colors are derived as lighter tints of the primary language.
The blob's base scale is driven by the repo's star count on a logarithmic scale. A small hobby project appears as a modest sphere, while a massively-starred project fills more of the viewport. The log scale prevents mega-repos from becoming absurdly large while still showing clear differentiation.
- Forks → FBM noise octaves (2–4). More forks = more layers of detail on the surface, making it look richer and more intricate.
- Language count → Noise frequency. Polyglot repos have higher-frequency surface detail, reflecting their diverse codebases.
- Open issues → Noise amplitude (turbulence). More open issues = a more agitated, turbulent surface. A repo with zero issues appears smooth and calm.
- Repo age determines base animation speed. Young repos (< 1 year) morph quickly and energetically. Mature repos (5+ years) have a slower, more dignified movement.
- Recent pushes provide a speed boost: pushed within 24 hours = 1.5× speed, within a week = 1.2× speed.
The bloom/glow intensity scales with the repo's watcher count. Well-watched repos have a more prominent atmospheric glow.
The auto-rotation speed of the camera orbit increases with the number of contributors. Solo projects rotate slowly; large team projects spin faster, reflecting the breadth of collaboration.
When events happen on the repo (polled every ~20 seconds from GitHub's Events API), particles spawn and animate toward the blob:
| Event | Color | Particle Count | Motion |
|---|---|---|---|
| Push | Green | 3–8 (scales with commits) | Streak — fast straight line inward |
| Star | Gold | 1–2 | Float — gentle drift with wobble |
| Fork | Blue | 5–7 | Spiral — classic spiral inward |
| Issue opened | Orange-red | 2–3 | Burst — starts fast, decelerates |
| Pull Request | Purple | 4–6 | Orbit — circles before merging |
| Create (branch/tag) | Cyan | 3–4 | Burst |
| Delete | Gray | 1–2 | Streak |
| Issue Comment | Amber | 1 | Float |
| Release | Pink | 6–10 | Spiral (most dramatic) |
| PR Review | Deep purple | 2–3 | Orbit |
When particles reach the blob surface, they trigger a ripple that propagates across the surface and a brief pulse that makes the entire blob flash and expand slightly.
- Orbit: Click and drag to rotate the camera around the blob
- Zoom: Scroll to zoom in/out
- Click the blob: Creates a localized pull deformation + flash + ripple at the click point
- Mouse hover: The blob subtly bulges toward the cursor
- F key: Toggle fullscreen
- Screensaver toggle: Small button in the bottom-right hides all UI panels
./start.sh
# Opens at http://localhost:8080Or any static HTTP server — the project uses ES module imports that require HTTP (not file://).
The GitHub API allows 60 unauthenticated requests per hour. The app uses conditional requests (ETags) for event polling, so 304 responses don't count against the limit. The remaining quota is shown in the top-right panel.
- Three.js (v0.170.0) via ES module importmap from CDN
- Custom GLSL shaders with simplex noise + FBM
- No build tools, no framework, no backend
- GitHub REST API (unauthenticated)