Planet Builder Simulation

Mission

My goal was to create an educational tool for people to understand what physical attributes go into the construction of celestial bodies. I wanted people to understand what elements compose a planet like Earth, for it to develop oceans and have an atmosphere. I went so far as to simulate the evolution of a magnetic field, which is crucial for supporting life.

I relied on real-world scientific research to compose the formation of different types of planets in our known solar system, and exo-planets that have been discovered. Allowing the user to change not only the chemical composition of the planet, but its companion star and distance from the star, as well as the mass of the planet -- these are all ingredients to each planet's existence.

The Solution

Planet Builder is a browser-based interactive simulation that lets users create custom planets by configuring elemental compositions, orbital parameters, and stellar environments. Users watch their planet form from a primordial gas cloud through a cinematic animation, then receive a detailed scientific analysis including planet classification, atmospheric breakdown, and a multi-factor habitability score. The app is designed to make planetary science tangible and explorable.

How It Works

The experience flows through three phases. Users start on a landing page that introduces the concept, then move into the builder — a split-screen interface with a real-time 3D scene on the left and a configuration panel on the right.

Start by adding the elements and physical attributes to your planet

In the configuration panel, users adjust 15 cosmic elements (hydrogen, helium, oxygen, carbon, silicon, iron, and others) using a parts-based composition system. They also set environmental parameters: star type (O through M spectral classes), distance from star (0.1–10 AU), initial mass (0.1–100 Earth masses), and rotation speed (1–2,400 hours per day). Eleven presets — including Earth, Mars, Venus, Jupiter, and speculative types like Hot Jupiter and Desert World — provide starting points for exploration.

As users adjust parameters, the 3D gas cloud updates in real time. Cloud color shifts based on weighted element colors, particle density scales with mass, and lighting responds to star type and distance using inverse square law calculations. Adding elements triggers comet-like particle effects flying into the cloud; removing them triggers ejection particles. A live classification preview updates as parameters change, giving immediate feedback on what type of planet is forming.

Different planet types emerge based on real physics and biological processes found in planets.

When the user clicks "Build Planet," a six-second formation animation plays. A timeline counts down from 5 billion years ago to present day as the gas cloud swirls, compresses, and brightens. A flash effect fires, and the fully formed planet emerges with procedurally generated surface detail. The planet's appearance is driven by its classification — earth-like worlds get terrain with water, lava worlds get molten surfaces, gas giants get banded atmospheric patterns, and so on.

The result gives you different habitability scores based on your recipe.

The results panel then displays the planet's classification, surface temperature, atmospheric composition, physical properties, and a habitability score from 0 to 100. The score breaks down into seven weighted factors: temperature, atmosphere, water potential, magnetic field strength, geological activity, chemical composition, and rotation speed. Each factor includes a brief explanation of why it scored the way it did, along with a scientific context for the planet type.

Technology

The app is built with Next.js 16 using the App Router and React 19, written entirely in TypeScript. The React Compiler is enabled for automatic rendering optimizations, and state management relies on React hooks — no external state library was needed given the app's scope.

The visualization layer is where things get interesting. Three.js powers the 3D graphics through React Three Fiber, which provides a declarative React renderer for the scene graph, with Drei supplying utilities like OrbitControls. The particle system supports up to 25,000 GPU-accelerated particles that respond to user input in real time. Six custom shader materials handle procedural surface generation across the different planet types — earth-like terrain with water, ocean worlds, ice worlds, lava surfaces, rocky terrain, and gas giant atmospheres. These shaders use fractal Brownian motion and ridged noise functions written in GLSL to produce realistic surface detail without any pre-built textures.

The interface uses Radix UI Themes with a dark theme for accessible, pre-styled components, Tailwind CSS 4 for utility styling, and SCSS modules for component-specific layout. Typography pairs Orbitron for headings — reinforcing the space aesthetic — with Roboto for body text.

Performance was a key consideration throughout. Particle counts were tuned down from early prototypes, sphere geometry was reduced to 64x64 segments, expensive calculations are memoized, and components are split for code splitting. The entire simulation — from element chemistry to habitability analysis — runs client-side with no backend dependencies.

Under the Hood

The planet classification engine accepts element composition, distance, star type, mass, and rotation speed as inputs, then evaluates atmosphere retention, temperature ranges, and geological activity to produce one of eight planet types with full property details. The habitability scoring system runs as a separate pipeline, evaluating each of its seven factors on a 0–100 scale with specific thresholds and penalties tuned to real planetary science. Presets are modeled after real solar system bodies and known exoplanet archetypes, grounding the simulation in actual astrophysical data.

The formation animation orchestrates a tightly sequenced timeline — particle compression, luminosity ramping, a camera flash, and planet materialization — all coordinated through React refs and effect hooks to keep the 3D scene and UI in sync during the transition.

Key Takeaways

This project demonstrates real-time 3D rendering tightly integrated within a React application, custom GLSL shader development for procedural surface generation, scientific simulation logic grounded in planetary science, and responsive design across desktop, tablet, and mobile. It was an exercise in making complex visual and computational systems feel immediate and accessible to the user.