Built and maintained by Coded Vision Design. Security policy · Contributing · Code of conduct
An interactive space education experience featuring 3D planet exploration, real-time ISS tracking, and immersive visualisations of our solar system.
Navigate through our solar system with interactive, high-fidelity 3D planet models rendered with React Three Fibre. Each planet includes detailed scientific data, orbital statistics, and realistic NASA-sourced textures.
Explore the ISS with a detailed 3D model viewer, live positional data, and an interactive timeline showing what a typical day looks like for astronauts aboard the station.
Follow NASA's Artemis II mission with an animated lunar trajectory visualisation, crew profiles for each astronaut, and real mission milestone data. The trajectory viewer features a multi-layered Earth with day/night textures, cloud shadows, and normal mapping.
An interactive 3D black hole renderer with educational content explaining the physics of event horizons, accretion discs, and gravitational lensing.
Calculate what you'd weigh on every planet in the solar system. A fun, educational tool that demonstrates how surface gravity varies across celestial bodies.
A frame-by-frame scroll-driven animation telling the story of the Voyager II mission as you scroll through the page.
Explore the major moons of our solar system with detailed imagery and scientific data for each satellite.
| Technology | Purpose |
|---|---|
| Next.js 16 | React framework with static site export |
| React 19 | UI component library |
| Three.js + React Three Fibre | 3D graphics and visualisation |
| Drei | Helpers and abstractions for R3F |
| TypeScript 5 | Type safety |
| Tailwind CSS 4 | Utility-first styling |
| Globe.gl | Globe visualisation |
| pnpm | Fast, disk-efficient package manager |
app/
page.tsx Home page - hero, mission overview, Voyager scroll
iss/page.tsx ISS tracker and daily life timeline
solar-system/page.tsx Solar system overview with planet grid
solar-system/[slug]/page.tsx Individual planet pages (dynamic routes)
solar-system/black-hole/ Black hole visualisation and education
crew/[slug]/page.tsx Artemis II crew member profiles
technology/page.tsx Space technology showcase
components/
PlanetViewer.tsx 3D planet renderer with GLSL shaders
TrajectoryViewer.tsx Artemis II lunar trajectory animation
ISSViewer.tsx 3D ISS model viewer
BlackHoleViewer.tsx Interactive black hole renderer
EarthGLBViewer.tsx High-detail Earth GLB model
VoyagerScroll.tsx Frame-by-frame scroll animation
WeightCalculator.tsx Planetary weight calculator
MoonSection.tsx Moon gallery and data display
ImageGallery.tsx Responsive image gallery
StarField.tsx Animated star background
Header.tsx / Footer.tsx Site navigation and footer
lib/
planet-data.ts Scientific data for all planets
crew-data.ts Artemis II crew member information
moon-data.ts Moon data for major satellites
public/
models/ 3D GLB/GLTF models (Git LFS tracked)
textures/ Planet and surface textures
nasa-iss-frames/ ISS animation frame sequence (WebP)
voyager-frames/ Voyager II animation frames (WebP)
images/ Static images and photographs
# Clone the repository
git clone https://github.com/CodedVisionDesign/WhatsInSpace.git
cd WhatsInSpace
# Install Git LFS (if not already installed)
git lfs install
git lfs pull
# Install dependencies
pnpm install
# Start the development server
pnpm devThe site will be available at http://localhost:3000.
The ISS and Voyager animation frames are stored as WebP files for efficient delivery. If you have original TIF source frames, convert them:
# Requires libwebp (cwebp command)
bash scripts/convert-frames.sh| Command | Description |
|---|---|
pnpm dev |
Start development server |
pnpm build |
Build static export to out/ |
pnpm lint |
Run ESLint |
pnpm spell |
Check spelling (British English, flags US spellings) |
pnpm spell:fix |
Spell check with suggestions |
pnpm start |
Start production server |
This site is deployed as a static export to Hostinger via a GitHub Actions CI/CD pipeline.
- Push to
maintriggers the deployment workflow - Quality checks run first - ESLint, cspell (British English), and em dash detection
- Build generates the static export in
out/ - Deploy uploads the build to Hostinger via FTPS
- Lighthouse audits performance, accessibility, and SEO post-deploy
Pull requests and non-main branches automatically run:
- Lint and spell checks
- Build verification
- Broken link detection
- Dependency security review
- Bundle size reporting
Set these secrets in your GitHub repository settings:
| Secret | Description |
|---|---|
FTP_SERVER |
Hostinger FTP server IP |
FTP_USERNAME |
FTP username |
FTP_PASSWORD |
FTP password |
- Static export - The entire site is pre-rendered at build time with
next export. No server-side runtime needed, which means fast loading, simple hosting, and excellent cacheability. - Git LFS - 3D model files (GLB format, up to 20MB each) are tracked with Git Large File Storage to keep the repository fast.
- WebP frame sequences - Animation frames are converted from TIF to WebP for ~90% size reduction while maintaining quality.
- Client-side 3D - All Three.js rendering happens in the browser. React Three Fibre provides a declarative API, and custom GLSL shaders handle planet surface rendering with normal mapping, specular highlights, and day/night transitions.
- British English - All content uses British English spelling, enforced by cspell in CI.
This project enforces:
- British English spelling via cspell (US spellings are flagged)
- No em dashes in source files (hyphens only)
- ESLint for code quality
- Lighthouse CI with minimum scores: accessibility 90%, performance 70%, SEO 80%, best practices 80%
- Dependency security scanning on pull requests
- Broken link detection in the static export
- NASA for imagery, textures, mission data, and ISS information
- NASA Visible Earth for planet surface textures
- Three.js community for 3D rendering tools
- Pmndrs for React Three Fibre and Drei
This project is licensed under the MIT Licence.
Built by Coded Vision Design