anyways

src/app.ts

@@ -30,11 +30,33 @@ export class App {
 
   async start(): Promise<boolean> {
     this.input = new Input()
-    this.overlay = new DomOverlay(SCENES, {
-      onNavClick: (s) => { this.scene = s },
-      onButtonClick: () => { this.scene = (this.scene + 1) % 4 }
+
+    // Build SceneContent[] from PAGES for the overlay
+    const scenes = PAGES.map((p) => ({
+      title: p.title,
+      subtitle: p.subtitle,
+      body: p.body,
+    }))
+
+    this.overlay = new DomOverlay(scenes, {
+      onNavClick: (s) => {
+        this.router.navigate(Router.sceneToBasePath(s))
+      },
+      onButtonClick: () => {
+        const next = (this.scene + 1) % 4
+        this.router.navigate(Router.sceneToBasePath(next))
+      },
+      onNavigate: (path) => {
+        this.router.navigate(path)
+      },
     })
+
+    this.router.onChange((route) => this.applyRoute(route))
+    const initial = this.router.start()
+    this.scene = initial.scene
     this.overlay.setScene(this.scene)
+    this.router.replace(Router.sceneToBasePath(this.scene))
+
     this.resize()
     const ok = await this.renderer.init(this.canvas)
     if (!ok) return false
@@ -89,8 +111,8 @@ export class App {
 
   private computeStemMultipliers(time: number): void {
     const sm = this.stemMultipliers
-    const colorBase = [0.0, 0.6, 1.2, 1.8, 2.4]
-    const speedBase = [0.0, 0.2, 0.1, 0.0, 0.15]
+    const colorBase = [0.0, 0.6, 1.2, 2.4]
+    const speedBase = [0.0, 0.2, 0.1, 0.15]
     const scene = this.scene
 
     sm[0] = speedBase[scene]