fix: always-on render loop + vivid neon scene (towers, glowing agents, data streams, CDN fallback)

static/app.js

@@ -1,26 +1,27 @@
 /* =========================================================================
-   Polis — 3D front-end
-   - one persistent Three.js town
+   Polis — 3D front-end  (vivid edition)
+   - one persistent, neon Three.js town
    - scroll drives a cinematic camera through 5 "how it works" stages
    - "Launch" switches to live mode: replays the simulation, agents move,
      speech bubbles pop, click an agent to inspect its mind, inject events
+   - the render loop starts IMMEDIATELY and never depends on the network,
+     so the scene is always alive even before data loads
    ========================================================================= */
 (() => {
 "use strict";
 
-const API = ""; // same origin
+const API = "";
 const $ = (s) => document.querySelector(s);
 
-// ---- world geometry (mirrors backend LOCATIONS) ---------------------------
 const LOCATIONS = {
-  plaza:  {x:0,  y:0,  label:"Central Plaza"},
-  market: {x:6,  y:2,  label:"Market"},
-  bakery: {x:-5, y:3,  label:"Bakery"},
-  clinic: {x:5,  y:-4, label:"Clinic"},
-  tavern: {x:-4, y:-5, label:"Tavern"},
-  garden: {x:2,  y:6,  label:"Garden"},
-  forge:  {x:-7, y:-1, label:"Forge"},
-  harbor: {x:8,  y:-1, label:"Harbor"},
+  plaza:  {x:0,  y:0,  label:"Central Plaza", c:0xffffff},
+  market: {x:6,  y:2,  label:"Market",  c:0x6ec6ff},
+  bakery: {x:-5, y:3,  label:"Bakery",  c:0xf6c453},
+  clinic: {x:5,  y:-4, label:"Clinic",  c:0x8bd17c},
+  tavern: {x:-4, y:-5, label:"Tavern",  c:0xc792ea},
+  garden: {x:2,  y:6,  label:"Garden",  c:0xa3e635},
+  forge:  {x:-7, y:-1, label:"Forge",   c:0xff8a65},
+  harbor: {x:8,  y:-1, label:"Harbor",  c:0x4dd0e1},
 };
 
 // =========================================================================
@@ -30,122 +31,188 @@ const canvas = $("#bg-canvas");
 const renderer = new THREE.WebGLRenderer({canvas, antialias:true, alpha:false});
 renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));
 renderer.setSize(window.innerWidth, window.innerHeight);
+renderer.setClearColor(0x05060f, 1);
 
 const scene = new THREE.Scene();
-scene.background = new THREE.Color(0x05060a);
-scene.fog = new THREE.FogExp2(0x05060a, 0.018);
-
-const camera = new THREE.PerspectiveCamera(52, window.innerWidth/window.innerHeight, 0.1, 400);
-camera.position.set(0, 34, 40);
-const camTarget = new THREE.Vector3(0, 0, 0);
-
-scene.add(new THREE.AmbientLight(0x30405f, 1.1));
-const key = new THREE.DirectionalLight(0x9fc4ff, 1.1); key.position.set(20, 40, 15); scene.add(key);
-const rim = new THREE.PointLight(0xc792ea, 1.2, 120); rim.position.set(-18, 16, -18); scene.add(rim);
+scene.background = new THREE.Color(0x05060f);
+scene.fog = new THREE.FogExp2(0x05060f, 0.0062);
+
+const camera = new THREE.PerspectiveCamera(55, window.innerWidth/window.innerHeight, 0.1, 500);
+camera.position.set(10, 12, 24);
+const camTarget = new THREE.Vector3(0, 1, 0);
+
+// lighting — brighter, colored, three-point
+scene.add(new THREE.AmbientLight(0x4a5a86, 1.4));
+const key = new THREE.DirectionalLight(0xbcd6ff, 1.6); key.position.set(18, 40, 20); scene.add(key);
+const rimA = new THREE.PointLight(0xc792ea, 2.4, 160); rimA.position.set(-20, 18, -18); scene.add(rimA);
+const rimB = new THREE.PointLight(0x4dd0e1, 2.0, 160); rimB.position.set(22, 14, 16); scene.add(rimB);
+const rimC = new THREE.PointLight(0xf6c453, 1.4, 120); rimC.position.set(0, 8, 0); scene.add(rimC);
+
+// ---- radial glow texture (reused for all halos / beams) -------------------
+const GLOW_TEX = (() => {
+  const c = document.createElement("canvas"); c.width = c.height = 128;
+  const ctx = c.getContext("2d");
+  const g = ctx.createRadialGradient(64,64,0, 64,64,64);
+  g.addColorStop(0, "rgba(255,255,255,1)");
+  g.addColorStop(0.25, "rgba(255,255,255,.55)");
+  g.addColorStop(1, "rgba(255,255,255,0)");
+  ctx.fillStyle = g; ctx.fillRect(0,0,128,128);
+  return new THREE.CanvasTexture(c);
+})();
+function glowSprite(color, size){
+  const s = new THREE.Sprite(new THREE.SpriteMaterial({
+    map:GLOW_TEX, color, transparent:true, opacity:.9,
+    blending:THREE.AdditiveBlending, depthWrite:false}));
+  s.scale.set(size,size,1); return s;
+}
 
