Deep Time · Field notes
How LONGCOUNT
was built.
Five concentric calendar wheels — kin, winal, tun, katun, baktun — turning at their own periods and meshing to assemble a Maya Long-Count date. Everything is derived from one running day-count, so every carry lands at its true ratio; only the clock is compressed. The last site of the Deep Time wave, and its quietest.
01The concept
The Long Count is not a calendar of months — it is a place-value odometer for history, counting days since a fixed zero and bundling them into ever-larger units. LONGCOUNT is a fiction: a single monumental instrument, jade inlay in obsidian, whose one job is to let you watch deep time carry. The kin wheel spins like a second hand; the baktun outside it barely stirs across a human lifetime. Read outward and you read down through time — the day, the generation, the age.
02Palette
Four colours, argued from carved stone. Jade is the inlay — reserved for the wheels' lines and marks. Gold-leaf is the light that catches an edge — the fiducial, the carry-flash, the completing glyph — never small text. Body copy sits in a dedicated pale jade ink so it clears 4.5:1 over the obsidian.
Text tokens: monumental glyphs in limestone #E6DCC4, body #CBDBD3, labels #93AEA3 — all lifted well clear of the accents for legibility.
03Type
Longcount
Cinzel · variable weight 400–900 · monumental glyphs
999← the carve: 520 → 880 → 640 as a place completes
9.16.4.10.18 — day 1,412,858 of 1,872,000
IBM Plex Mono · 400–600 · date, telemetry & labels
Cinzel is drawn from Roman inscriptional capitals — carved, not written — which is exactly the register a monument in stone wants. It ships as a variable font, and that axis is the point: when a place value completes, its glyph animates its weight from a thin stroke up through a heavy one and back, so the number looks chiselled deeper into the stone at the instant the wheel carries. IBM Plex Mono does the quiet instrument work — the running date in the hub, the day-count, the tiny unit labels — its tabular figures holding their column as the digits change.
04Techniques
- Inline SVGThe whole dial is one vector — five ring groups, teeth, ticks, origin notches and a fixed fiducial — built once in JavaScript. Vector means it stays razor-sharp at any size with no devicePixelRatio to manage; the viewBox does the scaling.
- One day-countA single running days value drives everything. Each wheel's rotation is −(days / revDays) · 360° and each place value is that count decomposed by the true bundle sizes (20, 18, 20, 20, 13). Because rotation and digit come from the same number, a carry can never disagree with the wheels.
- Carve & carryOn each frame the decomposition is compared to the last. Any place that changed re-carves its Cinzel glyph via the Web Animations API (animating font-weight numerically, which a variable font interpolates) and flares its wheel's cell gold for a beat.
- feTurbulence grainA static fractal-noise filter lays a faint stone tooth over the dial and a radial vignette sinks the rim into shadow — rasterised once, so it costs nothing per frame.
The signature — wheels that mesh honest time. Five stone rings turn concentrically at their real periods: the kin completes a revolution every twenty compressed days, the winal every three hundred and sixty, and the baktun once in 1,872,000 — the length of the whole great cycle. Each wheel carries a gold origin notch you can follow as it orbits; every time the kin notch passes the fiducial, a bundle has closed and the next wheel takes a visible step. That step is the carry, and the date on the panel assembles from it — the last glyph re-carving constantly, a gold flash rippling leftward through the inscription whenever a larger bundle completes. There is no key-framed animation of the numbers anywhere; the picture and the date are two readings of one advancing count.
05The three passes
Pass 1 — Craft
- Drove the count for a simulated winal and confirmed the carry: the kin glyph re-carved every ~0.5s and, at the twentieth kin, the winal glyph and its wheel stepped together — the mechanism reads true.
- First seed sat the great cycle near a place-value boundary, so several wheels looked frozen at rest. Re-seeded to 9.16.4.10.18 — about three-quarters through the cycle — so the thumbnail shows a date visibly mid-procession with a winal carry due within a second.
- Set a proper light "carve" ink (#E6DCC4) for the monumental glyphs and a pale jade body ink; the concept's dim glyph-ink was demoted to the decorative division marks only, where it belongs.
- Tuned the five ring radii and widths so the bands never touch and the fiducial plumb clears the outer teeth.
Pass 2 — Depth
- Added the variable-weight carve: a completing glyph swells from weight 520 to 880 and settles at 640, so the number looks chiselled deeper at the moment of carry — the second-read reward once you notice which wheel just turned.
- Gave each wheel a gold origin notch that orbits, and a fixed gold cell-highlight at the fiducial that flares on carry — so the abstract "carry" becomes a thing you can point at.
- Added the "wheel that just turned" readout and a compact live date in the hub, so the dial is self-explaining even without the panel beside it.
Pass 3 — Hardening
- 375 / 768 / 1440 verified in headless Chrome: no horizontal overflow, nav and wordmark fully inside the viewport; the five inscription columns compress rather than wrap.
- Reduced-motion path paints a single settled frame at the seed date — wheels placed, glyphs set, no re-carve, no rAF loop — and the cadence tag reads "held". The visibilitychange handler stops and restarts the loop, and the delta is clamped on resume so a backgrounded tab never fast-forwards the count.
- Chanel rule: removed a second decorative inner ring that competed with the fiducial circle, leaving one quiet hub boundary.
- Final copy read — Long-Count terminology (kin, winal, tun, katun, baktun; the 13-baktun great cycle) used correctly and kept abstract, describing the counting system, not appropriating its ceremony.
Designed & built by Sapience Analytics — part of the Generative Assets collection. Every visual on the site is procedural: no photographs, no video — just inline SVG, a running day-count and a variable font.