24/8ANTHEMS TPC LAS COLINAS — GUIDE
HOW THIS SITE WAS BUILT
G

Guide

How this site was built.

The making of the TPC Las Colinas anthem site — direction, engineering, audio, facts discipline, and the honest record of what the iteration passes changed.

01 · The design direction

Thirty-Five Sundays

The school of design is tournament-annual editorial — the print grammar of the yearbooks and box scores that professional golf kept before television kept everything: double score rules, tabular numerals, ruled callouts, agate fine print. TPC Las Colinas is a course defined by its Sundays — the PGA Tour’s Byron Nelson finished here every year from 1983 through 2017, thirty-five consecutive editions — so the site treats time as a leaderboard and reads like one of those annuals re-set in the 248 system: a modern instrument reading old box scores. Heritage without nostalgia-kitsch: no sepia, no photography, no faux paper texture — the warmth lives in the palette and the ruling, not in distressing.

The palette is the brand system tuned toward blackland-prairie Texas. Bone warms slightly to #F6F3EC (annual paper), graphite and charcoal carry ink and the dark panel, Signal Lime #CCFF00 stays the system signal — active states, the conversion 8, the center-line tick on the year river, live data. The single course-derived support color is blackland-prairie umber — #7E5F3F as ink on paper, #C2A276 as dusty bronze on charcoal — used like a second ink for heritage marks: the club chip in the hero, the 1983–2017 underline, milestone years in the river, the box-score year column. It stays under 5% of any screen and is always dusty, never sepia-toned. Accent orange appears once per screen (the hero kicker tick).

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 — with one site-specific inversion: numerals get the mono treatment at display scale. The years in the river, the hero score bug, the moment-card dates and the box-score column are all Plex Mono with tabular figures, because this site’s subject matter is the number column itself. Motion follows rhythm: idle pulses breathe at the actual system tempo (60/112 s per beat), reveals are measured wipes, and nothing bounces.

The signature section is 04 · Thirty-Five Sundays: a kinetic year river — 1983 → 2017 as a scrub-able, auto-drifting band of big mono years with quarter ticks, a center line marking “now.” Four verified Sundays surface as ruled callout cards when their year crosses the line: Crenshaw winning the first (1983), Tiger’s 263 in the Tigermania year (1997), Jason Day’s first Tour win alongside 16-year-old Spieth’s T-16 debut (2010), and the Horschel–Day farewell playoff (2017). Behind the whole panel runs a full-bleed canvas wind field — fine Perlin flow-lines drifting across the section, Texas wind through the corridor. Press play and the field finds tempo: the swirl collapses into laminar streams, the lime signal rises with the live audio level, and every beat sends a pulse down the lines. Underneath, the institutional record — layout credits, the Cottonwood Valley split, the 2008 Weibring redesign, the departure, the renaming — is set as agate fine print.


02 · How it was built

Hand-written, static, small

  • Static HTML/CSS/JS, no framework, no authoring build step. ES modules only. The wind field and year river are 2D <canvas> and DOM transforms — no WebGL, no vendor library, because nothing here needs a third dimension.
  • The wind field is a seeded 2D Perlin gradient-noise flow field. Particles are bucketed into three stroke groups per frame (bone, umber, lime) so ~1,000 segments cost three stroke() calls; trails fade via destination-out so the panel beneath stays live. The loop pauses when the section leaves the viewport or the tab hides. Alignment is a single scalar: 0 = turbulent meander (idle, breathing on the brand tempo), ~0.85 = laminar streams (audio playing), eased between — speed and lime intensity ride player.level(), the live RMS, and each onBeat callback fires a decaying pulse. While audio plays, nothing animates from fake data.
  • The year river is DOM, not canvas — 35 real text nodes in Plex Mono, moved with one translate3d, so the numerals stay crisp at any DPR and are real, selectable, accessible text. It is a role="slider" (1983–2017): drag or swipe to scrub, trackpad horizontal to nudge, arrow keys to step a year, Home/End for the first and last Sunday. Idle for four seconds and it drifts again on its own; at 2017 it holds, then rewinds like tape. Moment cards gate open as their year passes and stay surfaced once read.
  • The player is the shared 248 core (js/player.js), skinned through its custom properties (lime accent, square corners, condensed title, mono chrome) plus descendant rules. Its analyser drives the live trace above the transport; the beat callback drives both the wind pulse and the mono beat counter in the panel head.
  • The ratio stripe carries real data where possible: the one in 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 latin 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. No raster imagery anywhere on the site.
  • 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 wind field draws one static pass of integrated streamlines, the river sits still on 1997 (still fully scrub-able by hand and keyboard — that is interaction, not motion), and all four moment cards are visible from the start.

