// Animated drafting mockup, narrates the value of Drafting: // 1) start from approved template → 2) guardrails enforce structure // 3) AI fills a parameter (within playbook limits) → 4) clause-aware check fires // 5) co-author joins live → 6) "Matches playbook · ready to send" + saved-time chip function DraftingAnimation() { const [tick, setTick] = React.useState(0); React.useEffect(() => { const id = setInterval(() => setTick((t) => (t + 1) % 8), 1100); return () => clearInterval(id); }, []); const show = (n) => tick >= n; // Caret blink for the "typing" line const [caret, setCaret] = React.useState(true); React.useEffect(() => { const id = setInterval(() => setCaret((c) => !c), 480); return () => clearInterval(id); }, []); // Phase legend: // 0 empty editor with template skeleton // 1 clause 3.1 fills in (template-locked) // 2 clause 3.2 starts to draft, parameter highlighted // 3 AI inserts the playbook value chip "EUR 5,000,000" // 4 risk flag slides in: "DPA missing" // 5 co-author cursor + comment slide in // 6 flag resolves to ✓ matches playbook // 7 hold const statusDot = show(6) ? "#1F8A4C" : show(4) ? "#D97706" : show(1) ? "#7B61FF" : "var(--ink-5)"; const statusLabel = show(6) ? "ready to send" : show(4) ? "review pending" : show(1) ? "drafting…" : "template loaded"; return (
{/* Background card container with photo of human in office */}
{/* Background Image Layer (dedicated photo) */}
{/* Subtle white wash overlay to ensure readability */}
{/* Card wrapper */}
{/* Co-author cursor (slides in over the doc) */}
Maya · counsel
{statusLabel} }> {/* Template badge */}
Template · MSA EU v4 · locked
{/* Doc body */}
{/* Clause 3.1, fills in at tick 1 */}
3.1  {show(1) ? "Each party shall keep Confidential Information confidential for five (5) years." : }
{/* Clause 3.2, typing animation, then AI parameter chip at tick 3 */}
3.2  {show(2) ? <> The Provider shall maintain liability insurance with limits no less than{" "} {show(3) && AI } {show(3) ? "EUR 5,000,000" : "amount"} {" "} per claim {show(2) && !show(3) && ▍ } . : }
{/* Issue / status bar, morphs between states */}
{show(6) ? <> Matches standard terms · ready to send 0 issues : show(4) ? <> DPA reference missing · required for EU vendors fix : show(1) ? <> Checking clause terms… : <> Idle · waiting for first clause }
{/* Floating "Compliant by default" chip, appears on success */}
✓ Compliant by default 0 missed clauses
); } function Skeleton({ w }) { return ( ); } function Check() { return ( ); } function Warn() { return ( ); } function Spinner() { return ( ); } window.DraftingAnimation = DraftingAnimation;