An immersive, editorial-style web experience depicting the Artemis II lunar mission. This project blends high-end 3D graphics with a scroll-driven narrative, providing a cinematic journey from launch to splashdown.
Artemis II: Cinematic Mission Experience.
- 3D Cinematic Scrolling: An interactive timeline using
Three.jsandAnime.jsthat reacts to your scroll, following the Orion spacecraft through 6 distinct mission phases. - Dynamic Telemetry: Real-time mission data (distance, speed, MET) that updates as you progress through the flight path.
- Immersive 3D Environments: High-resolution Earth and Moon models with displacement mapping and fractal noise-generated cloud layers.
- Bilingual Support: Full toggle between Spanish and English, including dynamic data and UI elements.
- Crew Profiles: Interactive modal system to explore the background and roles of the Artemis II pioneers.
- Advanced A11y: Full keyboard navigation support (Tab, Enter, Space, Escape) and screen-reader friendly structure.
- Responsive Design: Optimized for mobile, tablet, and desktop viewports with adaptive 3D camera framing.
- Graphics: Three.js (WebGL)
- Animation: Anime.js
- Styling: Vanilla CSS (Mission Control Editorial Theme)
- Logic: Vanilla JavaScript (ES6+)
-
Clone the repository:
git clone https://github.com/YOUR_USERNAME/artemis-ii.git
-
Navigate to the directory:
cd artemis-ii -
Install dependencies:
npm install
-
Run the development server:
# If using a local server like Live Server or a node script npm start
- Launch: Liftoff from KSC Pad 39B.
- Interlunar Transit: Deep space systems check and Earth departure.
- Sphere of Influence: Approaching the Moon's gravity well.
- Lunar Flyby: Entering the dark side of the Moon (Comm Blackout).
- Return: Earthrise and high-speed return trajectory.
- Splashdown: Re-entry and mission completion.
This project was created for educational and creative purposes. Textures and assets are sourced from NASA and public domain repositories.
“We go together to the Moon and beyond.”