Aphelion

Aphelion frames the solar system as a journey, not a reference. You arrive at a launch sequence, get addressed as Commander, and from the moment you click Begin Mission you're moving through the Sun's corona, past the inner planets, outward into the gas giants, and all the way to the cold edge of the system.

Scroll pacing drives everything. Each planet appears in sequence, with its own facts, orbital data, and a set of quiz questions before you continue. Fifty questions in total, spread across ten worlds, with a distance HUD that tracks your progress in millions of kilometres so the sense of scale stays present throughout.

Built with Next.js 14, TypeScript, and Framer Motion for scroll-triggered animation. The quiz engine and all planetary content are authored directly, with no external API dependency, keeping the experience fast, consistent, and fully offline-capable.

The design challenge wasn't making it look like a space app. That part is simple enough. The harder part was making it feel like a journey rather than a reference page. Scroll-triggered state, a persistent distance HUD, and a cinematic launch sequence all work toward the same goal: convincing you that you're moving through something, not just reading about it.

The quiz placement was deliberate. Questions arrive after the exploration content for each planet, not before. The intent is to let immersion do some of the teaching first, so the answers are more likely to have already landed by the time you need them.

The mission summary screen completes the arc: total score, worlds visited, distance logged. It gives the experience a proper ending rather than just stopping, which is something most educational tools skip. That finishing moment is what makes it feel like you actually went somewhere.