GitHub Planet – Turn your GitHub activity into a living 3D planet

Questions
, , , ,
1

Hi everyone!

We built GitHub Planet, a web application that transforms GitHub activity into a unique, growing 3D planet.

A user’s main programming language determines the planet’s color and visual style, while GitHub contributions affect its size, rotation speed, surrounding stars, achievements, and titles.

Different programming languages have their own visual identities. For example:

  • CSS: a directional color flow across the surface
  • C++: an animated plasma and lightning effect
  • Go: atmospheric wind layers
  • TypeScript: multiple defensive shell layers
  • JavaScript: a reactive golden surface
  • Rust: desert terrain and animated dust

TypeScript — Defensive Typed Shell

TypeScript planet with animated defensive shell layers

CSS — Directional Color Flow

CSS planet with a directional flowing color shader

Rust — Desert Dust World

Rust planet with desert terrain and animated dust

The frontend is built with vanilla JavaScript and Three.js.

For the language-specific visuals, we use:

  • Custom GLSL vertex and fragment shaders
  • MeshStandardMaterial.onBeforeCompile() for shader extensions
  • ShaderMaterial for atmospheres, shells, stars, and glow effects
  • Multiple transparent sphere layers with additive blending
  • BufferGeometry and THREE.Points for surrounding stars
  • requestAnimationFrame and time uniforms for continuous animation
  • Socket.IO for real-time shooting stars triggered by GitHub push webhooks

The animated showcase cards are automatically recorded from the live Three.js scene using Playwright and converted into GIFs with FFmpeg.

Live demo:

Source code:

I would especially appreciate feedback on:

  • The visual distinction between programming-language planets
  • Shader and material structure
  • Rendering performance on mobile devices
  • How to make the planets feel even more alive

Thank you for checking it out!

1 Like