A clock worth leaving open
I designed and built Moment as a clock for desktop, tablet, and mobile screens. It brings together a mechanical flip display and an analog dial, with light and dark themes, selectable time zones, and a fullscreen view. I released it on October 6, 2026.
A clock makes small design decisions visible. Numeral spacing, contrast, motion, and the position of a control all contribute to an interface someone might leave open for hours. I wanted the time to remain easy to read while its supporting information stayed within reach.
Give the display a clear hierarchy
The clock occupies the center of the page, with the date above it and a compact toolbar below. Settings holds the time-zone picker and display preferences. Both clock styles share a charcoal case, warm ivory numerals, and a muted green accent.
Dieter Rams’s design principles gave me a framework for useful, understandable design. Massimo Vignelli’s treatment of typography and alignment informed the size relationships and spacing. I applied those ideas through a limited palette, consistent alignment, and a strong distinction between the time and its supporting information.
Weiser and Brown’s work on calm technology informed the way controls recede during extended use. Research on visual complexity and website first impressions also encouraged a familiar clock form with few competing elements. These were design references; I evaluated Moment’s behavior through application tests and browser checks.
Inter handles interface text, and IBM Plex Sans provides the clock numerals. Tabular figures keep the display stable as the digits change. Both fonts are served locally and remain available in the cached offline application.
Build two clock styles around shared details
Each flip digit has permanent upper and lower halves, a center seam, and small hinge details. When its value changes, temporary layers preserve the previous number while revealing the new one. The outgoing upper flap rotates for 250 milliseconds, followed by the incoming lower flap for another 250 milliseconds. Only digits whose values change animate.
I implemented the movement with CSS 3D transforms and React state, including a small settling movement before the temporary layers are removed. Users can disable animation, and Moment respects the system’s reduced-motion preference.
The analog dial is drawn with native SVG. Different tick lengths, hand proportions, and a restrained accent distinguish hours, minutes, and seconds. The hand angles account for smaller units: minutes and seconds contribute to the hour hand, while seconds contribute to the minute hand.
Keep both displays on the same clock
The date, flip digits, UTC offset, accessible time label, and analog hands all derive from one epoch timestamp. Switching styles changes the presentation while preserving the underlying time.
Time-zone formatting uses Intl.DateTimeFormat with IANA identifiers. It handles daylight-saving transitions and fractional offsets, including those used in India and Nepal. A searchable picker offers local time and a curated selection of cities.
Online, Moment samples a server time endpoint three times and selects the successful response with the shortest round-trip time. It anchors the returned timestamp at the request midpoint, then advances it with the browser’s monotonic performance.now() clock. Matching request identifiers and uncached response headers help reject stale responses.
The display schedules each update against the next second boundary. It calculates the current time again when a callback arrives, so a late callback does not become an accumulated delay. Synchronization runs in the background on startup, every five minutes while the page is visible, and after reconnection or a return to the page. Offline, a fresh device-time anchor keeps the display advancing.
Make installation and updates dependable
Moment is an installable Progressive Web App. Once its application shell is cached, it can reopen offline with local fonts, saved preferences, and a working clock.
I built a service worker that inventories the production assets and ties the offline shell to a particular release. Installation caches the required dependencies before publishing the root page. A failed installation discards the incomplete version and preserves previously installed releases.
New releases wait while existing tabs are active, or can be activated explicitly through Update app in Settings. Cache cleanup retains releases needed by open tabs, so an existing page keeps access to its own scripts and styles. Time APIs bypass the cache and retain their live response behavior.
Display style, theme, time format, seconds, animation, sound, time zone, dimming, and wake lock preferences are saved locally. Using the clock requires no account.
Support the ways people use a desk clock
One Fullscreen action opens a clock-only view and requests native browser fullscreen where available. Interaction reveals the controls briefly, while keyboard navigation and open dialogs keep them visible when needed. F toggles the view, and Escape exits it or closes a dialog.
Optional screen wake lock supports extended display use. Auto-dim darkens the display after 60 seconds without interaction. Clock updates do not reset that timer; interaction restores brightness, and open dialogs pause dimming. An optional synthesized tick uses the Web Audio API.
Responsive layouts account for portrait and landscape screens, safe-area insets, and mobile viewport changes. Controls have accessible names and visible keyboard focus. Dialogs restore focus when closed, hidden fullscreen controls become inert, and the clock exposes a time label without announcing every second.
Check the clock and its lifecycle
For the October 6, 2026 release, the project passed 49 automated tests. Coverage includes midnight and noon, date changes, daylight-saving transitions, fractional time zones, timer scheduling, stale responses, cancellation, offline recovery, service-worker installation and updates, and fullscreen controls.
Browser verification covered both themes, mobile layouts, portrait and landscape orientations, native fullscreen, and the clock-only fallback. I also checked an installed PWA updating to the new release and reopening offline after the browser’s HTTP cache was cleared. Its cached interface, local typography, saved clock style, and advancing time remained available.
Moment combines Next.js 16, React 19, TypeScript, custom CSS, native SVG, and browser platform APIs, with deployment on Vercel. The project brought together detailed interface design, browser lifecycle engineering, and tests for the transitions a continuously running application has to handle.