feat(mockups): 15 voyage look 2 (cohesive look 2, paths A strip / B in world / C timeline)

Co-Authored-By: Claude Opus 5.5 <[email protected]>

docs/TODO.md

@@ -82,3 +82,6 @@ Small, specific, independently actionable. Remove only when actually done.
 - [ ] `src/mockups/07-sea-voyage/`: per-frame `Color`/`Vector3` allocations; WebGL probe context is not released.
 - [ ] `src/mockups/07-sea-voyage/`: no `webglcontextlost` handler; DPR is read once.
 - [ ] `src/mockups/07-sea-voyage/`: waypoint tag `innerHTML` is unescaped; drawer clips the "The open sea" label.
+
+- Mockup 14: the cave-mouth mask may repeat as holes during the curtain drop (Chrome, oversized mask
+  region). Fixed in 15 by shrinking the region; 14 left as is (superseded).

docs/design/002-direction-round-notes.md

@@ -250,6 +250,12 @@ mockup of the transition.
   - **C. Timeline at the bottom** — the step bar becomes a horizontal song timeline with motif threads
     under it (the original "big horizontal line"), with "you are here".
 
+- **15 is finished and committed** (`feat/sea-chart-round`, not pushed); report in
+  `docs/design/002-sea-chart-spikes/15-voyage-look2-report.md`. Preview rebuilt with 01–15.
+  Agent's recommendation (unconfirmed): C (bottom timeline) as the home for paths, with B's ribbons
+  as an optional extra in 3D. Known: B's labels stack over the cave mouth; A is dense (numbers only);
+  C takes ~220px of stage height.
+
 ## Open questions (in priority order)
 
 1. ~~Which sea-chart approach (08–11) reads best, or which mix?~~ 11's navigation + 10's style (§9).

docs/design/002-sea-chart-spikes/15-voyage-look2-report.md

