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

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

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