23:00 · the brief
One scrubber. One state machine. The whole night obeys it.
This site was built blind against another model's version of the same concept — neither builder saw the other's work. Below: the brief as received, the one technique it demanded, and what three hostile critique passes found.
- site
- night-relay · NIGHT RELAY · the courier city's graveyard shift
- concept
- a dispatch console for a city's overnight courier relay — scrub the shift from 23:00 to 06:00 and watch jobs spawn, route, hand off and land.
- palette
- soot #0d0c0a · amber phosphor #ffb454 · dim ash #8a8072 · alert cyan #6fd3c7 (sparingly)
- type
- IBM Plex Mono — everything. a true console; weight and size do the hierarchy.
- signature
- a scrubbable state machine — one timeline scrubber (drag / arrow keys) drives the whole console: city map dots, job log stream, load graphs, handoff arcs.
- required interactions
- shift scrubber · click a job row to follow its route · pause/live toggle · console flicker easter egg at 03:33
- voice
- dispatch log laconic; timestamps carry the story
00:30 · the signature technique
132 jobs are computed once. Time is just a lookup.
Nothing on the console is keyframed. At boot, a seeded RNG deals 132 parcels across a real eight-hub graph (BFS-routed, dog-leg streets), each with a full segment schedule — wait, leg, handoff, leg, doorstep drop. Every pixel is then a pure function of one number, T, in shift-minutes. Scrub T, and the night replays; the same night, every visit, because the seed is the company's founding board number.
The core is small enough to quote whole — this is the actual function the map, log, stats and follow-card all ask:
/* the entire night, asked one question: where is job j at time T? */ function jobState(j,T){ if(T<j.sp)return{ph:'queued'}; if(T>=j.doneT)return{ph:'done'}; for(let i=0;i<j.segs.length;i++){const s=j.segs[i]; if(T>=s.t0&&T<s.t1){ if(s.type==='dwell')return{ph:i===0?'waiting':'handoff',hub:s.hub,seg:s,i}; const f=(T-s.t0)/(s.t1-s.t0); return{ph:'leg',p:posAlong(s.P,f),seg:s,i,f}; }} return{ph:'done'}; }
Because state is derived, not accumulated, the scrubber can jump from 01:56 to 04:40 and every rider, ring and log line is instantly correct. The log is a binary search over a pre-sorted event list; the load curve under the scrubber is the per-minute active-job count, computed once at boot. First frame boots at T=161.4 — the console is already mid-shift, already alive, before the visitor touches anything.
03:33 · the three passes
What the hostile art director found, and what it cost the page.
- map read as empty tarmac, not a sleeping city — added 170 seeded "sleeping windows" plus 26 waking ones that breathe with T
- huge silent right column beside the hubs headline — pinned a dispatcher's board note there, rotated 1.4°, tape included
- booking panel wasted its right half — a manifest ticket stub now sits there, dashed tear lines and all
- footer claimed a page weight the file didn't have — replaced with the measured number
- reduced-motion visitors saw LIVE while nothing played — boot now syncs the toggle honestly
- upgrade: handoff arcs — while a parcel changes hands, a dashed amber arc reaches from its last hub toward its next, exactly as the brief asked
- the map's top-right corner floated empty — a compass and 2 km scale bar now sit there, like any chart worth trusting
- the sleeping windows vanished at retina density — count and brightness raised until the city reads without shouting
- the manifest ticket wrapped its own lines badly at 216px — widened until every line tears clean
- marginalia and kickers re-checked for AA contrast over the scanline texture
- upgrade: first light — from 05:00 shift time a dawn gradient creeps over the top of the grid, exactly when the log says "first light over Ampang"
- 375px: the new compass HUD collided with the grid label — moved to the map's foot on small screens
- scripted browser run: End key scrubs to dawn, a log row click follows NR-265, Escape releases, focus rings verified on soot
- scrubber: role=slider, arrows step one minute, shift ×10, PageUp/Down thirty, Home/End jump, space toggles LIVE
- rAF halts when the tab hides; DPR capped at 2; fonts preconnected; zero console errors at all three widths
- upgrade: tap a moving courier dot on the map itself to follow it — the log stays the keyboard path, the map becomes the touch path
- build was resumed after a rate-limit; re-shot at all three widths, every run returned zero console errors before anything else changed
- the "eight hubs" section had an L-shaped dead zone on the right beside its headline — filled it with a live BOARD instrument that reads busiest-counter and per-hub load straight off T
- couriers on the night map read as plain glowing dots — gave each moving rider a directional headlight beam so they read as motorbikes threading the dark
- upgrade: the static hub cards now breathe with the shift — whichever counter is busiest at the current T lights its own "● live" badge and warms its panel, so the brochure and the console are one state machine, not two
06:00 · sign-off
Single HTML file. No images, no build step, no framework — one font family and one number called T. The constitution that governed it (real copy, one deep technique, motion on every screenful, keyboard paths, ≤90KB) is the same one every site in this collection obeys.