A cinematic, scroll-based interactive experience where you play as an astronaut traveling from Earth to Mars.
| Section | Experience |
|---|---|
| 🛸 Launch | CSS rocket, pre-launch checklist, 3-2-1 countdown with screen shake |
| 🌌 Space Travel | Three.js starfield, Earth → Mars scroll animation, live mission stats |
| 3 timed crisis events — oxygen leak, asteroid, solar flare — with real countdowns | |
| 🔥 Landing | Atmospheric entry heat, live altitude/speed HUD, parachute deploy |
| 🔴 Mars Base | Explorable surface with clickable structures and mission data panels |
- Zero build tools — pure HTML, CSS, JS, opens straight from disk
- GSAP 3 with ScrollTrigger for all scroll-based animations
- Three.js starfield with mouse parallax and scroll-driven drift
- Cyberpunk HUD aesthetic — Orbitron font, scanlines, corner brackets
- Fully responsive — works from 320px mobile to 4K desktop
git clone https://github.com/yourusername/mission-mars.git
cd mission-mars
open index.html # macOS
# or just double-click index.html on Windows/LinuxNo npm, no webpack, no dependencies to install. It just works.
mission-mars/
├── index.html # Full HTML structure — 5 sections + HUD + loader
├── styles.css # ~900 lines — design tokens, all section styles, animations
├── script.js # ~420 lines — Three.js, GSAP, challenge system, landing logic
├── LICENSE
├── CONTRIBUTING.md
└── README.md
- Wait for the loader to complete system checks
- Click INITIATE LAUNCH — watch the countdown and rocket liftoff
- Scroll down through space — watch Earth shrink and Mars grow
- React to challenges — each has a live timer, pick your response
- Deploy the parachute when prompted during landing
- Explore Mars base — click the habitat, rover, and O₂ tower for data
- GSAP — scroll animations and timeline sequences
- Three.js — WebGL starfield
- Orbitron + Rajdhani — Google Fonts
See CONTRIBUTING.md for guidelines. PRs welcome — especially accessibility improvements, mobile polish, and new Mars surface features.
MIT — see LICENSE for details. Use it, fork it, ship it.
Made with ☕ and a lot of gsap.to() calls