Crowd Becomes Cadence

The school of design is broadcast-graphics modernism: the Swiss international-typographic spine that sports television inherited — score bugs, lower thirds, telestrator geometry — applied with print-era restraint. TPC Scottsdale is the one course in golf that is experienced as a broadcast event: a purpose-built stadium venue whose 16th hole is fully enclosed by grandstands. So the site borrows the visual grammar of the coverage, not of a rave: ruled boxes, tabular numerals, mono data labels, one signal color used as a signal.

The palette is the 248 brand system tuned to Sonoran daylight. The bone is warmed to #F7F3EC (desert light on concrete), graphite and charcoal carry the ink and the dark panels, and Signal Lime #CCFF00 stays the system accent — active states, data ticks, the conversion 8. The single course-derived support color is saguaro-shadow green #41503B, a deep desiccated green used like ink: the green disc at the center of the Coliseum, the stadium chip in the hero, small marks — under 5% of any screen. Accent orange appears roughly once per screen: the kicker tick in the hero, the hole number 16 in the arena annotations, the anomalous 2001 par-4 ace in the record. Lime is never used as text on bone — it fails contrast there, so on the light field it only ever appears as a bar, a fill, an underline with a graphite keyline.

Type is the brand trio: Barlow Condensed (500/600/700) for tall uppercase display, Inter Variable for text, IBM Plex Mono for the data voice — labels, annotations, captions, always with units. Motion follows rhythm: everything that pulses does so at the actual system tempo (60/112 s per beat), reveals are measured wipes, and there is no bounce anywhere.

The signature section is 04 · The Coliseum: the enclosed 16th drawn as pure geometry — nine tiered rings of ~2,000 ticks (the crowd) around a small saguaro-green disc, with aisle gaps like real grandstand sections. Idle, the ticks jitter with low-level noise and the whole bowl breathes on the brand tempo. Press play and the jitter locks: on every beat a wavefront leaves the tee-side entrance and propagates around both sides of the bowl, its amplitude driven by the live audio RMS. The concept is the course's own story — noise becoming cadence — executed as an instrument panel, not a screensaver.

Hand-written, static, small

• Static HTML/CSS/JS, no framework, no authoring build step. ES modules only.
• The Coliseum is a 2D <canvas> — no WebGL and no vendor library. Ticks are bucketed into 22 intensity levels per frame and stroked as 22 paths instead of ~2,000, which keeps the draw loop cheap; the loop pauses when the canvas leaves the viewport.
• The player is the shared 248 core (js/player.js), skinned through its CSS custom properties (lime accent, square corners, condensed title, mono chrome) plus descendant rules. Its analyser drives the live waveform strip and the Coliseum wave amplitude; the beat callback fires the wavefronts. While audio plays, nothing on the page animates from fake data.
• The ratio stripe is real data where possible: the one inside the player panel encodes playback progress across 32 units — the last 8, the conversion, light up lime through the final quarter of the track.
• Fonts are self-hosted woff2 subsets from @fontsource (Barlow Condensed 500/600/700, Inter Variable, IBM Plex Mono 400/500), restored from npm at deploy time via build.mjs + deployAssets.
• All internal references are relative, so the site works from a domain root or a subpath unchanged.
• Reduced motion is a composed page, not a broken one: reveals resolve instantly, the stripes render fully lit, the waveform is a still hairline, and the Coliseum draws a single engraving-like frame — two frozen wavefronts leaving the entrance — under the annotation “16th — the tour’s only fully enclosed hole.”

Real masters only

Masters are large WAVs; delivery uses the library’s MP3/MP4-AAC versions (remastered/final preferred), synced by scripts/sync-audio.mjs and streamed from a shared CORS-enabled host (248-anthems-audio.vercel.app) whose manifest.json is the single source of truth. This site plays TPC Scottsdale — Anthem (Final). Because the deployed host’s manifest predates the wave-2 course playlists, the page passes playlistIds: ['scottsdale-anthem'] to the player directly, with a committed manifest-fallback.json for offline and blocked-egress environments. No placeholder or synthetic audio exists anywhere; tracks not yet synced show a “sync pending” badge.

Verified or absent

Every course number and historical claim on the page comes from the project’s verified facts file for TPC Scottsdale, in its wording: designers and opening year (Weiskopf/Morrish, 1986), par 71 and 7,261 yards with 74.7/142 from the tips, the WM Phoenix Open host role since 1987, the 2018 attendance records (719,179 week, 216,818 single day), the fully-enclosed 16th and its “roughly 20,000” capacity, Tiger Woods’s 1997 ace, Andrew Magee’s 2001 par-4 ace, Phil Mickelson’s 60 and 28-under 256 in 2013, and the 2014 Weiskopf renovation.

Deliberately omitted, per the same file: any exact 16th-hole capacity figure, the course elevation, Champions Course dates, and post-2018 attendance totals. Method claims come only from the tempo-science file — the 3:1 ratio research, metronome-training studies, and the 112 BPM grid presented as engineering arithmetic, never as a lab result. No per-track BPM claims, no score-improvement claims.

What the passes found

Pass one (desktop + mobile, full-page). The big find: every below-the-fold .reveal block was invisible in the captures — grids rendered as flat ash slabs and the whole Coliseum section was a black void. Root cause: IntersectionObserver never fires during a full-page capture (and never would for print either), so opacity-gated content could stay hidden forever. Fix: a safety composer — 1.5 s after load, anything still offscreen quietly gets its final state; the entrance animation is kept for what the viewer actually reaches. Also fixed the hero kicker wrapping with no row gap on 390 px screens.

Pass two (full-page re-shoot + element-level shots of the arena and player). Three real fixes. (1) The global section padding rule leaked into the player’s own internal <section> panels, opening ~80 px of dead air between the seek bar and the playlist — scoped the rule to main > section. (2) Close-up of the arena showed every ring’s ticks starting at the same angle, producing radial moiré columns; each ring now carries a stagger offset, and the bowl gained its whisper-quiet target-marker crosshair with cardinal ticks. (3) The reduced-motion engraving frame and the “sync pending” fallback path were verified with forced-preference shots; the arena canvas also drops to a tighter height on narrow screens instead of floating in empty charcoal. The audio host is unreachable from the build container (ERR_TUNNEL_CONNECTION_FAILED is expected there), so streaming was verified only through the fallback-manifest path.

Pass three (series editor review). A series-level editorial review after all eight course sites and the flagship were complete: full-page desktop and mobile captures re-read, every on-page number cross-checked against the project’s verified facts file, and cross-links audited across the whole family. This site was built before the serving model was finalized, and its links to the eight new course sites pointed at per-site domains that don’t exist yet — they were rewritten to the live hub paths, and again to the dedicated per-site domains (248-anthems-<slug>.vercel.app) once those projects were created. Mobile composition passed review with no further layout changes.