THE GUIDE
Edition C — “Chorus.”
The design direction
Chorus is the walk-up song as a page: the energy of the tunnel, the tee box, the first bar hitting. It draws on contemporary kinetic-type motion design crossed with the print-zine / gig-poster tradition — oversized wood-type shouts, marquee ribbons, sticker sheets, halftone dots — the graphic language sports and music culture have shared since fight cards and concert bills hung on the same poles. Where Signal proves the tempo claim and Dusk sets its mood, Chorus hypes it: the same verbatim copy, delivered at shout volume but rigorously composed.
- PALETTE
- Warm off-white
#F6F1E7as the poster stock, hot tangerine#FF4D00and cobalt#1D3FFFas the two shouting voices, black ink#111111for every border and letterform. Three voices plus ink, hard shadows instead of blur, halftone dot fields for print texture — loud, but tuned. - TYPE
- Archivo Black for the shouts — a grotesque built for posters; Archivo (variable, width axis loaded) for body and UI; Space Mono for tape labels, footnotes, and annotations — the typewritten voice on the cassette sleeve.
- MOTION
- Kinetic type: the hero headline’s four lines translate, rotate, and scale slightly with scroll (transform-only, rAF gated by an IntersectionObserver). Marquee ribbons of
24 FRAMES BACK · 8 DOWN · 3:1 · 112 BPMrun between sections, pause on hover, and freeze underprefers-reduced-motion. The giant 3:1 snaps together as it enters the viewport. Cassette reels in the deck spin only while audio plays. - 3D
- One strong object: a liquid-chrome golf ball (three.js) staged like a poster hero — procedural dimple bump map, reflections from a hand-painted cube map in the brand palette, tangerine and cobalt rim lights. It swells and its rim lights flare with
player.level(), so the hype object literally runs on the music.
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 chrome ball; a 2D canvas draws the segmented VU bars from the Web Audio analyser; everything else is CSS transforms and two IntersectionObservers.
- Fonts self-hosted as woff2 from open-source families (via the @fontsource packages) — Archivo Black, Archivo variable (with the width axis), Space Mono.
- One repo, six sites: each folder in the monorepo deploys as its own Vercel project. This page is the
/guideroute of theflagship-cproject. - All six players share one core (
player.js) — queue, library, Web Audio graph, MediaSession — and each site skins it with CSS custom properties. Here it wears tape-deck hardware: bordered buttons with hard shadows, a cobalt seek bar, mono tape labels.
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. Course pages cite verified facts or omit. The research fact sheets live in the repo under docs/facts/.
Iteration passes
PASS 1Structure & legibility
Full-page and close-crop screenshots at 1440 and 390 wide. Found and fixed: the masthead nav overflowed a 390px screen (the “Guide” link was pushed off the right edge) — a compact masthead tier now kicks in under 640px; the hero shout was set too large for mobile, clipping “TO THE”, “ALREADY”, and “UNDERSTANDS.” and adding ~60px of page overflow — the shout scale was retuned to 10vw with tighter tracking; the rotated 3:1 sticker sat on top of the tape-label line on small screens — it now rides the chrome ball at the hero’s foot; “sync pending” badges in the queue broke across two lines mid-badge — badges no longer wrap; the desktop 3:1 sticker was nudged up so it clips less of the headline’s “THE”.
PASS 2Verification & tightening
Re-shot both routes at both widths, plus a mid-scroll frame to confirm the kinetic headline actually rotates and scales in flight (it does — transform-only, no layout shift). Chased a remaining ~18px phantom width on mobile with an element-by-element overflow probe: it traced to the marquee’s rotation bleed and the pre-snap 3:1 numerals, all inside overflow: clip containers — verified document.documentElement.scrollWidth is exactly 390 and the page cannot be scrolled sideways, so it is a screenshot-harness measurement artifact, not a user-facing bug. Also confirmed the compact masthead, the mobile shout scale, and the badge fix landed, and removed an invalid text-stroke fallback line from the stylesheet.
PASS 3Independent review
A second review session re-shot both routes at both widths against the finished sibling editions. Verified: copy is verbatim shared/copy.md; the chrome-ball poster hero, marquee ribbons, 3:1 snap, and cassette deck read as a third genuinely distinct school next to Signal and Dusk; the deck’s pending-track badges stay honest; the kinetic type stays transform-only; and the footer’s edition and course links resolve to the canonical deploy URLs. No blocking issues found; the edition was approved for deploy.