The guide
Edition B — Dusk.
The design direction
Dusk treats 248 Anthems as cinema: a championship course at last light, scored. The school of design is contemporary cinematic-luxury web — the language of prestige title sequences and high-end resort brands — carried by editorial serif confidence. Where Signal proves the tempo claim on a lab bench, Dusk stages it at the hour a walk-up song actually plays: the eighteenth tee, the light going gold.
- Palette
- Deep pine
#0A2E23sinking into indigo night#141B3C, cut by an amber horizon#E8A33Dand a faint rose glow. Text is warm cream#F5EFE2. A film-grain overlay (SVG turbulence at 5% opacity, blend-mode overlay) keeps the gradients from feeling digital. - Type
- Fraunces (variable) for display — the optical-size axis pushed to 144 with a touch of the SOFT axis, so headlines feel engraved rather than typeset; italics carry the accents. Outfit (variable) for UI and body: light, wide-tracked small caps as the labeling voice.
- Motion
- Slow and expensive: 1.1s ease-out reveals with a letter-spacing settle, parallax between the particle sky and the hero copy, a stage glow that breathes when audio plays. Everything honors
prefers-reduced-motion— the terrain renders one static dusk frame and the dial rests at address. - 3D
- three.js, perspective camera: ~28,000 GPU-displaced points form a rolling fairway under the dusk sky, pine in the troughs, amber where crests catch the horizon light — breathing at rest, swelling with
player.level()when the anthems play. Amber fireflies drift above it on additive blending. - Instrument
- The 24/8 ratio is drawn as a thin gold dial: three quarters of the circle is the backswing (24 frames, 1½ beats), the last quarter the downswing (8 frames, ½ beat), with a hand sweeping the true 112 BPM tempo — eased back, accelerating down. Same facts as the other editions, different instrument.
How it was built
- Hand-written static HTML/CSS/JS. No framework, no build step — view source and it’s all there.
- three.js (self-hosted module build) renders the particle fairway and fireflies with custom vertex/fragment shaders; the dial and its tempo hand are SVG driven by
requestAnimationFrame; a 2D canvas draws a gold waveform through the glass deck from the Web Audio analyser. - Fonts self-hosted as woff2 from open-source families (Fraunces and Outfit, via the @fontsource-variable packages).
- One repo, six sites: each folder in the monorepo deploys as its own Vercel project. This page is the
/guideroute of theflagship-bproject. - All six players share one core (
player.js) — queue, library, Web Audio graph, MediaSession — and each site skins it with its own CSS custom properties. Here it wears glass: backdrop-blur over the dusk gradient, amber accents, serif now-playing title.
The audio pipeline
- The anthem masters are large WAVs (50–110 MB), so delivery uses the library’s compressed versions — MP3s and MP4/AAC audio — with remastered/final versions preferred where multiple exist.
- Audio streams from a shared, CORS-enabled Vercel project (
248-anthems-audio). Itsmanifest.jsonis the single source of truth for every player: track titles, courses, versions, files, and sync status. scripts/sync-audio.mjs(in the repo) matches the manifest against the Mastered Tracks library, remuxes MP4→M4A or transcodes WAV→AAC only when no compressed source exists, and deploys the host.- No placeholder or synthetic audio. A track that hasn’t reached the host yet is shown honestly with a “sync pending” badge and is skipped by playback — never faked.
The facts rule
Nothing presented as fact is invented. The tempo claims trace to Tour Tempo (Novosel, 2004), a Yale physics study (Grober & Cholewicki, 2006), and peer-reviewed metronome-training research (Sommer & Rönnqvist, 2009) — and the 112 BPM grid is presented as what it is: arithmetic. The dial’s proportions are that arithmetic drawn to scale. Course pages cite verified facts or omit; the research fact sheets live in the repo under docs/facts/.
Iteration passes
Pass 1 — the dusk wasn’t reading
First full-page screenshots (desktop 1440, mobile 390) showed the signature piece failing: the particle fairway was so faint it read as a plain gradient — point size and alpha too low, the distance fade culling most of the field. Rebuilt the fade curve, raised point size/alpha, and dropped the camera so crests silhouette against the amber horizon. Also fixed: the rose downswing arc on the dial was under-contrasted (thicker strokes, brighter rose, added half-beat ticks); the method kicker said “chapter one” while the chapters themselves are numbered I–III (renamed “in three movements”); the dial caption wrapped mid-phrase on mobile (nowrap segments); stroke-only Fraunces numerals would vanish where text-stroke isn’t supported (added a translucent amber fill fallback).
Pass 2 — balance and believability
Re-shot both routes, plus close crops of the hero and the dial. The terrain now reads as rolling ground and the dial as an instrument. Three real nits surfaced and were fixed: the dial’s hand crossed straight through the “3:1” numeral when vertical (the hand now starts outside the centre label and rotates on the same pivot); the hero’s heavy text-shadow — there to lift the headline off the particles — was applied to every h1, smudging a dark halo behind the guide’s title on its flat background (scoped to the hero only); and on 1× displays the mobile hero shows fewer particles than intended since point sizes scale with device pixel ratio — acceptable on real phones (2–3×), noted as a known trade-off.
Pass 3 — independent review
A second review session re-shot both routes at both widths against the finished sibling editions. Verified: the copy matches shared/copy.md word for word (the style test depends on it), the dusk identity reads as a genuinely different school from Signal’s Swiss instrument and Chorus’s poster energy, the dial’s 3:1 sweep matches the pendulum/frames instruments on the other editions, the glass deck’s pending-track states behave honestly, and the footer’s edition and course links resolve to the canonical deploy URLs. No blocking issues found; the edition was approved for deploy.