diff --git a/docs/design/002-direction-round-notes.md b/docs/design/002-direction-round-notes.md new file mode 100644 index 0000000..f966316 --- /dev/null +++ b/docs/design/002-direction-round-notes.md @@ -0,0 +1,104 @@ +--- +status: in-progress (brainstorming, round 2) +--- + +# 002 — Direction round notes (after the 7 mockups) + +A running record of the user's words and the decisions they lead to, kept so that nothing gets lost +between sessions. **User quotes are verbatim.** Lines marked *(Claude's proposal)* are suggestions +the user has not confirmed yet. Newest entries go at the bottom. + +Context: spec `docs/specs/001-timeline-mockups.md` produced mockups 01–07 (merged to `main`, +2026-10-23). This round picks the direction for the real app. + +## 2026-10-23 + +### 1. Mockups that were dropped + +> "First off, a lot of good stuff. Lets start with the easy ones. Vertical story, constellation and +> score/waveform is too uninteresting." + +- **Dropped:** 02 Vertical story, 05 Score/waveform, 06 Constellation. +- **Still in play:** 01 Editorial scroll, 03 Transit map, 04 Greek frieze, 07 Sea voyage. +- The dropped mockups' code stays in place until the direction is settled. + +### 2. A 2D version alongside a 3D version + +> "They are all very nice. I see both a 2D version, and an accompanying 3D version, The editorial +> scroll combined with the transit map in some way could be nice fo9r a 2D layout / map, while using +> the sea voyage in 3d together with the greek frieze in some way could be nice as well. The sea +> voyage is nice to start off, buth could then in the different islands and places have sublevels, +> eg. landings where we see the cave of the cyclops, we see athenas fight in god games, and odysseus +> ithica when he comes home." + +- **2D:** editorial scroll combined with transit map, as a layout/map. +- **3D:** sea voyage combined with the Greek frieze. +- **The 3D starts on the sea voyage.** +- **Sublevels at islands and places ("landings"), with the user's examples:** + - the Cyclops' cave; + - Athena's fight in God Games; + - Odysseus coming home to Ithaca. +- **Implication:** the sample data must grow beyond Troy, Cyclops and Storm (Wisdom saga / God Games, + Ithaca saga) so that those landings have content. + +### 3. The frieze as the transition between 2D and 3D + +> "Hmm. Maybe we can have the freize's look be the one that tries the different stuff together, like +> a curtain call from the first section to go over in the second, where it starts off 2d with the +> freize, then slowly morphs into the sea voytage, then when he lands on cyclops islands, it goes +> back to the freize, then into the cave? For the looks, im not sure. On one hand I want the 2D map to +> be a browsable and perhaps simple display, yet I also want it to be a kind of map in the 3D one." + +- **The frieze is the connecting device**, "like a curtain call" between sections. +- **The flow:** + 1. The experience starts in 2D, on the frieze. + 2. The frieze morphs into the 3D sea voyage. + 3. At a landing (e.g. the Cyclops' island) it returns to the frieze. + 4. From the frieze it goes into the 3D sublevel (the cave). +- **Looks:** undecided. +- **The 2D map has two roles:** + - a browsable, perhaps simple display; + - a map used *inside* the 3D experience. + +### 4. The sea chart + +*(Claude's proposal)* A single map serves both uses. On its own it is the browsable 2D page. Inside +3D it is the same chart, unrolled as an overlay on the captain's table. Clicking a port sails or +jumps there. + +> "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." + +- **Agreed:** the 2D map is a sea chart. +- **Open problem:** keeping the chart as easy to navigate and read as 01 and 03. + +### 5. Sea-chart mockup round + +> "Hmm sure. Lets do 3 or 4 mockups and see." + +- **Four throwaway spikes on branch `feat/sea-chart-round`:** + - 08 Sea chart + log line + - 09 Schematic sea chart + - 10 Unrolling chart + - 11 Atlas with insets +- **Each spike also shows the chart as the compact in-3D overlay.** +- **Spike rules:** no formal review loop; the user picks from what they see. + +### 6. Process requests + +> "Remember to write my words and thoughts down, such that if context is autocompacted, we dont lose +> anything" + +This file exists because of that request. It gets updated after every user message in this round. + +## Open questions (in priority order) + +1. Which sea-chart approach (08–11) reads best, or which mix? +2. What is the look of the whole: frieze-led (terracotta and black), chart-led (parchment), or + something in between? The user is "not sure" yet. +3. How do 2D and 3D relate as products? Is the 3D the main experience with the chart inside it, while + the chart also stands alone? This is unconfirmed. +4. Which landings are in scope for the first build? The user's examples are the Cyclops' cave, God + Games and Ithaca. +5. Earlier, still open from 001: lyrics copyright (deferred), branching policy, linter, and what + happens to dropped mockups. diff --git a/src/index.html b/src/index.html index 8f835e3..b8b8014 100644 --- a/src/index.html +++ b/src/index.html @@ -19,6 +19,11 @@
  • 05

    Score / waveform

    The line is a music staff or waveform; song parts are segments and motifs are recurring marks.

    Try this: Look at song parts as segments and follow motif marks as they recur.

  • 06

    Constellation (3D)

    Songs are stars along a path through space, joined by motif constellation lines (three.js).

    Try this: Fly the camera through, hover a star, and open a song.

  • 07

    Sea voyage (3D)

    A ship crosses a 3D sea past saga islands while the camera follows the route (three.js).

    Try this: Watch the ship sail the route, spot the saga islands, and open a song.

    • +

  • Round 2: sea charts

    Ways to make the sea chart as easy to browse as the editorial scroll and transit map.

    • +
  • 08

    Sea chart + log line

    A navigator's chart for place, with a synced editorial log line beneath it for time; motifs as coloured sea routes.

    Try this: Pick a motif, scrub the log line, and watch the chart follow.

    • +
  • 09

    Schematic sea chart

    The voyage straightened into a transit-style diagram laid over a faint chart; motif lines run alongside the ship's course.

    Try this: Follow a motif line from port to port and open one.

    • +
  • 10

    Unrolling chart

    An editorial horizontal scroll whose ground is a long chart unrolling as you pan; motif threads trail beneath the route.

    Try this: Pan sideways and watch the ship and coastline move with you.

    • +
  • 11

    Atlas with insets

    An overview chart of the whole sea; each saga island opens an inset chart with its songs as ports.

    Try this: Open an island's inset, then a song, then zoom back out.

    • diff --git a/src/mockups/08-chart-logline/index.html b/src/mockups/08-chart-logline/index.html new file mode 100644 index 0000000..76b14af --- /dev/null +++ b/src/mockups/08-chart-logline/index.html @@ -0,0 +1,15 @@ + + + + + + Sea chart + log line — EPIC Timeline mockup + + + + +
    + + + + diff --git a/src/mockups/08-chart-logline/main.ts b/src/mockups/08-chart-logline/main.ts new file mode 100644 index 0000000..150344a --- /dev/null +++ b/src/mockups/08-chart-logline/main.ts @@ -0,0 +1,4 @@ +import { mountCredits } from "../../shared/credits"; + +mountCredits(); +document.getElementById("app")!.textContent = "Sea chart + log line (stub)"; diff --git a/src/mockups/08-chart-logline/style.css b/src/mockups/08-chart-logline/style.css new file mode 100644 index 0000000..2e2a34c --- /dev/null +++ b/src/mockups/08-chart-logline/style.css @@ -0,0 +1,2 @@ +/* 08-chart-logline stub */ +body { margin: 0; } diff --git a/src/mockups/09-chart-transit/index.html b/src/mockups/09-chart-transit/index.html new file mode 100644 index 0000000..62a2e2a --- /dev/null +++ b/src/mockups/09-chart-transit/index.html @@ -0,0 +1,15 @@ + + + + + + Schematic sea chart — EPIC Timeline mockup + + + + +
    + + + + diff --git a/src/mockups/09-chart-transit/main.ts b/src/mockups/09-chart-transit/main.ts new file mode 100644 index 0000000..7ec053d --- /dev/null +++ b/src/mockups/09-chart-transit/main.ts @@ -0,0 +1,4 @@ +import { mountCredits } from "../../shared/credits"; + +mountCredits(); +document.getElementById("app")!.textContent = "Schematic sea chart (stub)"; diff --git a/src/mockups/09-chart-transit/style.css b/src/mockups/09-chart-transit/style.css new file mode 100644 index 0000000..65f3811 --- /dev/null +++ b/src/mockups/09-chart-transit/style.css @@ -0,0 +1,2 @@ +/* 09-chart-transit stub */ +body { margin: 0; } diff --git a/src/mockups/10-chart-scroll/index.html b/src/mockups/10-chart-scroll/index.html new file mode 100644 index 0000000..4d5d220 --- /dev/null +++ b/src/mockups/10-chart-scroll/index.html @@ -0,0 +1,15 @@ + + + + + + Unrolling chart — EPIC Timeline mockup + + + + +
    + + + + diff --git a/src/mockups/10-chart-scroll/main.ts b/src/mockups/10-chart-scroll/main.ts new file mode 100644 index 0000000..4c96b2b --- /dev/null +++ b/src/mockups/10-chart-scroll/main.ts @@ -0,0 +1,4 @@ +import { mountCredits } from "../../shared/credits"; + +mountCredits(); +document.getElementById("app")!.textContent = "Unrolling chart (stub)"; diff --git a/src/mockups/10-chart-scroll/style.css b/src/mockups/10-chart-scroll/style.css new file mode 100644 index 0000000..b2f4a3d --- /dev/null +++ b/src/mockups/10-chart-scroll/style.css @@ -0,0 +1,2 @@ +/* 10-chart-scroll stub */ +body { margin: 0; } diff --git a/src/mockups/11-chart-atlas/index.html b/src/mockups/11-chart-atlas/index.html new file mode 100644 index 0000000..c803607 --- /dev/null +++ b/src/mockups/11-chart-atlas/index.html @@ -0,0 +1,15 @@ + + + + + + Atlas with insets — EPIC Timeline mockup + + + + +
    + + + + diff --git a/src/mockups/11-chart-atlas/main.ts b/src/mockups/11-chart-atlas/main.ts new file mode 100644 index 0000000..ce7e6a8 --- /dev/null +++ b/src/mockups/11-chart-atlas/main.ts @@ -0,0 +1,4 @@ +import { mountCredits } from "../../shared/credits"; + +mountCredits(); +document.getElementById("app")!.textContent = "Atlas with insets (stub)"; diff --git a/src/mockups/11-chart-atlas/style.css b/src/mockups/11-chart-atlas/style.css new file mode 100644 index 0000000..4208418 --- /dev/null +++ b/src/mockups/11-chart-atlas/style.css @@ -0,0 +1,2 @@ +/* 11-chart-atlas stub */ +body { margin: 0; } diff --git a/src/mockups/registry.ts b/src/mockups/registry.ts index a07af4f..ddd0789 100644 --- a/src/mockups/registry.ts +++ b/src/mockups/registry.ts @@ -22,4 +22,16 @@ export const mockups: MockupInfo[] = [ { slug: "07-sea-voyage", number: 7, name: "Sea voyage (3D)", pitch: "A ship crosses a 3D sea past saga islands while the camera follows the route (three.js).", tryThis: "Watch the ship sail the route, spot the saga islands, and open a song." }, + { slug: "08-chart-logline", number: 8, name: "Sea chart + log line", + pitch: "A navigator's chart for place, with a synced editorial log line beneath it for time; motifs as coloured sea routes.", + tryThis: "Pick a motif, scrub the log line, and watch the chart follow." }, + { slug: "09-chart-transit", number: 9, name: "Schematic sea chart", + pitch: "The voyage straightened into a transit-style diagram laid over a faint chart; motif lines run alongside the ship's course.", + tryThis: "Follow a motif line from port to port and open one." }, + { slug: "10-chart-scroll", number: 10, name: "Unrolling chart", + pitch: "An editorial horizontal scroll whose ground is a long chart unrolling as you pan; motif threads trail beneath the route.", + tryThis: "Pan sideways and watch the ship and coastline move with you." }, + { slug: "11-chart-atlas", number: 11, name: "Atlas with insets", + pitch: "An overview chart of the whole sea; each saga island opens an inset chart with its songs as ports.", + tryThis: "Open an island's inset, then a song, then zoom back out." }, ]; diff --git a/src/server.ts b/src/server.ts index 170072c..5efd2c9 100644 --- a/src/server.ts +++ b/src/server.ts @@ -7,6 +7,10 @@ import m3 from "./mockups/04-greek-frieze/index.html"; import m4 from "./mockups/05-score/index.html"; import m5 from "./mockups/06-constellation/index.html"; import m6 from "./mockups/07-sea-voyage/index.html"; +import m7 from "./mockups/08-chart-logline/index.html"; +import m8 from "./mockups/09-chart-transit/index.html"; +import m9 from "./mockups/10-chart-scroll/index.html"; +import m10 from "./mockups/11-chart-atlas/index.html"; export function startServer(port: number): Server { return Bun.serve({ @@ -27,6 +31,14 @@ export function startServer(port: number): Server { "/mockups/06-constellation": Response.redirect("/mockups/06-constellation/", 302), "/mockups/07-sea-voyage/": m6, "/mockups/07-sea-voyage": Response.redirect("/mockups/07-sea-voyage/", 302), + "/mockups/08-chart-logline/": m7, + "/mockups/08-chart-logline": Response.redirect("/mockups/08-chart-logline/", 302), + "/mockups/09-chart-transit/": m8, + "/mockups/09-chart-transit": Response.redirect("/mockups/09-chart-transit/", 302), + "/mockups/10-chart-scroll/": m9, + "/mockups/10-chart-scroll": Response.redirect("/mockups/10-chart-scroll/", 302), + "/mockups/11-chart-atlas/": m10, + "/mockups/11-chart-atlas": Response.redirect("/mockups/11-chart-atlas/", 302), }, development: process.env.NODE_ENV !== "production", fetch() {