// crovi-scene4.jsx — picks up from scene 3.
// Identity fallback for the palette transformer; bare `T` is stripped by
// Babel's TS preset because it looks like a type parameter.
const tt = (typeof window !== 'undefined' && typeof window.T === 'function')
? window.T
: (s) => s;
//
// Continuity: scene 3 ends with the audit card centered at screen (1280, 540)
// at 820×540 with all checks done + summary. Scene 4 inherits THAT EXACT card
// and collapses it IN PLACE — no horizontal translation as it shrinks to a
// 240×80 pill. To preserve "in place" continuity, the entire scene-4 pipeline
// is anchored at screen X=1280 (instead of the usual stage center 960). Every
// focused pill therefore appears at X=1280; the camera pans rightward to
// follow the pipeline as quote → bundle → file ready come into view.
//
// Camera-follow horizontal pipeline:
// A (0.0–1.4s): Audit card collapses in place → "Audit agent ✓" pill at X=1280
// B (1.4–3.4s): Camera pans to "Negotiating a quote" (also lands at X=1280)
// C (3.4–6.0s): Camera pans to "Validate bundle"
// D (6.0–9.5s): LONG transit segment to "File ready"
// E (9.5–11s): "File ready" notification toast slides in with download
const COLLAPSE_AT = 1.4;
// Screen anchor: where focused pills sit horizontally. Set to the center of
// scene 3's audit card so the 3→4 seam aligns and the audit pill stays put.
const SCREEN_ANCHOR_X = 1920 / 2 + 320; // 1280
const TRANSIT_START = 6.5; // bundle done sooner — transit begins
const TRANSIT_END = 8.5; // accelerated transit (was 12.0)
const TOAST_AT = 8.5;
const QUOTE_CARD_AT = 3.6; // quote card materializes — appears with the pill
const BUNDLE_CLICK = 5.6; // ~2s of card hold (down from 3s)
const BUNDLE_DONE = 6.4; // line + check completes faster
const STEPS = [
{ id: 'audit', label: 'Audit agent',
appearAt: 0.0, spinAt: null, doneAt: 0.0, thread: null },
{ id: 'quote', label: 'Negotiating a quote',
appearAt: 1.5, spinAt: 1.7, doneAt: 2.7, thread: 'fast' },
{ id: 'bundle', label: 'Validate bundle',
appearAt: 3.3, spinAt: BUNDLE_CLICK, doneAt: BUNDLE_DONE,
needsClick: true, clickAt: BUNDLE_CLICK, thread: null },
{ id: 'contract', label: 'File ready',
appearAt: TOAST_AT, spinAt: null, doneAt: TOAST_AT,
thread: null, isDoc: true },
];
// Status words that rotate during the transit segment.
const TRANSIT_WORDS = ['Orchestrating', 'Logging', 'Assessing', 'Validating', 'Communicating'];
function Scene4Quote() {
const { localTime: t } = useSprite();
const cy = STAGE_H / 2;
// Pill geometry — bigger gap to FEEL like advancing.
const pillH = 80;
const pillGap = (id) => ({
'audit-quote': 260, // small gap
'quote-bundle': 320, // medium
'bundle-contract': 1100, // LONG — the process transit
}[id] || 280);
const pillW = (id) => ({
audit: 240,
quote: 320,
bundle: 280,
contract: 320,
}[id] || 260);
// Compute X positions left-to-right.
const widths = STEPS.map(s => pillW(s.id));
const xs = [];
{
let acc = 0;
for (let i = 0; i < STEPS.length; i++) {
xs.push(acc);
if (i < STEPS.length - 1) {
acc += widths[i] + pillGap(STEPS[i].id + '-' + STEPS[i+1].id);
}
}
}
const totalW = xs[xs.length - 1] + widths[widths.length - 1];
// Center the WHOLE strip at stage start (so audit is left-of-center, contract far right).
// The camera will translate this strip leftward as we advance.
const stripStartX = 200; // left padding before audit pill on the world
// ── Camera: which step is the focus, and where does it sit on the stage ──
// The focus point of each step is its horizontal center.
// We want the focus at stage center horizontally (or for transit, slowly traveling).
const focusXForStep = (i) => stripStartX + xs[i] + widths[i] / 2;
// Decide camera focus by time.
// Targets:
// t < 1.4: audit
// 1.4–3.4: quote
// 3.4–TRANSIT_START: bundle (slow hold for quote card + click)
// TRANSIT_START–TRANSIT_END: travel along transit line
// TRANSIT_END+: contract
let cameraX;
let cameraScale = 1;
if (t < 1.4) {
cameraX = focusXForStep(0);
} else if (t < 3.0) {
const k = Easing.easeInOutCubic(clamp((t - 1.4) / 0.9, 0, 1));
cameraX = focusXForStep(0) + (focusXForStep(1) - focusXForStep(0)) * k;
} else if (t < TRANSIT_START) {
// Pan from quote → bundle, AND zoom in.
const k = Easing.easeInOutCubic(clamp((t - 3.0) / 0.7, 0, 1));
cameraX = focusXForStep(1) + (focusXForStep(2) - focusXForStep(1)) * k;
cameraScale = 1 + 0.20 * k; // zoom in to 1.20×
} else if (t < TRANSIT_END) {
// Stay zoomed; pan along transit at accelerating ease (slow in, fast out).
const raw = clamp((t - TRANSIT_START) / (TRANSIT_END - TRANSIT_START), 0, 1);
const k = raw * raw; // accelerating ease (easeInQuad)
cameraX = focusXForStep(2) + (focusXForStep(3) - focusXForStep(2)) * k;
cameraScale = 1.20;
} else {
cameraX = focusXForStep(3);
// ease zoom back to 1 over 0.4s
const k = Easing.easeOutCubic(clamp((t - TRANSIT_END) / 0.4, 0, 1));
cameraScale = 1.20 - 0.20 * k;
}
// World offset: shift world so cameraX → SCREEN_ANCHOR_X (not stage center).
// The 320px rightward offset keeps focused pills aligned with where scene 3's
// audit card sat, so the 3→4 seam reads as "the same card collapsing in place"
// rather than a translation across the stage.
const worldDx = SCREEN_ANCHOR_X - cameraX;
// Step phase
const stepState = (s) => {
const visible = t >= s.appearAt - 0.05;
const enterP = Easing.easeOutCubic(clamp((t - s.appearAt) / 0.45, 0, 1));
let phase = 'queued';
if (s.spinAt == null && s.doneAt != null && t >= s.doneAt) phase = 'done';
else if (s.spinAt != null && t >= s.spinAt) {
phase = (s.doneAt != null && t >= s.doneAt) ? 'done' : 'running';
}
if (s.needsClick && t < (s.clickAt ?? s.spinAt)) phase = 'awaiting';
return { visible, enterP, phase };
};
return (
{/* faint bg wordmark — fixed in viewport */}
crovi
{/* WORLD — translated by camera */}
{/* connectors / process line between pills */}
{/* completion check — lands at end of transit, just before the file toast */}
{/* step pills */}
{STEPS.map((s, i) => {
const { visible, enterP, phase } = stepState(s);
if (!visible) return null;
if (s.id === 'audit' && t < COLLAPSE_AT) return null;
if (s.isDoc) return null; // contract rendered as toast separately
const w = widths[i];
const x = stripStartX + xs[i];
const y = cy - pillH / 2;
return (
{s.thread && phase === 'running' && (
)}
{/* quote card: sits below bundle pill while awaiting */}
{s.id === 'bundle' && (
)}
);
})}
{/* fake cursor on bundle */}
{(() => {
const i = STEPS.findIndex(s => s.id === 'bundle');
const s = STEPS[i];
const cx = stripStartX + xs[i] + widths[i] / 2;
return (
);
})()}
{/* file-ready toast notification — slides in from right at TOAST_AT */}
{/* Faded overlay of scene-3 leaves — keeps the LEFT side of the stage
from going empty at the 3→4 seam. Fades out over 0.4..1.4s so the
pipeline has the stage to itself by the time the camera starts panning. */}
{/* audit card → pill morph — rendered OUTSIDE the world so it can use
screen-absolute coords. It starts at scene 3's exact card geometry
(center 1280, 540, 820×540 with full content) and collapses IN PLACE
to the pill (center 1280, 540, 240×80) where the actual StepPill
(rendered inside the world, also anchored to screen X=1280) takes
over. No horizontal translation during the morph. */}