Dunes, Then Trees

00What is on this site

Two routes, both built here and both documented on this page.

• / — the course experience: hero, the anthem player, the 24/8 tempo system, use cases, and 04 The Turn, the signature strip diagram of all eighteen holes.
• /strategy — course management: the series’ first strategy page, built around the decision clock. It sets the pattern the other courses will follow.

01The design direction

Spyglass Hill’s defining fact is structural, not decorative. The first five holes run out through seaside dunes; from the 6th the round turns inland and spends thirteen holes under Del Monte Forest pines. It is two courses stapled together, and the seam is the story — which maps exactly onto what an anthem has to do here: hold one tempo across two completely different worlds.

So the design law for this site is a separation rule. There are two support colours, and they are never allowed in the same band:

That separation is the concept, so it is enforced everywhere: the hero’s two-worlds bar, the strip diagram, the strategy page’s across-the-seam comparison. Signal Lime stays the one system signal. Accent Orange appears in exactly one role on the whole site — the seam itself, the turn inland between the 5th and the 6th. It is the only place the two worlds touch, and the only orange on the page.

The page is otherwise the 248 Brand System v2 as the rest of wave two implements it: bone editorial ground, numbered mono sections, hairline rules, condensed display type, the 24+8 ratio stripe. The bone here is a degree cooler than the Georgia and Florida sites — coastal light rather than warm southern light.

Type is the brand trio: Barlow Condensed (display, standing in for DIN Condensed), Inter Variable (text), IBM Plex Mono (data). Motion runs on the real clock: the frames ribbon and pulse ring cycle at 1½ beats back / ½ beat down, and the tempo line in the strip diagram pulses along its length while audio plays — but never changes height, because that is the argument.

0204 The Turn — the signature

One full-width SVG of the whole round: eighteen columns in card order, each drawn in the grammar of its world. The first five sit on a wind-blown dune profile with Pacific hairlines running off the left edge; the last thirteen stand inside pine corridors. Between 5 and 6 there is a hard ruled seam labelled THE TURN INLAND. Overlaid across all of it, at one unchanging height, is a lime tempo line — one tempo, two courses. That drawing is the entire argument of the page in one image.

It is also real data. Column height is the hole’s tournament yardage, and every number printed under a column comes from js/holes.js, which carries the official AT&T Pebble Beach Pro-Am card. That module self-checks on load: its eighteen yardages must sum to the independently published 3,514 out / 3,527 in / 7,041 total and its pars to 36/36/72, or it logs an error rather than letting a wrong figure ship quietly.

The dune profile, the ocean hairlines and the pine corridors are drawing grammar, not measurement — we have no verified fairway widths or contours — and the diagram says so in its own caption rather than leaving a reader to assume otherwise.

03The decision clock

The strategy page’s thesis is that course management is tempo management, so its signature redraws the 24/8 bar as a pre-shot routine: 24 units of structure (read → number → club → picture → rehearse) and 8 units of conversion (step in → go).

The scale needed care. A 24/8 swing is 24 frames back and 8 down — 1.07 seconds in total, far too short to be a routine. So the clock runs one unit per beat instead: 0.536 s per unit, 17.14 s for the whole decision, 12.86 s of structure and 4.29 s of conversion. Same ratio, one level up. The page states plainly that this scaling is a design choice rather than a measured optimum, and that what the shape actually encodes is a checkable ordering rule: if more than a quarter of your routine happens after you step in, you are deciding over the ball.

It is built as progressive enhancement. Every phase ships written out in the HTML; js/strategy.js reads its copy from that markup — so the text exists exactly once — and swaps in the interactive strip only when the reader has not asked for reduced motion. The phase strip is a real tablist with arrow-key navigation, the clock pauses itself if you scroll away, and a load-time assertion checks that the phase definitions tile units 1–32 against the markup.

04The audio, and what we did about not having it

The repo manifest carries spyglass-anthem with status: "pending" and no file behind it. The deployed audio host’s manifest does not carry the id at all, so in production the player filters it out and the queue falls through to Anthem Lab — How It Works, a real streaming track, with the whole 23-track library browsable behind it. Locally, against the bundled fallback manifest, the pending entry appears with a “sync pending” badge. Both states are correct and neither pretends otherwise.

The page says so in brand voice, immediately above the player, before you can press anything. No invented duration, no placeholder waveform, no artwork for a track that does not exist — and above all no substitute music standing in for a Spyglass anthem. When the master lands, the manifest entry flips to ready and the page needs no other change.

The player itself is the shared AnthemPlayer core used across the series, skinned dark. It passes its queue explicitly as playlistIds, because the deployed host’s manifest predates wave two and does not carry a spyglass playlist key.

05The facts rule

Atmosphere may be invented. Facts may not. Everything factual on both pages traces to docs/facts/spyglass.md, a sourced file built from the official Pebble Beach and PGA Tour material, the NCGA, the USGA and Golf Digest, with disagreements between sources recorded rather than resolved silently.

That is why the course page carries a caveat block about the numbers instead of a single confident slope figure: published championship-tee ratings span 75.4–75.5 and slopes 144–148, so the page cites 75.4 / 145 explicitly as the resort Blue-tee card figure and says the rest varies. Individual hole yardages differ by a few yards between the tournament and resort cards; the strip uses the tournament card throughout and states which card it is using.

The strategy page is where fabrication risk is highest, so it carries its own honesty box. Course-specific claims there come from the facts file — the routing split, the hole names, the documented hazards, the Tour’s own listing of the 6th, 8th and 16th among its toughest holes. Everything else is labelled method: ordinary golf reasoning, true anywhere, applied to the character this course is documented to have. There is no pin sheet, no per-hole club recommendation, no invented strokes-gained figure, and no “the play on 14 is…”. We have not played it.

The tempo claims are held to the same standard. Tour Tempo is cited as the commercial study it is; the Grober & Cholewicki paper is described as an arXiv preprint rather than peer-reviewed research; the metronome trial is given with its sample size and the fact that it had no placebo condition and has not been replicated; and the 112 BPM anchor is presented as arithmetic and a design choice, with the one genuinely supportive finding — that it sits inside the 85–120 BPM band where human tempo preference clusters — stated exactly that modestly.

06How it was built

• Hand-written static HTML/CSS/JS — no framework, no authoring build step. ES modules only.
• All internal references are relative, so the site works from a domain root or under a hub subpath unchanged.
• Every graphic is inline or generated SVG; there is no raster media anywhere on either page. The dune contours and pine strokes are generated by a seeded PRNG (seed 1966 — the opening year), so they are deterministic rather than random decoration.
• Fonts are self-hosted woff2 (latin subsets) from @fontsource packages; build.mjs restores them from npm at deploy time via the deployAssets map, so deploy uploads stay text-only.
• The ratio stripe is 32 real units — 24 graphite, 8 lime — and in the player panel it encodes actual playback progress across those units.
• Accessibility: skip link, visible focus rings, a real tablist for the clock phases, live-region status on the player, semantic landmarks, and a fully composed reduced-motion path in which the strip is drawn complete and static and the clock reads as a labelled diagram with every phase expanded.

07Iteration passes