chore(mockups): add sea-chart round slots 08–11 and direction-round notes
Co-Authored-By: Claude Opus 5.5 <[email protected]>
This commit is contained in:
Lucas Winther
co-authored by
Claude Opus 5.5
Claude Opus 5.5
parent
9d5f2ef647
commit
52feed514d
@@ -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.
|
||||
@@ -19,6 +19,11 @@
|
||||
<li class="card"><a href="/mockups/05-score/"><span class="card__num">05</span><h2>Score / waveform</h2><p>The line is a music staff or waveform; song parts are segments and motifs are recurring marks.</p><p class="card__try">Try this: Look at song parts as segments and follow motif marks as they recur.</p></a></li>
|
||||
<li class="card"><a href="/mockups/06-constellation/"><span class="card__num">06</span><h2>Constellation (3D)</h2><p>Songs are stars along a path through space, joined by motif constellation lines (three.js).</p><p class="card__try">Try this: Fly the camera through, hover a star, and open a song.</p></a></li>
|
||||
<li class="card"><a href="/mockups/07-sea-voyage/"><span class="card__num">07</span><h2>Sea voyage (3D)</h2><p>A ship crosses a 3D sea past saga islands while the camera follows the route (three.js).</p><p class="card__try">Try this: Watch the ship sail the route, spot the saga islands, and open a song.</p></a></li>
|
||||
<li class="card card--round"><h2>Round 2: sea charts</h2><p>Ways to make the sea chart as easy to browse as the editorial scroll and transit map.</p></li>
|
||||
<li class="card"><a href="/mockups/08-chart-logline/"><span class="card__num">08</span><h2>Sea chart + log line</h2><p>A navigator's chart for place, with a synced editorial log line beneath it for time; motifs as coloured sea routes.</p><p class="card__try">Try this: Pick a motif, scrub the log line, and watch the chart follow.</p></a></li>
|
||||
<li class="card"><a href="/mockups/09-chart-transit/"><span class="card__num">09</span><h2>Schematic sea chart</h2><p>The voyage straightened into a transit-style diagram laid over a faint chart; motif lines run alongside the ship's course.</p><p class="card__try">Try this: Follow a motif line from port to port and open one.</p></a></li>
|
||||
<li class="card"><a href="/mockups/10-chart-scroll/"><span class="card__num">10</span><h2>Unrolling chart</h2><p>An editorial horizontal scroll whose ground is a long chart unrolling as you pan; motif threads trail beneath the route.</p><p class="card__try">Try this: Pan sideways and watch the ship and coastline move with you.</p></a></li>
|
||||
<li class="card"><a href="/mockups/11-chart-atlas/"><span class="card__num">11</span><h2>Atlas with insets</h2><p>An overview chart of the whole sea; each saga island opens an inset chart with its songs as ports.</p><p class="card__try">Try this: Open an island's inset, then a song, then zoom back out.</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>Sea chart + log line — 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,4 @@
|
||||
import { mountCredits } from "../../shared/credits";
|
||||
|
||||
mountCredits();
|
||||
document.getElementById("app")!.textContent = "Sea chart + log line (stub)";
|
||||
@@ -0,0 +1,2 @@
|
||||
/* 08-chart-logline stub */
|
||||
body { margin: 0; }
|
||||
@@ -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>Schematic sea chart — 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,4 @@
|
||||
import { mountCredits } from "../../shared/credits";
|
||||
|
||||
mountCredits();
|
||||
document.getElementById("app")!.textContent = "Schematic sea chart (stub)";
|
||||
@@ -0,0 +1,2 @@
|
||||
/* 09-chart-transit stub */
|
||||
body { margin: 0; }
|
||||
@@ -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>Unrolling chart — 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,4 @@
|
||||
import { mountCredits } from "../../shared/credits";
|
||||
|
||||
mountCredits();
|
||||
document.getElementById("app")!.textContent = "Unrolling chart (stub)";
|
||||
@@ -0,0 +1,2 @@
|
||||
/* 10-chart-scroll stub */
|
||||
body { margin: 0; }
|
||||
@@ -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>Atlas with insets — 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,4 @@
|
||||
import { mountCredits } from "../../shared/credits";
|
||||
|
||||
mountCredits();
|
||||
document.getElementById("app")!.textContent = "Atlas with insets (stub)";
|
||||
@@ -0,0 +1,2 @@
|
||||
/* 11-chart-atlas stub */
|
||||
body { margin: 0; }
|
||||
@@ -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." },
|
||||
];
|
||||
|
||||
@@ -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<undefined> {
|
||||
return Bun.serve({
|
||||
@@ -27,6 +31,14 @@ export function startServer(port: number): Server<undefined> {
|
||||
"/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() {
|
||||
|
||||
Reference in New Issue
Block a user