GitHub pushes become real-time shooting stars — 7 shader-driven planets in Three.js

Showcase
, , , ,
1

Hi everyone!

I’ve been building GitHub Planet, a Three.js project that turns GitHub activity into a living 3D planet.

:ringed_planet: Website: https://githubplanet.dev

:sparkles: Instant demo — no login required:

:laptop: Source: https://github.com/nitr0yukkuri/githubplanet

A developer’s GitHub activity affects the appearance of their planet — programming languages, contributions, and development history are reflected in the world.

But I wanted to go a little further than simply changing the planet’s color.

Each programming language has its own visual identity.

CSS — Directional Color Flow

CSS — Directional Color Flow

The CSS planet uses an animated directional color flow across its surface.

I wanted it to feel fluid and constantly changing, while still keeping the shape of the planet readable.

C++ — Plasma and Lightning

C++ — Plasma + Lightning

The C++ planet uses an animated plasma-like surface together with lightning effects.

Compared with the CSS planet, this one is intentionally much more energetic and unstable.

TypeScript — Defensive Shell

TypeScript — Defensive Shell

The TypeScript planet is surrounded by multiple transparent shell layers.

The idea was to visually represent the defensive nature of strong typing as structures protecting the planet.

There are currently 7 language-specific planets:

  • CSS — directional color flow
  • C++ — plasma + lightning
  • Go — atmospheric wind
  • TypeScript — defensive shell layers
  • JavaScript — reactive golden surface
  • Rust — desert terrain + animated dust
  • Vue — reactive wind

On the Three.js side, I’m experimenting with:

  • custom GLSL shaders
  • ShaderMaterial
  • MeshStandardMaterial.onBeforeCompile()
  • transparent layered meshes
  • additive blending
  • THREE.Points
  • animated shader uniforms
  • particles and atmospheric effects
  • language-specific materials

One of my favorite parts of the project is connecting real GitHub activity to the 3D world itself.

When someone pushes code, the event goes through:

GitHub Push → Webhook → Socket.IO → Three.js

and appears as a shooting star in real time.

So the planet isn’t just generated once from GitHub data — development activity can actually leave a visible trace in the universe.

I’d love to hear some thoughts from people with more experience building shader-heavy Three.js projects:

For effects like these, would you keep extending MeshStandardMaterial with onBeforeCompile(), or would you move more of the language-specific planets toward dedicated ShaderMaterial / TSL implementations?

And visually, I’m also curious:

Which of the language-specific planets feels the most distinct at first glance?

Thanks for checking it out!

2

Small update!

I’ve cleaned up the showcase a bit and added a no-login demo, so it’s now much easier to jump straight into the project.

:sparkles: Demo:

I also updated the post with animated examples of the CSS, C++, and TypeScript planets.

The part I’m most interested in feedback on is still this:

Would you keep pushing MeshStandardMaterial.onBeforeCompile() further for these effects, or start moving more of the language-specific planets toward dedicated ShaderMaterial / TSL implementations?

Also curious which planet feels the most visually distinct at first glance.

Thanks for taking a look!