Demos for the six new kits (length, volume, mass, temperature, astronomy, antiquity)

[the-simian]

Context

PR #38 lands six new kits lib-side (length, volume, mass, temperature, astronomy, antiquity). Per the scope decision on that PR, demo screens for each were explicitly deferred to a follow-up. This issue tracks that work.

The existing demo screens (geometry, data-storage, cooking) are the canonical shape; new demos follow the same Bench + Sections pattern (see EXTENDING.md §"Adding a kit (demo side)").

Per-kit story angles

Each kit gets one demo screen with a bench, a backdrop, and 2-4 sections. Lead angles (sourced from the oss-marketing reviewer pass on PR #38):

length

• Story: range across 30+ orders of magnitude.
• Lead section: a slider that smoothly moves from ångström to gigaparsec, with the picked unit auto-selecting from the catalog as the magnitude crosses each band (Å → nm → µm → mm → m → km → AU → ly → pc → kpc → Mpc → Gpc).
• Why this: "from ångströms to gigaparsecs" is the README hook; the demo proves the breadth visually.

volume

• Story: US/UK cup/spoon/pint disambiguation as a "did you know" wall.
• Lead section: side-by-side US 236.6 mL cup vs UK 284.1 mL cup, US 4.929 mL teaspoon vs metric 5 mL teaspoon, US tablespoon vs Australian 20 mL tablespoon. Show what 1 tsp baking powder converts to across all spoon variants and how recipe disasters happen.
• Bonus section: every cup variant the kit ships (US Customary, US Legal FDA, UK Imperial, metric 250 mL, Japanese rice gō 180.39 mL, Japanese general 200 mL, Russian stakan 250 mL, small stakan 200 mL) on a wall with each tradition labeled.

mass

• Story: regional disambiguation.
• Lead section: jin PRC (500 g) vs jin HK / Taiwan (600 g) vs Singapore catty (604.79 g) side-by-side calculator. "Order 100 jin of dried mushrooms in HK vs in Shanghai" yields a 20% difference; the demo lands the point.
• Bonus section: historical-stone variance (the wool/butcher/cheese stones live in kits/antiquity not kits/mass, but the demo can reference them for context).

temperature

• Story: the affine-conversion gotcha (values vs deltas).
• Lead section: a slider that converts °F to °C; below it, two indicators: "as an absolute value" (correct affine math) and "as a delta" (linear-only). Watch the two diverge as the slider moves. Explainer text links to issue feat(kits/temperature): add temperature kit (F, C, K, R, +) #30.
• Bonus section: cooking-tradition heat descriptors (lowHeat through highHeat) and what they correspond to in °F / °C / K. The heat descriptors live in kits/cooking so the demo cross-imports.

astronomy

• Story: the Hubble-constant calculator.
• Lead section: Enter H₀ in km/s/Mpc; get the age of the universe and the recession velocity at 1 Gpc. Pre-fill with H₀ = 70 km/s/Mpc; let the user nudge. This is the screenshot that ships to /r/programming.
• Bonus section: solar-system telemetry calculator. Pick a probe (Voyager 1, Voyager 2, New Horizons, Mars rovers); show the one-way light delay in light-minutes / light-hours.
• Bonus section: parsec / light-year / au cross-ratio table so a reader can see the canonical conversions in one place.

antiquity

• Story: classics-translation tool.
• Lead section: "Caesar marched X stadia per day; in modern miles, that's…" with the user picking the stadion variant (Attic 600-pous = 177.6 m vs Olympic 192.27 m) and getting the daily-march distance in modern statute miles + km. Pair with a map of the actual march.
• Bonus section: numismatic-mass calculator. "How much silver in 30 Tyrian shekels?" "What's the gold value of an Augustan aureus today?" Tie to surviving coin specimens.
• Bonus section: civilization picker that switches the bench's unit set to one civilization (Egyptian, Mesopotamian, Greek, Roman, Hebrew, Chinese, Japanese, English-historical). Lets a reader explore one civilization's metrology at a time without the catalog being overwhelming.

Demo-side registration ritual

Each kit needs:

1. demo/src/components/kits/<kit>/ directory with index.tsx, units.ts, <kit>.css, parts/<kit>-backdrop.tsx, and sections/<section>.tsx per section.
2. Entry in demo/src/components/kits/registry.ts (KITS tuple).
3. Theme variants in demo/src/components/theme/recipes.ts (<kit>-dark + <kit>-light mandatory).

See EXTENDING.md §"Adding a kit (demo side)" for the full ritual.

Acceptance criteria

• Each of the six kits has a navigable demo screen at #/<kit>.
• Each demo has a working bench + at least one section.
• Each demo has both dark and light themes.
• Lead sections match the story angles above.
• README's "Have you ever wanted to" hooks each link to a working demo.

Out of scope

• Finance kit and demo: tracked separately (see follow-up issue for kits/finance with decimal.js).
• Bundle-size budget revisions (the foundational/composition reorg already shipped on PR feat(api): foundational-layer refactor; ship mass + temperature kits #38).