Colophon · Specimen 137-A
Building an honest decay.
HALFLIFE is a live radioactive-decay instrument for the merely curious. Its single job: make the strangest fact about unstable matter — that decay is truly random up close yet perfectly lawful in bulk — something you can sit and watch, rather than take on faith. No atom is on a schedule; the crowd, added up, keeps flawless time.
Palette
Argued from a shielded decay chamber, not chosen for taste
Type
A display voice and an instrument voice
Space GroteskDisplay · headings · wordmark
Grotesk with just enough eccentricity in its terminals to feel like lab equipment rather than a bank. Set tight and dark for the wordmark; loose and bright for the promise.
IBM Plex MonoReadouts · counters · axis
Every number is monospaced and tabular so the live counters tick in place without the layout jittering. It carries the whole instrument register: activity, elapsed half-lives, the fitted figure.
Technique
Canvas 2D · WebAudio · least squares — no libraries
- The chamber384 nuclei on a 24×16 lattice, drawn on one Canvas 2D context. Living glow comes from a single cached radial-gradient sprite blitted with
drawImageunderglobalCompositeOperation = 'lighter'— additive light, no per-frameshadowBlur, so it holds 60fps. - The decayEach frame, every surviving nucleus rolls against
p = 1 − e^(−λ·dt)with λ = ln2 / 16s. Memoryless and genuinely stochastic — the sequence is never scripted. A decay darkens the dot, fires an expanding ring, and logs a timestamp. - The fitThe signature. A running history of (time, population) is fitted by least squares on ln(N) vs t every 110ms; the slope gives back a half-life. Early it wanders on a handful of events, then locks onto 16.0s as the crowd grows — noise becoming law, live.
- The curveA second canvas draws the theoretical exponential (cyan), the measured counts (points), the live fit (amber, dashed) and a marker with a drop-line. Horizontal ½·¼·⅛ guides meet the half-life axis ticks so the halving reads as a staircase.
- The soundEach decay triggers a band-passed white-noise burst through WebAudio — a Geiger tick, higher and sharper for common events, lower for the amber ones. Off until you enable it (autoplay policy, and honesty), capped at six ticks a frame.
- At restThe sample is pre-decayed ~30% before first paint by running the sim silently, so the thumbnail catches a chamber genuinely mid-span — never a blank grid waiting to start. Reduced-motion draws one settled ~48% frame and stops.
Build log
Three passes · craft, depth, hardening
Pass 1 — Craft
Splitting the ink from the line
- The brief's decay-ink #1C7A5E computes to only ~3.6:1 on lead-chamber — below AA for body text. Kept it for spent nuclei and plotted points; added chamber-ink #CFE6DC (~8:1) for all copy, honouring the line/ink split.
- Screenshots at 375px caught the bottom-left
t½ · COMPRESSEDtag colliding with the GEIGER button. Hid the tag under 560px and trimmed the activity tag. - Set a deliberate scale — tabular readouts, a 51px hero fraction — and balanced the two-column instrument so the chamber breathes and the panel reads like a gauge.
Pass 2 — Depth
Making the law legible
- Enriched the signature curve with ½·¼·⅛ halving guides and half-life axis ticks, plus a vertical drop-line at the live marker — the exponential now reads as a staircase, one tread per half-life. A genuine second-read detail.
- Kept two more second-read rewards: a rare 1-in-40 amber decay with its own pitch, and the “LAST” survivor ringed and labelled when a single nucleus outlives all others.
- Added a restrained micro-interaction: reading cards lift on hover, specimen half-lives warm to amber — motion that rewards a mouse without competing with the chamber.
Pass 3 — Hardening
Behaving under stress
- Verified headlessly by driving the decay: a real 7s wait shows the fraction fall (69%→51%), decays climb, and the fitted t½ converge on 16.0 — the signature is provably alive, not just painted.
- Reduced-motion renders a stable ~48% frame with no rAF and no audio (asserted frame-stable across 2s). DPR capped at 2, canvas re-sizes to its container, and the loop pauses on
document.hidden. - Applied the Chanel rule — removed the marker's redundant outer ring — and confirmed one real
<h1>, visible focus rings, and zero horizontal overflow or console errors at 375 / 768 / 1440.