A Multi-Spectrum Astronomical Data Exploration Platform
Cosmos Collective is an interactive platform for exploring the universe through multiple wavelengths of light. Fly through a 3D solar system, browse JWST's infrared imagery with wavelength switching, map 2,600+ Kepler exoplanets, and explore the sky with real-time data from 11 space agencies.
The hero section features a live 75vw × 62vh Solar System preview — an interactive iframe of the full Three.js simulation that fills the above-the-fold viewport. Clicking anywhere on it navigates to /solar-system for the complete experience.
- 3-column interactive viewer for 14 curated James Webb Space Telescope observations
- Wavelength switching: Toggle between NIRCam and MIRI infrared views
- Feature annotations: Bounding box overlays on Carina Nebula, Pillars of Creation, Stephan's Quintet — coordinates scoped precisely to image bounds (not the surrounding container)
- Scientific analysis, coordinates, instrument filters, and external links
- Categories: nebulae, galaxies, deep fields, solar system objects
- Interactive star field of 2,600+ confirmed exoplanets from the NASA Exoplanet Archive
- Three view modes: Sky Map, Galaxy View, HR Diagram
- Filter by planet size, stellar temperature, orbital period, habitable zone
- Orbital diagrams for selected systems with planet properties
- Real-time 3D solar system with accurate orbital mechanics powered by Three.js
- Zoom out to view our position in the Milky Way galaxy using NASA/JPL-Caltech imagery
- Planet dive mode, adjustable simulation speed, and orbital trail visualisation
- Collapsible panel UI: All three panels (Controls, Statistics, Planetary Events) are hidden by default to maximise the 3D canvas. A pulsing arrow at the left edge reveals the Controls panel; a second arrow at the right edge reveals Statistics and Planetary Events. Each slides in/out with a smooth CSS transition
- True Scale mode: Toggling "True Scale" rescales both planets and all 13 moons to their correct relative sizes. Phobos (~11 km) and Deimos (~6 km) become near-invisible specks next to Mars — accurately reflecting their status as captured asteroids
- Tidally locked moons: All 13 moons (Moon, Phobos, Deimos, Io, Europa, Ganymede, Callisto, Titan, Rhea, Iapetus, Titania, Oberon, Triton) permanently keep the same face towards their parent planet — matching the real-world behaviour driven by tidal forces
- Pan and zoom across the entire celestial sphere using Aladin Lite
- Rich popup cards for JWST/Hubble observations with thumbnails and metadata
- Meteor shower radiant overlays with seasonal filtering
- Layer radio, infrared, optical, and X-ray survey data
- Search by object name, coordinates, or constellation
- Aitoff-projection sky chart of 33 JWST + Hubble observations
- Three view modes: Sky Map, Distance, Timeline
- Filter by telescope, category, wavelength, and distance
- Browse all observations with search, category, and wavelength filters
- "View in Sky Map" deep links for spatial context
- Detailed observation pages with analysis and external references
- Live astronomical events: meteor showers, asteroids, solar activity
- ISS tracking with real-time orbital position on a world map
- NASA Astronomy Picture of the Day with expandable explanation
- Near-Earth Object approach diagrams and solar activity gauge
- Interactive timeline of the Square Kilometre Array project
- Comparison bars: current vs. SKA capability metrics
- Live data counter showing SKA's projected throughput
- Interactive Australia map with 5 telescope markers (ASKAP, MWA, Parkes, ATCA, SKA-Low)
- Murchison cluster grouping with detail cards
- CASDA live data integration for ASKAP observations
cosmos-collective-v2/
├── src/
│ ├── app/ # Next.js App Router
│ │ ├── jwst/ # JWST Explorer
│ │ ├── kepler/ # Kepler Exoplanet Explorer
│ │ ├── solar-system/ # 3D Solar System
│ │ ├── sky-map/ # Interactive Sky Map
│ │ ├── observatory/ # Deep Space Observatory
│ │ ├── explore/ # Observation gallery
│ │ ├── events/ # Live events
│ │ ├── devlog/ # Technical blog
│ │ └── api/ # API routes
│ ├── components/
│ │ ├── ui/ # Base UI components
│ │ ├── features/ # Feature-specific components
│ │ │ ├── jwst/ # JWST viewer
│ │ │ ├── kepler/ # Kepler viewer + canvas
│ │ │ ├── observatory/ # Observatory viewer
│ │ │ ├── explore/ # Gallery + filters
│ │ │ ├── sky-map/ # Aladin Lite integration
│ │ │ ├── events/ # Event components
│ │ │ └── dashboard/ # User dashboard
│ │ ├── layout/ # Header, Footer, navigation
│ │ └── accessibility/ # A11y components
│ ├── services/ # API integrations
│ │ ├── mast-api.ts # STScI MAST API (JWST + Hubble)
│ │ ├── australian-telescopes.ts
│ │ └── real-time-events.ts
│ ├── hooks/ # Custom React hooks
│ ├── lib/ # Utilities
│ └── types/ # TypeScript definitions
├── public/
│ └── solar-system/ # Three.js solar system (standalone)
└── ...config files
- Node.js 18.17 or later
- npm, yarn, or pnpm
# Clone the repository
git clone https://github.com/m4cd4r4/cosmos-collective-v2.git
cd cosmos-collective-v2
# Install dependencies
npm install
# Copy environment variables
cp .env.example .env.local
# Start development server
npm run devOpen http://localhost:3000 to view the app.
See .env.example for all available configuration options. At minimum:
NEXTAUTH_SECRET: Generate withopenssl rand -base64 32NEXT_PUBLIC_NASA_API_KEY: Get free at api.nasa.gov
| Source | Data Type | Access |
|---|---|---|
| STScI MAST | JWST, Hubble observations | Public API |
| NASA Exoplanet Archive | Kepler exoplanets | Public TAP |
| CSIRO CASDA | ASKAP radio data | Public TAP |
| NASA APIs | APOD, NEO, ISS position | Free API key |
| NOAA SWPC | Space weather | Public |
| Aladin Lite | Sky survey imagery | Public |
| Colour | Hex | Usage |
|---|---|---|
| Void | #030014 |
Primary background |
| Solar Gold | #d4af37 |
Primary accent, JWST theme |
| Stellar Cyan | #06b6d4 |
Secondary accent, radio waves |
| Aurora Purple | #a855f7 |
Tertiary, UV representation |
| Nebula Pink | #ec4899 |
Highlights, infrared |
- Display: Space Grotesk - Headlines and branding
- Body: Inter - Body text and UI
- Mono: JetBrains Mono - Code and data
Live: cosmos-collective.com.au
# Build for production
npm run build
# Start production server
npm run startContributions are welcome!
- Fork the repository
- Create your feature branch (
git checkout -b feature/amazing-feature) - Commit your changes (
git commit -m 'Add amazing feature') - Push to the branch (
git push origin feature/amazing-feature) - Open a Pull Request
- Technical Devlog - Implementation details and decisions
- SKA Observatory - Learn about the Square Kilometre Array
- STScI - Space Telescope Science Institute
- CSIRO ATNF - Australia Telescope National Facility
This project is licensed under the MIT License - see the LICENSE file for details.
- NASA/ESA/CSA/STScI - JWST and Hubble imagery and data
- NASA Exoplanet Archive - Kepler mission data
- CSIRO - Australian radio telescope data
- CDS Strasbourg - Aladin Lite sky viewer
- Open source community - For the tools and libraries