// ============================================================
// Paper Trail v3 — scroll-driven single scene
// ============================================================
// One sticky stage. Progress (0 → 1) derived from scroll within
// a tall track. All elements interpolate continuously.
//
// Checkpoints along progress axis:
// 0.00 chaos — 9 tool cards scattered
// 0.14 centralize — cards converge into Control (retro terminal)
// 0.32 tether — user tethers a mission to Control
// 0.45 plan — CoS branches from Control; mission brief builds
// 0.63 work — 3 specialist branches + tool leaves; scans happen
// 0.83 reassembly — outputs flow up the tree
// 0.95 delivered — final artifact at the root
// ============================================================
const { useState, useEffect, useRef, useMemo } = React;
// ---- math helpers ----------------------------------------------
const clamp = (v, a = 0, b = 1) => Math.max(a, Math.min(b, v));
const lerp = (a, b, t) => a + (b - a) * t;
const ease = (t) => t < 0.5 ? 2 * t * t : 1 - Math.pow(-2 * t + 2, 2) / 2; // in-out quad
// progress sub-range: 0 outside [a,b], eased 0→1 inside
const range = (p, a, b) => ease(clamp((p - a) / (b - a)));
// ---- data ------------------------------------------------------
// 3 tools per agent (rebalanced for equal tool chains)
// laneIdx = order within the agent's vertical chain (0 = top leaf, 2 = bottom)
const SCATTER = [
// Agent 0 · Trail (CMO · narrative)
{ id: "s1", tool: "slack", label: "Dana · \"need Acme proposal Thu\"", x: 8, y: 14, agent: 0, laneIdx: 0 },
{ id: "s2", tool: "gmail", label: "Ravi @ Acme · 22 msgs", x: 78, y: 10, agent: 0, laneIdx: 1 },
{ id: "s3", tool: "zoom", label: "Discovery call · 48min transcript", x: 18, y: 66, agent: 0, laneIdx: 2 },
// Agent 1 · Ledger (CRO · pricing)
{ id: "s4", tool: "hubspot", label: "Deal: Acme · $240k ARR", x: 70, y: 58, agent: 1, laneIdx: 0 },
{ id: "s5", tool: "drive", label: "pricing_q4_2025.xlsx", x: 6, y: 38, agent: 1, laneIdx: 1 },
{ id: "s6", tool: "notion", label: "Brand voice · v4", x: 84, y: 36, agent: 1, laneIdx: 2 },
// Agent 2 · Chart (Insights · rollout)
{ id: "s7", tool: "linear", label: "ENG-482 · rollout blockers", x: 44, y: 6, agent: 2, laneIdx: 0 },
{ id: "s8", tool: "granola", label: "Follow-up notes · 3 meetings", x: 56, y: 78, agent: 2, laneIdx: 1 },
{ id: "s9", tool: "jira", label: "PROC-19 · MSA review", x: 32, y: 86, agent: 2, laneIdx: 2 },
];
const SPECIALISTS = [
{ id: "cmo", name: "Trail", role: "CMO", task: "Exec summary", color: "#ffc880", llm: "Claude 4.5", lane: 0, output: "narrative_v1.md" },
{ id: "cro", name: "Ledger", role: "CRO", task: "Pricing", color: "#7dd3c0", llm: "GPT-5", lane: 1, output: "pricing_tiers.md" },
{ id: "insights", name: "Chart", role: "Insights", task: "Rollout", color: "#c9a0dc", llm: "Gemini 2.5", lane: 2, output: "rollout_plan.md" },
];
// ---- tool icons -------------------------------------------------
function ToolMark({ tool, size = 18, color = "#ffc880" }) {
const common = { width: size, height: size, viewBox: "0 0 24 24", fill: color };
switch (tool) {
case "slack": return ;
case "gmail": return ;
case "zoom": return ;
case "hubspot": return ;
case "notion": return ;
case "drive": return ;
case "linear": return ;
case "granola": return ;
case "jira": return ;
default: return ;
}
}
// ---- hook: scroll progress for a track -------------------------
function useScrollProgress(ref) {
const [p, setP] = useState(0);
useEffect(() => {
const el = ref.current;
if (!el) return;
let raf = 0;
const update = () => {
raf = 0;
const rect = el.getBoundingClientRect();
const vh = window.innerHeight;
const total = rect.height - vh;
const scrolled = -rect.top;
setP(clamp(scrolled / total));
};
const onScroll = () => { if (!raf) raf = requestAnimationFrame(update); };
update();
window.addEventListener("scroll", onScroll, { passive: true });
window.addEventListener("resize", onScroll);
return () => {
window.removeEventListener("scroll", onScroll);
window.removeEventListener("resize", onScroll);
if (raf) cancelAnimationFrame(raf);
};
}, [ref]);
return p;
}
// ---- beats config ---------------------------------------------
const BEATS = [
{ at: 0.02, k: "01", t: "Today", label: "Scattered chaos" },
{ at: 0.10, k: "02", t: "Control", label: "Signals centralized" },
{ at: 0.22, k: "03", t: "Tether", label: "You \u2192 Control" },
{ at: 0.36, k: "04", t: "Dispatch", label: "Control \u2192 Brief" },
{ at: 0.46, k: "05", t: "Plan", label: "Brief builds" },
{ at: 0.66, k: "06", t: "Fan-out", label: "Tree fans out" },
{ at: 0.74, k: "07", t: "Work", label: "Tools scanning" },
{ at: 0.92, k: "08", t: "Shipped", label: "Delivered" },
];
function findBeat(p) {
let cur = BEATS[0];
for (const b of BEATS) if (p >= b.at) cur = b;
return cur;
}
// ============================================================
// Main component
// ============================================================
// Embedded = true when mounted inside the landing page (no internal chrome; landing supplies its own TopNav + SectionTag).
// Embedded = false (default) when served as the standalone Paper Trail v3 page.
function PaperTrailV3({ embedded = false, sectionNum = "CTRL·05" } = {}) {
const trackRef = useRef(null);
const p = useScrollProgress(trackRef);
// sub-progresses — tether + work both stretched; scene is 900vh (see track height)
const pCentralize = range(p, 0.04, 0.14);
const pControl = range(p, 0.08, 0.22);
const pTether = range(p, 0.20, 0.36);
const pDispatch = range(p, 0.34, 0.46);
const pMission = range(p, 0.44, 0.66);
const pBriefShift = range(p, 0.64, 0.72);
const pAgents = range(p, 0.70, 0.78);
const pWork = range(p, 0.74, 0.92);
const pMerge = range(p, 0.90, 0.96);
const pDeliver = range(p, 0.94, 1.00);
const beat = findBeat(p);
// Chrome heights — standalone fixed bar is 180px; embedded depends on viewport width
// (landing TopNav + sticky intro bar). Tailwind responsive classes below handle mobile vs desktop.
const stage = (
{embedded ? (
// Embedded: responsive offset via Tailwind — mobile has taller stacked intro bar
) : (
// Standalone: fixed 180px offset
)}
);
// === EMBEDDED — renders inside the landing page ===
if (embedded) {
return (
<>
{/* Sticky section intro — sits just below landing's TopNav; stays in frame while track scrolls */}
◉ {sectionNum} · Paper Trail
From scattered chaos to one finished deliverable.
Control pulls every signal from every tool into one surface. Your Chief of Staff builds the mission and delegates to specialist agents who read docs, ingest data, query your knowledge base, and call the right LLMs. One clean artifact comes back.
{stage}
);
}
// === STANDALONE — served at /Paper Trail v3.html ===
return (
{/* Fixed top bar — pinned through the whole scroll */}
◉ CTRL·08
How Control gets work done
From scattered chaos to one finished deliverable.
Control pulls every signal from every tool into one surface. Your Chief of Staff builds the mission and delegates to specialist agents who read docs, ingest data, query your knowledge base, and call the right LLMs. One clean artifact comes back.
{/* === CONTROL HALO (soft glow behind the monitor) === */}
{/* === TREE CONNECTORS — dashed tree rooted at shifted Mission Brief === */}
{/* === INTER-TOOL DASHED FLOWS inside each lane === */}
{/* === TOOL CARDS — 9 persistent elements that transform === */}
{SCATTER.map((s) => (
))}
{/* === USER (left) === */}
{/* === USER → CONTROL TETHER (dashed flow line with traveling message) === */}
{/* === CONTROL MONITOR (retro terminal, center) === */}
{/* === CONTROL → BRIEF LINK (dispatch + live composing) === */}
{/* === MISSION BRIEF — builds on right, then travels to top-middle as tree root === */}
{/* === AGENT BRANCHES — specialists as tree leaves === */}
{/* === BRIEF → OUTCOME LINK (dashed line between brief and final proposal) === */}
{/* === FINAL DOCUMENT — built from checked tools flying up === */}
);
}
// ============================================================
// CONTROL RING — the platform surface that lights up
// ============================================================
function ControlRing({ p, pBriefShift = 0 }) {
// p: 0 invisible → 1 visible
// Fade out as brief takes over as tree root
const fade = 1 - pBriefShift;
const o = p * 0.9 * fade;
if (o < 0.02) return null;
return (
);
}
// ============================================================
// TOOL CARD — persistent element
// Positions over time:
// p=0: scattered at (s.x, s.y)
// centralize 1: collapsed to ring near center (angle from index)
// agents 1: moved to assigned agent's lane (top input slot)
// work done: dimmed / ✓
// ============================================================
function ToolCard({ data, pCentralize, pAgents, pWork, pMerge, pDeliver }) {
// scattered position (percentages)
const scatterPos = { x: data.x, y: data.y };
// ring position — original layout: full 360° orbit around Control at radius 14
const idx = parseInt(data.id.slice(1), 10) - 1;
const angle = (idx / 9) * Math.PI * 2 - Math.PI / 2;
const ringR = 14;
const ringPos = { x: 50 + Math.cos(angle) * ringR, y: 50 + Math.sin(angle) * ringR };
// agent lane position — x matches LANE_X (20/50/80), y stacks by laneIdx below each specialist
const laneX = [20, 50, 80][data.agent];
const laneY = 56 + data.laneIdx * 12; // 56, 68, 80 — matches ToolFlows segments
const lanePos = { x: laneX, y: laneY };
// collect destination: roll up INTO the brief at top-middle
const collectPos = { x: 50, y: 14 };
const collectStart = data.laneIdx * 0.12 + data.agent * 0.04; // bottom tools fly first
const collectP = clamp((pMerge - collectStart) / 0.45);
// interpolate: scattered → ring (pCentralize), ring → lane (pAgents), lane → collect (pMerge)
const pos1x = lerp(scatterPos.x, ringPos.x, pCentralize);
const pos1y = lerp(scatterPos.y, ringPos.y, pCentralize);
const pos2x = lerp(pos1x, lanePos.x, pAgents);
const pos2y = lerp(pos1y, lanePos.y, pAgents);
const x = lerp(pos2x, collectPos.x, collectP);
const y = lerp(pos2y, collectPos.y, collectP);
const size = lerp(210, 44, pCentralize);
const showFullCard = pCentralize < 0.5;
// tool is "being read" during its scan window; "consumed" after
const scanStart = 0.08 + data.agent * 0.10 + data.laneIdx * 0.10;
const scanEnd = scanStart + 0.28; // wider scan window (was 0.18)
const isBeingRead = pWork > scanStart && pWork < scanEnd;
const consumed = pWork > scanEnd;
// Full fade as it reaches the brief. After pDeliver the card is gone.
const collectFade = collectP > 0.55 ? lerp(1, 0, (collectP - 0.55) / 0.45) : 1;
const postDeliver = pDeliver > 0.2 ? 0 : 1;
const opacity = (consumed && collectP < 0.02 ? 0.55 : 1) * collectFade * postDeliver;
if (opacity < 0.02) return null;
return (
{showFullCard ? (
{data.tool}
{data.label}
) : (
{isBeingRead && (
)}
{consumed && (
✓
)}
)}
);
}
// ============================================================
// USER NODE
// ============================================================
function UserNode({ pTether }) {
// Appears as tether phase starts on left
const fadeIn = clamp(pTether * 2);
const x = lerp(-20, 15, fadeIn);
// Fully fade out once tether is done — no ghost behind
const fadeOut = clamp((pTether - 0.85) / 0.15);
const opacity = fadeIn * (1 - fadeOut);
if (opacity < 0.02) return null;
return (
person
You
);
}
// ============================================================
// TETHER LINE — dashed link from user → Control
// Draws in progressively; dashes flow continuously along the line
// to suggest a message being sent. No floating bubbles.
// ============================================================
function TetherLine({ p }) {
// Stage 1 of the two-stage message flow: User → Control only.
// The message types out on the wire, travels to Control, and is absorbed there.
// (Control then dispatches a NEW signal to the Brief — that's ControlToBriefLink.)
const drawIn = clamp(p / 0.22);
const fadeOut = clamp((p - 0.90) / 0.10);
const lineOpacity = clamp(p * 3) * (1 - fadeOut);
if (p < 0.01) return null;
// Anchor points in viewport %
const x1 = 17, y1 = 50; // user port
const x2 = 43, y2 = 50; // control port
const midx = (x1 + x2) / 2;
// Typewriter (slower — spread across more of the phase)
const MESSAGE = "Proposal for Acme — pricing + rollout + exec summary. Due Thu.";
const typeP = clamp((p - 0.15) / 0.40); // starts later, takes longer
const shownChars = Math.floor(MESSAGE.length * typeP);
const typed = MESSAGE.slice(0, shownChars);
const showCursor = typeP > 0 && typeP < 1;
// Bubble position: holds at midpoint while typing → travels to Control → absorbed (fades) AT Control
const travelToCtrl = clamp((p - 0.60) / 0.25); // mid → control
const absorbP = clamp((p - 0.80) / 0.18); // fades into Control
const bubbleX = lerp(midx, x2, travelToCtrl);
const bubbleY = y1;
const bubbleScale = lerp(1, 0.4, absorbP); // shrinks as it enters Control
const bubbleOpacity = clamp(p * 3) * (1 - absorbP);
const arrived = travelToCtrl > 0.8;
// Control receipt pulse — ring that appears when bubble reaches Control
const receiptPulse = travelToCtrl > 0.85 && absorbP < 0.9;
return (
{/* port ticks — rendered as DOM dots so they stay perfectly round */}
{drawIn > 0.05 && (
<>
)}
{/* Message bubble — types on wire, travels to Control, absorbed */}
{bubbleOpacity > 0.02 && drawIn > 0.1 && (
);
}
// ============================================================
// BRIEF → OUTCOME LINK — dashed line from the brief at top-middle
// down to the final proposal as it emerges in the center. Appears
// as the outcome materializes (late merge through deliver).
// ============================================================
function BriefToOutcomeLink({ pMerge, pDeliver }) {
const drawIn = clamp((pMerge - 0.45) / 0.4);
const opacity = drawIn;
if (opacity < 0.02) return null;
// Brief bottom ≈ (50, 20); outcome top ≈ (50, 46)
const x = 50;
const y1 = 20;
const y2 = 46;
return (
{/* Ports as DOM dots (stay round) */}
{/* inline label on the link */}
◉ {pDeliver > 0.2 ? "delivered" : "producing"}
);
}
// ============================================================
// CONTROL → BRIEF LINK — dashed line from Control monitor to
// the Mission Brief panel during the Plan phase, showing Control
// is actively composing the brief. Fades as the brief moves
// to top-middle (briefShift).
// ============================================================
function ControlToBriefLink({ pDispatch, pMission, pBriefShift }) {
// Two roles:
// 1. During pDispatch — a packet emerges from Control and travels to Brief (stage 2 of the message)
// 2. During pMission — the dashed link stays live (Control composing the brief)
// Fades out during pBriefShift.
const drawIn = clamp(pDispatch / 0.25); // line draws as dispatch starts
const fadeOut = pBriefShift;
const opacity = Math.max(drawIn, clamp(pMission * 1.5)) * (1 - fadeOut);
if (opacity < 0.02) return null;
// Coordinates
const x1 = 57, y1 = 50;
const x2 = 72, y2 = 50;
// Dispatch packet travels x1 → x2 during pDispatch
const packetP = clamp(pDispatch);
const packetX = lerp(x1, x2, packetP);
const showPacket = packetP > 0.05 && packetP < 0.98;
const arrived = packetP >= 0.95;
return (
{/* Dispatch packet as DOM dot (shown only while actively traveling) */}
{showPacket && (
);
}
// ============================================================
// FINAL DOC — emerges from the Control monitor (tree root),
// slides down to center of stage as it solidifies
// ============================================================
function FinalDoc({ pMerge, pDeliver }) {
// The outcome — emerges at center of stage (independent of the brief at top)
// Only appears late in merge and solidifies during deliver
const emerge = clamp((pMerge - 0.45) / 0.55);
if (emerge < 0.02) return null;
const delivered = pDeliver > 0.3;
// Standalone outcome position — centered, with the brief at top (y=14) and this below (y=52)
const y = 52;
const scale = lerp(0.45, 1, emerge);
return (