Beyond Color: Designing Language-Specific Planets with Three.js

nitr0yukkuri — Tue, 03 Nov 2026 06:35:17 +0000

Changing a planet’s base color is a useful first signal, but it does not make two planets feel like different worlds. For GitHub Planet, we wanted programming languages to be recognizable through surface structure, motion, and silhouette as well as color.

The project turns GitHub profile data into an interactive 3D planet. This article focuses on one design problem: how do you give each language a distinct visual identity without making the planet unreadable?

Make the effect carry meaning

A different color is easy to notice, but it is a weak visual metaphor on its own. We chose a visual idea for each language, then used the shader effect to support that idea:

TypeScript: a layered, defensive shell around a structured surface.
Go: flowing atmospheric wind that moves around the planet.
Kotlin: electric arcs that flicker around the planet’s silhouette.
Rust: a dry desert surface with drifting dust.

The goal is not to turn every planet into a completely different object. The shared globe keeps the experience coherent; the material and motion make each language feel distinct.

TypeScript: build the identity in layers

The TypeScript planet keeps a textured base surface and adds translucent shell layers. Its shader uses a time uniform to move bands and filaments across those layers. That makes the “typed shell” feel active while the planet underneath remains visible.

Try the TypeScript showcase

Go: make the atmosphere move

For Go, the visual metaphor is wind. A moving atmospheric pattern gives the planet a sense of flow instead of adding another static ring. The direction and timing of that effect are driven by shader uniforms, so the motion is part of the material rather than a separate video.

Try the Go showcase

Keep comparisons fair

A visual comparison is hard to judge if the sample data changes at the same time as the shader. GitHub Planet’s language showcases use fixed sample values, including the same total and weekly commit counts, so you can focus on how the materials differ. They are demo values, not a real user’s GitHub activity.

That small choice makes the showcase useful as a design review tool: change the visual treatment, keep the underlying example steady, and compare again.

Three things we learned

Start with a metaphor, then choose the shader. “Wind” and “layered shell” lead to clearer effects than “make it glow.”
Protect the silhouette. Effects should help identify the planet without hiding its surface.
Keep a stable comparison case. Fixed demo data helps reveal whether a visual change actually improved the language identity.

GitHub Planet is open source, and the language showcases can be explored without signing in.

If you work with Three.js materials or shader-driven interfaces, I’d love to hear how you make visual differences readable without relying on color alone.

How We Turned GitHub Activity Into a Living 3D Planet

nitr0yukkuri — Tue, 03 Nov 2026 06:24:38 +0000

GitHub activity is usually shown as numbers, charts, and a contribution graph. We wondered: what if the history of building software could become something you can explore?

That question became GitHub Planet, an open-source project that turns GitHub activity into an interactive 3D world.

Open the interactive planet card

From data to a planet

GitHub Planet uses GitHub OAuth and GitHub REST/GraphQL data to collect repository languages and activity signals. Language data shapes the planet’s visual identity. Contributions help shape its growth, achievements, and surrounding stars. The goal is to make a profile feel less like a static summary and more like a world that reflects how someone builds software.

Languages become materials

We wanted each language to feel distinct beyond its color. TypeScript gets a defensive layered shell, Go gets flowing atmospheric wind, and Kotlin gets crystalline structures. Rust has a desert surface with drifting dust.

The planet is rendered with Three.js and WebGL. The application uses Node.js and Express, with PostgreSQL for persistence.

Pushes become meteors

GitHub Planet can receive GitHub Push webhook events and relay them through Socket.IO. When an event reaches an open browser, it appears as a meteor. Its color and size reflect the changed language and amount. Activity becomes a moment in the world instead of staying only in a log.

Watch the planet in motion

The project has a three-minute walkthrough showing the experience in motion.

Watch the GitHub Planet walkthrough on YouTube

Try it without signing in

The language showcases use fixed sample data, so you can compare the visual treatments without signing in or relying on production user data.

GitHub Planet received a CSS Winner Star on August 12, 2026, with an overall score of 7.5. That recognition encourages us to keep refining how the project connects development activity with a visual experience. See the award page.

I lead the project and work on backend and deployment; Lena leads frontend and presentation.

GitHub Planet is not affiliated with GitHub. If you try the demo, I’d love feedback—especially on how clearly the visual effects communicate each language and activity.

DEV Community: nitr0yukkuri