Gnomon
A shadow you can trust, cut from arithmetic.
GNOMON is a fictional stone sundial for the 34th parallel. Its single job: show that the oldest instrument for telling time still runs — the gnomon throws a real shadow computed from your device clock, corrected by the equation of time, and you can scrub the whole day to watch it sweep and stretch across the engraved hours.
The idea
Every other clock hides its mechanism. A sundial wears it in the open: a blade set parallel to the Earth's axis, a slab cut with hour lines for one latitude, and the Sun doing the rest. We wanted a page where the mechanism is honest all the way down — no decorative shadow, but a shadow whose direction is the true solar hour and whose length is the Sun's altitude. Nothing on the page is faked; the stone is drawn, the physics is computed.
The audience is anyone who has wondered why "high noon" is rarely at twelve o'clock. The answer — the equation of time — sits quietly below the dial as a working analemma.
Palette
Every colour is quarried from the subject: sun-warmed limestone, the cool bruise of cast shadow, and a single bronze reserved for the engraved marks the way a mason reserves gilding.
The ink/line split is deliberate: bronze carries the geometry, but the darker engraved ink carries every word, so nothing small ever falls below 4.5:1 against the stone.
Type
How the shadow is built
The dial is a single tilted plane: an inline SVG laid back with transform: rotateX(56deg) under a CSS perspective, so the whole face — slab, hour lines and engraved numerals — foreshortens together into raking light. The gnomon is a second element standing broadside at the dial's centre, drawn as a stone blade with a faked extruded edge.
The physics is plain spherical astronomy, run each second:
Time. Your device clock gives local time; adding the equation of time (a Fourier approximation from the day of year) yields apparent solar time, and the hour angle H = (solar − 12) × 15°.
Direction. On a horizontal dial the shadow lies along the hour line θ = atan2(sin φ · sin H, cos H) — so the bearing is the true hour, exactly as a real dial behaves, independent of how high the Sun sits.
Length. The Sun's altitude a comes from sin a = sin φ sin δ + cos φ cos δ cos H, and the shadow runs 1/tan a long — a stub at noon, a rake across the whole slab near sunrise. Below the horizon there is no shadow, and the dial rests in twilight.
Drag (or arrow-key) scrubbing overrides the hour angle so you can run the day by hand; releasing to Now hands the shadow back to the live clock, where it keeps creeping on its own. The latitude slider re-cuts the whole face — hour lines and numerals rebuilt — because a dial is only ever correct for one parallel. No libraries; ~9 KB of vanilla JS and SVG.
Three passes
Getting the stone to read
- Set a deliberate type scale — carved Roman numerals at two sizes (noon emphasised), readout figures in Cormorant to echo the engraving rather than fight it.
- Fixed the resting state: the intro now eases the shadow from dawn to the true current hour over 3.4s, so a static thumbnail lands mid-sweep on real time, never blank.
- Pulled the bronze back to lines and marks only; moved all small copy onto the darker engraved-ink token to clear 4.5:1 on the limestone.
Making it a real instrument
- Added the working analemma with today's Sun marked, wired to the same equation-of-time function that corrects the dial — the sidebar and the shadow now share one source of truth.
- Latitude slider as a second-read reward: drag your own parallel and the hour lines splay, the daylight arc grows or shrinks, the readout follows.
- Shadow given a soft blurred body, a crisp central style-line, and a bronze marker where its tip crosses the chapter ring — so the eye is led straight to the hour it reads. Its length visibly breathes between the solstices.
Every screen, every clock
- 375px: nav section-links fold away, the dial scales to viewport width, the readout stacks to two columns — no horizontal scroll.
- Reduced-motion skips the sweep and paints a settled true-time frame; the loop throttles to once a second and pauses entirely on
document.hidden. - Full keyboard path: the dial is a real slider (arrows scrub, Home/End jump to sunrise/sunset, Enter returns to Now) with visible focus; night is handled gracefully with a "below the horizon" state instead of an empty dial.