feat(mockups): slot 15 voyage look 2; record verdict on 14

Co-Authored-By: Claude Opus 5.5 <[email protected]>
2026-10-30 02:06:45 +01:00
parent ada8fa4f94
commit 50c54c1949
12 changed files with 115 additions and 5 deletions
@@ -1,7 +1,7 @@
 # EPIC: The Musical Timeline

 Unofficial fan site: an interactive timeline of *EPIC: The Musical* songs. Currently 7 design-direction
-mockups. Bun 1.3.14 (server, bundler, test runner), TypeScript, three.js (mockups 06/07/13/14 only), Docker.
+mockups. Bun 1.3.14 (server, bundler, test runner), TypeScript, three.js (mockups 06/07/13/14/15 only), Docker.

 `AGENTS.md` is the single source of truth for agents here. `CLAUDE.md` and `GEMINI.md` only point here.
 Deeper context on demand: `docs/ARCHITECTURE.md`, `docs/DECISIONS.md`, `docs/TODO.md`.
@@ -10,7 +10,7 @@ Deeper context on demand: `docs/ARCHITECTURE.md`, `docs/DECISIONS.md`, `docs/TOD

 Install: `bun install --frozen-lockfile`
 Dev: `bun run dev` (`PORT` env, default 3000)
-Test: `bun test` | Single file: `bun test tests/data.test.ts` | Single case: `bun test -t "registry has 14"`
+Test: `bun test` | Single file: `bun test tests/data.test.ts` | Single case: `bun test -t "registry has 15"`
 Typecheck: `bun run typecheck`
 Build: `bun run build` | Run the build: `bun run start`
 Docker: `docker build -t epic-timeline .` then `docker run --rm -p 3000:3000 epic-timeline`
@@ -58,3 +58,7 @@ frieze → cave transition, which needs the 3D sea. three.js is already a depend

 **Decision:** mockup 14 (Voyage with side panel) may use three.js; it converges 13's 3D flow with a
 persistent side panel. No new dependency.
+
+## 2026-10-30 — three.js allowed in mockup 15
+
+**Decision:** mockup 15 (Voyage, look 2) may use three.js; it iterates on 14. No new dependency.
@@ -22,7 +22,7 @@ or `AGENTS.md` Commands.
 | `bun install --frozen-lockfile` | worked (no changes) |
 | `bun test` | worked — 34 pass, 0 fail, 3 files |
 | `bun test tests/data.test.ts` | worked — 10 pass |
-| `bun test -t "registry has 14"` | worked — 1 pass |
+| `bun test -t "registry has 15"` | worked — 1 pass |
 | `bun run typecheck` | worked (`tsc --noEmit`, exit 0) |
 | `bun run build` | worked — `dist/server.js` + hashed page assets |
 | `bun run dev` (`PORT=3113`) | worked — `/` and all mockup routes 200, no-slash form 302 |
@@ -229,11 +229,32 @@ mockup of the transition.
  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.

+### 15. Verdict on 14: leaning look 2, paths too hidden
+
+> "This is actually surprisingly really good work. The design for 3 really makes the whole site feels
+> like it works together, both in terms of frieze, the side panel and the world. However, im leaning a
+> lot more towards 2. The colors pop a lot more. The paths feel a bit too hidden away now. All in all
+> though, its looking better and better"
+
+- **Look:** leaning strongly to **2 (two worlds)**: "the colors pop a lot more".
+- **What 3 does better:** it makes frieze, side panel and world feel like one site. Worth carrying
+  that cohesion into 2.
+- **Problem:** the paths (motif threads) are "a bit too hidden away" inside the Paths tab.
+- Not yet a final approval ("looking better and better").
+- *(Claude's proposal)* Mockup **15 Voyage, look 2**: look 2 only, borrowing 3's cohesion (shared
+  frieze border/ornament and type across frieze, panel and HUD), and paths brought out of the tab, with
+  a toggle of three placements:
+  - **A. Pinned strip** — a compact thread strip always visible at the top of the panel, above the tabs.
+  - **B. Threads in the world** — the current song's motifs as coloured ribbons in the 3D sea,
+    trailing the ship and running ahead to where they return.
+  - **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".
+
 ## Open questions (in priority order)

 1. ~~Which sea-chart approach (08–11) reads best, or which mix?~~ 11's navigation + 10's style (§9).
   Then A/B/C inside plates: **A threads** (§12).
-2. What is the look of the whole? Narrowed to look 2 (two worlds) or 3 (frieze-led) (§14).
+2. What is the look of the whole? Leaning strongly to look 2, with 3's cohesion (§15). Where do paths live (15's A/B/C)?
 3. How do 2D and 3D relate as products? Partly answered: in 3D a right-side panel stays open with
   info, paths, lyrics and fan works (§14). Whether the chart also stands alone is unconfirmed.
 3b. Fan works: what are they (art, covers, animatics?), where do they come from, and how are they
@@ -0,0 +1,59 @@
+# 15 Voyage, look 2 — iteration brief
+
+## Why
+
+The user's verdict on 14 (verbatim):
+
+> "This is actually surprisingly really good work. The design for 3 really makes the whole site feels
+> like it works together, both in terms of frieze, the side panel and the world. However, im leaning a
+> lot more towards 2. The colors pop a lot more. The paths feel a bit too hidden away now. All in all
+> though, its looking better and better"
+
+15 starts from a **copy of 14** (`src/mockups/14-voyage-panel/`). Keep everything that works (five
+beats, transitions, stylised toon/ink 3D, the side panel and its tabs, placeholders, URL params).
+Change:
+
+1. **Look 2 only.** Remove the look toggle and look 3 code paths. Keep look 2's colours — they "pop".
+2. **Borrow look 3's cohesion.** What made 3 feel like one site: the frieze, the panel and the world
+   share one visual language. Bring that into look 2 *without* dulling its colours, e.g.:
+   - a shared ornament: the frieze's meander/key band as the panel's top border and the HUD's edge;
+   - the same type pairing and label styles across frieze captions, panel, step bar and caption card;
+   - the panel and HUD use the frieze's terracotta + black as accents on look 2's parchment, so the
+     frieze beats and the sea beats feel like the same book;
+   - fix 14's rough spots: empty space above/below the frieze band with the panel open (fit the
+     frieze to the stage), sea patches that read like lily pads, heavy giant outlines.
+3. **Paths out in the open.** They are "too hidden away" in the Paths tab. Add a visible toggle
+   "Paths: A · B · C" (also `?paths=a|b|c`, default `a`) with three placements. In all three, the
+   current song's motifs are visible without clicking anything, and clicking a motif highlights it
+   everywhere (panel, threads, lyrics chips). Use the thread style the user chose in 12 (soft coloured
+   threads with knots where a motif plays) — see `src/mockups/12-vellum-atlas/`.
+   - **A. Pinned strip** — a compact thread strip pinned at the top of the panel, between the song
+     header and the tabs, always visible whatever tab is open: the voyage's songs as knots along a
+     line, the current song marked "you are here", one thread per motif of the current song showing
+     where it was heard before and where it returns. Keep it compact (≈120–160px tall).
+   - **B. Threads in the world** — the current song's motifs drawn in the 3D sea as coloured ribbons
+     (stylised, flat, ink-edged) trailing behind the ship and running ahead toward where they return,
+     with small floating labels. Also shown in the frieze beats as coloured threads along the frieze's
+     ground line.
+   - **C. Timeline at the bottom** — the step bar grows into a horizontal song timeline across the
+     bottom of the stage (the user's original "big horizontal line"): all songs as stops, "you are
+     here", motif threads underneath with knots. Play/step/look controls fold into it.
+   The Paths tab can stay for the full detail, but must not be the only place paths appear.
+
+## Rules
+
+- Edit ONLY `src/mockups/15-voyage-look2/` (stub files exist; index.html links credits; main.ts calls
+  `mountCredits()`; replace the stub style.css with unique content). three.js allowed. Copy from 14
+  (and 12) into your folder; don't import across mockup folders.
+- Credits footer fully visible in every state.
+- Build to `/tmp/claude-1000/-home-user-epic-the-musical-timeline/fb650f6d-47a0-47e4-8f6b-197d02417f3b/scratchpad/r3-15`,
+  serve with `cd <outdir> && PORT=4115 bun server.js`. Kill only your own server.
+- Screenshots 1440×900 with `--use-angle=swiftshader --use-gl=angle --enable-unsafe-swiftshader
+  --virtual-time-budget=6000`: `screenshots/15-voyage-look2-beat{1..5}.png` (paths a),
+  `-paths-a.png`, `-paths-b.png`, `-paths-c.png` (beat 3, and with `?motif=` highlighted if you add
+  that param), `-beat1-paths-b.png`, `-beat5-paths-c.png`, `-lyrics.png`. Look at every one and fix
+  what's off.
+- `bun test` and `bun run typecheck` must pass. Don't commit. Don't spawn subagents.
+- If you run low on budget, stop and write a pause report (done / checklist / next step) instead.
+- Report to `docs/design/002-sea-chart-spikes/15-voyage-look2-report.md`: what you built, what works,
+  what doesn't, screenshots, and an honest comparison of paths A/B/C.
@@ -27,6 +27,7 @@
      <li class="card"><a href="/mockups/12-vellum-atlas/"><span class="card__num">12</span><h2>Vellum atlas</h2><p>The atlas overview and island plates of 11, drawn in the vellum portolan style of 10.</p><p class="card__try">Try this: Open Cyclops' Island, pick a theme, and switch the plate's motif style (A/B/C).</p></a></li>
      <li class="card"><a href="/mockups/13-curtain-call/"><span class="card__num">13</span><h2>Curtain call</h2><p>The frieze curtain that carries you from the 2D story into the 3D sea and down into a landing.</p><p class="card__try">Try this: Press Play, or step through: frieze, sea, Cyclops' Island, frieze, cave. Switch the look (1/2/3).</p></a></li>
      <li class="card"><a href="/mockups/14-voyage-panel/"><span class="card__num">14</span><h2>Voyage with side panel</h2><p>The curtain-call voyage with stylised models and a side panel that stays open: about, paths, lyrics, fan works.</p><p class="card__try">Try this: Play the voyage and watch the panel follow; open Lyrics and Fan works; switch the look (2/3).</p></a></li>
+      <li class="card"><a href="/mockups/15-voyage-look2/"><span class="card__num">15</span><h2>Voyage, look 2</h2><p>14 in look 2, with the frieze, panel and world tied together, and the motif paths out in the open.</p><p class="card__try">Try this: Step through the voyage and switch where the paths live (A strip, B in the sea, C timeline).</p></a></li>
    </ul>
  </main>
  <footer data-fan-credits></footer>
@@ -0,0 +1,15 @@
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="utf-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
+  <title>Voyage, look 2 — EPIC Timeline mockup</title>
+  <link rel="stylesheet" href="../../shared/credits.css" />
+  <link rel="stylesheet" href="./style.css" />
+</head>
+<body>
+  <main id="app"></main>
+  <footer data-fan-credits></footer>
+  <script type="module" src="./main.ts"></script>
+</body>
+</html>
@@ -0,0 +1,3 @@
+import { mountCredits } from "../../shared/credits";
+
+mountCredits();
@@ -0,0 +1 @@
+body { margin: 0; --stub-15: 1; }
@@ -43,4 +43,7 @@ export const mockups: MockupInfo[] = [
  { slug: "14-voyage-panel", number: 14, name: "Voyage with side panel",
    pitch: "The curtain-call voyage with stylised models and a side panel that stays open: about, paths, lyrics, fan works.",
    tryThis: "Play the voyage and watch the panel follow; open Lyrics and Fan works; switch the look (2/3)." },
+  { slug: "15-voyage-look2", number: 15, name: "Voyage, look 2",
+    pitch: "14 in look 2, with the frieze, panel and world tied together, and the motif paths out in the open.",
+    tryThis: "Step through the voyage and switch where the paths live (A strip, B in the sea, C timeline)." },
 ];
@@ -14,6 +14,7 @@ import m10 from "./mockups/11-chart-atlas/index.html";
 import m11 from "./mockups/12-vellum-atlas/index.html";
 import m12 from "./mockups/13-curtain-call/index.html";
 import m13 from "./mockups/14-voyage-panel/index.html";
+import m14 from "./mockups/15-voyage-look2/index.html";

 export function startServer(port: number): Server<undefined> {
  return Bun.serve({
@@ -48,6 +49,8 @@ export function startServer(port: number): Server<undefined> {
      "/mockups/13-curtain-call": Response.redirect("/mockups/13-curtain-call/", 302),
      "/mockups/14-voyage-panel/": m13,
      "/mockups/14-voyage-panel": Response.redirect("/mockups/14-voyage-panel/", 302),
+      "/mockups/15-voyage-look2/": m14,
+      "/mockups/15-voyage-look2": Response.redirect("/mockups/15-voyage-look2/", 302),
    },
    development: process.env.NODE_ENV !== "production",
    fetch() {
@@ -8,7 +8,7 @@ let base: string;
 beforeAll(() => { server = startServer(0); base = `http://localhost:${server.port}`; });
 afterAll(() => server.stop(true));

-test("registry has 14 mockups", () => expect(mockups).toHaveLength(14));
+test("registry has 15 mockups", () => expect(mockups).toHaveLength(15));

 test("index links every mockup", async () => {
  const res = await fetch(base + "/");