{/* faint bg wordmark */}
crovi
{/* connectors: leaves on left → sourcing agent on right (only after intro settles) */}
{SAMPLES.map((s, i) => {
const sy = colCenterY(i);
const sx = S3_COL_X + S3_LEAF_W;
const tx = auditX - auditW / 2;
const path = `M ${sx} ${sy} L ${tx} ${sy}`;
// draw only after leaves have settled into the column
const drawP = clamp((t - INTRO_DUR - i * 0.05) / 0.55, 0, 1);
const failed = !s.pass && t > collapseStart;
const dim = failed ? clamp(1 - (t - collapseStart) / 0.6, 0, 1) : 1;
return (
{/* sample leaves — SAME chips as scene 2's keepers, sliding from
their zoomed end-of-scene-2 position into the audit column. */}
{SAMPLES.map((s, i) => {
// Tween: at introE=0, chip sits at scene-2 end position+scale.
// At introE=1, chip sits at column position+scale 1.0.
const targetCx = S3_COL_CX;
const targetCy = colCenterY(i);
const startCx = S2_END_LEAF_CX;
const startCy = S2_END_LEAF_CY[i];
const cxNow = startCx + (targetCx - startCx) * introE;
const cyNow = startCy + (targetCy - startCy) * introE;
const sNow = S2_END_SCALE + (1.0 - S2_END_SCALE) * introE;
const failed = !s.pass && t > collapseStart;
const failK = failed ? Easing.easeInCubic(clamp((t - collapseStart) / 0.6, 0, 1)) : 0;
const passGlow = s.pass && t > collapseStart + 0.2 ? clamp((t - collapseStart - 0.2) / 0.5, 0, 1) : 0;
// Standby breath: slow pulse while checks are running, stops at collapse.
// Only kicks in once leaves have settled into column (introT === 1).
const standby = introT >= 1 && t > 1.5 && t < collapseStart;
const breathT = standby ? Math.sin(((t - 1.5 + i * 0.35) / 2.0) * Math.PI * 2) * 0.5 + 0.5 : 0;
const breathFade = standby ? clamp((collapseStart - t) / 0.3, 0, 1) : 0;
const breath = breathT * breathFade;
// Default border matches scene 2's keeper leaves (leafHeat=0, no winner glow).
const borderColor = passGlow > 0
? C.brandHi
: (breath > 0
? tt(`oklch(${0.30 + 0.20 * breath} ${0.02 + 0.08 * breath} ${250 - 50 * breath})`)
: tt(`oklch(0.30 0.02 250)`));
// shimmer while running checks
const shimActive = introT >= 1 && t > 1.5 && t < collapseStart;
const shim = (() => {
if (!shimActive) return null;
const period = 2.6;
const stagger = i * 0.45;
const ph = (((t - 1.5) + stagger) % period) / period;
const fade = clamp((collapseStart - t) / 0.3, 0, 1);
return { ph, fade };
})();
const handle = s.name.toLowerCase()
.replace(/\s*·\s*/g, '.').replace(/\s+/g, '.').replace(/[^a-z.]/g, '');
const email = `partnerships@${handle}.org`;
return (
0
? `0 0 16px ${C.brandGlow}`
: (breath > 0 ? tt(`0 0 ${6 + 8 * breath}px oklch(0.74 0.14 195 / ${0.10 + 0.20 * breath})`) : 'none'),
display: 'flex', flexDirection: 'column', justifyContent: 'center',
gap: 4,
filter: failed ? `grayscale(${failK})` : 'none',
overflow: 'hidden',
}}>
{/* shimmer overlay during standby */}
{shim && (
)}
{/* row 1: name + price */}
0.5 ? 'line-through' : 'none',
}}>{s.name}
{s.price}
{s.pub && (
{Icons.doc(tt('oklch(0.62 0.02 250)'))}
)}
{/* row 2: email */}
{email}
{/* row 3: region + TAT tags. Status pip only appears AFTER reflow
completes — during the reflow the chip looks identical to scene 2's
keeper LeafChip (no extra controls), so the seam reads as the same
element evolving rather than a fresh component being drawn. */}
{introT >= 1 && (
{failed ? Icons.cross(C.inkText3, 12)
: passGlow > 0 ? Icons.check(C.brandHi, 14)
: }
)}
);
})}
{/* central Sourcing Agent card (right side) */}
{/* header */}
Audit agent
VALIDATING FIT
{/* divider */}
{/* checks list */}
{CHECKS.map((c, i) => {
const local = t - c.start;
const visible = local > -0.3;
if (!visible) return null;
const enterP = Easing.easeOutCubic(clamp((local + 0.3) / 0.4, 0, 1));
const running = local >= 0 && local < c.dur;
const done = local >= c.dur;
const runProg = running ? clamp(local / c.dur, 0, 1) : (done ? 1 : 0);
return (
{done ? Icons.check(C.brandHi, 14) :
running ? :
{done ? 'PASS' : running ? 'RUNNING' : 'QUEUED'}
);
})}
{/* bottom summary */}
{t > 5.4 && (
RESULT
2 of 4 sample routes cleared all checks
)}
{BUBBLES.map((b, i) => {
const bp = Easing.easeOutCubic(clamp((phaseT - b.at) / 0.16, 0, 1));
if (bp <= 0) return null;
const isOut = b.side === 'out';
const isPhone = b.icon === 'phone';
const accent = isOut || isPhone;
const phasePulse = isPhone ? Math.sin(clamp((phaseT - b.at) / 0.22, 0, 1) * Math.PI) : 0;
return (
{Icons[b.icon](accent ? C.brandHi : tt('oklch(0.62 0.02 250)'), 13)}
{isPhone && phasePulse > 0.05 && (
)}
);
})}