Mirko Bassani: 24 hours

Mirko Bassani

“24 hours”is a linear time interface composed of 24 glyphs, each representing one hour of the day.
The active glyph blinks with a frequency that increases as the system approaches the next hour mark.

The interaction is passive: the user does not control the clock, but their activity influences its behavior.
Mouse speed is continuously tracked; higher velocity amplifies the animation of the glyphs, producing a reactive, data-driven aesthetic response.

The result is a minimal, analog-inspired digital clock that translates temporal and behavioral data into a rhythmic visual signal.

GitHub repository

██████  ██   ██     ██   ██  ██████  ██    ██ ██████  ███████ 
     ██ ██   ██     ██   ██ ██    ██ ██    ██ ██   ██ ██      
 █████  ███████     ███████ ██    ██ ██    ██ ██████  ███████ 
██           ██     ██   ██ ██    ██ ██    ██ ██   ██      ██ 
███████      ██     ██   ██  ██████   ██████  ██   ██ ███████

Blink

blink

Hover cifre HH:MM

Hover HH:MM

Blinking that accelerates as the next hour approaches

Progress within the hour:
The script calculates the number of seconds elapsed in the current hour (M*60 + S + ms/1000) and normalizes it into a value prog ∈ [0,1] by dividing by 3600.
This normalized value becomes the temporal cursor of the hour.

Variable blink period:
A linear interpolation (lerp) is performed between MAX_PERIOD and MIN_PERIOD using prog.
At the beginning of the hour, the period is long — the blink is slow — and it gradually shortens as prog → 1, causing the blink to accelerate as the next hour approaches.
A square wave based on this period toggles the opacity of the active glyph (the current hour).