dial finishes

A clock widget concept on a 1080 × 1080 stage that scales to the window and loops every 15 seconds. A 600 × 600 rounded-square widget with a soft matte surface carries an off-centre dial that shows only its right arc: faint rays, sixty ticks with a glowing accent marker every five, rotated mono numbers on the rim, an hour and a minute hand with accent inlays, a long second hand and a hub, a time pill on top and a style pill at the bottom. Every 3 seconds it changes its finish: Porcelain (white matte, green markers), Graphite (near-black, green), Clay (warm sand, terracotta), Deep sea (deep blue, ice blue) and Signal (orange-red, cream). The next finish fades in over the current one while settling from a hair larger and the old one sinks slightly; the hands travel clockwise to a new time, the digits and the name blur into their new values, and the page colour, the widget's shadow and the five dots under it follow. Each finish is a token set of seventeen CSS custom properties plus its page and shadow colours. Every moment comes from one pure render(t) function (window.__render(t), ?rec), so any frame can be drawn on its own. Geist and Geist Mono, a reduced-motion still.