feat(mockups): 14 voyage with side panel (stylised 3D, about/paths/lyrics/fan works, look 2/3)

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

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

@@ -223,6 +223,12 @@ mockup of the transition.
   a persistent right panel (tabs: About · Paths · Lyrics · Fan works), with a 2/3 look toggle.
   Fan works and lyrics are placeholders (no real lyrics, no real fan artists' names or links).
 
+- **14 is finished and committed** (`feat/sea-chart-round`, not pushed); report in
+  `docs/design/002-sea-chart-spikes/14-voyage-panel-report.md`. Preview rebuilt with 01–14.
+  Agent's choices: the panel stays open in all five beats (frieze beats too); the small vellum chart
+  moved into the Paths tab. Rough spots: empty space around the frieze band with the panel open, light
+  sea patches that read like lily pads, heavy outlines on the giant.
+
 ## 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/14-voyage-panel-report.md

@@ -0,0 +1,124 @@
+# 14 Voyage with side panel — report
+
+Status: **done** (not committed). Built from `14-voyage-panel-brief.md`, starting from a copy of 13.
+
+## What was built
+
+`src/mockups/14-voyage-panel/` is 13's five-beat curtain call, with the same beats, timings, Play/step
+controls, `?beat=` `?t=` `?play=`, the fade-through for jumps, and reduced motion. Three things
+changed, as the brief asked:
+
+1. **A persistent right-side panel** (420px). It is **open in every beat, including the frieze beats 1
+   and 4** (my call: it reads as one companion that stays through the whole voyage). The stage, with
+   the 3D canvas, the friezes, the caption and the control bar, fills the remaining ~1020px. So the
+   ship and island are framed in the visible area by construction, not hidden behind the panel.
+   - Song per beat: 1 The Horse and the Infant, 2 Full Speed Ahead, 3 and 4 Polyphemus, 5 Survive.
+     The panel switches at each transition's midpoint, together with the caption. The title and the
+     tab content dip and settle (180 ms); under reduced motion they swap instantly.
+   - Head: "Now playing on the voyage", track badge, title, saga · story time, and a **Hide ›** button.
+     Collapsed, it becomes a 56px slim tab (‹, the track number, "About · Paths · Lyrics · Fan works"
+     written vertically), and the stage widens. `?panel=0` starts collapsed. The grid column animates.
+   - Tabs (`?tab=about|paths|lyrics|fan`, with a proper tablist and arrow keys; arrow keys inside the
+     panel no longer step the beats):
+     - **About**: track, saga, story time, the Odyssey book/lines (linked), the fact, parts with singers,
+       `createAudioSlot` (empty state) and `createVideoCards`, restyled for the panel.
+     - **Paths**: first the motif threads. Each of this song's motifs is a button with "comes from … /
+       first heard here · returns in … (+n more)". Under them, a compact vertical **thread strip**: all
+       10 songs as rows, one soft wavy thread per motif, knotted where it plays, with the current song
+       marked "now". Clicking a motif highlights its thread and dims the others. Clicking a song row only
+       highlights that row. Below that is **the route**: the small vellum chart moved here from the
+       table, with "You are here" still moving with the ship.
+     - **Lyrics**: placeholder lines from `sample.ts`, split by part, with singer chips. Each part has a
+       left rule in its motif colour and motif tags. I left out the current-part marker: the beats carry
+       no timing, so any marker would have been made up.
+     - **Fan works**: the note "Placeholder fan works — real ones will be credited and linked to their
+       creators.", then 3–4 cards per song in two columns: type (art / animatic / cover / cosplay), a
+       stylised SVG thumbnail, a "Placeholder: …" title, "by @fan-artist", and "Credit + link to the
+       original (placeholder)". The data is local, in `fanworks.ts`.
+   - Look 2 panel: a vellum sheet with a wooden roller edge (12). Look 3 panel: glaze black, with a
+     terracotta tongue band along the top (from the frieze) and clay accents. Motif colours are
+     re-inked darker on vellum (12's `INK`) and kept light on black. Body text is 15px, with good
+     contrast in both looks.
+2. **Stylised 3D** (`scene.ts`, rewritten from 13's):
+   - Toon shading: `MeshToonMaterial` with a three-step gradient map. Ink outlines are inverted hulls
+     (smoothed normals, back faces), plus faint facet lines on the islands and the cave dome.
+   - The sky is posterised into four flat bands with a slight wave. **The sun is a small flat disc with
+     one ring, with no glare** (fixes 13's rough spot).
+   - The sea is unlit flat colour bands by wave height, with a hand-drawn-looking contour line on the
+     crest band and a small ripple term, so the crests read as drawn patches, not lit water.
+   - Island: a few-faceted bold shape in three flat bands (sand, ochre rock, olive scrub), inked, with a
+     black arched cave mouth. Ship: silhouette first, with a dark hull, a terracotta gunwale band,
+     striped sail, painted bow eyes, a curled stern post and a ram.
+   - **Polyphemus**: an extruded black-figure profile cut-out. He strides, with his club raised, a heavy
+     nose and a pointed beard. **One big painted eye** catches the firelight. His outline and incised
+     lines (belt, zigzag hem, knees, chest, brow, ear) are in clay, as in the frieze. Flat layered
+     flame shapes; woolly sheep made of outlined puffs.
+   - Look 3: black-figure ship and island with clay outlines, a clay-lit cave mouth, a glaze sea with
+     clay contour lines, and a terracotta sky.
+   - **Landfall camera**: it stays behind the ship's right shoulder the whole way and only pulls back
+     and up. The island rises ahead-left and stays there, so 13's sideways shuffle is gone
+     (`-mid-landfall.png`).
+3. **Look toggle 2 · 3 only** (`?look=2|3`, default 2). Look 1 is removed, along with its CSS.
+
+Frieze scaling: with the stage now ~1020px wide, the frieze SVGs use `meet` instead of `slice`, so the
+whole band shows (saga column to Full Speed Ahead), with the glaze surround above and below.
+`syncHorizon` uses the matching `min()` scale, so the morph still starts exactly on the painted ground
+line (`-morph.png`).
+
+Files: `main.ts` (beats, DOM choreography, params), `panel.ts` (the companion), `fanworks.ts`
+(placeholder data and thumbnails), `scene.ts` (stylised 3D), `frieze.ts`, `figures.ts` and `chart.ts`
+(copied from 13; only the frieze scaling changed), `style.css`.
+
+## Screenshots (1440×900, `screenshots/`)
+
+- Look 2, About tab: `14-voyage-panel-beat1.png` … `-beat5.png`
+- Beat 3 tabs: `-paths.png`, `-lyrics.png`, `-fan.png`
+- Look 3: `-beat2-look3.png`, `-beat5-look3.png`, `-lyrics-look3.png`
+- Collapsed panel: `-collapsed.png`
+- Extra: `-mid-landfall.png` (2→3 at 50 %), `-morph.png` (1→2 at 40 %)
+
+The credits footer is visible in every one, with the panel open or collapsed.
+
+## What works
+
+- The panel feels like a companion, not a modal. It is always there, and it changes song at the same
+  moment as the caption. The 3D has its own uncluttered frame.
+- Paths gives a lot of information at a glance: where each motif comes from and goes next, in words
+  and as threads, plus the route chart.
+- The stylised 3D is consistent with the frieze, especially the giant and look 3's black-figure
+  island. The sea pattern reads as illustration.
+- Landfall is calm, and the sun no longer glares.
+- Checked: `bun test` (48 pass), `bun run typecheck`, and a production build to the scratchpad. A
+  throwaway happy-dom check (not kept) confirmed the motif highlight, song highlight, tab callback,
+  fan cards and collapse.
+
+## What doesn't, or is rough
+
+- **Frieze beats with the panel open** show a lot of empty glaze above and below the band (`-beat1`,
+  `-beat4`). In the Troy band, the Full Speed Ahead ship touches the stage edge. A 14-specific,
+  narrower frieze layout (fewer panels) would fill the stage better.
+- The **sea crest patches** near the camera are large, flat shapes, a bit like lily pads. They are
+  stylised but could be finer.
+- The giant's beard and the flock's outlines are a little heavy at the cave's end framing. The club
+  tip nearly touches the top of the frame.
+- Beats 3 and 4 share Polyphemus, so the panel does not change between them (on purpose).
+- Play hold times were not checked in a live browser; headless virtual time does not run rAF
+  faithfully (same caveat as 13).
+- The panel width is fixed at 420px. It is tuned only for desktop 1440×900, as briefed.
+
+## Looks 2 and 3 with the panel, honestly
+
+**Look 2 (two worlds)** suits the panel best. The vellum panel sits beside a cream-and-teal poster sea
+and reads like the captain's notes next to the view. The terracotta frieze is still a clear
+"curtain". The panel has three materials around it (vellum, teal sea, clay frieze), but they belong
+together.
+
+**Look 3 (frieze-led)** is the more distinctive 3D: the black-figure island with its clay-lit mouth
+(`-lyrics-look3.png`) and the giant are the strongest images in the mockup. The dark panel matches
+it, so the whole screen feels like one painted vase. The cost: the sea is very dark, so there is
+less depth. The pale vellum route chart in Paths becomes a bright foreign object in the dark panel.
+And dark-on-dark makes the screen heavy over a long session.
+
+My read: look 2 for reading (the panel is where people spend time), and look 3 for the 3D moments.
+A hybrid (look 3's black-figure models and look 2's vellum panel) may be worth one toggle in a next
+round.