// ConceptE_Agent — Beat 1. A single labeled "Extraction Agent" CARD that
// visibly processes one document. No character, no cube-with-a-face.
//
// Layout (world coords, anchor at AX/AY = ~(500, 500) in the camera's tight frame):
//
// ┌── incoming docs (left) ──┐ ┌── Extraction Agent card ──┐ ┌── extracted fields ──┐
// │ stacked paper │ ───▶ │ [scan line sweeping] │ ───▶ │ Policy # │
// │ │ │ document being scanned │ │ Date │
// │ │ │ ✓ check when done │ │ Amount │
// └───────────────────────────┘ └───────────────────────────┘ └───────────────────────┘
//
// One clean pass per loop (during Beat 1). From Beat 2 onward this stays in
// place as the first node of the workflow — we hide its "satellites" (incoming
// stack, exit fields) and let the card quietly loop a scan animation.
function AgentScene({ t }) {
// The beat-1 camera centers on (~410, 410) at 2.3x zoom. In that frame we
// want the card to be ~centered. So we lay the card around (410, 410) too.
const AX = 410, AY = 410;
// ---- Beat 1 timings (ms, absolute on loop clock) ----
const docsEnter = localE(t, [100, 900], easeOut); // incoming docs slide in
const docLoad = localE(t, [700, 1300], easeInOut); // one doc enters the agent card
const scanSweep = localP(t, [1300, 2000]); // raw progress for scan line
const fieldsPop = localE(t, [1700, 2200], easeOut); // extracted fields appear
const checkPop = localE(t, [2000, 2350], easeOut); // green check stamps
const docExit = localE(t, [2250, 2600], easeInOut); // doc exits right into fields
// Hide/dim satellites after Beat 1 ends
const satelliteFade = t < CE.T12[0]
? 1
: 1 - localE(t, CE.T12);
// Idle scan after Beat 1 — the card keeps pulsing softly inside the workflow
const idleScanP = t > CE.B1[1] ? ((t % 2200) / 2200) : 0;
return (
{/* --- Incoming document stack (left) --- */}
{/* Arrow from docs → card */}
{/* --- The Extraction Agent card (always present; this IS the node) --- */}
{/* --- Extracted fields (right of card) --- */}
{/* Arrow from card → fields */}
);
}
// =========================================================
// AgentCard — a labeled card with the document scanning inside it.
// =========================================================
function AgentCard({ x, y, scanP, docLoad, checkP, docExit }) {
// Card dims — compact, legible at 2.25x zoom
const W = 140, H = 100;
const cx = x - W / 2, cy = y - H / 2;
return (
{/* Card drop shadow */}
{/* Card body */}
{/* Card header strip */}
{/* Sparkle + label */}
Extraction Agent
{/* Status dot (right side of header) */}
{/* Scan area — the document sits here */}
{/* inner container */}
{/* Document being processed — slides in from left during docLoad */}
{docLoad > 0.05 && (
{/* Scan tint that fills as scanP progresses */}
{scanP > 0 && scanP < 1 && (
<>
{/* scan line */}
)}
{/* Green check stamp when done */}
{checkP > 0 && (
)}
)}
);
}
// =========================================================
// DocStack — small stack of incoming docs, flat-iso lean
// =========================================================
function DocStack({ x, y, count = 3 }) {
return (
{Array.from({ length: count }).map((_, i) => (
))}
);
}
// =========================================================
// FlowArrow — a clean → arrow between elements
// =========================================================
function FlowArrow({ x1, y1, x2, y2, opacity = 1, color = "#000" }) {
return (
);
}
// =========================================================
// ExtractedFields — 3 simple value chips, staggered reveal
// =========================================================
function ExtractedFields({ x, y, p, opacity = 1 }) {
if (p <= 0) return null;
const fields = [
{ value: "Policy #", delay: 0 },
{ value: "Date", delay: 0.25 },
{ value: "Amount", delay: 0.5 },
];
return (
{fields.map((f, i) => {
const lp = clamp01((p - f.delay) / (1 - f.delay));
const e = easeOut(lp);
const dx = (1 - e) * -12;
return (
{f.value}
);
})}
);
}
Object.assign(window, { AgentScene, AgentCard });