chore(mockups): add sea-chart round slots 08–11 and direction-round notes

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

src/index.html

@@ -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>

src/mockups/08-chart-logline/index.html

@@ -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>

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)";

src/mockups/08-chart-logline/style.css

@@ -0,0 +1,2 @@
+/* 08-chart-logline stub */
+body { margin: 0; }

src/mockups/09-chart-transit/index.html

@@ -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>

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)";

src/mockups/09-chart-transit/style.css

@@ -0,0 +1,2 @@
+/* 09-chart-transit stub */
+body { margin: 0; }

src/mockups/10-chart-scroll/index.html

@@ -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>

src/mockups/10-chart-scroll/main.ts

@@ -0,0 +1,4 @@
+import { mountCredits } from "../../shared/credits";
+
+mountCredits();
+document.getElementById("app")!.textContent = "Unrolling chart (stub)";

src/mockups/10-chart-scroll/style.css

@@ -0,0 +1,2 @@
+/* 10-chart-scroll stub */
+body { margin: 0; }

src/mockups/11-chart-atlas/index.html

@@ -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>

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)";

src/mockups/11-chart-atlas/style.css

@@ -0,0 +1,2 @@
+/* 11-chart-atlas stub */
+body { margin: 0; }

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." },
 ];

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<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() {