How Groove was made

Palette — argued from the artefact in daylight

Dust-sleeve, shellac, brass, oxblood

Type

Fraunces & IBM Plex Mono

Fraunces plays the 1900s record-label letterer, and its optical axis does the register shifts: opsz 144 for the display line and h1, opsz 40 for headings and the wordmark, opsz 18 for body — one family, three voices. The disc's own label lettering is Fraunces drawn glyph-by-glyph along canvas arcs. IBM Plex Mono is the archive's catalogue hand: accession numbers, the HUD, the millisecond ruler inside the glass.

Techniques — canvas 2D + WebAudio worklet, no libraries

One array is the whole record

The signature rule: the groove is the single source of truth. The recording is one Float32Array of 393,856 samples — 32 turns × 12,308 samples per revolution at 78 rpm, a groove rate of ≈16 kHz. A seeded PRNG composes it once: a hummed air in D minor (additive harmonics ≤ 5.8 kHz, weighted by oo/oh/ah vowel-formant pairs, vibrato after 350 ms), groove hiss, and one pressing tick at a fixed angle every revolution. That same array bends the spiral's radius, fills the magnifier, drives the sheen envelope, feeds the HF metre, and is posted to the audio worklet. Scratch the drawing and you scratch the tune.

• Sound from geometry. No audio object exists until the first press of the horn (the autoplay policy is a design premise, not a patch). A blob-module AudioWorklet then reads the array with linear interpolation at grooveRate / sampleRate; the main thread owns the needle and the worklet slews toward it, hard-jumping past 80 ms of error — so scrubbing, locked grooves and wear are all audible because they all live in the one array.
• Turntable geometry. The needle point is the intersection of two circles — the tone-arm's pivot arc and the current groove radius — and the platter's rotation is derived as φ = α(r) + 2πT·u, which guarantees the groove drawn under the needle is exactly the sample being played. Hold the arm still and φ keeps advancing while the radius is pinned: the same turn repeats. The locked groove was not scripted; it falls out of the equations.
• Wear is arithmetic, measured. Each pass blends every sample toward its neighbours (w ← 0.6·w + 0.4·binomial(w)). The HF metre is a 3rd-order high-pass cascade at 2 kHz run over the whole array against a pristine copy — a real measurement, not a script.
• Light that stays put. The spiral is stroked once into an offscreen canvas as 768 arc chunks whose alpha is the surviving local high-band energy, then rotated per frame; the raked-light sheen is a separate static conic-gradient annulus whose opacity scales with the measured HF ratio — the material turns, the daylight doesn't, and a worn disc visibly loses its lustre.

Honest numbers

Measured, or hedged to the literature

Iteration log

Three passes with a fine-tooth comb

• Pass 1 · craft

  Driving the page found four defects the load probe missed. The spindle hole overprinted the label's small line ("for carved v●ce") — label lines moved clear. The sleeve's accession stamp clipped off the canvas edge — moved inboard. The glass's millisecond ruler fell into the circular clip — raised, with rim-adjacent ticks culled. Worst: the HF metre used a 1st-order high-pass whose 6 dB/oct skirt leaked the voice's low-mids into the "high band" — ten passes read a dishonest −0.8 dB. Replaced with a 3rd-order cascade; the same ten passes now measure −5.3 dB, which matches what the ear hears. Also set the arm slider's aria-valuemax from the real duration.

• Pass 2 · depth

  Enriched the second read. Once passes > 0 an oxblood hairline in the glass draws the pristine array over the worn one — the cut as it was on day one (first drawn beneath the channel stroke, which hid it; moved above). Added __groove.bandLoss(fc) so the essay quotes measured numbers (−5.3 dB >2 kHz, −10.8 dB >5 kHz after ten replays) instead of adjectives. The HF metre now blinks brass when wear lands. Scroll-zoom on the glass spans 6–48 ms of groove wall.

• Pass 3 · hardening

  375 px verified by element boxes (wordmark, nav, HUD, controls inside the viewport), not just scrollWidth. Reduced motion renders a settled mid-disc frame — needle static over 1.4 s, painted pixels asserted — and if the horn is asked for, playback steps on a 400 ms clock instead of rAF. DPR capped at 2; resize debounced; rAF cancelled and the AudioContext suspended on document.hidden. Chanel rule: removed the lens's decorative glass-glint arc. Headless QA drove every behaviour — scrub (keys + drag), horn (zero gestures → no AudioContext; click → running context, worklet RMS > 0), wear (loss strictly increasing, disc redrawn, lens pixels changed) — with zero console errors on every run.