// living-lab-scene.jsx — the Evidence Engine, told like a professor drawing it
// out on a chalkboard: every element strokes on in sequence, lettering writes in
// letter by letter, and the flows only begin once their roads exist.
//
// Two highways of information (gray/white multi-line, in the gaps, stopping at
// the frame borders — the orbs inform the phase of work and never enter a box):
// TOP (runs right): blue basic → oriented · green oriented → applied
// BOTTOM (runs left) : purple applied → oriented · green oriented → basic
const { Easing, clamp } = window;
const {
LAB, rng, frac, lerp, seg, dashDraw, HandText, makeLine, sampleLine, Pulse, Line, ZoneFrame,
AgentCell, SolutionCell, ThesisBox, ThoughtCloud, TRCard, boxPath,
FRAMES, CENTER, HIGHWAY, LABEL_Y, THOUGHT_Y, WMI_SMALL, FOUNDATION, SOLUTIONS, GROUPS, TR_IDS, layoutAgents,
} = window;
// ── the lecture schedule (seconds) — no rigid beats, just the telling ────────
const T = {
title: 0.3, sub: 2.0,
fL: 3.4, fM: 5.4, fR: 7.4, // the three stages, drawn one at a time
agents: 9.6, // the research field, sketched in
wmi: 14.6, // the current thesis
found: 17.2, // the protocol foundation
hwT: 20.0, hwB: 21.4, // the two highways, drawn in travel direction
blue: 22.8, green: 24.4, purple: 26.0, fund: 27.6, // the flows begin
pack: 30.6, deal: 31.4, // WMI consolidates; the TRs deal out
sols: 32.8, // solutions built as the reports publish
gem: 36.4, // a thought forms above
desc: 39.6, descEnd: 43.6, // GEM descends; WMI settles beneath
late: 44.2, // three more solutions, barely started
next: 47.0, // the next thought — the cycle turns
erase: 50.5, // the whole diagram fades away
fly: 52.6, // the flywheel draws — second-to-last beat
};
const SEQ_END = 64;
const LGAP = [FRAMES.left.x + FRAMES.left.w, FRAMES.mid.x];
const RGAP = [FRAMES.mid.x + FRAMES.mid.w, FRAMES.right.x];
function buildGeometry(n) {
const agents = layoutAgents(n);
const mk = (x0, y, x1, s) => makeLine(x0, y, x1, y, { amp: 1.0, seed: s });
// top highway drawn left→right; bottom highway built right→left so it draws
// (and flows) from the applied side back
const ltop = HIGHWAY.topYs.map((y, k) => mk(LGAP[0], y, LGAP[1], 300 + k));
const rtop = HIGHWAY.topYs.map((y, k) => mk(RGAP[0], y, RGAP[1], 310 + k));
const rbot = HIGHWAY.botYs.map((y, k) => mk(RGAP[1], y, RGAP[0], 320 + k));
const lbot = HIGHWAY.botYs.map((y, k) => mk(LGAP[1], y, LGAP[0], 330 + k));
const upLine = makeLine(WMI_SMALL.x - 4, WMI_SMALL.y - 46, CENTER.x - 4, CENTER.y + 78, { amp: 2, seed: 99 });
return { agents, ltop, rtop, rbot, lbot, upLine };
}
function Scene({ mt = 29, tweaks }) {
const { agents: agentN = 5, labels = true, pulses = 2 } = tweaks || {};
const L = labels;
const g = React.useMemo(() => buildGeometry(agentN), [agentN]);
const EO = Easing.easeOutCubic, EIO = Easing.easeInOutCubic;
const descP = seg(mt, T.desc, T.descEnd, EIO);
const packP = seg(mt, T.pack, T.pack + 2.2, EO);
const coreAngle = mt * 46;
const outDim = 1 - 0.5 * Math.sin(Math.PI * descP);
// WMI: drawn as the current thesis, later shrinks + settles beneath GEM
const wmiDraw = seg(mt, T.wmi, T.wmi + 1.6);
const wmiW = lerp(176, 112, descP), wmiH = lerp(188, 120, descP);
const wmiPos = { x: lerp(CENTER.x, WMI_SMALL.x, descP), y: lerp(CENTER.y, WMI_SMALL.y, descP) };
const wmiGlow = lerp(1, 0.62, descP);
const wmiConsolidate = 1 - 0.05 * packP * (1 - descP);
// GEM: a thought forms, then descends and is drawn in as the new thesis
const gemForm = seg(mt, T.gem, T.gem + 2.2, EO);
const gemY = lerp(THOUGHT_Y, CENTER.y, descP);
const bob = Math.sin(mt * 1.5) * 4 * (1 - descP);
const gemCloudO = gemForm * (1 - seg(mt, T.desc + 0.4, T.descEnd - 0.5));
const gemBoxDraw = seg(mt, T.desc + 0.8, T.descEnd - 0.2);
const upDraw = seg(mt, T.descEnd - 0.4, T.descEnd + 1.0);
const nextForm = seg(mt, T.next, T.next + 2.4, EO);
const newBob = Math.sin(mt * 1.4 + 1) * 4;
// ── flows (drift, never zip) — orbs live on the highways only ───────────────
const nP = clamp(Math.round(pulses), 1, 3);
const evidenceIn = seg(mt, T.blue, T.blue + 1.2);
const greenOut = seg(mt, T.green, T.green + 1.2) * outDim;
const greenFund = seg(mt, T.fund, T.fund + 1.2) * outDim;
const purpleBack = seg(mt, T.purple, T.purple + 1.2);
const pulseNodes = [];
const segOrbs = (segPts, { kind, n, speed, active, phaseSeed, key }) => {
if (active <= 0.02) return;
for (let k = 0; k < n; k++) {
const f = frac(mt * speed + rng(phaseSeed + k) + k / n);
const u = 0.04 + f * 0.92;
const p = sampleLine(segPts, u);
const edge = Math.min(f, 1 - f);
pulseNodes.push();
}
};
// dense flow: orbs ride EVERY lane of each highway — the volume is the meaning
const denseFlow = (band, kind, active, speed, seedBase, keyBase) => {
band.forEach((pts, li) => segOrbs(pts, { kind, n: nP + 3, speed: speed + li * 0.012, active, phaseSeed: seedBase + li * 13, key: keyBase + li }));
};
denseFlow(g.ltop, 'blue', evidenceIn, 0.19, 10, 'tb');
denseFlow(g.rtop, 'green', greenOut, 0.19, 40, 'tg');
denseFlow(g.rbot, 'purple', purpleBack, 0.17, 70, 'bp');
denseFlow(g.lbot, 'green', greenFund, 0.17, 100, 'bg');
// ── per-solution schedule ───────────────────────────────────────────────────
const solSchedule = (s) => {
let drawStart, feed;
if (s.era === 'foundation') { drawStart = T.found + 0.5 + s.i * 0.6; feed = T.green + 0.6; }
else if (s.era === 'reports') { drawStart = T.sols + (s.i - 2) * 0.7; feed = drawStart + 1.6; }
else { drawStart = T.late + (s.i - 6) * 0.6; feed = drawStart + 1.4; }
const draw = seg(mt, drawStart, drawStart + 1.1);
const progress = s.maxBar * seg(mt, feed, feed + 9);
const dim = s.era === 'gem' ? 1 : outDim;
const fed = seg(mt, feed, feed + 1) * dim;
const flash = 0.5 + 0.5 * Math.sin(mt * 2.4 + s.i * 1.7);
return { draw, progress, bright: fed * (0.45 + 0.55 * flash) };
};
// ── TR cards (the hero moment) ──────────────────────────────────────────────
const trCards = [];
for (let k = 0; k < 6; k++) {
const deal = seg(mt, T.deal + k * 0.45, T.deal + 0.85 + k * 0.45, EO);
if (deal <= 0.01) continue;
const gather = seg(mt, T.desc, T.desc + 1.4, Easing.easeInCubic);
const fanX = CENTER.x + (k - 2.5) * 60, fanY = CENTER.y + 172 + Math.abs(k - 2.5) * 6, rot = (k - 2.5) * 8;
const x = lerp(lerp(CENTER.x, fanX, deal), wmiPos.x, gather);
const y = lerp(lerp(CENTER.y, fanY, deal), wmiPos.y, gather);
const sc = lerp(0.5 + 0.5 * deal, 0.25, gather), o = deal * (1 - gather);
trCards.push(
);
}
const subO = seg(mt, T.deal + 2.2, T.deal + 3.4) * (1 - seg(mt, T.desc, T.desc + 1));
const substrate = subO > 0.02 ? (
{[0, 1, 2, 3].map((i) => (
))}
) : null;
const foundDraw = seg(mt, T.found, T.found + 1.1);
// the protocol foundation sits centred in its frame, then settles to the base
// as the other solutions appear on top of it
const protoDY = lerp(-284, 0, seg(mt, T.sols, T.sols + 2.6, EO));
const agentStag = Math.min(0.55, 4.4 / agentN);
// legend reveals — each concept written in as it enters the story
const lgd = {
research: seg(mt, T.hwT + 0.4, T.hwT + 1.5),
evidence: seg(mt, T.blue, T.blue + 1.1),
cleared: seg(mt, T.green, T.green + 1.1),
innovation: seg(mt, T.purple, T.purple + 1.1),
thesis: seg(mt, T.wmi + 0.9, T.wmi + 2.0),
next: seg(mt, T.gem + 1.0, T.gem + 2.1),
};
const hwLine = (pts, draw, k) => (
);
const mainFade = 1 - seg(mt, T.erase, T.erase + 1.7);
const flyDraw = seg(mt, T.fly, T.fly + 9.4, EO);
return (
);
}
Object.assign(window, { Scene, SEQ_END_SCENE: SEQ_END });