七十二候

How the almanac was made.

物の哀れ is a calendar of Japan's seventy-two microseasons with a single job: show the visitor which five-day season they are standing in, and make them feel it. Everything on the page — colour, weather, words — is computed from the real date.

Concept

One screen, one season.

The fictional brand is a quiet digital almanac for people who like Japan's old way of keeping time — not twelve months but seventy-two observations, each about five days long, revised for Japanese skies by the astronomer Shibukawa Shunkai in 1685.

The page's single job is presence: it reads today's date, finds the current kō, and dresses for it. The signature element is that the site is different depending on the day you visit — the accent colour is that sekki's traditional colour, the canvas weather matches the season, and a vermilion 今日 seal marks today. Arrow keys let you wander the whole year; a 72-tick strip shows where you are in it.

Palette

Washi, sumi, and twenty-four borrowed colours.

The fixed ground is washi paper and sumi ink, with one constant: the vermilion of a hanko seal. Everything else is borrowed — each of the 24 sekki carries a traditional Japanese colour (kōbai plum-blossom in early February, tsuyukusa dayflower blue in June, ginnezumi silver-grey in late November), applied as a 5% tint over the washi and as a contrast-corrected accent for labels. A sample:

和紙washi · #F5F2EB
sumi · #2B2B28
seal · #BC4130
紅梅kōbai · #F2A0A1
露草tsuyukusa · #38A1DB
ake · #CC543A
紺青konjō · #113285
銀鼠ginnezumi · #91989F

Pale accents like sakura would fail contrast as text, so a small routine walks each accent toward ink until it clears 4.6:1 against the tinted background before it is ever used for type.

Type

A hanging scroll beside an English whisper.

Warm winds arriveNoto Serif JP 200 · Cormorant Garamond italic 300

Noto Serif JP carries the Japanese, set at weight 200 in writing-mode: vertical-rl so the kō name hangs like a scroll, flanked by its number (第三十一候, converted to kanji numerals in JS) and its sekki. Cormorant Garamond answers in light italic — a translation written in the margin, not a headline. Labels are small caps with wide tracking (.2–.3em); the scale runs from a 0.72rem eyebrow to a 6.6rem kanji column, deliberately skipping middle sizes so the quiet stays quiet.

Technique

A date engine and four kinds of weather.

No libraries. The 72 kō live in a data array with approximate Gregorian start dates (Risshun on 4 February through to 鶏始乳 ending 3 February). Finding today is a sorted scan for the last kō whose start precedes the date, which handles the year wrap for free. Date ranges are derived from each entry's neighbour, so the data can't drift out of sync with itself.

The weather is a single 2D canvas tuned per season: drifting petals in spring, rising gold motes in summer, tumbling leaves in autumn, snow in winter — plus two exceptions that reward wandering: kō 26, rotten grass becomes fireflies, dims the paper toward dusk and lights pulsing fireflies, and kō 36, great rains sometimes fall, rains. DPR is capped at 2, the loop pauses when the tab hides, and prefers-reduced-motion stops it entirely. Paper grain is an inline SVG feTurbulence data-URI; transitions between seasons are two Web Animations keyframe phases with crafted cubic-beziers.

Iteration

Three passes with a fine-tooth comb.

Pass 1 — Craft

  • Fixed the about dialog closing when its own padding was clicked; outside clicks are now detected by hit-testing the dialog rect against the pointer.
  • ::selection used the raw accent, which is unreadable during the pale sakura and kamenozoki weeks — switched to the contrast-corrected deep accent.
  • Simplified a convoluted double-assignment in the summer-mote spawner and dropped an unused scroll-behavior rule on a page that never scrolls.
  • Re-read all 72 notes aloud; tightened the ones that leaned on cleverness over observation.

Pass 2 — Depth

  • Gave the seal a stamping entrance — scale-down settle with a slight overshoot — whenever you arrive back on today's kō.
  • Added the firefly dusk (kō 26) and the sudden rain (kō 36) as one-in-seventy-two surprises, and paired 乃東枯 / 乃東生 in their notes so the almanac's midsummer–midwinter symmetry is discoverable.
  • Direction-aware panel transitions: moving forward through the year drifts upward, backward drifts down, on a 340ms exit and a long 620ms settle curve.
  • Tick hover lifts its neighbours slightly (via :has()) — the year-strip behaves like a plucked string.

Pass 3 — Hardening

  • Testing in a throttled frame exposed a hang: if the browser suspends animations, the swap's onfinish never fires and the panel stays blank-faded. Both animation phases now carry setTimeout fallbacks.
  • Guarded the keyboard handler against non-Element event targets, which threw on synthetic events.
  • 375px verified: kanji scroll reflows above the English block, the seal repositions, the keyboard hint hides, no horizontal scroll at 375/768/1440.
  • Reduced-motion re-checked: the canvas never starts, panel and seal animations collapse to instant; colour changes remain, because they are state, not decoration. Removed the seal's box-shadow — one ornament too many (the Chanel rule).