// Missing Link: the before/after that carries the Solution slide. // // The two states are deliberately different LAYOUTS, not one layout recoloured. // Before AdMel there is no convergence point and no unified dashboard, because // a single operator view is a thing AdMel creates. Drawing one in the broken // state would give the product away and make the problem look organised. // // State A 2x2 grid of four isolated system panels, no lines, no centre. // State B four sources feeding one decision layer feeding one dashboard. // // The transition is the pitch: the panels slide into a column, the connectors // draw themselves, and four conflicting stock figures resolve into one. const { useState, useEffect, useRef, useCallback } = React; // ───────────────────────── Layout const STAGE_W = 1820; const H_MIN = 0.40 * STAGE_W; const H_MAX = 0.715 * STAGE_W; // All four panels are the same colour. The box IS the argument — four // disconnected systems — so only the conflicting numbers carry coral. const TINTS = ['var(--espresso)', 'var(--espresso)', 'var(--espresso)', 'var(--espresso)']; // Slot 3 of the 2x2 is deliberately empty: no system of his sits there. const FIFTH_SLOT = 3; const lerp = (a, b, t) => a + (b - a) * t; // Panel boxes in both states; `t` walks one into the other. function geom(H, t, n) { n = n || 3; // number of real source systems const gap = 34; // State A: 2x2 filling the upper two thirds const aTop = 0.045 * H, aH = (0.545 * H - gap) / 2; const aW = (STAGE_W - gap) / 2; const before = [0, 1, 2, 3].map(i => ({ x: (i % 2) * (aW + gap), y: aTop + Math.floor(i / 2) * (aH + gap), w: aW, h: aH, })); // State B: a narrow source column on the left const bW = 340, bH = 0.145 * H, bTop = 0.10 * H, bStep = 0.20 * H; const after = [0, 1, 2, 3].map(i => ({ x: 0, y: bTop + i * bStep, w: bW, h: bH })); // Three sources feed the layer; the fourth box is the AdMel panel's slot. const panels = before.map((b, i) => ({ x: lerp(b.x, after[i].x, t), y: lerp(b.y, after[i].y, t), w: lerp(b.w, after[i].w, t), h: lerp(b.h, after[i].h, t), })); const admel = { x: 550, w: 570, y: 0.235 * H, h: 0.53 * H }; // Same top and height as the decision layer: the two cards are one row const dash = { x: 1230, w: 590, y: 0.235 * H, h: 0.53 * H }; const portL = { x: admel.x, y: admel.y + admel.h / 2 }; const portR = { x: admel.x + admel.w, y: admel.y + admel.h / 2 }; const dashPort = { x: dash.x, y: dash.y + dash.h / 2 }; const curve = (a, b) => { const mx = (a.x + b.x) / 2; return `M ${a.x} ${a.y} C ${mx} ${a.y}, ${mx} ${b.y}, ${b.x} ${b.y}`; }; const feeds = after.slice(0, n).map(p => curve({ x: p.x + p.w + 12, y: p.y + p.h / 2 }, portL)); return { H, panels, admel, dash, feeds, trunk: curve(portR, dashPort) }; } // ───────────────────────── Type (stage units; scale is ~1.02 at 1920x1080) const TYPE = { panelVendor: 22, panelKey: 22, panelMetric: 24, panelValue: 86, panelFoot: 21, payload: 50, meta: 22, metricLabel: 23, metricValue: 60, was: 20, cardHead: 22, reduceNum: 62, recLabel: 20, recValue: 23, resolve: 74, dashTitle: 24, dashScope: 20, dashNum: 44, dashLabel: 20, dashFooter: 22, aiRecs: 21, }; // ───────────────────────── Hooks function useReducedMotion() { const [r, setR] = useState(false); useEffect(() => { const mq = window.matchMedia('(prefers-reduced-motion: reduce)'); const on = () => setR(mq.matches); on(); mq.addEventListener('change', on); return () => mq.removeEventListener('change', on); }, []); return r; } // Beats: hold the broken state, cite the number, transition, resolve, build the // dashboard, hold. The resolve beat is the long one on purpose. // Beat 0 now holds the setup line for two seconds before the panels // populate, so the viewer knows whose morning this is first. const BEAT_MS = [5000, 2200, 2000, 2600, 2400, 2200]; const BEATS = BEAT_MS.length; const B_CITE = 1, B_MOVE = 2, B_RESOLVE = 3, B_DASH = 4; function useBeats(running, reduced) { const [tick, setTick] = useState(0); // ?static=1 lands the simulation on its final beat and stops the loop, so a // headless capture is deterministic instead of whatever frame it caught. if (window.__STATIC) reduced = true; useEffect(() => { if (reduced || !running) return; const id = setTimeout(() => setTick(n => n + 1), BEAT_MS[tick % BEATS]); return () => clearTimeout(id); }, [running, reduced, tick]); if (reduced) return BEATS - 1; return tick % BEATS; } // Rests at the final value so a throttled frame clock can never leave a metric // frozen at zero, which on a stage is worse than no animation. function useCountUp(to, active, dur = 1100, delay = 0) { const [p, setP] = useState(1); const raf = useRef(null), t1 = useRef(null), t2 = useRef(null); useEffect(() => { if (!active) { setP(1); return; } setP(0); const begin = () => { const t0 = performance.now(); const step = (now) => { const q = Math.min(1, (now - t0) / dur); setP(q); if (q < 1) raf.current = requestAnimationFrame(step); }; raf.current = requestAnimationFrame(step); }; t1.current = setTimeout(begin, delay); t2.current = setTimeout(() => setP(1), delay + dur + 80); return () => { clearTimeout(t1.current); clearTimeout(t2.current); cancelAnimationFrame(raf.current); }; }, [to, active, dur, delay]); return to * (1 - Math.pow(1 - p, 3)); } function useStageMode() { const [stage, setStage] = useState(() => { try { return new URLSearchParams(window.location.search).get('stage') === '1'; } catch (e) { return false; } }); useEffect(() => { const root = document.documentElement; if (stage) root.dataset.stage = '1'; else delete root.dataset.stage; return () => { delete root.dataset.stage; }; }, [stage]); const toggle = useCallback(() => { setStage(s => { const next = !s; try { if (next && !document.fullscreenElement) document.documentElement.requestFullscreen?.(); if (!next && document.fullscreenElement) document.exitFullscreen?.(); } catch (e) { /* fullscreen can be refused; stage mode still applies */ } return next; }); }, []); useEffect(() => { const onKey = (e) => { if (e.key !== 's' && e.key !== 'S') return; const el = document.activeElement; if (el && (el.tagName === 'INPUT' || el.tagName === 'TEXTAREA')) return; if (e.metaKey || e.ctrlKey || e.altKey) return; e.preventDefault(); toggle(); }; window.addEventListener('keydown', onKey); return () => window.removeEventListener('keydown', onKey); }, [toggle]); useEffect(() => { if (!stage) return; let id = null; const hide = () => { document.documentElement.dataset.idle = '1'; }; const wake = () => { delete document.documentElement.dataset.idle; clearTimeout(id); id = setTimeout(hide, 2000); }; wake(); window.addEventListener('mousemove', wake); window.addEventListener('mousedown', wake); return () => { clearTimeout(id); delete document.documentElement.dataset.idle; window.removeEventListener('mousemove', wake); window.removeEventListener('mousedown', wake); }; }, [stage]); return { stage, toggle }; } // ───────────────────────── Pieces // One system, drawn as a crude mock of its own product in state A and as a // labelled source in state B. Same element throughout, so it can travel. const MOVE = '1400ms cubic-bezier(0.65,0,0.2,1)'; function Panel({ p, box, tint, t, i }) { const detail = 1 - Math.min(1, t * 1.6); // the mock UI fades as it becomes a source // Derived from the space this panel actually has, never a fixed number. On a // short stage (normal mode, where the chat dock eats height) a fixed 86 made // the content taller than its box, and because the column is centred inside // overflow:hidden it clipped at the top as well as the bottom. const headerH = lerp(32, 20, t) + TYPE.panelVendor * 1.2; const contentH = box.h - headerH; const restH = TYPE.panelKey * 1.2 + TYPE.panelFoot * 1.2 + lerp(12, 4, t) + 10; const bigValue = Math.max(44, Math.min(TYPE.panelValue, contentH - restH)); const smallValue = p.value.length > 5 ? 22 : 34; return (
0.5 ? 'none' : '0 18px 44px -30px rgba(57,54,48,0.5)', overflow: 'hidden', display: 'flex', flexDirection: 'column', transition: `left ${MOVE}, top ${MOVE}, width ${MOVE}, height ${MOVE}, border-color 900ms ease, box-shadow 900ms ease, border-radius 900ms ease`, }}> {/* each panel keeps its own header bar so the four read as four products */}
{p.vendor}
{p.key}
{p.metric} {p.value}
{p.foot}
); } // The four figures colliding and resolving. This is the argument. // // The resolved number must not equal any input. When it did, the slide read as // though AdMel just picked whichever source it trusted, which proves nothing. // Showing the arithmetic is the proof: every system is wrong in its own way, // and the true figure is derived, not chosen. function Resolve({ show, panels, T }) { const from = T.sim.resolveFrom; return (
{/* what the four systems each claimed */}
{panels.map((p, i) => ( {i > 0 && ·} {p.value} ))}
{/* the arithmetic, so an investor can check it */}
{from.v} {from.k}
{T.sim.resolveSteps.map(st => (
{st.op} {st.v} {st.k}
))}
{T.sim.resolveLabel} {T.sim.resolveValue}
{T.sim.resolveNote}
); } function AdMelCard({ show, box, T }) { const rows = [ [T.sim.recWhat, T.sim.recWhatV], [T.sim.recHowMuch, T.sim.recHowMuchV], [T.sim.recWhen, T.sim.recWhenV], [T.sim.recWhy, T.sim.recWhyV], [T.sim.recConfidence, T.sim.recConfidenceV], ]; return (
AdMel ● live
{T.sim.aiRecs}
4 in → 1 out
{/* The reasoning is the differentiator, so every line gets equal weight */}
{rows.map(([k, v]) => (
{k} {v}
))}
); } // What changed for the person doing the ordering. This card does not exist // before AdMel, and the delta is the argument: both numbers in a row carry the // same weight so the eye reads the movement, not a footnote. function DashRow({ r, revealed, delay, lang }) { const n = useCountUp(r.target, revealed, 900, delay); const shown = revealed ? (r.dp ? n.toFixed(1) : String(Math.round(n))) + (r.suffix || '') : r.to; const out = lang === 'no' ? shown.replace('.', ',') : shown; return (
{r.from} {/* the arrow draws rather than appearing, so the movement is the event */} {out} {r.label}
); } function Dashboard({ show, box, T, lang }) { // Grey before-numbers land first; the movement starts 400ms later const [revealed, setRevealed] = useState(false); useEffect(() => { if (!show) { setRevealed(false); return; } const id = setTimeout(() => setRevealed(true), 400); return () => clearTimeout(id); }, [show]); return (
{T.sim.dashTitle}
{T.sim.dashScope}
{T.sim.dashRows.map((r, i) => ( ))}
{T.sim.dashFooter}
); } // ───────────────────────── Slide function MissingLinkSlide({ embedPhase, fifth }) { const embedded = !!embedPhase; const slideStyles = window.__slideStyles; const lang = window.__useLang(); const T = window.TDATA[lang]; const reduced = useReducedMotion(); const { stage, toggle } = useStageMode(); // ?state=a or ?state=b pins a state, so a screenshot of this slide is // deterministic instead of whatever beat the loop happened to be on. const [pinned, setPinned] = useState(() => { try { const v = new URLSearchParams(window.location.search).get('state'); if (v === 'a') return false; if (v === 'b') return true; } catch (e) { /* fall through to autoplay */ } return null; }); useEffect(() => { if (stage) setPinned(null); }, [stage]); const beat = useBeats(pinned === null, reduced); // Setup holds alone before anything populates. const [primed, setPrimed] = useState(embedded || reduced || pinned !== null); useEffect(() => { if (embedded || reduced || pinned !== null) { setPrimed(true); return; } setPrimed(false); const id = setTimeout(() => setPrimed(true), 2000); return () => clearTimeout(id); }, [reduced, pinned]); const auto = { cite: beat === B_CITE, moved: beat >= B_MOVE, resolve: beat === B_RESOLVE, dash: beat >= B_DASH, }; let ph = pinned === null ? auto : { cite: false, moved: pinned, resolve: false, dash: pinned }; // Driven from the solution room's beat rail when embedded. if (embedded) { ph = { cite: false, moved: false, resolve: embedPhase === 'resolve', dash: false, }; } const t = ph.moved ? 1 : 0; // Manual reconciliation clock, climbing while the state is broken const climb = useCountUp(4, !ph.moved && pinned === null, 2600, 0); const [ready, setReady] = useState(false); const [xform, setXform] = useState(''); const [stageH, setStageH] = useState(900); const ref = useRef(null); useEffect(() => { const el = ref.current; if (!el) return; const apply = () => { const w = el.clientWidth, h = el.clientHeight; if (!w || !h) return; const H = Math.max(H_MIN, Math.min(H_MAX, STAGE_W * h / w)); const s = Math.min(w / STAGE_W, h / H); setStageH(H); setXform(`translate(${(w - STAGE_W * s) / 2}px, ${(h - H * s) / 2}px) scale(${s})`); setReady(true); }; apply(); const raf = requestAnimationFrame(apply); const obs = new ResizeObserver(apply); obs.observe(el); return () => { cancelAnimationFrame(raf); obs.disconnect(); }; }, []); const g = geom(stageH, t, (T.sim.panels || []).length); const P = T.sim.panels; return (
{[false, true].map(v => ( ))}
{pinned !== null && ( )} {T.sim.compareHint}
{/* Connectors: they do not exist until AdMel draws them */} {ph.moved && g.feeds.map((d, i) => ( ))} {ph.dash && ( )} {/* Panels wait for the setup line to land. The four dim when the fifth arrives so it owns the stage. */}
{P.map((p, i) => ( ))}
{/* The fifth panel. Same geometry as the other four, in the row where none of his systems sit. */} {fifth && (() => { const box = g.panels[FIFTH_SLOT]; return (
{T.sim.fifthVendor}
{T.sim.fifthKey}
{T.sim.fifthMetric} {T.sim.fifthValue}
{T.sim.fifthFoot}
); })()} {/* Setup. The viewer is told whose Tuesday this is before any number appears; without it the four boxes have no referent. */}
{T.sim.setup}
{/* Payoff. Names what the resolution just demonstrated — the whole product thesis, which was previously left to inference. */}
{T.sim.payoff}
{/* The cost of starting. The answer to the only real objection in this segment, and the reason the channel scales without services headcount. Blue marks the claim, nothing else. */}
{T.sim.startLabel}
{T.sim.startBodyPre} {T.sim.startBodyHi} {T.sim.startBodyPost}
{/* State A only: the payload, the manual grind, the retailer's cost */}
{T.sim.payload}
⟳ {T.sim.reconcilingLabel} · {window.__hm(Math.round(120 + climb * 6))}
{/* The cursor that never settles */} {!ph.moved && !reduced && (
)} {/* Held citation. Sits in the payload's slot, not over the panels: covering the four conflicting numbers defeats the point of them. */}
{T.sim.distortion}
{T.sim.distortionSource}
{/* Four answers becoming one. The whole slide exists for this. */} {/* All four answer the same question in their own language, so all four are struck before the derived figure lands. */}
); } Object.assign(window, { MissingLinkSlide });