Skip to content

No Planet B

Looking for a new planet. The options were not great.

When life on Earth keeps getting more complicated, a new planet almost starts to sound like a solution.

Until you look at the options.

For No Planet B, I created an interactive journey through the solar system. Along the way, visitors discover how long a human would survive on each planet without a spacesuit.

Sometimes it is a matter of minutes.

Usually, much less.

  • RoleConcept, visual design, 3D animation and front-end development
  • ClientMinor Visual Interface Design
  • Year2023
  • ResultAn interactive 3D experience about climate change and the habitability of other planets
Music: “Space Song” by Beach House

First. We leave Earth.

The assignment was to create awareness around a social issue of my choice. I chose climate change.

Climate change is often shown through melting ice caps, smoking chimneys and graphs with lines that really should not be going that way.

So I looked for a different way in.

Space travel is usually linked to progress. New worlds, new possibilities and maybe one day, a new home. But how promising do those possibilities still feel when you look at what is actually waiting for you on the planets around us?

That contrast became the starting point.

How do you create an experience about climate change that actually sticks, without ending up with another graph or warning text people have already seen a hundred times?

The visitor starts with the idea that there might be an alternative out there somewhere. At every stop, that hope becomes a little less realistic.

What begins as a search for another planet slowly turns into an argument for this one.

The rocket turned scrolling into a journey

The website should not feel like a long page with a few planets stacked underneath each other.

The visitor needed to feel like they were actually going somewhere.

That is why a 3D rocket travels through the website with them. While scrolling, it rotates around its own axis, changes direction and moves deeper into space. The scroll movement sets the pace of the journey.

This turns scrolling into more than a way to read information. It becomes the action that moves the visitor through the story.

The planets start to feel less like separate sections and more like stops along the same route. The rocket creates continuity, even when the content and surroundings change along the way.

I made the model in Blender. With Three.js and GSAP, I linked its position and rotation to the visitor’s progress through the website.

Every stop asked the same uncomfortable question

At each planet, the visitor gets an answer to one question:

How long would you survive here without a spacesuit?

The planets are interactive 3D objects that can be grabbed and rotated. On click, a detail view opens with the distance from Earth, the expected survival time and an explanation of the conditions.

The cause differs per planet: heat, cold, air pressure, toxic gases or simply the lack of solid ground.

That information appears in the same place for every planet.

That way, visitors do not have to relearn the interface at every destination. After the first planet, the controls ask for less attention, leaving more room for what changes in the content.

That also lowers cognitive load.

The structure stays familiar.

The answer just never becomes more comforting.

The same information structure at every stop

A number does not always land

A number can be extreme without immediately feeling extreme.

That is why I made short Blender animations for three destinations, technically two planets and a star, showing what the conditions would do to a human body.

For the character, I used an existing 3D model and animated it myself.

The animations translate abstract values into a visible consequence. The visitor does not only have to imagine what extreme pressure, temperature or gravity means. They see it happen.

That makes the information more concrete and harder to keep at a distance.

A survival time of 0.075 seconds already says enough.

Seeing what that means still hits a little harder.

The planets could be heard too

While rotating a planet, each one produces its own sound.

Large planets have a lower base frequency. Smaller planets sound higher.

That connection feels fairly natural. Low tones are often associated with something large and heavy, while higher tones feel smaller and lighter. The difference in scale is therefore not only explained, but also made audible.

The visitor’s movement affects the sound too. The faster a planet is rotated, the higher and louder the tone becomes.

The interaction gives direct feedback through the planet itself.

Even the letters were unstable

An unstable typeface for an unstable climate

For the website, I designed my own wobbly font.

The letters tilt, vary from each other and seem slightly out of balance.

That directly connects to the subject: a climate that is becoming increasingly unstable.

The typography does not only tell the story. Its form behaves like it belongs to it.

The typeface is intentionally restless, but it still had to stay readable. So the instability sits mainly in the shapes of the letters, not in constantly moving text.

Climate change is already complicated enough without making people decode every sentence too.

Building a solar system in the browser

For the interactive 3D elements, I worked with Three.js.

Every planet has its own scene, texture and canvas. With raycasting, the website checks whether the visitor is actually grabbing a planet. The pointer movement is then translated into rotation.

Through the Web Audio API, that same movement also controls the pitch and volume. One interaction therefore affects both what someone sees and what they hear.

The rocket is a separate 3D element. A GSAP timeline links its position and rotation to the scroll, so it moves closer, changes direction and travels between the planets during the journey.

The detail views, fullscreen Blender animations, stars and audio are all built as separate systems too.

The rocket exhaust is made from individual fire and smoke particles. Their position, scale and opacity are constantly changing, so the movement never looks exactly the same.

Technically, all those parts have their own job. For the visitor, they needed to feel like one continuous journey.

Technology

Three.js · GSAP · Web Audio API · Blender · JavaScript · HTML · CSS

The search ended where it began

The further the journey goes, the clearer it becomes that no useful alternative is going to appear.

At the end, the rocket crashes.

No successful landing.

No second Earth.

Only the message the whole experience has been building toward:

There is no place like Earth. And there is no Planet B.

From the end screen, the visitor can return to Earth and start the journey again.

That means the website ends exactly where it started.

Home.

Of all the destinations along the way, there is only one where we can survive without a spacesuit for more than a few minutes.

Maybe we should take a little better care of it.