GitHub Planet — GitHub pushes become real-time shooting stars

Showcase
, , , ,
1

Hi everyone!

We built GitHub Planet, an interactive web experience that transforms a developer’s GitHub activity into a unique living 3D planet.

Repositories, programming languages, contributions, stars, and contributions to external repositories affect the planet’s appearance, surface, size, rotation speed, surrounding stars, achievements, and titles.

GitHub Planet animated profile card

GitHub pushes become real-time shooting stars

When GitHub Planet receives a GitHub Push Webhook, it detects the changed programming language and the amount of code changed.

The programming language determines the shooting star’s color, and the amount of change affects its scale.

The event is then broadcast through Socket.IO and appears as a shooting star in the live Three.js scene for connected visitors in real time.

GitHub push → Webhook → Socket.IO → Shooting star

ADD A SHORT “PUSH → SHOOTING STAR” GIF HERE

Each programming language creates a different world

The planets are not only recolored versions of the same model.

Different programming languages have their own shader-driven surfaces, atmosphere, particles, shells, wind, lightning, and other visual effects.

These showcase planets use fixed test data, so you can open them without logging in.

CSS — Directional Color Flow C++ — Idle Plasma Globe
CSS showcase planet C++ showcase planet
Go — Atmospheric Wind TypeScript — Defensive Typed Shell
Go showcase planet TypeScript showcase planet
JavaScript — Reactive Golden Surface Rust — Desert Dust World
JavaScript showcase planet Rust showcase planet

Vue — Gentle Reactive Wind

Vue showcase planet

Put your planet on your GitHub profile

GitHub Planet can also generate a shareable profile card showing your planet, main programming language, and contribution count.

There are two display options:

  • Static card — recommended: Works immediately without GitHub Actions
  • Animated GIF card: Records the actual Three.js scene with Playwright, converts it into a GIF with FFmpeg, and updates it automatically every day using GitHub Actions

The generated card can be embedded directly into a GitHub profile README.

Example:

GitHub Planet profile card

Other features

  • GitHub OAuth authentication
  • REST API and GraphQL API integration
  • Achievements for development milestones
  • Unlockable titles
  • AI-generated colors and planet names for unregistered languages using Gemini
  • Japanese and English localization
  • Shareable static and animated profile cards
  • Real-time user visits and shooting-star events

Under the hood

  • HTML, CSS, and Vanilla JavaScript with ES Modules
  • Three.js, WebGL, custom GLSL shaders, and Anime.js
  • ShaderMaterial
  • MeshStandardMaterial.onBeforeCompile()
  • Layered transparent spheres and additive blending
  • Node.js and Express
  • Socket.IO and GitHub Webhooks
  • GitHub OAuth 2.0, REST API, and GraphQL API
  • PostgreSQL and connect-pg-simple
  • Google Gemini API
  • Docker and Google Cloud Run
  • GitHub Actions, Playwright, and FFmpeg
  • Node.js Test Runner

The backend is structured as a layered modular monolith:

Browser
  ↓
Presentation
  ↓
Application
  ↓
Domain
  ↓
Infrastructure

GitHub Webhook → Express → Socket.IO → Browser

Try it

Live application

Source code

This was built as a two-person student project.

I worked on the backend, GitHub integration, real-time functionality, infrastructure, and deployment.

My teammate, @lenagig, worked on the frontend and visual design.

I would especially appreciate feedback on one thing:

Which planet has the clearest visual identity at a glance, and which one feels the hardest to distinguish?

Thanks for checking it out!