-// starfield
+// starfield / nebula
 (() => {
-  const g = new THREE.BufferGeometry(); const n = 1400; const p = new Float32Array(n*3);
-  for(let i=0;i<n;i++){ const r=120+Math.random()*160, t=Math.random()*Math.PI*2, ph=Math.acos(2*Math.random()-1);
-    p[i*3]=r*Math.sin(ph)*Math.cos(t); p[i*3+1]=Math.abs(r*Math.cos(ph))*0.6+10; p[i*3+2]=r*Math.sin(ph)*Math.sin(t); }
+  const g = new THREE.BufferGeometry(); const n = 1800;
+  const p = new Float32Array(n*3), col = new Float32Array(n*3);
+  const palette = [[0.55,0.77,1],[0.78,0.57,0.92],[0.96,0.77,0.33],[0.3,0.82,0.88]];
+  for(let i=0;i<n;i++){ const r=90+Math.random()*220, t=Math.random()*6.28, ph=Math.acos(2*Math.random()-1);
+    p[i*3]=r*Math.sin(ph)*Math.cos(t); p[i*3+1]=Math.abs(r*Math.cos(ph))*0.7+8; p[i*3+2]=r*Math.sin(ph)*Math.sin(t);
+    const c=palette[(Math.random()*palette.length)|0]; col[i*3]=c[0];col[i*3+1]=c[1];col[i*3+2]=c[2]; }
   g.setAttribute("position", new THREE.BufferAttribute(p,3));
-  scene.add(new THREE.Points(g, new THREE.PointsMaterial({color:0x8fa6d8, size:.6, transparent:true, opacity:.7})));
+  g.setAttribute("color", new THREE.BufferAttribute(col,3));
+  scene.add(new THREE.Points(g, new THREE.PointsMaterial({size:1.1, transparent:true,
+    opacity:.9, vertexColors:true, blending:THREE.AdditiveBlending, depthWrite:false})));
 })();
 
-// ground grid
-const grid = new THREE.GridHelper(60, 60, 0x1b2740, 0x121a2c);
-grid.position.y = 0; scene.add(grid);
-const discMat = new THREE.MeshBasicMaterial({color:0x0a1020, transparent:true, opacity:.85});
-const disc = new THREE.Mesh(new THREE.CircleGeometry(30, 64), discMat);
-disc.rotation.x = -Math.PI/2; disc.position.y = -0.02; scene.add(disc);
+// ground: dark reflective disc + neon grid + glowing plaza core
+const disc = new THREE.Mesh(new THREE.CircleGeometry(34, 72),
+  new THREE.MeshStandardMaterial({color:0x0a0f1f, metalness:.6, roughness:.35}));
+disc.rotation.x=-Math.PI/2; disc.position.y=-0.03; scene.add(disc);
+const grid = new THREE.GridHelper(68, 68, 0x2b3f6b, 0x14203a);
+grid.material.transparent = true; grid.material.opacity = .55; scene.add(grid);
 
-// ---- label sprite helper (canvas texture) --------------------------------
+// plaza energy core
+const core = glowSprite(0xffffff, 7); core.position.set(0, 1.2, 0); scene.add(core);
+const coreRing = new THREE.Mesh(new THREE.TorusGeometry(2.4, 0.06, 8, 60),
+  new THREE.MeshBasicMaterial({color:0x7cc5ff}));
+coreRing.rotation.x=-Math.PI/2; coreRing.position.y=0.05; scene.add(coreRing);
+
+// label sprites (building names)
 function makeLabel(text, color="#8b93a7", size=42){
   const c=document.createElement("canvas"), ctx=c.getContext("2d");
   const font=`600 ${size}px 'JetBrains Mono', monospace`; ctx.font=font;
   const w=ctx.measureText(text).width; c.width=w+40; c.height=size+30;
   ctx.font=font; ctx.fillStyle=color; ctx.textBaseline="middle";
-  ctx.shadowColor="#000"; ctx.shadowBlur=12; ctx.fillText(text,20,c.height/2);
+  ctx.shadowColor="#000"; ctx.shadowBlur=14; ctx.fillText(text,20,c.height/2);
   const tex=new THREE.CanvasTexture(c); tex.minFilter=THREE.LinearFilter;
-  const spr=new THREE.Sprite(new THREE.SpriteMaterial({map:tex, transparent:true, depthTest:false}));
-  spr.scale.set(c.width/70, c.height/70, 1); return spr;
+  const spr=new THREE.Sprite(new THREE.SpriteMaterial({map:tex, transparent:true, depthTest:false, depthWrite:false}));
+  spr.scale.set(c.width/64, c.height/64, 1); return spr;
 }
 
-// ---- build locations ------------------------------------------------------
+// ---- neon towers ----------------------------------------------------------
 const locGroup = new THREE.Group(); scene.add(locGroup);
+const towerPulse = [];
 Object.entries(LOCATIONS).forEach(([id, L]) => {
-  const h = id==="plaza" ? 0.4 : 2.2 + Math.random()*1.4;
-  const geo = new THREE.BoxGeometry(2.4, h, 2.4);
-  const mat = new THREE.MeshStandardMaterial({color:0x16203a, emissive:0x0c1730,
-    metalness:.3, roughness:.6, transparent:true, opacity:.9});
-  const m = new THREE.Mesh(geo, mat); m.position.set(L.x, h/2, L.y); locGroup.add(m);
-  // glowing footprint
-  const ring = new THREE.Mesh(new THREE.RingGeometry(1.6, 1.85, 40),
-    new THREE.MeshBasicMaterial({color:0x2e4a7a, transparent:true, opacity:.6, side:THREE.DoubleSide}));
+  const isPlaza = id==="plaza";
+  const h = isPlaza ? 0.6 : 3.4 + Math.random()*2.2;
+  const col = new THREE.Color(L.c);
+  // body
+  const body = new THREE.Mesh(new THREE.BoxGeometry(2.2, h, 2.2),
+    new THREE.MeshStandardMaterial({color:0x0e1830, emissive:col, emissiveIntensity:.35,
+      metalness:.5, roughness:.35}));
+  body.position.set(L.x, h/2, L.y); locGroup.add(body);
+  // glowing roof cap
+  const cap = new THREE.Mesh(new THREE.BoxGeometry(2.35, 0.18, 2.35),
+    new THREE.MeshBasicMaterial({color:col}));
+  cap.position.set(L.x, h+0.1, L.y); locGroup.add(cap);
+  // vertical light beam
+  const beam = new THREE.Mesh(new THREE.CylinderGeometry(0.14, 0.14, 26, 8),
+    new THREE.MeshBasicMaterial({color:col, transparent:true, opacity:.16,
+      blending:THREE.AdditiveBlending, depthWrite:false}));
+  beam.position.set(L.x, 13, L.y); locGroup.add(beam);
+  // ground ring
+  const ring = new THREE.Mesh(new THREE.RingGeometry(1.7, 2.0, 44),
+    new THREE.MeshBasicMaterial({color:col, transparent:true, opacity:.6, side:THREE.DoubleSide,
+      blending:THREE.AdditiveBlending}));
   ring.rotation.x=-Math.PI/2; ring.position.set(L.x, 0.02, L.y); locGroup.add(ring);
-  const lab = makeLabel(L.label, "#6f86b8", 36); lab.position.set(L.x, h+1.1, L.y); locGroup.add(lab);
+  // halo + label
+  const halo = glowSprite(L.c, 4.4); halo.position.set(L.x, h+0.4, L.y); locGroup.add(halo);
+  const lab = makeLabel(L.label, "#dfe8ff", 34); lab.position.set(L.x, h+1.5, L.y); locGroup.add(lab);
+  towerPulse.push({body, cap, halo, phase:Math.random()*6.28});
 });
 
