Celestial Clock

Time, told by the cosmos

Comment

See video at https://drive.google.com/file/d/1TJ5hZST4g7S0QbwJFUChvNs4wPdRh5An/view?usp=drive_link

Inspiration

Time used to be something we could see. Sundials followed the sun, and analog clocks used circular motion to reflect the natural cycles of time. But today, digital clocks dominate classrooms, phones, and bedrooms, reducing time to static numbers on a screen. In that shift from motion to digits, we have lost our intuitive, visual connection to time. Yet time isn’t a human invention, it comes from the universe itself. A day is Earth’s rotation, a month is the Moon’s orbit, and a year is Earth’s revolution around the Sun. Modern timekeeping pushes these origins aside, making time more abstract, artificial, and disconnected. Celestial Clock is our way of restoring the connection between time and nature. Instead of reading time, users experience it through the orbiting planets around a sun, stars pulsing with each second, and cosmic motion that reveals the rhythm of time itself.

What it does

Celestial Clock reimagines time as motion. It is an interactive cosmic clock where each orbit represents a different unit of time. Instead of reading time as numbers, users experience it visually through planetary orbits around a central sun.

Orbit Level Represents Orbit Period

  • Mercury Seconds 1 orbit per minute
  • Venus Minutes 1 orbit per hour
  • Earth Hours 1 orbit per day
  • Mars Days 1 orbit per week
  • Jupiter Weeks 1 orbit per month
  • Saturn Months 1 orbit per year

Additional features:

  • Pulsing stars act as a cosmic heartbeat every second
  • Real-world data visualized through each planet's color
  • Hover labels show what each planet’s orbit represents
  • Users can adjust number of time layers
  • Minimalist UI designed for both utility and aesthetics

How we built it

  • JavaScript (Canvas API): Rendered the orbital system and animations
  • System Time Sync: Linked orbital motion to the real system clock using Date()
  • CSS + HTML UI: Built interactive settings to control orbit count and speed
  • API calls: Alpha Vantage (stock market data) and Open-Meteo Air Quality API (CO2 data)

Challenges we ran into

  • Preventing orbit overlap while keeping layout readable
  • Finding a balance between scientific accuracy and visual clarity
  • Designing an intuitive interface for an abstract concept
  • Integrating external API's

Accomplishments that we're proud of

  • Built a working orbital time visualization from scratch
  • Designed a beautiful UI that blends science and art
  • Created a unique way to rethink how modern humans perceive time

What we learned

  • Advanced Canvas rendering techniques
  • Visualizing mathematical concepts through graphics
  • Creating engaging educational tools through design
  • Iterating quickly from prototype to polished interface

What's next for Celestial Clock

  • Data-driven orbit visualizations: planet color based on additional dynamic factors that users can customize, such as global light pollution, temperature anomalies, weather, and astronomical events
  • Real stellar positions and NASA data integration
  • Moon phases and seasonal orbits
  • Adding sound

Built With

Share this project:

Updates