Kinetic 144-Clock Digital Display

This Kinetic 144-Clock Digital Display is a stunning example of procedural animation. Inspired by physical kinetic art installations (like those by Humans Since 1982), it uses a grid of 144 individual analog clocks to form digital numbers. React manages the “target state” of every single clock hand, while CSS transitions handle the smooth, synchronized movement, creating a mesmerizing flow of time.

Core Technique

The logic revolves around mapping a 2D array of clock states to digits.

1. Digit Mapping: Each number (0-9) is defined as a grid of 6 rows × 4 columns. The digits array contains objects like { h: 0, m: 180 }, defining the target angle for the hour and minute hands of each micro-clock to form the shape of the number.
2. Angle Normalization: To prevent hands from spinning wildly (e.g., going from 350° to 10° by spinning 340° backward), the normalizeAngle function calculates the shortest path. It ensures the hands always rotate forward or backward efficiently.
3. CSS Variables: React passes the calculated angles to CSS via inline styles (--hour-angle, --minute-angle). The CSS transition property then interpolates these values, creating the smooth animation automatically.

Customization

You can adjust the size and spacing of the entire display by modifying a single CSS variable.

.app {
  /* Controls the base size of one clock */
  --clock-size: 3vw; 
  
  /* Gap is calculated relative to size */
  --gap: calc(var(--clock-size) * 0.05); 
}

To change the speed of the transition (how fast the hands move to new positions), adjust the --dur variable in the Clock component render or CSS.

// In React component
style={{
  "--dur": initial ? 1 : 0.4 // 0.4s for normal ticks
}}

Tips

1. React 19: This snippet uses React 19 (via esm.sh). If you are using an older version (16-17), the code structure (Hooks) is fine, but you might need to adjust the import/render syntax (ReactDOM.render instead of createRoot).

2. Performance: Rendering 144 components every second is light work for modern React, but the CSS transitions are the real hero here. By animating transform: rotate(...), the browser runs these animations on the compositor thread (GPU), ensuring silky smooth 60fps performance even on mobile devices.