diff --git a/AGENTS.md b/AGENTS.md index 5d06bcc..1d7c4a1 100644 --- a/AGENTS.md +++ b/AGENTS.md @@ -1,7 +1,7 @@ # EPIC: The Musical Timeline Unofficial fan site: an interactive timeline of *EPIC: The Musical* songs. Currently 7 design-direction -mockups. Bun 1.3.14 (server, bundler, test runner), TypeScript, three.js (mockups 06/07/13/14 only), Docker. +mockups. Bun 1.3.14 (server, bundler, test runner), TypeScript, three.js (mockups 06/07/13/14/15 only), Docker. `AGENTS.md` is the single source of truth for agents here. `CLAUDE.md` and `GEMINI.md` only point here. Deeper context on demand: `docs/ARCHITECTURE.md`, `docs/DECISIONS.md`, `docs/TODO.md`. @@ -10,7 +10,7 @@ Deeper context on demand: `docs/ARCHITECTURE.md`, `docs/DECISIONS.md`, `docs/TOD Install: `bun install --frozen-lockfile` Dev: `bun run dev` (`PORT` env, default 3000) -Test: `bun test` | Single file: `bun test tests/data.test.ts` | Single case: `bun test -t "registry has 14"` +Test: `bun test` | Single file: `bun test tests/data.test.ts` | Single case: `bun test -t "registry has 15"` Typecheck: `bun run typecheck` Build: `bun run build` | Run the build: `bun run start` Docker: `docker build -t epic-timeline .` then `docker run --rm -p 3000:3000 epic-timeline` diff --git a/docs/DECISIONS.md b/docs/DECISIONS.md index 69328a2..a894865 100644 --- a/docs/DECISIONS.md +++ b/docs/DECISIONS.md @@ -58,3 +58,7 @@ frieze → cave transition, which needs the 3D sea. three.js is already a depend **Decision:** mockup 14 (Voyage with side panel) may use three.js; it converges 13's 3D flow with a persistent side panel. No new dependency. + +## 2026-10-30 — three.js allowed in mockup 15 + +**Decision:** mockup 15 (Voyage, look 2) may use three.js; it iterates on 14. No new dependency. diff --git a/docs/PERMISSIONS.md b/docs/PERMISSIONS.md index ff9f1e4..71d83ca 100644 --- a/docs/PERMISSIONS.md +++ b/docs/PERMISSIONS.md @@ -22,7 +22,7 @@ or `AGENTS.md` Commands. | `bun install --frozen-lockfile` | worked (no changes) | | `bun test` | worked — 34 pass, 0 fail, 3 files | | `bun test tests/data.test.ts` | worked — 10 pass | -| `bun test -t "registry has 14"` | worked — 1 pass | +| `bun test -t "registry has 15"` | worked — 1 pass | | `bun run typecheck` | worked (`tsc --noEmit`, exit 0) | | `bun run build` | worked — `dist/server.js` + hashed page assets | | `bun run dev` (`PORT=3113`) | worked — `/` and all mockup routes 200, no-slash form 302 | diff --git a/docs/design/002-direction-round-notes.md b/docs/design/002-direction-round-notes.md index 563fd79..b951185 100644 --- a/docs/design/002-direction-round-notes.md +++ b/docs/design/002-direction-round-notes.md @@ -229,11 +229,32 @@ mockup of the transition. moved into the Paths tab. Rough spots: empty space around the frieze band with the panel open, light sea patches that read like lily pads, heavy outlines on the giant. +### 15. Verdict on 14: leaning look 2, paths too hidden + +> "This is actually surprisingly really good work. The design for 3 really makes the whole site feels +> like it works together, both in terms of frieze, the side panel and the world. However, im leaning a +> lot more towards 2. The colors pop a lot more. The paths feel a bit too hidden away now. All in all +> though, its looking better and better" + +- **Look:** leaning strongly to **2 (two worlds)**: "the colors pop a lot more". +- **What 3 does better:** it makes frieze, side panel and world feel like one site. Worth carrying + that cohesion into 2. +- **Problem:** the paths (motif threads) are "a bit too hidden away" inside the Paths tab. +- Not yet a final approval ("looking better and better"). +- *(Claude's proposal)* Mockup **15 Voyage, look 2**: look 2 only, borrowing 3's cohesion (shared + frieze border/ornament and type across frieze, panel and HUD), and paths brought out of the tab, with + a toggle of three placements: + - **A. Pinned strip** — a compact thread strip always visible at the top of the panel, above the tabs. + - **B. Threads in the world** — the current song's motifs as coloured ribbons in the 3D sea, + trailing the ship and running ahead to where they return. + - **C. Timeline at the bottom** — the step bar becomes a horizontal song timeline with motif threads + under it (the original "big horizontal line"), with "you are here". + ## Open questions (in priority order) 1. ~~Which sea-chart approach (08–11) reads best, or which mix?~~ 11's navigation + 10's style (§9). Then A/B/C inside plates: **A threads** (§12). -2. What is the look of the whole? Narrowed to look 2 (two worlds) or 3 (frieze-led) (§14). +2. What is the look of the whole? Leaning strongly to look 2, with 3's cohesion (§15). Where do paths live (15's A/B/C)? 3. How do 2D and 3D relate as products? Partly answered: in 3D a right-side panel stays open with info, paths, lyrics and fan works (§14). Whether the chart also stands alone is unconfirmed. 3b. Fan works: what are they (art, covers, animatics?), where do they come from, and how are they diff --git a/docs/design/002-sea-chart-spikes/15-voyage-look2-brief.md b/docs/design/002-sea-chart-spikes/15-voyage-look2-brief.md new file mode 100644 index 0000000..555d711 --- /dev/null +++ b/docs/design/002-sea-chart-spikes/15-voyage-look2-brief.md @@ -0,0 +1,59 @@ +# 15 Voyage, look 2 — iteration brief + +## Why + +The user's verdict on 14 (verbatim): + +> "This is actually surprisingly really good work. The design for 3 really makes the whole site feels +> like it works together, both in terms of frieze, the side panel and the world. However, im leaning a +> lot more towards 2. The colors pop a lot more. The paths feel a bit too hidden away now. All in all +> though, its looking better and better" + +15 starts from a **copy of 14** (`src/mockups/14-voyage-panel/`). Keep everything that works (five +beats, transitions, stylised toon/ink 3D, the side panel and its tabs, placeholders, URL params). +Change: + +1. **Look 2 only.** Remove the look toggle and look 3 code paths. Keep look 2's colours — they "pop". +2. **Borrow look 3's cohesion.** What made 3 feel like one site: the frieze, the panel and the world + share one visual language. Bring that into look 2 *without* dulling its colours, e.g.: + - a shared ornament: the frieze's meander/key band as the panel's top border and the HUD's edge; + - the same type pairing and label styles across frieze captions, panel, step bar and caption card; + - the panel and HUD use the frieze's terracotta + black as accents on look 2's parchment, so the + frieze beats and the sea beats feel like the same book; + - fix 14's rough spots: empty space above/below the frieze band with the panel open (fit the + frieze to the stage), sea patches that read like lily pads, heavy giant outlines. +3. **Paths out in the open.** They are "too hidden away" in the Paths tab. Add a visible toggle + "Paths: A · B · C" (also `?paths=a|b|c`, default `a`) with three placements. In all three, the + current song's motifs are visible without clicking anything, and clicking a motif highlights it + everywhere (panel, threads, lyrics chips). Use the thread style the user chose in 12 (soft coloured + threads with knots where a motif plays) — see `src/mockups/12-vellum-atlas/`. + - **A. Pinned strip** — a compact thread strip pinned at the top of the panel, between the song + header and the tabs, always visible whatever tab is open: the voyage's songs as knots along a + line, the current song marked "you are here", one thread per motif of the current song showing + where it was heard before and where it returns. Keep it compact (≈120–160px tall). + - **B. Threads in the world** — the current song's motifs drawn in the 3D sea as coloured ribbons + (stylised, flat, ink-edged) trailing behind the ship and running ahead toward where they return, + with small floating labels. Also shown in the frieze beats as coloured threads along the frieze's + ground line. + - **C. Timeline at the bottom** — the step bar grows into a horizontal song timeline across the + bottom of the stage (the user's original "big horizontal line"): all songs as stops, "you are + here", motif threads underneath with knots. Play/step/look controls fold into it. + The Paths tab can stay for the full detail, but must not be the only place paths appear. + +## Rules + +- Edit ONLY `src/mockups/15-voyage-look2/` (stub files exist; index.html links credits; main.ts calls + `mountCredits()`; replace the stub style.css with unique content). three.js allowed. Copy from 14 + (and 12) into your folder; don't import across mockup folders. +- Credits footer fully visible in every state. +- Build to `/tmp/claude-1000/-home-user-epic-the-musical-timeline/fb650f6d-47a0-47e4-8f6b-197d02417f3b/scratchpad/r3-15`, + serve with `cd && PORT=4115 bun server.js`. Kill only your own server. +- Screenshots 1440×900 with `--use-angle=swiftshader --use-gl=angle --enable-unsafe-swiftshader + --virtual-time-budget=6000`: `screenshots/15-voyage-look2-beat{1..5}.png` (paths a), + `-paths-a.png`, `-paths-b.png`, `-paths-c.png` (beat 3, and with `?motif=` highlighted if you add + that param), `-beat1-paths-b.png`, `-beat5-paths-c.png`, `-lyrics.png`. Look at every one and fix + what's off. +- `bun test` and `bun run typecheck` must pass. Don't commit. Don't spawn subagents. +- If you run low on budget, stop and write a pause report (done / checklist / next step) instead. +- Report to `docs/design/002-sea-chart-spikes/15-voyage-look2-report.md`: what you built, what works, + what doesn't, screenshots, and an honest comparison of paths A/B/C. diff --git a/src/index.html b/src/index.html index ca3b0e1..2f37651 100644 --- a/src/index.html +++ b/src/index.html @@ -27,6 +27,7 @@
  • 12

    Vellum atlas

    The atlas overview and island plates of 11, drawn in the vellum portolan style of 10.

    Try this: Open Cyclops' Island, pick a theme, and switch the plate's motif style (A/B/C).

  • 13

    Curtain call

    The frieze curtain that carries you from the 2D story into the 3D sea and down into a landing.

    Try this: Press Play, or step through: frieze, sea, Cyclops' Island, frieze, cave. Switch the look (1/2/3).

  • 14

    Voyage with side panel

    The curtain-call voyage with stylised models and a side panel that stays open: about, paths, lyrics, fan works.

    Try this: Play the voyage and watch the panel follow; open Lyrics and Fan works; switch the look (2/3).

    • +
  • 15

    Voyage, look 2

    14 in look 2, with the frieze, panel and world tied together, and the motif paths out in the open.

    Try this: Step through the voyage and switch where the paths live (A strip, B in the sea, C timeline).

    • diff --git a/src/mockups/15-voyage-look2/index.html b/src/mockups/15-voyage-look2/index.html new file mode 100644 index 0000000..f975973 --- /dev/null +++ b/src/mockups/15-voyage-look2/index.html @@ -0,0 +1,15 @@ + + + + + + Voyage, look 2 — EPIC Timeline mockup + + + + +
    + + + + diff --git a/src/mockups/15-voyage-look2/main.ts b/src/mockups/15-voyage-look2/main.ts new file mode 100644 index 0000000..88ded7e --- /dev/null +++ b/src/mockups/15-voyage-look2/main.ts @@ -0,0 +1,3 @@ +import { mountCredits } from "../../shared/credits"; + +mountCredits(); diff --git a/src/mockups/15-voyage-look2/style.css b/src/mockups/15-voyage-look2/style.css new file mode 100644 index 0000000..720efad --- /dev/null +++ b/src/mockups/15-voyage-look2/style.css @@ -0,0 +1 @@ +body { margin: 0; --stub-15: 1; } diff --git a/src/mockups/registry.ts b/src/mockups/registry.ts index 4bfecb9..eefd08b 100644 --- a/src/mockups/registry.ts +++ b/src/mockups/registry.ts @@ -43,4 +43,7 @@ export const mockups: MockupInfo[] = [ { slug: "14-voyage-panel", number: 14, name: "Voyage with side panel", pitch: "The curtain-call voyage with stylised models and a side panel that stays open: about, paths, lyrics, fan works.", tryThis: "Play the voyage and watch the panel follow; open Lyrics and Fan works; switch the look (2/3)." }, + { slug: "15-voyage-look2", number: 15, name: "Voyage, look 2", + pitch: "14 in look 2, with the frieze, panel and world tied together, and the motif paths out in the open.", + tryThis: "Step through the voyage and switch where the paths live (A strip, B in the sea, C timeline)." }, ]; diff --git a/src/server.ts b/src/server.ts index 74f8039..5598ebc 100644 --- a/src/server.ts +++ b/src/server.ts @@ -14,6 +14,7 @@ import m10 from "./mockups/11-chart-atlas/index.html"; import m11 from "./mockups/12-vellum-atlas/index.html"; import m12 from "./mockups/13-curtain-call/index.html"; import m13 from "./mockups/14-voyage-panel/index.html"; +import m14 from "./mockups/15-voyage-look2/index.html"; export function startServer(port: number): Server { return Bun.serve({ @@ -48,6 +49,8 @@ export function startServer(port: number): Server { "/mockups/13-curtain-call": Response.redirect("/mockups/13-curtain-call/", 302), "/mockups/14-voyage-panel/": m13, "/mockups/14-voyage-panel": Response.redirect("/mockups/14-voyage-panel/", 302), + "/mockups/15-voyage-look2/": m14, + "/mockups/15-voyage-look2": Response.redirect("/mockups/15-voyage-look2/", 302), }, development: process.env.NODE_ENV !== "production", fetch() { diff --git a/tests/server.test.ts b/tests/server.test.ts index eb749df..7054d8e 100644 --- a/tests/server.test.ts +++ b/tests/server.test.ts @@ -8,7 +8,7 @@ let base: string; beforeAll(() => { server = startServer(0); base = `http://localhost:${server.port}`; }); afterAll(() => server.stop(true)); -test("registry has 14 mockups", () => expect(mockups).toHaveLength(14)); +test("registry has 15 mockups", () => expect(mockups).toHaveLength(15)); test("index links every mockup", async () => { const res = await fetch(base + "/");