Epic-The-Musical-Timeline/docs/design/002-voyage-app.md

status

status
approved

002 — The voyage app: design record

Approved by the user on 2026-10-30 ("Yes. But listen wit hthe lyrics and watch should probably both be in the listen & lyrics tab. Threads on the sea toggle works nicely. If hide timeline is off, maybe just put it into paths or something."). Full history and verbatim quotes: 002-direction-round-notes.md. Reference mockups: 17 Voyage with real content (with 16 and 12 for details). This file is written so the app can be built without opening the mockups.

The chosen ideas

1. A 3D sea voyage is the main experience. The ship sails Odysseus' route; every song is a stop along it, in album order. Moving between songs moves the ship.
2. The Greek frieze is the curtain call between scenes. A black-figure-on-terracotta frieze band drops like a curtain at scene changes: at the start (Troy), when entering a new saga, and before a landing. The frieze's ground line becomes the 3D horizon when it lifts.
3. Landings are sublevels. At three places the voyage goes ashore through the frieze into a small 3D scene: the Cyclops' cave (Cyclops Saga), Athena's fight in God Games (Wisdom Saga), and Odysseus' Ithaca homecoming (Ithaca Saga). "Back to sea" returns to the voyage.
4. Look 2, "two worlds". The world is bright and naturalistic in colour (blue sea, warm sky, green-ochre islands); the frieze keeps terracotta and black. The UI ties them together with the frieze's meander band as the top edge of every panel/card/bar and terracotta + black accents on parchment. "The colors pop."
5. Stylised, not realistic, 3D. Toon/flat shading, ink outlines, flat colour-band water with drawn wave strokes, a small flat sun, graphic silhouettes (ship, island, the black-figure giant).
6. Readable type. Inter for all UI and labels, nothing under 13px, panel body ≥15px, minimal tracking. Cormorant Garamond only for large display titles, lyric lines and frieze inscriptions.
7. A right-side panel stays open throughout (collapsible to a tab), following the current song. Tabs:
   • About: track, saga, story time, facts, parts and singers, the Odyssey reference with a "Read the passage" reading view (Greek names: Butcher & Lang).
   • Listen & lyrics: the player (real audio, seek bar, cover art), the line-synced lyrics with the current line highlighted and click-to-seek, and Watch (YouTube link cards). The "listen with the lyrics" entry and Watch both live here.
   • Paths: each of the song's motifs with where it was heard before and where it returns, the thread detail, the chart; and the motif strip when the timeline is hidden.
   • Fan works: credited, linked fan works per song. A play button in the panel header starts the song and opens Listen & lyrics.
8. Paths are always visible. The bottom timeline (the "big horizontal line") shows the songs, saga dividers, "you are here", and motif threads underneath with knots where a motif plays. It can be hidden; then the strip lives in the Paths tab. "Threads on the sea" is a toggle that draws the current song's motifs as ink-edged ribbons on the sea (behind the ship solid, ahead dashed, with merged labels such as "Next: Survive").
9. Motifs as threads (chosen over pennants and ink-only in 12): soft coloured threads with knots, one colour per motif, the same colour everywhere (timeline, panel, ribbons, lyric chips).
10. Real content from the mounted folder (spec 003): FLAC playback with seeking, .lrc synced lyrics, the Odyssey passage (Butcher & Lang's translation, which keeps the Greek names). Never committed; the app works without it.
11. Fan project, credited. The fan notice and the thanks to Jorge Rivera-Herrans on every screen.

Deselected, and why

• 02 Vertical story, 05 Score/waveform, 06 Constellation: "too uninteresting".
• 08 Sea chart + log line, 09 Schematic sea chart: "doesnt work too well".
• 11's metro-map lines inside plates: "doesnt hit as well". 11's navigation survives as the idea of places opening into sublevels; 10's vellum style survives in the chart.
• Pennants (B) and ink-only (C) motif treatments in 12: threads chosen "definetly".
• Look 1 (vellum throughout): decent but the UI of 2 and 3 looked better.
• Look 3 (frieze-led): made the site feel unified, but "im leaning a lot more towards 2. The colors pop a lot more." Its cohesion (frieze accents on menus) was carried into look 2.
• 15's inscription-style labels (small wide-tracked Cormorant capitals): "very hard to read".
• Choosing one paths placement: A/B/C "all have their strengths", so they were combined.
• Simulated playback and placeholder lyrics: replaced by the real content.