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.
- Deep-space backdrop: A NASA-derived Milky Way star-map skybox with slow parallax drift, occasional shooting-star meteors, and a rare comet that sweeps across the sky with a glowing tail.
- 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. Previous / Next controls show the real travel distance between worlds.
- True-to-scale planets: Planet sizes use real diameter ratios (the Sun genuinely dwarfs the rest), while focus framing keeps every world screen-filling when selected.
- Moons, rings & lights: Earth's Moon, Jupiter's four Galilean moons, plus Mars, Saturn, Uranus, Neptune and Pluto's major moons — each on a visible orbit (Triton orbits retrograde, like the real moon). Ring systems for all four giants (Saturn textured; Jupiter, Uranus and Neptune procedurally generated with distinct profiles), and Earth's night-side city lights.
- Orrery mode: A living solar-system orbit map with planets (and their labels) orbiting at realistic relative speeds.
- Planet detail view: Planet stats, facts, and focused deep-dive pages with a sticky back button.
- Fair quiz system: Per-planet quizzes with one-way, locked progression. Answer options are shuffled and balanced so the correct answer is never given away by position or formatting.
- Live data: A "people in space right now" counter, fetched live from the open-notify API.
- Scene toggles: Show/hide moons and constellation guide lines, with hover tooltips.
- Shareable deep links:
/?planet=marsopens a specific world directly. - 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, SEO metadata + structured data
│ ├── sitemap.ts / robots.ts # Search-engine sitemap (incl. per-planet deep links) + robots
│ ├── api/people-in-space/ # Server route proxying the live astronaut count
│ └── globals.css # Global styles
├── components/
│ ├── aphelion-logo.tsx # Brand mark/wordmark component
│ ├── planet-3d.tsx # Planets, moons, rings, night lights, Milky Way sky, meteors, comet
│ ├── starfield-background.tsx # Standalone Milky Way + starfield backdrop
│ ├── people-in-space.tsx # Live "people in space" chip
│ ├── 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 + moon texture assets (2K)
└── space/ # Milky Way / star-map skybox textures (4K)
- 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- Deep-space visuals: Added a NASA-derived Milky Way star-map skybox with parallax drift, ambient shooting-star meteors, and a rare glowing comet.
- True-scale planets: Planet sizes now use real diameter ratios, with focus framing that keeps each world screen-filling when selected, and a zoom cap so you can't fly inside a planet.
- Moons & rings: Added orbiting moons for Earth, Mars, Jupiter, Saturn, Uranus, Neptune and Pluto (with visible orbit paths; Triton orbits retrograde), ring systems for all four giant planets, and Earth's night-side city lights.
- Navigation: Previous / Next planet controls showing real inter-planet travel distances, plus shareable deep links (
/?planet=mars). - Living orrery: Planets and their labels now orbit at realistic relative speeds.
- Quiz fairness: Answer options are shuffled and rebalanced so the correct answer is never telegraphed by position or formatting.
- Live data: "People in space right now" counter via the open-notify API.
- Controls: Toggles (with hover tooltips) to show/hide moons and constellation guide lines; sticky back button on planet pages.
- SEO: Richer metadata, FAQ + WebApplication structured data, a crawlable no-JS content fallback, and per-planet sitemap entries.
- Deploy: Retired the stale GitHub Pages export — Vercel is now the sole deployment.
- 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.