+// ---- colorful data-stream particles orbiting the town ---------------------
+const streamGroup = new THREE.Group(); scene.add(streamGroup);
+(() => {
+  const n=260; const g=new THREE.BufferGeometry();
+  const p=new Float32Array(n*3), col=new Float32Array(n*3); const meta=[];
+  const cols=Object.values(LOCATIONS).map(l=>new THREE.Color(l.c));
+  for(let i=0;i<n;i++){ const r=10+Math.random()*16, a=Math.random()*6.28, y=1+Math.random()*9;
+    meta.push({r,a,y,s:.2+Math.random()*.8});
+    p[i*3]=Math.cos(a)*r; p[i*3+1]=y; p[i*3+2]=Math.sin(a)*r;
+    const c=cols[(Math.random()*cols.length)|0]; col[i*3]=c.r;col[i*3+1]=c.g;col[i*3+2]=c.b; }
+  g.setAttribute("position", new THREE.BufferAttribute(p,3));
+  g.setAttribute("color", new THREE.BufferAttribute(col,3));
+  const pts=new THREE.Points(g, new THREE.PointsMaterial({size:.5, transparent:true, opacity:.85,
+    vertexColors:true, blending:THREE.AdditiveBlending, depthWrite:false, map:GLOW_TEX}));
+  streamGroup.add(pts); streamGroup.userData={g,meta,pos:p};
+})();
+
 // =========================================================================
-// Agents (visual)
+// Agents (visual) — bright orb + halo + light beam
 // =========================================================================
 const agentGroup = new THREE.Group(); scene.add(agentGroup);
-const agents = {}; // id -> {mesh, glow, trail, data, target}
+const agents = {};
 let AGENT_META = [];
 
 function spawnAgent(meta){
   const color = new THREE.Color(meta.color || "#7cc5ff");
-  const body = new THREE.Mesh(new THREE.SphereGeometry(0.55, 24, 24),
-    new THREE.MeshStandardMaterial({color, emissive:color, emissiveIntensity:.55, roughness:.35}));
-  const glow = new THREE.Mesh(new THREE.SphereGeometry(0.95, 20, 20),
-    new THREE.MeshBasicMaterial({color, transparent:true, opacity:.16}));
-  const g = new THREE.Group(); g.add(body); g.add(glow);
+  const body = new THREE.Mesh(new THREE.SphereGeometry(0.62, 28, 28),
+    new THREE.MeshStandardMaterial({color, emissive:color, emissiveIntensity:.9, roughness:.25, metalness:.2}));
+  const halo = glowSprite(meta.color || "#7cc5ff", 3.0);
+  const beam = new THREE.Mesh(new THREE.CylinderGeometry(0.05, 0.18, 6, 8),
+    new THREE.MeshBasicMaterial({color, transparent:true, opacity:.35,
+      blending:THREE.AdditiveBlending, depthWrite:false}));
+  beam.position.y = 3.2;
+  const g = new THREE.Group(); g.add(body); g.add(halo); g.add(beam);
   const L = LOCATIONS[meta.home] || {x:0,y:0};
-  g.position.set(L.x, 0.7, L.y);
-  g.userData = {id:meta.id};
+  g.position.set(L.x, 0.8, L.y); g.userData = {id:meta.id};
   agentGroup.add(g);
-  agents[meta.id] = {group:g, body, glow, meta, target:new THREE.Vector3(L.x,0.7,L.y),
-                     bob:Math.random()*6.28};
+  agents[meta.id] = {group:g, body, halo, beam, meta,
+                     target:new THREE.Vector3(L.x,0.8,L.y), bob:Math.random()*6.28};
 }
 
 // =========================================================================
-// Story-mode visual props (perception ring, memory orbit, pipeline)
+// Story-mode props
 // =========================================================================
 const props = new THREE.Group(); scene.add(props);
 let focusId = "mara";
 
-// perception ring
-const percRing = new THREE.Mesh(new THREE.RingGeometry(2.6, 2.9, 60),
-  new THREE.MeshBasicMaterial({color:0x7cc5ff, transparent:true, opacity:0, side:THREE.DoubleSide}));
+const percRing = new THREE.Mesh(new THREE.RingGeometry(2.6, 2.95, 64),
+  new THREE.MeshBasicMaterial({color:0x7cc5ff, transparent:true, opacity:0, side:THREE.DoubleSide,
+    blending:THREE.AdditiveBlending}));
 percRing.rotation.x=-Math.PI/2; props.add(percRing);
 
-// memory orbit particles
-const memCount = 26;
 const memGroup = new THREE.Group(); props.add(memGroup);
 const memNodes = [];
