Time zones

Three cities as big clocks, home on top. Drag (or arrow-key) the ruler underneath to travel in time: every city reads the same instant in its own zone (Intl, DST-correct), digits roll, the ruler coasts and settles on a quarter hour.

Time zones is part of Pro.

Get Pro to try it live and copy its code, along with every other element in the library.

Get Pro Already Pro? Sign in

Commit skylineA commit calendar that stands up. Each day is a bar whose height is its commit count; Stand up tips the grid into perspective, drag to turn it, hover or use the arrow keys to read a day.
Wire globeWire globe: latitude rings and meridians drawn as ink strokes on a canvas, like a glass sphere. Front segments are solid, back ones show faintly through, and the fade follows each segment's depth.
Heart rateA day of heart rate as 24 pill-shaped hourly ranges. The big number is the day's average and the heart beats at that rate; hover, touch or arrow through an hour and the number, the range and the beat follow it.
Service hubOne service in the middle, the services it talks to around it. Tiny packets run along each spoke, out at a speed set by requests per minute and back at a speed set by latency; hover or focus a service and its link speeds up, the others calm down, and the line below reads that service's latency and traffic.
NetworkYou in the middle and the people you can reach on three orbits (first, second, third degree). The segmented control picks how far to look and the count rolls; hover or focus a person and the one path that connects you lights up with a dot travelling home, and a card says who they are and who introduces them.
Goal ringsThree nested goal rings for daily targets.

Time zones

Time zones is part of Pro.

Related