01 / Case Study · 2026
Across Hours
Time, visualised globally.
Across Hours is an interactive world-time application I designed and developed around a live 3D globe. It makes daylight, local time and global relationships spatial rather than abstract.
Product Design · UI/UX · Frontend · WebGL · Production
React · TypeScript · Three.js · WebGL · Vite · PWA
World Time · Solar Visualisation · Spatial Interaction
Live at acrosshours.com
02 / The problem
A clock tells you the hour. Not the relationship.
Conventional world clocks turn places into rows of offsets. They answer what time it is, but they hide where another person is on the planet, whether they are in daylight, and how their day relates to yours.
Across Hours starts from geography instead. The globe is the organising model, so daylight, distance and local time can be read together rather than as separate pieces of information.
The design challenge was to add enough context to make the utility genuinely useful without allowing search panels, saved places or time labels to overpower the spatial idea.
03 / How it works
From a place name to a spatial understanding.
The interaction stays intentionally direct: find a place, inspect its local context, then use the globe to understand the relationship.
Search a place
Type a location and the globe remains visible while place data resolves in context. Search supports the spatial model instead of replacing it with a separate screen.
Inspect local time
Selecting a place moves from search to a focused time state: local time, date, offset from the user and coordinates are readable without losing the geographic relationship.
Compare relationships
Saved places become spatial markers and a compact time list. Rotating and zooming makes distance, daylight and time difference understandable as one connected view. London, for example, can be read not only as UTC+1, but as a place six hours ahead of the user’s local context and already in a different part of the day.
04 / Visual system
The terminator is the interface.
The monochrome planet keeps attention on form and light. The moving boundary between day and night is both information and visual identity; the rest of the UI exists to support it, not decorate it.
Selected decisions
The product changed through calibration, not decoration.
Calibrated a single smooth twilight transition rather than a hard split.
Daylight reads naturally without losing the graphic clarity of the monochrome globe.
Render on demand during interaction, time updates and visual changes.
The globe can feel alive without continuously doing unnecessary graphics work.
Package core geography, place and timezone resources with the application.
Search and time resolution remain fast and resilient without a heavy server dependency.
Use approximate, local-first location context without persisting raw IP addresses.
The product can be useful immediately without turning location into invasive tracking.
05 / Engineering
Designed and engineered as one system.
The architecture follows the visual goal: keep a live 3D globe immediate and tactile without treating a focused world-time utility like an endlessly running graphics demo.
Rendering architecture
A React interface wraps a Three.js rendering core. Globe geometry, geographic layers, solar state and interaction are tuned as one visual system rather than independent widgets.
Performance model
Rendering is demand-based. Interaction wakes the scene when it needs to move; otherwise the application avoids a permanently running WebGL loop.
Offline resilience
The PWA build precaches the shell plus geography, place, timezone and identity resources, supporting an installable experience with core data packaged locally.
Verified production evidence
Measure the implementation, not just the intention.
These figures come from the production build, Lighthouse and the automated test suite captured on 28 August 2026.
Desktop Lighthouse
Performance audit · 28 Aug 2026
Mobile performance baseline
Lighthouse · 28 Aug 2026
App JS · gzip
793.3 KB uncompressed entry
Automated tests
35 test files passing
Desktop: FCP 0.5 s · LCP 0.6 s · TBT 140 ms · CLS 0
Mobile: FCP 2.1 s · LCP 2.4 s · TBT 1.97 s · CLS 0. The mobile blocking-time result is a current optimisation target rather than a number to hide.
Mobile & home screen
The experience leaves the desktop.
The same spatial time model adapts to a vertical mobile layout, while saved times can be surfaced directly on the Android home screen. These are real production states captured on 28 August 2026 rather than device mockups.
06 / Result
Across Hours was designed and shipped end to end as a production-ready, installable world-time experience. It combines live solar visualisation, responsive interaction, privacy-aware location context and demand-based rendering in a deliberately minimal interface.