A 24-hour clock that follows the sun — one hand, one rotation per day, and a background that shows the real day/night/twilight split for wherever you are, recalculated live from the actual solar position.
Live: solar.guacamayalab.com
Open source homage to Circa Solar by Ted Hunt — a critical-design project first shown in 2019, later crowdfunded and shipped to app stores, since discontinued. This is a from-scratch, web-first revival built with his permission-in-spirit and full credit; nothing here is copied from his code (closed-source and never public), only from published descriptions, screenshots, and marketing material of the original.
Instead of two hands sweeping around a 12-hour face twice a day, c. solar has a single hand that makes one full rotation every 24 hours — midnight at the top, noon at the bottom. The dial's background is a live gradient split into night, astronomical/nautical/civil twilight, and day, computed for your exact location and redrawn continuously as the sun actually moves. It's less "what time is it" and more "where am I in the day."
- One hand, one rotation. No AM/PM ambiguity — the hand's position alone tells you how far through the day you are.
- Real sunrise/sunset, not a static image — recomputed every render from your location's actual solar position, live.
- Three themes (below), switchable instantly, remembered between visits.
- Tap the dial to reveal the exact digital time and today's sunrise–sunset for a couple of seconds, then it fades back to just the hand.
- Installable PWA — add it to your phone or desktop home screen, works fully offline after the first load.
- No tracking. No analytics, no accounts, no server component at all — see Privacy below for the only two network requests it ever makes.
- Circa — closest recreation of the original: pure black/white/grayscale, no numerals, minimal ticks.
- Clear — the same dial with hour numbers (every 3 hours) and a stronger tick hierarchy, for actually reading it at a glance.
- Poetic — an atmospheric variant with amber-to-indigo twilight bands instead of grayscale.
Tap the dial in any theme to reveal the exact time and today's sunrise/sunset for a couple of seconds.
On first load, your approximate location is detected automatically from your IP address (city-level accuracy) and remembered for next time. Open the settings panel (the ⓘ button) to change it:
- Enter a place name (e.g. "Cartagena") to look it up, or
- Enter exact latitude/longitude, or
- Tap "Use precise GPS location" for your device's actual coordinates (requires browser location permission).
No build step, no dependencies. Either:
- Open
index.htmldirectly in a browser, or - Serve the folder with any static file server, e.g.
npx serve ., or - Deploy the whole folder to any static host (Cloudflare Pages, Netlify, GitHub Pages, etc.)
It works offline once loaded (service worker caches everything), and can be "installed" to a phone or desktop home screen as a PWA.
Solar position (sunrise, sunset, solar noon, and civil/nautical/astronomical
twilight) is computed client-side from the NOAA solar calculator
formulas — public-domain
astronomical equations, implemented from scratch in app.js, no external
astronomy library required. Given a date, latitude, and longitude, it derives
the sun's position and works out, in UTC, when the sun crosses the horizon
(sunrise/sunset) and the three standard twilight thresholds (civil, nautical,
astronomical — 6°/12°/18° below the horizon respectively).
Those UTC times are converted to local hours and painted onto the dial as a
conic-gradient, redrawn once a second, so the night/twilight/day bands
visibly shift with the seasons and with wherever you set your location. Near
the poles in summer, some twilight tiers can fail to occur at all ("white
nights") — the gradient handles that by collapsing the missing band into the
next one rather than glitching.
The clock hand itself just reads the system clock (hours/minutes/seconds) — only the background bands come from the solar math.
Static site, no build step:
index.html page structure — dial, theme switch, settings panel
app.js solar-position math, rendering, theming, geolocation, events
style.css all styling, incl. the three themes' CSS custom properties
sw.js service worker — offline caching
manifest.json PWA manifest
icons/ app icons
See CLAUDE.md for a more detailed tour of how the pieces fit
together and the conventions to follow when changing them.
There's no backend, no accounts, and no analytics. The app makes at most two outbound requests, both informational and neither carrying a key or any identifying data beyond your IP (which the request needs anyway to work):
- geojs.io — a one-time IP-based location lookup on first visit, to guess a starting location. Skipped on later visits (your last location is remembered locally). Skipped entirely if you set a location manually.
- open-meteo.com geocoding API — only if you type a place name into the settings panel, to resolve it to coordinates.
Your location, once set, is stored only in your browser's localStorage —
it's never sent anywhere except to the two lookups above, and never to any
server this project controls (there isn't one).
Bug fixes, accessibility improvements, new themes, and corrections to the
solar-position math are welcome. See CONTRIBUTING.md
for setup and testing notes, and CLAUDE.md for a tour of how
the code is organized.
MIT — see LICENSE. Do whatever you like with it; a credit back
to this repo and to Ted Hunt's original concept is appreciated but not
required.
- Concept, original design, and product name Circa Solar: Ted Hunt, first shown 2019 as part of a Somerset House Studios / King's College London commission, later Kickstarted.
- This implementation: built independently as an open-source tribute.