// scene-act3.jsx — Act III: Phase 2 BRD with full eval loop // Total ~22s. Beats: // 0.0–2.0 split: cream notebook (left, summarized) + black terminal panel (right, empty) // 2.0–6.0 prompt types into terminal (green Courier, scanlines) // 6.0–10.0 terminal fills with scrolling FR-### requirements; orange counter ticks 1→47→89 // 10.0–11.0 terminal shrinks to a card; second card slides in: NEW CHAT — EVAL PROTOCOL // 11.0–14.0 cycle arrow loops; findings card spawns with 3 bullets (✗ ✗ ✓) // 14.0–16.5 loop back to BRD card; pulses orange // 16.5–19.5 ✓ FINAL types in: "BRD v1.4 — FINAL" // 19.5–22.0 hold function SceneAct3() { return ( {/* split bg: left cream, right terminal */}
); } // ── 0–10s — Split scene: notebook left, terminal right ── function Act3Split() { const t = useT(); // After 10s, the terminal shrinks to a card → fade this out const op = t < 10000 ? 1 : Math.max(0, 1 - (t - 10000) / 600); if (op === 0) return null; return (
{/* LEFT — Project Charter (full content) */}
Project Charter
😍 HUMAN ONLY
PROBLEM STATEMENT

Brokers run on a 60-day escrow clock. Every day of uncertainty is a day closer to a failed deal.

GOAL STATEMENT

Speed to Terms — deliver a credible term summary to the borrower as fast as possible.

VOICE OF CUSTOMER
"I don't want to be asked for the same thing twice."
"Why did you go dark on me?"
"Who has the ball right now?"
{/* RIGHT — terminal */}
claude · BRD draft
{/* prompt — types 2.0–5.5 */}
>
{/* Generated requirements — appear 6.0+ */} {/* counter */}
); } function Act3GeneratedReqs() { const t = useT(); const reqs = [ 'FR-001 The system shall capture property...', 'FR-001a The property address shall be...', 'FR-014 The system shall notify in a timely...', 'FR-022 The deal shall transition states...', 'FR-035 The system shall validate matrix...', 'FR-048 The CIO portal shall display the...', 'FR-062 The AI Underwriter shall calculate...', 'FR-074 The audit log shall capture every...', 'FR-089 The system shall finalize the TAP...', ]; if (t < 5800) return null; return (
{reqs.map((r, i) => { const start = 5800 + i * 380; if (t < start) return null; const op = Math.min(1, (t - start) / 250); return (
); })}
); } function Act3Counter() { const t = useT(); if (t < 6000) return null; // 6.0 → 9.5 ramps 1 → 89 const p = Math.min(1, Math.max(0, (t - 6000) / 3500)); const eased = 1 - Math.pow(1 - p, 1.6); const n = Math.floor(1 + eased * 88); return (
requirements: {n}/89
); } // ── 10–17s — Eval loop diagram ────────────────────────── function Act3EvalLoop() { const t = useT(); if (t < 9700 || t > 18800) return null; const op = t < 10500 ? Math.min(1, (t - 9700) / 800) : (t > 18000 ? Math.max(0, 1 - (t - 18000) / 800) : 1); // Three cards in a triangle around a center const cards = [ { label: 'BRD v1.0', sub: 'draft', x: 760, y: 270, appear: 10000, color: 'cream' }, { label: 'NEW CHAT', sub: 'eval protocol', x: 1340, y: 540, appear: 11000, color: 'cream' }, { label: 'FINDINGS', sub: '', x: 760, y: 810, appear: 13000, color: 'cream' }, ]; return (
{/* connecting cycle arrows */} {/* BRD → NEW CHAT */} {/* NEW CHAT → FINDINGS */} {/* FINDINGS → BRD (loop back) */} {/* arrow heads (separate so they stamp at end) */} {t > 11700 && } {t > 13700 && } {t > 16100 && } {/* center cycle badge */} 11000 ? Math.min(1, (t - 11000)/600) : 0}> ↻ EVALUATION LOOP {cards.map((c, i) => { if (t < c.appear) return null; const cardOp = Math.min(1, (t - c.appear) / 400); const ty = (1 - cardOp) * 16; return (
{c.sub}
{c.label}
{/* findings card content */} {i === 2 && t > 13400 && (
)}
); })}
); } function Act3Bullet({ from, sym, symColor, text }) { const t = useT(); if (t < from) return null; const op = Math.min(1, (t - from) / 300); return (
{sym}
); } // ── 17–22s — ✓ FINAL ───────────────────────────────────── function Act3Final() { const t = useT(); if (t < 18500) return null; const op = Math.min(1, (t - 18500) / 600); const ty = (1 - op) * 24; return (
✓
); } window.SceneAct3 = SceneAct3;