Escape Earth

Briefing screen → "Mission briefing before the countdown starts. Earth's systems have already collapsed."
Planet selection → "Three planets. Incomplete data. One shot to choose humanity's next home."
Ending screen → "You escaped Earth. But humanity may not be alone."
Launch screen → "All systems green. Earth watching from behind. Launch sequence armed."
Facility/power collection → "Mission 01: restore power. Collect the cells scattered through the hangar before time runs out."

Inspiration

We wanted to answer a simple question: how much of a real game — story, tension, cause-and-effect, a proper ending — can you build with nothing but a browser tab? No game engine, no asset pipeline, no backend. Just Three.js, GSAP, and a single HTML file. "Escape Earth" became our answer: a countdown-driven survival story where every system (power, fuel, hull, oxygen) is visible, tickable, and consequential, and where a dying planet gives the whole experience a reason to feel urgent instead of just decorative.

What it does

Escape Earth puts you in command of the last operational spacecraft, EXODUS-01, as Earth's systems collapse. Guided by an onboard AI companion, ORION, you move through a full mission arc:

Restore Power and Secure Fuel by exploring a 3D facility hangar and collecting resources
Repair the ship's hull before it's flight-ready
Choose a destination among three explorable, differently-habitable worlds
Launch against a real-time countdown clock, with a synced animated countdown ring
Survive an asteroid field using keyboard-controlled evasive maneuvers
Descend and land on your chosen world — only to discover a signal that suggests you're not alone

Every stage feeds into the next: resources you fail to fully restore, or damage you take dodging asteroids, follow you into later stages. You can also talk to ORION directly through a lightweight chat panel that responds contextually to questions about power, fuel, hull, time, or your destination.

How we built it

The entire game — 3D scene, UI, and game logic — lives in a single self-contained HTML file, deployed as a static site with no backend and no build step.

Three.js (r128) renders everything: a procedurally textured, rotating Earth with clouds and an atmosphere shell, three destination planets with their own materials and rings, an instanced asteroid field for the dodge sequence, and a custom-built ship model (cross-wings, a glowing engine ring, a tinted cockpit window).
GSAP drives all the cinematic camera work — launch, descent, landing — plus UI transitions and screen shake.
The Web Audio API generates every sound effect procedurally at runtime — beeps, alerts, the launch rumble — so the project ships with zero audio files.
The Canvas API generates every planet and Earth texture at runtime instead of loading image assets.
A small state machine in vanilla JavaScript drives the seven-mission flow, HUD updates (Power, Fuel, Hull, O2), the countdown timer, and the two branching endings.

Challenges we ran into

Camera choreography. Getting the camera to move cinematically between mission stages — without fighting itself — took real iteration. At one point our screen-shake effect ran as its own animation loop that literally overwrote the camera position set by the steering/flight code every frame, which made the asteroid dodge and launch sequences feel stuttery. We rebuilt shake as an additive offset applied once per frame inside the single render loop instead.
Readability against a live 3D background. Several UI screens (the countdown, the ending) sit directly on top of the 3D scene with no backdrop, so whatever the camera happened to be framing — including, at one point, the camera ending up almost inside a planet's atmosphere — could wreck text contrast. We solved this with dedicated radial dark backdrops behind key UI screens.
Keeping everything in one file. No build step meant no component boundaries — we had to be disciplined about keeping CSS, markup, and game logic organized within a single HTML file as the project grew past 2,000 lines.

Accomplishments that we're proud of

A complete narrative arc — seven distinct missions and two branching endings — built entirely with procedural assets and zero external files beyond two CDN libraries and web fonts.
A ship, planets, and Earth that all look intentional and detailed despite being generated purely through code, not modeled or imported.
An AI companion (ORION) that gives the experience a voice and reacts to what the player asks, not just scripted mission lines.

What we learned

How much production value comes from small, deliberate details — a countdown ring synced to the exact tick interval, a camera bank when steering, a glow ring instead of a flat surface facing the camera — rather than from raw polygon count or texture resolution. We also learned to be much more careful about how animation loops interact when there's more than one system (camera steering, screen shake, cinematic tweens) touching the same object in the same frame.

What's next for Escape Earth

Touch controls for the asteroid dodge sequence, currently keyboard-only
Persisting run outcomes/best survival times between sessions
Additional destination planets and story branches based on which world is chosen
A deeper ORION dialogue system with more contextual awareness of player choices
Difficulty scaling for the asteroid field and countdown timer