Tommaso Stanga: ChronoViz

Tommaso Stanga

ChronoViz is an elegant desktop clock that transforms timekeeping into a minimalist visual experience while subtly integrating system performance metrics. Built with Electron, it presents time through abstract geometric animations where three shapes represent hours, minutes, and seconds, with moving lines indicating the current time. The clock dynamically responds to system activity – CPU load and memory usage influence visual properties like glow intensity and shadow effects, creating a living artwork that bridges functional timekeeping with system monitoring.

GitHub repository

Desktop demo - clock startup and time display interaction

Performance test - visual response to CPU load

Reading guide - three synchronized clocks showing seconds (left), minutes (center), and hours (right)

Visual Feature Documentation
These screenshots showcase the three main interaction states of ChronoViz, demonstrating its clean design, time display functionality, and dynamic system response.

Three interaction states - basic clock (left), time display activated (center), high CPU load with glow effects (right)

Dynamic Visual Feedback
CPU load dynamically controls glow intensity and shadow properties, creating real-time visual feedback.

function updateShadows() {
  const intensity = 0.1 + (currentCpuLoad / 100) * 0.9;
  const blur = 5 + (currentCpuLoad / 100) * 25;
  const spread = (currentCpuLoad / 100) * 10;
  
  const shadowColor = `rgba(255, 255, 255, ${0.05 + intensity * 0.2})`;
  const boxShadow = `0 0 ${blur}px ${spread}px ${shadowColor}`;

  [hoursRect, minutesRect, secondsRect].forEach(rect => {
    if (rect) rect.style.boxShadow = boxShadow;
  });
}

Staggered Animation System
This implementation creates an elegant entrance sequence by orchestrating timed animations across multiple elements. The "animateElement" function handles the smooth reveal of each component with scale and fade effects, while "startAnimationSequence" choreographs the staggered timing for a polished, sequential reveal.

function animateElement(element, delay) {
  setTimeout(() => {
    if (element) {
      element.style.opacity = '1';
      element.style.transform = 'translate(-50%, -50%) scale(1)';
    }
  }, delay);
}

function startAnimationSequence() {
  hideAllElements();
  animateElement(hoursRect, 200);
  animateElement(minutesRect, 500);
  animateElement(secondsRect, 800);
  animateElement(hoursLine, 1100);
  animateElement(minutesLine, 1400);
  animateElement(secondsLine, 1700);
  animateElement(cpuDisplay, 2000);
}