Inspiration

The International Space Station (ISS) has always fascinated me as humanity’s laboratory in orbit. Among its many unique features, the Cupola — often called the “window to the world” — allows astronauts to observe Earth in breathtaking ways. I wanted to create an interactive web tool that brings this experience closer to people on Earth, while also teaching them about weightlessness, space technology, and how the ISS benefits our daily lives.

What it does

ISS Explorer is an interactive website that simulates life and activities on the ISS:

🌌 Cupola Experience: Users can drag/swipe to rotate the Cupola view and see hotspots like Earth’s continents, docking areas, and the robotic arm.

🛰️ Weightlessness Simulation: Clicking or tapping makes objects float, showing what life without gravity feels like.

🌍 Earth Benefits: Interactive cards explain how the ISS contributes to medical research, robotics, and climate studies.

🎯 Catch the Astronaut Game: A fun mini-game lets users catch astronauts for points, making the learning experience engaging.

How I built it

Frontend: HTML, CSS, and JavaScript.

UI/UX: Used custom styling with Google Fonts (Orbitron, Roboto), CSS transitions, and responsive design.

Interactivity: Implemented drag/swipe logic for Cupola rotation, floating animations for weightlessness, popup cards for ISS benefits, and JavaScript timers for the astronaut game.

Design: Integrated background images and smooth scrolling for a space-themed immersive feel.

Challenges I ran into

Getting the Cupola rotation to feel smooth and realistic while also syncing hotspot positions.

Making the website mobile-friendly with both mouse and touch controls.

Designing floating animations in the weightlessness section so that objects felt natural instead of abrupt.

Keeping the whole website responsive and interactive without making the code too heavy.

Accomplishments that I'm proud of

Successfully created an educational + entertaining website that combines science with interactivity.

Implemented smooth drag/swipe controls and synced hotspots with Cupola angles.

Designed a simple but engaging mini-game that adds fun value to the project.

Built a project that not only explains ISS concepts but also gives users an immersive experience.

What I learned

How to combine JavaScript event handling (mouse + touch) to create interactive 3D-like effects.

Practical skills in UI/UX design, animations, and responsiveness.

The importance of making learning fun and engaging — blending education with gamification.

A deeper understanding of how the ISS works and its real benefits to life on Earth.

What's next for ISS Explorer

Add 360° panoramic Cupola images or videos for a more realistic experience.

Integrate WebGL/Three.js for smoother 3D interaction.

Expand the game with levels, timers, or scoring systems.

Add a quiz module to test users’ knowledge after exploring.

Make the website available on a free hosting platform with a custom domain so anyone can access it easily.

Built With

Share this project:

Updates