Epic-The-Musical-Timeline/docs/design/002-sea-chart-spikes/round2-brief.md

Round 2 brief: sea-chart spikes (08–11)

The question these spikes answer

How can a sea chart be as easy to navigate and read as mockup 01 (editorial scroll) and mockup 03 (transit map)?

The user's own words:

"Yeah i did think sea chart, im just not sure how we have it easy to navigate and look at as with the editorial scroll and transit map."

Read docs/design/002-direction-round-notes.md for the full context. In short, the planned app has two layers:

• A 2D sea chart that you can browse on its own as a simple display.
• A 3D sea voyage (see mockup 07) with landings, where the chart is reused as an in-3D map overlay. The Greek frieze (mockup 04) acts as the transition between them.

Before designing, look at mockups 01, 03, 04 and 07: their code is in src/mockups/, and their screenshots are in screenshots/01-*, 03-*, 04-* and 07-*. Your chart should borrow their best ideas:

• From 01: legible editorial typography, time-proportional spacing, and the motif-thread idea.
• From 03: crisp motif lines, interchanges, and the legend.
• From 07: the geography of the route and its islands.

What every spike must show

• The chart itself. Use stylised geography: islands for the sagas (Troy, the Cyclops' island, and the open sea and storm) and the ship's route. Each song is a port or waypoint on the route.
• Readable at a glance. Song titles, saga names and the passage of in-story time must be easy to see without hunting. This is the whole point of the round.
• Motifs as coloured routes or lines. Selecting a motif highlights every song and part where it plays.
• Opening a song. Use a simple detail panel with the title, story time, Odyssey link, parts with singers, motif chips, and the shared createAudioSlot and createVideoCards. Keep it lighter than in 01–07, because the navigation is what's being tested here.
• The in-3D overlay state. At ?overlay=1, show the same chart as a compact overlay sitting on a dimmed backdrop. A static image or a CSS gradient standing in for the 3D sea is fine. Mark the ship's current position ("You are here: Survive"), and make clicking a port show a "Sail here" affordance. This shows how one chart serves both uses.
• Credits. The fan notice and the credit to Jorge Rivera-Herrans must be fully visible in every state, via mountCredits(), which the stub already calls.

Rules

• This is a throwaway spike. It doesn't need to be bulletproof and no unit tests are needed. Desktop 1440×900 only.
• Edit ONLY src/mockups/<your-slug>/. Never touch shared files, and add no new dependencies.
• Fonts. Use the bundled @fontsource/cormorant-garamond and @fontsource/inter, or system stacks. No CDN.
• No three.js. These are 2D: SVG, Canvas 2D, or plain DOM.
• Unique CSS. Your style.css must not be byte-identical to any other mockup's.
• Build. Build into your own outdir, never dist/: bun build src/server.ts --target=bun --production --outdir /tmp/claude-1000/-home-user-epic-the-musical-timeline/fb650f6d-47a0-47e4-8f6b-197d02417f3b/scratchpad/r2-<slug> Then serve it with cd <outdir> && PORT=<port> bun server.js. Ports: 08→4108, 09→4109, 10→4110, 11→4111. Kill only your own server; don't use pkill patterns.
• Screenshots.
  • Command: google-chrome --headless=new --disable-gpu --hide-scrollbars --window-size=1440,900 --screenshot=<file> <url>
  • Support ?song=<id>, ?motif=<id> and ?overlay=1 so the states can be screenshotted.
  • Save screenshots/<slug>-default.png, -motif.png, -song.png and -overlay.png.
  • Look at them before reporting.
• Checks before reporting. bun test and bun run typecheck must pass.
• Committing. Don't commit; the controller commits.
• Subagents. Never spawn subagents.

Report

• Write a short report to .superpowers/brainstorm/<slug>-report.md covering:
  • what navigation idea you tried;
  • what works;
  • what doesn't;
  • your screenshot paths.
• Then reply with only: status, one line on the idea, screenshot paths, and concerns.