Explore the solar system in a cinematic interactive experience. Aphelion blends scrolling animation, planet detail cards, and quizzes into a polished space learning adventure.
- Guides users through a scroll-driven voyage from the Sun to Pluto
- Presents a dynamic orbital Solar System view with animated planet motion
- Surfaces rich planet facts, statistics, and descriptive cards
- Includes per-planet quiz challenges with instant feedback and score tracking
- Displays travel progress in a distance HUD based on million kilometers from the Sun
- Launch experience: Dramatic intro animation that flows into the main journey.
- Journey view: Scroll across ten solar worlds with motion and distance markers.
- Solar system view: Explore planets in orbit and open a dedicated planet detail page.
- Planet detail cards: Read facts, view core stats, and jump into quizzes.
- Quiz mode: Answer questions, get immediate feedback, and review results.
- Mission summary: Completion screen with total worlds visited, distance traveled, and ranking.
- Next.js 14 (App Router)
- React 18
- Tailwind CSS
- Framer Motion for smooth animated transitions
- Radix UI for accessible UI building blocks
- Install dependencies:
npm install- Start the development server:
npm run dev- Open the app at:
http://localhost:3000app/page.tsx— main interactive experience, planet data, views, and quiz logicapp/layout.tsx— global layout, fonts, and metadatacomponents/ui/— reusable UI components and Radix wrappersstyles/globals.css— global styling and Tailwind configuration
Aphelion is deployed live at:
- Fully client-side experience with no external backend required.
- Designed for a responsive experience with polished transitions and mobile-friendly presentation.