Journey the solar system.
A cinematic interactive space experience with 3D tour navigation,
orbit view, planet facts, and locked quiz challenges.
Features · Tech stack · Project structure · Getting started · Scripts · Changelog
- Cinematic intro: Animated launch sequence into exploration mode.
- 3D tour mode: Fly through the solar system in 3D — click an unvisited planet to travel to it; click your current planet to open its detail page.
- Orrery mode: Solar system orbit map with animated planets and clickable exploration.
- Planet detail view: Planet stats, facts, and focused deep-dive pages.
- Locked quiz system: Per-planet quiz flow with one-way progression — answers are locked on selection and cannot be changed or revisited.
- Session persistence: Navigation state and progress persist across refreshes.
- Responsive interactions: Mobile-friendly controls, touch gestures, haptic feedback, and layout tuning.
- Framework: Next.js 14 (App Router)
- UI: React 18 + Tailwind CSS + Radix UI primitives
- Animation: Framer Motion
- 3D / graphics: three.js +
@react-three/fiber+@react-three/drei - Language: TypeScript
Aphelion/
├── app/
│ ├── page.tsx # Main experience: intro, journey, orrery, planet details, quiz flow
│ ├── layout.tsx # Root layout + global wrappers
│ └── globals.css # Global styles
├── components/
│ ├── aphelion-logo.tsx # Brand mark/wordmark component
│ ├── planet-3d.tsx # 3D planet rendering helpers
│ ├── tour-view.tsx # Guided 3D journey with cinematic camera flight
│ └── ui/ # Reusable UI primitives
├── hooks/
│ └── use-mobile.ts # Mobile breakpoint helper
└── public/
├── aphelion-icon.svg
└── textures/planets/ # Planet texture assets (2K)
- Node.js 18+
- npm
# 1) Install dependencies
npm install
# 2) Start dev server
npm run dev
# 3) Open in browser
# http://localhost:3000npm run dev # Start development server
npm run build # Create production build
npm run start # Run production server
npm run lint # Run Next.js lint checks- Planet navigation: Clicking a planet you are not currently on in the 3D tour now travels the camera directly to that planet rather than opening its detail page. Clicking your current planet still opens the detail view.
- Quiz integrity: Quiz answers are locked immediately on selection. The Previous button has been removed — quiz flow is strictly one-way to prevent score manipulation.
- Mobile scroll stability: Fixed jitter/stutter of the Earth animation on the home screen when scrolling on mobile by adding
touch-action: noneto the intro container and promoting the Earth canvas to its own GPU compositor layer. - Cleanup: Removed the development-only planet test page (
/planet-test). No sensitive data or secrets found in the repository;.gitignorecoverage verified.