Build note · Generative Assets
TREMOR is a fictional recording station whose only subject is the visitor. The page has one job: write a live ink trace of your own behaviour — every move, scroll, click and keystroke — on a rolling seismograph, and read your restlessness back to you in real units. Everything is computed live from your input events on a single canvas; nothing is recorded, scripted, or stored.
Wave 4 is written in the second person: the page is inert until you drive it. A seismograph is the perfect instrument for that idea, because it does nothing on its own — it only reacts. Point it at the ground and it records earthquakes; point it at the visitor and it records them. TREMOR is that instrument turned around. The drum rolls whether or not you move, but the line stays flat until your hand gives it something to write, and it flat-lines the instant you stop. There is no content to consume here, only the loop between your motion and the ink it leaves.
Four values, argued straight from a real drum seismogram — the cream paper, the black ink of the pen, the red graticule printed under it, and the amber lamp of the write-head. This is deliberately a light palette, but it is instrument chrome, not editorial cream: a chart recorder, an ECG strip, a polygraph. The red is a graticule, functional, and the serif appears only where the machine speaks to you.
Per the collection's ink/line rule, both accents are reserved for marks and grid; every small label runs on the ink tiers (#1A1A1A / #463F33 / #6E6656) so nothing readable ever leans on the bright red or amber.
Spline Sans Mono is a humane monospace: tabular by nature, so the live amplitude, magnitude and event counters never jitter their width, and its slightly warm shapes keep the machine from feeling clinical-cold. Spectral is a serif built for text — it carries the lede and, crucially, the live diagnosis of your restlessness. The typographic tension is the whole subject: a cold instrument that keeps addressing you in a warm human voice. The one act of bravery is the eight-plus rem wordmark set in monospace at full letterspacing, so the title itself reads like a label printed on the machine.
The hard part was making the reading feel true, not decorative. Every frame the oscillator is stepped at a fixed 48 samples per second, decoupled from frame rate, so the trace looks identical at 30 or 120 fps and the timeline stays honest. The drive signal is assembled purely from real DOM events — mousemove, wheel, mousedown, keydown, plus touch — never from a timer or noise generator, so the line genuinely is you and nothing else. A rolling RMS window feeds the amplitude and the restlessness index; a stillness timer watches for the deflection to fall below threshold and, when it holds there, tips the drum into its flat-line state with the printed baseline note. Move again and it revives on the very next event. The portrait's classifier reads the same live numbers and picks a sentence — composed, attentive, restless, agitated — so the machine describes the person driving it, right now, and forgets them the moment they go.
Two things read wrong at first. The galvanometer was over-damped, so continuous cursor motion produced a smooth offset hump instead of the busy oscillating band a real drum writes; and with a sixteen-second sweep and nothing behind the pen, the drum sat as an empty grid for a minute and a half. Fixed both: added movement-derived buffeting (motion energy modulating a signed force into the oscillator) so fast motion genuinely agitates the pen while a click still rings down cleanly, shortened the sweep to 10 s/line, and pre-filled the paper with the station's faint ambient microseism so it reads as a live instrument from the first frame — the visitor's input rides boldly on top of that floor. Tightened the graticule to a printed-under-ink red at seismogram-paper weight with two-second ticks and a left-margin timestamp column, and confirmed every readout runs on the ink tiers, never the red or amber accent. Caught two layout collisions in the render: the tall lede was bottom-aligning above the masthead, and the mobile nav wrapped into the hero — fixed the head-band padding and hid the in-page anchors below 640px.
Enriched the centrepiece where it mattered: decoupled sampling to a fixed 48 Hz so the timeline is frame-rate independent, and built the portrait out to real derived units — RMS amplitude in µm/s, a session peak, a log-scale local magnitude, live dwell and longest-stillness timers, and a smoothed restlessness index driving the meter. Added the live diagnosis classifier in Spectral, and two second-read details: a calibration pulse that opens the very first line with a clean test spike, and a first-contact timestamp that records the exact second you touched the glass and never changes after. Gave the stylus an amber pivot arm and a flaring head on large deflections so a big spike visibly "alarms".
Drove the signature under headless Chrome — dispatching real mousemove, wheel, click and keydown — and asserted the sample count advances and every counter and the peak change; then held still and confirmed the trace decays to a true flat line and prints its baseline note. Hardened the loop: capped DPR at 2, rebuilt the cached graticule on debounced resize, paused the rAF loop on document.hidden and via an IntersectionObserver when the drum scrolls off-screen (with the clock re-based so no dt spike hits the oscillator). Removed one ornament — a redundant amplitude scale down the right edge that repeated the gain caption (Chanel rule). Confirmed 375 / 768 / 1440 with no horizontal overflow, visible focus rings, a canvas-failure fallback line, and a reduced-motion path that renders a stilled record and updates the numbers on input without any animation loop.