03 · The audio pipeline

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 queues two tracks — Soul’s Honor leading, Course Anthem II behind it. Because the deployed host’s manifest predates the wave-2 course playlists, the page passes playlistIds: ['las-colinas-souls-honor','las-colinas-anthem-2'] 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.


04 · The facts rule

Verified or absent

Every course number and historical claim comes from the project’s verified facts file for TPC Las Colinas, in its wording: Jay Morrish’s design with player consultants Byron Nelson and Ben Crenshaw (the opening year is stated only as “early-1980s” because sources split between 1982 and 1983); par 70 and 7,166 yards from the championship tees; the Byron Nelson hosted here every year 1983–2017; Crenshaw’s inaugural win at 273 over Sutton and Bryant; Tiger’s 1997 64-64 start and record-tying 263 with the 100,000/50,000 ticket cutoff; Jason Day’s 270 in 2010 with the Gay/Overton/Adams runner-up line and Spieth’s letter-earned T-16 debut at 4-under; Horschel over Day in the 2017 farewell playoff; the 1983–85 Las Colinas Sports Club layout credit and the mid-’90s Cottonwood Valley split; the 2008 Weibring/Wolfard redesign with Frazar and Henry consulting; the move to Trinity Forest then TPC Craig Ranch; the December 15, 2022 acquisition and renaming to The Nelson Golf and Sports Club under Arnold Palmer Golf Management; and the January 2024 Ritz-Carlton Dallas, Las Colinas rebrand after a $55 million hotel renovation.

Deliberately omitted, per the same file: whether the course remains a formally licensed TPC-network member after 2022, any 2024–25 course-specific renovation, rating/slope and green fees, and Tiger’s exact winning margin and runner-up. 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. The “wind” of the wind field is mood, not meteorology — no weather statistics appear anywhere.


05 · Iteration passes

What the passes found

Pass one (full-page desktop + mobile, plus element clips of the hero and section 04). Four real problems. (1) The gated moment cards were dimmed by fading the whole card, which let the light hairline background of the card grid bleed through — un-surfaced moments rendered as pale gray slabs on the charcoal panel instead of dark cards waiting their turn. Fix: dim the card’s contents, keep the card ground opaque. (2) The hero’s faint year-spine collided with the score bug on desktop and sat behind the kicker text on 390 px screens; it now fades out through a mask before the score bug and is removed entirely below 700 px. (3) The wind field read as scattered scratches, not wind — particles moved ~0.4 px per frame, so trails never formed lines. (4) Two proper names in the box score were set in lime; lime is the system signal, not a highlighter — they are now umber, the heritage ink.

Pass two (re-shoot, plus forced-preference and state captures). Verified the pass-one fixes, then three more changes. (1) Wind retuned again from the captures: speed up to ~55 px/s idle with slower trail fade, so the field reads as flowing streaks that visibly settle when audio aligns them. (2) Milestone tags in the river (“CRENSHAW · 273,” “WOODS · 263”…) were invisible until their year was exactly centered; they now sit faintly umber at all times so the river hints where its Sundays are. (3) A reduced-motion capture confirmed the composed static state — river parked on 1997, all four cards surfaced, one static pass of integrated streamlines — and a monorepo-root capture confirmed the site renders identically served from /tpc-las-colinas/ as from a domain root (all paths relative). 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; the live-audio behaviors (laminar alignment, beat pulses, the trace) are driven by the player’s analyser and beat callback and were exercised only in code review, not with sound.

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’s cross-links were already correct, and the fact check — including the Cottonwood Valley sister-course row in the institutional record — found no corrections needed. Mobile composition passed review with no further layout changes.