@@ -0,0 +1,123 @@
+# 15 Voyage, look 2 — report
+
+Status: **done** (not committed). Built from `15-voyage-look2-brief.md`, starting from a copy of 14.
+
+## What was built
+
+`src/mockups/15-voyage-look2/` is 14's five-beat voyage with its side panel, tabs, placeholders and URL
+params (`?beat=` `?t=` `?play=` `?tab=` `?panel=0`). New params: **`?paths=a|b|c`** (default `a`) and
+**`?motif=<id>`** (starts with that motif highlighted).
+
+1. **Look 2 only.** The look toggle, look 3's palette, sail and panel code and the `Look` type are gone.
+   Look 2's colours are unchanged: teal and cream sea, cream sky, terracotta frieze, bright motif colours.
+2. **Look 3's cohesion, on look 2's colours.**
+   - **One ornament.** The frieze's meander key band, drawn as a strip between glaze rules, runs along
+     the top of the panel (18px), the caption card and the step bar or timeline (12–14px). It is the
+     same tile as in the frieze.
+   - **One type pairing.** All labels use the frieze inscriptions' style: Cormorant, capitals, wide
+     tracking. That covers the caption eyebrow, the panel eyebrow, tabs, fact labels, beat labels,
+     "Paths", strip headings, fan-work types and the B labels. Titles stay in Cormorant and body text in
+     Inter.
+   - **One accent pair.** Terracotta and glaze black replace 14's rhumb-red. Track badges and the
+     current beat are terracotta discs with black numerals, as on the frieze. Play and Back are black
+     pills. Cards have black 2px rules. The current tab has a terracotta tongue. The footer is glaze with
+     a terracotta rule. The vellum roller edge is replaced by a black rule, so the panel reads as the
+     same book as the frieze.
+   - **Fitted frieze.** The viewBox is now cropped to the band, and the band sits in a box between the
+     caption and the HUD. Two registers fill the height: a **palmette chain** above (a vase neck) and a
+     **running-wave scroll** under the ground line. The horizon sync and the curtain drop were rewritten
+     for the new box. The morph still starts on the painted ground line (`-morph.png`).
+   - **Sea.** The filled crest patches (14's "lily pads") are gone. The sea is now two flat swell bands
+     plus thin cream wave strokes on the upper swells, which thin out with distance.
+   - **Giant.** The outline hulls are half as thick (0.32 → 0.15). The giant is scaled 0.8 → 0.72, so the
+     club stays well inside the frame. The flock's outlines are halved too.
+3. **Paths out in the open.** "Paths A · B · C" sits in the HUD with a short name (In the panel / In the
+   world / Timeline). In all three modes, the current song's motifs show without any click. **One pick
+   highlights everywhere**: the pinned strip, the Paths tab (buttons and vertical strip), lyrics (the
+   matching parts light up, the others dim, and the chips are buttons), frieze threads, 3D ribbons and
+   their labels, and the timeline. The pick is kept across songs when the new song has that motif, and
+   is mirrored in `?motif=`. The Paths tab stays as the full detail view.
+   - **A. Pinned strip** (`threads.ts` `hStrip`, about 150px). It sits between the song header and the
+     tabs, whatever tab is open. All 10 songs are knots on a dashed course, numbered, with saga ticks
+     and a terracotta "here" column. A small ship with "you are here" **sails between songs as the beats
+     play**. One soft thread per motif, knotted where it plays (12's style). The motif names are buttons
+     with a from/returns tooltip.
+   - **B. Threads in the world** (`ribbons.ts`). Every song has a fixed place on the route: two behind
+     the start, Full Speed Ahead at the start, Polyphemus at the anchorage, Survive at the cave mouth,
+     and the rest beyond the island. Each motif is a flat ribbon with a black edge that rides the waves.
+     It is **solid behind the ship and dashed ahead**, with open-ring knots. Each ribbon has a floating
+     vellum label on its next knot ahead ("POLYPHEMUS · next: 7. Survive"), and labels stack when they
+     would overlap. Ribbons fade out near the camera so they don't become roads. In the cave, ribbons run
+     along the floor between the flock and the giant. In the frieze beats, the wave-scroll register
+     becomes the **thread register**: ink-edged threads in the bright colours, knotted under each painted
+     song, running off the band where the motif continues, with names on the left (clickable).
+   - **C. Timeline at the bottom.** The HUD becomes a full-width vellum timeline. Its top row holds Play,
+     the steps, the beats and the paths toggle. Below are all songs as stops with titles, saga names,
+     the "here" column, the sailing ship with "you are here", and the motif threads underneath. The
+     frieze box shrinks so the band still fits above it.
+
+Files: `main.ts` (beats, paths mode, motif pick, B labels, C timeline, fitted frieze), `panel.ts`,
+`threads.ts` (new: shared thread data and the horizontal strip), `ribbons.ts` (new: 3D ribbons),
+`scene.ts` (one palette, sea strokes, thinner outlines, ribbons and label projection), `frieze.ts`
+(cropped viewBox, chain and wave or thread registers, tighter mouth mask), `figures.ts`, `chart.ts`,
+`fanworks.ts` (copied), `style.css`.
+
+## Screenshots (1440×900, `screenshots/`)
+
+- Paths A: `15-voyage-look2-beat1.png` … `-beat5.png`
+- Beat 3 with `?motif=polyphemus`: `-paths-a.png`, `-paths-b.png`, `-paths-c.png`
+- `-beat1-paths-b.png` (frieze threads), `-beat5-paths-c.png`, `-lyrics.png` (A, `?motif=odysseus`)
+- Extra: `-beat2-paths-b.png`, `-beat4-paths-b.png`, `-beat5-paths-b.png` (cave ribbons), `-paths-tab.png`,
+  `-collapsed.png` (panel collapsed, C), `-morph.png` (1→2 at 40%), `-mid-curtain.png` (3→4 at 50%, B),
+  `-mid-cave.png` (4→5 at 60%)
+
+The credits footer is fully visible in every one.
+
+## What works
+
+- **Cohesion.** The meander strip, the capitals labels and the terracotta/black accents tie the
+  caption, HUD and panel to the frieze, and the sea and sky keep look 2's pop. It now reads as one site.
+- **The frieze fills the stage.** The band sits between the caption and the HUD with only a small
+  margin of glaze (`-beat1`, `-beat4`). The new registers look native to the vase.
+- **The sea** reads as drawn strokes, not pads. The giant is lighter and fully in frame.
+- **A** is always visible without changing the panel's job, and the sailing ship makes it feel alive.
+- **B** is the most striking: the threads literally run ahead of the ship to the cave mouth
+  (`-paths-b`). In the frieze, the thread register is a natural vase band (`-beat1-paths-b`).
+- **C** is the clearest overview. It is the user's "big horizontal line", with every song titled.
+- Checked: `bun test` (50 pass), `bun run typecheck`, and a production build to the scratchpad.
+
+## What doesn't, or is rough
+
+- **B labels on the island** can stack over the cave mouth, as Odysseus and Polyphemus both return in
+  Survive (`-paths-b`). They are readable, but the leader line of the upper label points at nothing.
+- **B ribbons behind the ship** sweep towards the camera at the lower left in beat 2. They now fade, but
+  still cross under the HUD. The far ribbons (tracks 8–10, beyond the island) are only small dashes.
+- **B's frieze labels** are small (about 12px on screen at this stage width).
+- **A at 372px is dense.** The 10 knots are about 22px apart, so the numbers carry the meaning and song
+  titles appear only in tooltips. "Warrior of the Mind" just fits the label column.
+- **C costs about 220px of stage.** The landfall and cave are framed higher, and in the cave the flock
+  sits behind the timeline (`-beat5-paths-c`).
+- The morph frame shows a large flat sun with a ring. This is 14's camera at horizon lock, not changed.
+- Play timing was not checked in a live browser (headless virtual time, same caveat as 13 and 14).
+  Desktop 1440×900 only.
+
+## Paths A / B / C, honestly
+
+**A (pinned strip)** is the safest. It is always there and compact, it keeps the stage clean, and the
+sailing ship makes "you are here" concrete. But it is small and abstract: numbers, not names, in a busy
+panel. It fixes "too hidden" without making paths feel like part of the voyage.
+
+**B (threads in the world)** is the most "EPIC". The motifs become something the ship sails along, and
+you see a theme run ahead into the Cyclops' cave before the song gets there. The frieze version is
+lovely. The costs: it depends on camera framing (labels stack, ribbons near the camera need fading),
+and it shows only the current song's motifs, with no overview of the whole voyage. It is the hardest
+to build well for every landing.
+
+**C (timeline at the bottom)** is the clearest. Every song is named, the threads are long enough to
+read as journeys, and the step controls sit with it naturally. It costs stage height, and the
+interface feels more like a tool and less like a picture.
+
+My read: **C as the home for paths, with B's ribbons as an optional flourish in the 3D** (the frieze
+thread register in particular is cheap and beautiful). A works as a fallback when the panel is the
+main surface, for example on smaller screens. Each needs one more pass: C could collapse to a slim
+course line while the 3D plays, and B labels need smarter placement.