Digital Sunshine Clock

A round clock face with rotating soft yellow sun rays that displays dynamic times using Javascript calculations.

CC CodesCompiler 📅 April 18, 2026

#javascript#clock#date#animation

Ditch the boring digital clocks. Let’s create an animated sun clock that gently rotates and updates the physical time!

Getting The Time

Every single second, we want Javascript to fetch the system’s current time and format it nicely using AM and PM logic.

setInterval(() => {
  const d = new Date();
  let h = d.getHours();
  let m = d.getMinutes().toString().padStart(2, '0');
  let ampm = h >= 12 ? 'PM' : 'AM';
  
  h = h % 12 || 12; // Convert 24hr to 12hr
  
  document.getElementById('display').innerText = `${h}:${m} ${ampm}`;
}, 1000);

Check out the continuous rotating sunbeams in the Live Demo while the clock tracks your exact system time.