-for(let i=0;i<memCount;i++){
-  const m = new THREE.Mesh(new THREE.SphereGeometry(0.14, 10, 10),
-    new THREE.MeshBasicMaterial({color:0xc792ea, transparent:true, opacity:0}));
-  memGroup.add(m); memNodes.push({m, a:Math.random()*6.28, r:2+Math.random()*2.4, y:Math.random()*3, s:.4+Math.random()});
+for(let i=0;i<28;i++){
+  const m = glowSprite(0xc792ea, 0.9); m.material.opacity = 0;
+  memGroup.add(m); memNodes.push({m, a:Math.random()*6.28, r:2+Math.random()*2.6, y:Math.random()*3, s:.4+Math.random()});
 }
 
-// pipeline (5 stages floating)
 const STAGES = ["PERCEIVE","REMEMBER","PLAN","ACT","REFLECT"];
 const stageCols = [0x7cc5ff,0xc792ea,0xf6c453,0x8bd17c,0xff8a65];
 const pipeGroup = new THREE.Group(); props.add(pipeGroup);
 const pipeNodes = [];
 STAGES.forEach((s,i)=>{
-  const node = new THREE.Mesh(new THREE.OctahedronGeometry(0.6),
-    new THREE.MeshStandardMaterial({color:stageCols[i], emissive:stageCols[i], emissiveIntensity:.6,
-      transparent:true, opacity:0, roughness:.3}));
-  node.position.set(-8 + i*4, 5, 0);
-  pipeGroup.add(node);
-  const lab = makeLabel(s, "#c7cede", 34); lab.position.set(-8+i*4, 6.4, 0);
+  const col = stageCols[i];
+  const node = new THREE.Mesh(new THREE.OctahedronGeometry(0.7),
+    new THREE.MeshStandardMaterial({color:col, emissive:col, emissiveIntensity:.9,
+      transparent:true, opacity:0, roughness:.2, metalness:.3}));
+  node.position.set(-8 + i*4, 5, 0); pipeGroup.add(node);
+  const halo = glowSprite(col, 2.6); halo.position.copy(node.position); halo.material.opacity=0; pipeGroup.add(halo);
+  const lab = makeLabel(s, "#eef2ff", 32); lab.position.set(-8+i*4, 6.5, 0);
   lab.material.opacity = 0; pipeGroup.add(lab);
-  pipeNodes.push({node, lab, base:new THREE.Vector3(-8+i*4,5,0)});
+  pipeNodes.push({node, lab, halo, base:new THREE.Vector3(-8+i*4,5,0)});
   if(i>0){
     const g = new THREE.BufferGeometry().setFromPoints([pipeNodes[i-1].base, new THREE.Vector3(-8+i*4,5,0)]);
-    const line = new THREE.Line(g, new THREE.LineBasicMaterial({color:0x3a4a72, transparent:true, opacity:0}));
+    const line = new THREE.Line(g, new THREE.LineBasicMaterial({color:0x5a74c2, transparent:true, opacity:0}));
     pipeGroup.add(line); pipeNodes[i].line = line;
   }
 });
@@ -153,137 +220,107 @@ STAGES.forEach((s,i)=>{
 // =========================================================================
 // Scroll controller
 // =========================================================================
-// camera keyframes for each story stage
 const KEYS = [
-  {pos:[0,34,40],  tgt:[0,0,0]},      // 0 hero wide
-  {pos:[-3,6,10],  tgt:[-5,0.7,3]},   // 1 perceive (near mara @ bakery -5,3)
-  {pos:[-5,4,8],   tgt:[-5,1.5,3]},   // 2 remember (orbit)
-  {pos:[0,7,14],   tgt:[0,5,0]},      // 3 plan/act pipeline
-  {pos:[0,6,11],   tgt:[0,5,0]},      // 4 reflect
-  {pos:[0,30,36],  tgt:[0,0,0]},      // 5 pull back
+  {pos:[9,9,22],   tgt:[1,1.5,0]},    // 0 hero — town framed right of the card
+  {pos:[-3,5,9],   tgt:[-5,1,3]},     // 1 perceive (near mara @ bakery)
+  {pos:[-5,4,8],   tgt:[-5,1.5,3]},   // 2 remember
+  {pos:[0,7,15],   tgt:[0,5,0]},      // 3 pipeline
+  {pos:[0,6,12],   tgt:[0,5,0]},      // 4 reflect
+  {pos:[2,26,34],  tgt:[0,0.5,0]},    // 5 pull back
 ];
-let scrollT = 0;        // 0..(sections-1)
-let stageProg = {};     // per-stage 0..1 reveal
+let scrollT = 0;
 const SECTIONS = 6;
 
 function onScroll(){
   const max = document.body.scrollHeight - window.innerHeight;
-  const f = max>0 ? window.scrollY / max : 0;      // 0..1
-  scrollT = f * (SECTIONS - 1);                    // 0..5
-  $("#scroll-hint").style.opacity = f>0.02 ? 0 : 0.8;
+  const f = max>0 ? window.scrollY / max : 0;
+  scrollT = f * (SECTIONS - 1);
+  const hint = $("#scroll-hint"); if(hint) hint.style.opacity = f>0.02 ? 0 : 0.8;
 }
 window.addEventListener("scroll", onScroll, {passive:true});
 
-function lerp(a,b,t){return a+(b-a)*t;}
-function lerpArr(a,b,t){return a.map((v,i)=>lerp(v,b[i],t));}
-function smooth(t){return t*t*(3-2*t);}
+const lerp=(a,b,t)=>a+(b-a)*t;
+const lerpArr=(a,b,t)=>a.map((v,i)=>lerp(v,b[i],t));
+const smooth=(t)=>t*t*(3-2*t);
 
-function updateStoryCamera(){
+function updateStoryCamera(now){
   const i = Math.min(SECTIONS-2, Math.floor(scrollT));
   const t = smooth(scrollT - i);
   const p = lerpArr(KEYS[i].pos, KEYS[i+1].pos, t);
-  const g = lerpArr(KEYS[i].tgt || KEYS[i].tgt, KEYS[i+1].tgt, t);
-  camera.position.lerp(new THREE.Vector3(p[0],p[1],p[2]), 0.08);
-  camTarget.lerp(new THREE.Vector3(g[0],g[1],g[2]), 0.08);
+  const g = lerpArr(KEYS[i].tgt, KEYS[i+1].tgt, t);
+  // gentle orbital drift on the hero so it feels alive
+  const heroAmt = Math.max(0, 1 - scrollT);
+  const drift = Math.sin(now*0.00018) * 4 * heroAmt;
+  camera.position.lerp(new THREE.Vector3(p[0]+drift, p[1], p[2]), 0.07);
+  camTarget.lerp(new THREE.Vector3(g[0],g[1],g[2]), 0.07);
 
-  // stage reveals based on which section we're centered on
   const near = (s)=> Math.max(0, 1 - Math.abs(scrollT - s)*1.4);
-  // perception ring around focus (mara @ bakery)
   const fa = agents[focusId];
-  if(fa){ percRing.position.set(fa.group.position.x, 0.05, fa.group.position.z); }
-  percRing.material.opacity = near(1) * 0.7;
-  const rs = 1 + (1-near(1))*0.4; percRing.scale.set(rs,rs,rs);
-
-  // memory orbit
-  const memOn = near(2);
-  memGroup.position.copy(fa ? fa.group.position : new THREE.Vector3());
-  memNodes.forEach(n=> n.m.material.opacity = memOn*0.9);
+  if(fa){ percRing.position.set(fa.group.position.x, 0.05, fa.group.position.z);
+          memGroup.position.copy(fa.group.position); }
+  percRing.material.opacity = near(1) * 0.85;
+  const memOn = near(2); memNodes.forEach(n=> n.m.material.opacity = memOn*0.95);
 
-  // pipeline reveal staged across section 3
   pipeNodes.forEach((pn,idx)=>{
     const reveal = Math.max(0, Math.min(1, (near(3)*5) - idx));
-    pn.node.material.opacity = reveal;
-    pn.lab.material.opacity = reveal;
+    pn.node.material.opacity = reveal; pn.lab.material.opacity = reveal;
+    pn.halo.material.opacity = reveal*0.8;
     if(pn.line) pn.line.material.opacity = reveal*0.7;
   });
-  // reflect: pulse last node
-  const rOn = near(4);
-  pipeNodes[4].node.material.emissiveIntensity = 0.6 + rOn*Math.abs(Math.sin(performance.now()*0.004))*1.5;
+  pipeNodes[4].node.material.emissiveIntensity = 0.9 + near(4)*Math.abs(Math.sin(now*0.004))*1.6;
 }
 
 // =========================================================================
 // LIVE mode
 // =========================================================================
 let MODE = "story";
-let demo = null;           // {meta, snapshots, final_agents}
-let frame = 0;             // current snapshot index
-let playing = true;
-let stepMs = 900;
-let lastStep = 0;
-let interp = 0;            // 0..1 between snapshots
+let demo = null, frame = 0, playing = true, stepMs = 900, lastStep = 0, interp = 0;
 const labelsEl = $("#labels");
-const bubbles = {};        // id -> {el, ttl}
-let selected = null;
-let live_llm = false;
-let localTick = 0;         // for injected events after demo end
+const bubbles = {};
+let selected = null, live_llm = false;
 
 async function boot(){
   try{
     const h = await fetch(API+"/api/health").then(r=>r.json());
     live_llm = h.live_llm;
     $("#mode-label").textContent = live_llm ? "LIVE ENGINE · OpenAI" : "MOCK ENGINE · replay";
-    $("#live-dot").style.background = live_llm ? "#8bd17c" : "#f6c453";
-    $("#live-dot").style.boxShadow = "0 0 12px "+($("#live-dot").style.background);
-  }catch(e){ /* static preview */ }
-
-  try{
-    demo = await fetch(API+"/api/demo").then(r=>r.json());
-  }catch(e){ demo = FALLBACK_DEMO(); }
-
+    const dot=$("#live-dot"); dot.style.background = live_llm ? "#8bd17c" : "#f6c453";
+    dot.style.boxShadow = "0 0 12px "+dot.style.background;
+  }catch(e){}
+  try{ demo = await fetch(API+"/api/demo").then(r=>r.json()); }
+  catch(e){ demo = FALLBACK_DEMO(); }
   AGENT_META = demo.meta.personas;
   AGENT_META.forEach(spawnAgent);
-  // position from first snapshot
   applySnapshot(demo.snapshots[0], demo.snapshots[0], 0);
   onScroll();
 }
 
-// build a tiny fallback if API/demo missing so page never looks broken
 function FALLBACK_DEMO(){
-  const personas = [
-    {id:"mara",name:"Mara",role:"baker",traits:"warm",color:"#f6c453"},
-    {id:"theo",name:"Theo",role:"blacksmith",traits:"gruff",color:"#e6704b"},
-    {id:"ines",name:"Ines",role:"merchant",traits:"sharp",color:"#6ec6ff"},
-    {id:"caleb",name:"Caleb",role:"medic",traits:"calm",color:"#8bd17c"},
-  ];
+  const personas = Object.entries(LOCATIONS).slice(1).map(([id,L],i)=>(
+    {id, name:id[0].toUpperCase()+id.slice(1), role:"resident", traits:"curious",
+     color:"#"+L.c.toString(16).padStart(6,"0"), home:id}));
   const snaps=[]; for(let t=1;t<=20;t++){ snaps.push({tick:t, events:[], agents:personas.map(p=>{
-    const L=Object.values(LOCATIONS)[Math.floor(Math.random()*8)];
+    const L=LOCATIONS[Object.keys(LOCATIONS)[1+((t+personas.indexOf(p))%7)]];
     return {id:p.id,name:p.name,role:p.role,color:p.color,x:L.x+(Math.random()-.5)*3,y:L.y+(Math.random()-.5)*3,
       mood:"neutral",location:"plaza",memory_count:t,relationships:{},recent_memories:[]};
   })}); }
   return {meta:{personas, locations:LOCATIONS, live:false}, snapshots:snaps, final_agents:snaps[snaps.length-1].agents};
 }
 
-function agentStateAt(snap, id){ return snap.agents.find(a=>a.id===id); }
-
+const agentStateAt=(snap,id)=>snap.agents.find(a=>a.id===id);
 function applySnapshot(prev, next, t){
-  next.agents.forEach(a=>{
-    const A = agents[a.id]; if(!A) return;
-    const p = agentStateAt(prev, a.id) || a;
-    const x = lerp(p.x, a.x, t), z = lerp(p.y, a.y, t);
-    A.target.set(x, 0.7, z);
-    A.data = a;
-  });
+  next.agents.forEach(a=>{ const A=agents[a.id]; if(!A) return;
+    const p=agentStateAt(prev,a.id)||a;
+    A.target.set(lerp(p.x,a.x,t), 0.8, lerp(p.y,a.y,t)); A.data=a; });
 }
-
 function fireEvents(snap){
   snap.events.forEach(ev=>{
-    if(ev.type==="dialogue"){ showBubble(ev.agent, ev.text, false); }
-    else if(ev.type==="reflection"){ showBubble(ev.agent, ev.text, true); }
+    if(ev.type==="dialogue") showBubble(ev.agent, ev.text, false);
+    else if(ev.type==="reflection") showBubble(ev.agent, ev.text, true);
     else if(ev.type==="world_event"){ toast("🌍 "+ev.text); flashWorld(); }
   });
   if(selected) renderInspector(selected);
 }
-
 function showBubble(id, text, reflect){
   let b = bubbles[id];
   if(!b){ const el=document.createElement("div"); el.className="bubble"; labelsEl.appendChild(el); b={el}; bubbles[id]=b; }
@@ -292,44 +329,31 @@ function showBubble(id, text, reflect){
   b.el.innerHTML = `<div class="who">${reflect?"reflects":nm}</div>${text}`;
   b.el.style.opacity = 1; b.ttl = performance.now() + (reflect?4200:3200);
 }
-
 function toast(msg){ const t=$("#toast"); t.textContent=msg; t.classList.add("on");
   clearTimeout(toast._t); toast._t=setTimeout(()=>t.classList.remove("on"), 3200); }
+let worldFlash = 0; function flashWorld(){ worldFlash = 1; }
 
-let worldFlash = 0;
-function flashWorld(){ worldFlash = 1; }
-
-// project 3D -> screen for html labels
 const _v = new THREE.Vector3();
-function project(pos){
-  _v.copy(pos).project(camera);
-  return {x:(_v.x*0.5+0.5)*window.innerWidth, y:(-_v.y*0.5+0.5)*window.innerHeight, vis:_v.z<1};
-}
-
+function project(pos){ _v.copy(pos).project(camera);
+  return {x:(_v.x*0.5+0.5)*window.innerWidth, y:(-_v.y*0.5+0.5)*window.innerHeight}; }
 function updateLabels(){
-  Object.entries(bubbles).forEach(([id,b])=>{
-    const A = agents[id]; if(!A) return;
-    const s = project(A.group.position.clone().add(new THREE.Vector3(0,1.4,0)));
+  Object.entries(bubbles).forEach(([id,b])=>{ const A=agents[id]; if(!A) return;
+    const s=project(A.group.position.clone().add(new THREE.Vector3(0,1.6,0)));
     b.el.style.left=s.x+"px"; b.el.style.top=s.y+"px";
-    if(performance.now()>b.ttl) b.el.style.opacity=0;
-  });
+    if(performance.now()>b.ttl) b.el.style.opacity=0; });
 }
 
-// =========================================================================
-// Inspector
-// =========================================================================
+// inspector
 function renderInspector(id){
-  const A = agents[id]; if(!A||!A.data) return;
-  const d = A.data;
-  const rel = Object.entries(d.relationships||{}).sort((a,b)=>b[1]-a[1]);
-  const relHtml = rel.length ? rel.map(([oid,v])=>{
-    const nm = agents[oid]?.meta?.name || oid; const pct=Math.abs(v)*100;
-    const col = v>=0? "#8bd17c":"#e6704b"; const side = v>=0? "left:50%":"right:50%";
+  const A=agents[id]; if(!A||!A.data) return; const d=A.data;
+  const rel=Object.entries(d.relationships||{}).sort((a,b)=>b[1]-a[1]);
+  const relHtml=rel.length?rel.map(([oid,v])=>{ const nm=agents[oid]?.meta?.name||oid; const pct=Math.abs(v)*100;
+    const col=v>=0?"#8bd17c":"#e6704b"; const side=v>=0?"left:50%":"right:50%";
     return `<div class="rel"><span>${nm}</span><span class="bar"><i style="${side};width:${pct/2}%;background:${col}"></i></span><span style="color:${col};font-family:var(--mono);font-size:11px">${v>0?"+":""}${v.toFixed(2)}</span></div>`;
-  }).join("") : `<div class="field v" style="color:var(--muted)">No bonds yet.</div>`;
-  const mems = (d.recent_memories||[]).slice().reverse().map(m=>
+  }).join(""):`<div class="field v" style="color:var(--muted)">No bonds yet.</div>`;
+  const mems=(d.recent_memories||[]).slice().reverse().map(m=>
     `<div class="mem ${m.kind}"><div class="meta">${m.kind} · t${m.tick} · importance ${m.importance}</div>${m.text}</div>`).join("");
-  $("#insp-body").innerHTML = `
+  $("#insp-body").innerHTML=`
     <h3 style="color:${A.meta.color}">${d.name}</h3>
     <div class="role">${d.role} · age ${A.meta.age||""} · ${d.mood}</div>
     <div class="field"><div class="k">Personality</div><div class="v">${A.meta.traits}</div></div>
@@ -338,28 +362,25 @@ function renderInspector(id){
     <div class="field"><div class="k">Recent mind</div>${mems||'<div class="v" style="color:var(--muted)">…</div>'}</div>`;
   $("#inspector").classList.add("on");
 }
-$("#insp-close").onclick = ()=>{ $("#inspector").classList.remove("on"); selected=null; };
+$("#insp-close").onclick=()=>{ $("#inspector").classList.remove("on"); selected=null; };
 
-// raycast click
-const ray = new THREE.Raycaster(); const mouse = new THREE.Vector2();
-canvas.addEventListener("click", (e)=>{
-  if(MODE!=="live") return;
+const ray=new THREE.Raycaster(); const mouse=new THREE.Vector2();
+canvas.addEventListener("click",(e)=>{ if(MODE!=="live") return;
   mouse.x=(e.clientX/window.innerWidth)*2-1; mouse.y=-(e.clientY/window.innerHeight)*2+1;
-  ray.setFromCamera(mouse, camera);
-  const hits = ray.intersectObjects(agentGroup.children, true);
-  if(hits.length){ let o=hits[0].object; while(o && !o.userData.id) o=o.parent;
+  ray.setFromCamera(mouse,camera);
+  const hits=ray.intersectObjects(agentGroup.children,true);
+  if(hits.length){ let o=hits[0].object; while(o&&!o.userData.id) o=o.parent;
     if(o){ selected=o.userData.id; renderInspector(selected); } }
 });
 
-// =========================================================================
-// Mode switching
-// =========================================================================
+// mode switching
 function enterLive(){
   MODE="live"; document.body.style.overflow="hidden";
   $("#story").style.display="none"; $("#scroll-hint").style.display="none";
   $("#live").classList.add("on"); $("#controls").style.display="flex";
   $("#backbtn").classList.add("on"); $("#statbar").classList.add("on");
   props.visible=false; frame=0; interp=0; playing=true; lastStep=performance.now();
+  if(demo) fireEvents(demo.snapshots[0]);
   toast("Click any agent to read its mind.");
 }
 function exitLive(){
@@ -368,53 +389,40 @@ function exitLive(){
   $("#controls").style.display="none"; $("#backbtn").classList.remove("on");
   $("#statbar").classList.remove("on"); $("#inspector").classList.remove("on");
   props.visible=true; Object.values(bubbles).forEach(b=>b.el.style.opacity=0);
-  window.scrollTo({top:document.body.scrollHeight, behavior:"instant"});
+  window.scrollTo({top:document.body.scrollHeight});
 }
-$("#enter-btn").onclick = enterLive;
-$("#enter-btn2").onclick = ()=> window.open("https://github.com/","_blank"); // README link swapped at deploy
-$("#backbtn").onclick = exitLive;
-$("#play").onclick = ()=>{ playing=!playing; $("#play").textContent = playing?"⏸ Pause":"▶ Play"; lastStep=performance.now(); };
-$("#restart").onclick = ()=>{ frame=0; interp=0; };
-$("#speed").onchange = (e)=>{ stepMs=+e.target.value; };
-
-// inject event: try live API, else locally splice into stream
-$("#event-send").onclick = injectEvent;
-$("#event-input").addEventListener("keydown", e=>{ if(e.key==="Enter") injectEvent(); });
+$("#enter-btn").onclick=enterLive;
+$("#enter-btn2").onclick=()=>window.open("https://github.com/data-geek-astronomy/polis","_blank");
+$("#backbtn").onclick=exitLive;
+$("#play").onclick=()=>{ playing=!playing; $("#play").textContent=playing?"⏸ Pause":"▶ Play"; lastStep=performance.now(); };
+$("#restart").onclick=()=>{ frame=0; interp=0; };
+$("#speed").onchange=(e)=>{ stepMs=+e.target.value; };
+
+$("#event-send").onclick=injectEvent;
+$("#event-input").addEventListener("keydown",e=>{ if(e.key==="Enter") injectEvent(); });
 async function injectEvent(){
-  const txt = $("#event-input").value.trim(); if(!txt) return;
-  $("#event-input").value="";
+  const txt=$("#event-input").value.trim(); if(!txt) return; $("#event-input").value="";
   toast("🌍 "+txt); flashWorld();
   try{
     await fetch(API+"/api/event",{method:"POST",headers:{"Content-Type":"application/json"},body:JSON.stringify({text:txt})});
-    const r = await fetch(API+"/api/step",{method:"POST",headers:{"Content-Type":"application/json"},body:JSON.stringify({ticks:3})}).then(r=>r.json());
-    if(r.snapshots && r.snapshots.length){
-      demo.snapshots.push(...r.snapshots);
-      toast("The town responds…");
-    }
-  }catch(e){
-    // offline: broadcast as a reflection-style bubble to a few agents
-    Object.keys(agents).slice(0,3).forEach(id=> showBubble(id, "Did you hear? "+txt, true));
-  }
+    const r=await fetch(API+"/api/step",{method:"POST",headers:{"Content-Type":"application/json"},body:JSON.stringify({ticks:3})}).then(r=>r.json());
+    if(r.snapshots&&r.snapshots.length){ demo.snapshots.push(...r.snapshots); toast("The town responds…"); }
+  }catch(e){ Object.keys(agents).slice(0,3).forEach(id=>showBubble(id,"Did you hear? "+txt,true)); }
 }
 
 // =========================================================================
-// Render loop
+// Render loop  (starts immediately — never gated on network)
 // =========================================================================
 function tickPlayback(now){
   if(!demo) return;
-  if(playing && now-lastStep > stepMs){
-    lastStep = now;
-    if(frame < demo.snapshots.length-1){ frame++; interp=0;
-      fireEvents(demo.snapshots[frame]);
-    }
-  }
-  interp = Math.min(1, interp + (16/stepMs));
-  const prev = demo.snapshots[Math.max(0,frame-1)];
-  const cur = demo.snapshots[frame];
-  if(prev && cur) applySnapshot(prev, cur, smooth(interp));
-  $("#tickinfo").textContent = "tick "+(cur?cur.tick:0)+" / "+demo.snapshots[demo.snapshots.length-1].tick;
-  const b = cur?.budget;
-  $("#statbar").innerHTML = `<span>agents <b>${AGENT_META.length}</b></span>
+  if(playing && now-lastStep>stepMs){ lastStep=now;
+    if(frame<demo.snapshots.length-1){ frame++; interp=0; fireEvents(demo.snapshots[frame]); } }
+  interp=Math.min(1, interp+(16/stepMs));
+  const prev=demo.snapshots[Math.max(0,frame-1)], cur=demo.snapshots[frame];
+  if(prev&&cur) applySnapshot(prev,cur,smooth(interp));
+  $("#tickinfo").textContent="tick "+(cur?cur.tick:0)+" / "+demo.snapshots[demo.snapshots.length-1].tick;
+  const b=cur?.budget;
+  $("#statbar").innerHTML=`<span>agents <b>${AGENT_META.length}</b></span>
     <span>tick <b>${cur?cur.tick:0}</b></span>
     <span>memories <b>${cur?cur.agents.reduce((s,a)=>s+a.memory_count,0):0}</b></span>
     <span>engine <b>${live_llm?"OpenAI":"mock"}</b></span>
@@ -423,33 +431,49 @@ function tickPlayback(now){
 
 function animate(now){
   requestAnimationFrame(animate);
+  now = now || 0;
 
-  if(MODE==="story"){ updateStoryCamera(); }
+  if(MODE==="story"){ updateStoryCamera(now); }
   else { tickPlayback(now);
-    // live camera slow orbit unless inspecting
-    const a = now*0.00007;
-    camera.position.lerp(new THREE.Vector3(Math.sin(a)*30, 24, Math.cos(a)*30), 0.02);
-    camTarget.lerp(new THREE.Vector3(0,0.5,0), 0.05);
+    const a=now*0.00007;
+    camera.position.lerp(new THREE.Vector3(Math.sin(a)*26, 18, Math.cos(a)*26), 0.02);
+    camTarget.lerp(new THREE.Vector3(0,1,0), 0.05);
   }
 
-  // agent motion + bob
+  // agents
   Object.values(agents).forEach(A=>{
     A.group.position.lerp(A.target, 0.12);
-    A.bob += 0.03; A.group.position.y = 0.7 + Math.sin(A.bob)*0.08;
-    const on = (MODE==="live");
-    A.glow.material.opacity = on ? 0.18+0.06*Math.sin(A.bob*2) : 0.12;
-    A.glow.scale.setScalar(selected===A.meta.id ? 1.5 : 1);
-    A.body.material.emissiveIntensity = selected===A.meta.id ? 1.1 : 0.55;
+    A.bob += 0.03; A.group.position.y = 0.8 + Math.sin(A.bob)*0.1;
+    const sel = selected===A.meta.id;
+    A.halo.material.opacity = (MODE==="live"?0.85:0.6) + 0.15*Math.sin(A.bob*2);
+    A.halo.scale.setScalar(sel?4.4:3.0);
+    A.beam.material.opacity = MODE==="live" ? 0.35 : 0.18;
+    A.body.material.emissiveIntensity = sel?1.6:0.9;
   });
 
-  // memory orbit anim
-  memNodes.forEach(n=>{ n.a += 0.01*n.s;
+  // towers pulse
+  towerPulse.forEach(t=>{ t.phase+=0.02;
+    const s=1+Math.sin(t.phase)*0.06; t.cap.scale.set(s,1,s);
+    t.halo.material.opacity = 0.5+0.25*Math.sin(t.phase); });
+  coreRing.rotation.z += 0.004;
+  core.material.opacity = 0.6+0.25*Math.sin(now*0.002);
+
+  // data streams
+  const sd=streamGroup.userData;
+  if(sd){ const pos=sd.g.attributes.position.array;
+    sd.meta.forEach((m,i)=>{ m.a+=0.004*m.s;
+      pos[i*3]=Math.cos(m.a)*m.r; pos[i*3+2]=Math.sin(m.a)*m.r;
+      pos[i*3+1]=m.y+Math.sin(now*0.001+i)*0.3; });
+    sd.g.attributes.position.needsUpdate=true; }
+
+  // memory orbit
+  memNodes.forEach(n=>{ n.a+=0.01*n.s;
     n.m.position.set(Math.cos(n.a)*n.r, 1+n.y*0.6, Math.sin(n.a)*n.r); });
 
-  // world flash decay
-  if(worldFlash>0){ worldFlash*=0.94; rim.intensity = 1.2 + worldFlash*6;
-    scene.fog.color.setRGB(0.02+worldFlash*0.15, 0.024, 0.04); }
-  else { scene.fog.color.setHex(0x05060a); rim.intensity=1.2; }
+  // world flash
+  if(worldFlash>0){ worldFlash*=0.94; rimC.intensity=1.4+worldFlash*10;
+    scene.fog.color.setRGB(0.04+worldFlash*0.2,0.03,0.06); }
+  else { scene.fog.color.setHex(0x05060f); rimC.intensity=1.4; }
 
   camera.lookAt(camTarget);
   updateLabels();
@@ -457,9 +481,12 @@ function animate(now){
 }
 
 window.addEventListener("resize", ()=>{
-  camera.aspect = window.innerWidth/window.innerHeight; camera.updateProjectionMatrix();
+  camera.aspect=window.innerWidth/window.innerHeight; camera.updateProjectionMatrix();
   renderer.setSize(window.innerWidth, window.innerHeight);
 });
 
-boot().then(()=> requestAnimationFrame(animate));
+// START RENDERING NOW; load data in parallel.
+requestAnimationFrame(animate);
+onScroll();
+boot();
 })();

static/index.html

@@ -238,6 +238,17 @@
 <div class="toast" id="toast"></div>
 
 <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
-<script src="app.js"></script>
+<script>
+// Robust loader: if the primary CDN is blocked, fall back to unpkg before
+// loading app.js — guarantees the 3D scene never silently fails to boot.
+(function(){
+  function loadApp(){ var s=document.createElement('script'); s.src='app.js?v=2'; document.body.appendChild(s); }
+  if(window.THREE){ loadApp(); return; }
+  var f=document.createElement('script');
+  f.src='https://unpkg.com/three@0.128.0/build/three.min.js';
+  f.onload=loadApp; f.onerror=loadApp;
+  document.body.appendChild(f);
+})();
+</script>
 </body>
 </html>