Constellation Finder
Set a date, time and place, and see the sky exactly as it looks.
AdvancedWeb appEducation14–30hAI-buildable 3/5no setup
Render the night sky for any location and moment, with constellation lines and star magnitudes. The astronomy maths — converting celestial coordinates to what's above your head right now — is real and satisfying, and the result is genuinely beautiful.
UI
Logic
Useful
Hosting · Free forever
Deploys free on GitHub Pages, Cloudflare Pages or Vercel Hobby.
Deploy it and share a link.
Core features · 7
- Set observer latitude, longitude, date and time
- Stars render with size and brightness reflecting magnitude
- Constellation lines draw between their stars
- A time slider animates the sky's rotation
- Hovering a star shows its name and magnitude
- The horizon and cardinal directions are marked
- Stars below the horizon are not drawn
The interesting part
- Converting right ascension and declination to altitude and azimuth for a given time and place
- Projecting a hemisphere onto a flat canvas without unusable distortion
- Rendering thousands of stars smoothly while the time slider moves
Once it works
- Add planet positions
- Add a search that points to a named object
- Add a device-orientation mode that matches where the phone is pointing
Suggested stack
reacttypescripttailwindcanvas-api