Case Study
CosmicX
A browser-based space experience that turns the scale of the universe into something people can explore, shape, and understand.
- Role
- Product design + frontend development
- Outcome
- An interactive space experience with three learning modes.
- Stack
- JavaScript · Three.js · Vite
Project Overview
Tech Stack
Problem and Solution
Role & Responsibilities
- Defining the interaction model for the title screen, mode selection, guided tours, and in-app navigation.
- Building the Solar, Creator, and Big Bang experiences as connected parts of one application.
- Creating the control panels, timelines, inspectors, dossiers, settings, music controls, and responsive layouts.
- Implementing browser-local preferences and save workflows, including scene saves, Creator save slots, JSON export/import, shareable Solar scenes, and screenshots.
- Adding accessible names, keyboard-friendly controls, mobile panel behavior, and lifecycle cleanup as the user moves between modes.
- Verifying the completed work with automated tests, production builds, and live browser inspection.
No claim is made about team size, formal user research, adoption, or business ownership because those details are not established by the implementation.
Design Process
Key Features
Tech Stack
Challenges & Solutions
Keeping three demanding experiences inside one application
The shared navigation flow destroys inactive simulations, cancels their browser work, and removes their visual resources before another mode takes over. This prevents old scenes from continuing to run in the background.
Keeping controls usable while the 3D scene stays visible
Actions are grouped into focused panels with collapse and disclosure controls, and the layout adapts for narrow screens instead of shrinking every control indefinitely.
Surviving a reload without a server
The application sanitizes stored data, keeps separate onboarding completion for Solar and Creator, and degrades to safe defaults when storage is unavailable. A remaining limitation is that Creator save feedback does not yet clearly surface every storage-write failure.
Mixing established references with fictional content
The fictional Wormhole Galaxy lives inside the same visual language as ordinary black-hole behavior while remaining distinct. Scientific simplifications and speculative material should still be identified more explicitly in a future pass.
Final Product
- 01
The finished journey begins at a title screen with a live cosmic backdrop, music, a Start action, settings, and a mode-selection path.
Visitors can preview the other experiences and choose the level of structure they want.
- 02
In Solar, a short tour explains navigation and inspection before the visitor reaches the full control surface.
They can choose an environment, select a body or galaxy, move the camera, adjust time, open information panels, trigger experiments, and preserve a scene locally.
- 03
In Creator, the visitor moves through four setup steps before entering a generated galaxy.
From there, they can inspect statistics, place systems and objects, evolve the galaxy, read Codex entries, enter a stellar system, change visual effects, save their work, export it, or capture a cinematic image.
- 04
In Big Bang, the visitor begins a guided presentation and moves through eleven cosmic stages.
They can scrub or reverse the timeline, change the expansion rate and camera, read the current chapter details, and reach a replayable ending.
- 05
The result is a single experience that can feel like a simulation, a creation tool, or an interactive lesson depending on the path a visitor chooses.
The three modes stay connected through shared navigation and lifecycle handling that cleans up inactive scenes before switching.