{clicking && (

)}

); } function cursorAt(t, keys) { const times = keys.map((k) => k[0]); const ease = Easing.easeInOutCubic; return { x: interpolate(times, keys.map((k) => k[1].x), ease)(t), y: interpolate(times, keys.map((k) => k[1].y), ease)(t), }; } // Visible for a window of the scene, fading at both ends. const window_ = (t, from, to) => clamp((t - from) / 0.25, 0, 1) * (1 - clamp((t - to) / 0.25, 0, 1)); const DOC = 'Services Agreement - Acme.docx'; const DOC_REVIEWED = 'Services Agreement - Acme (reviewed).docx'; // A cloud provider's file list inside the Import modal (Drive or Dropbox). function CloudList({ provider, files, chosen }) { const icon = provider === 'gdrive' ? ( ) : ( ); return (

{icon} {provider === 'gdrive' ? 'Connected as k.townsend@acme.co' : 'Connected to Acme Dropbox'} Legal / Contracts

{files.map((f, i) => { const on = f === chosen; return (

{on && ( )}

{f}

Modified 2 days ago

); })}

); } const DRIVE_FILES = ['Board minutes - March.pdf', DOC, 'Employment Agreement - J Lee.docx']; const DROPBOX_FILES = ['Shareholders Agreement.pdf', 'NDA - Northwind.docx', 'Supplier Terms 2026.docx']; // ─── Scene 1: the Import modal ──────────────────────────────────────────── function SceneImport() { const { localTime: t, duration } = useSprite(); // Which tab is open: Drive first, then Dropbox, then the computer. const tab = t < 2.05 ? 'gdrive' : t < 3.35 ? 'dropbox' : 'upload'; const driveChosen = t >= 1.5; const dropped = t >= 4.35; const dragActive = t > 3.9 && t < 4.35; const imported = t >= 5.3; const containerRef = React.useRef(null); const driveRef = React.useRef(null); const dropboxRef = React.useRef(null); const uploadRef = React.useRef(null); const dropRef = React.useRef(null); const importRef = React.useRef(null); const drive = useLiveAnchor(driveRef, containerRef) || { x: 90, y: 86 }; const dropbox = useLiveAnchor(dropboxRef, containerRef) || { x: 230, y: 86 }; const upload = useLiveAnchor(uploadRef, containerRef) || { x: 350, y: 86 }; const drop = useLiveAnchor(dropRef, containerRef) || { x: 410, y: 230 }; const imp = useLiveAnchor(importRef, containerRef) || { x: 700, y: 520 }; const row2 = { x: 300, y: 226 }; const pos = cursorAt(t, [ [0.2, { x: drive.x + 520, y: drive.y + 420 }], [0.8, drive], [1.1, { x: row2.x, y: row2.y }], [1.45, row2], [1.7, row2], [2.0, dropbox], [2.4, dropbox], [2.9, { x: dropbox.x + 40, y: dropbox.y + 180 }], [3.3, upload], [3.55, upload], [3.95, drop], [4.5, drop], [5.0, imp], ]); const clicking = (t > 0.82 && t < 0.98) || (t > 1.47 && t < 1.62) || (t > 2.02 && t < 2.18) || (t > 3.32 && t < 3.48) || (t > 5.22 && t < 5.4); const entryT = Easing.easeOutCubic(clamp(t / 0.5, 0, 1)); const exitT = clamp((t - (duration - 0.4)) / 0.4, 0, 1); return (

{tab === 'gdrive' && } {tab === 'dropbox' && } {tab === 'upload' && (

)}

{tab === 'upload' && dropped && (

)} {tab === 'gdrive' && driveChosen && (

1 file selected from Google Drive

)}

0.3 && t < duration - 0.3} placement="bottom"> FROM YOUR COMPUTER, GOOGLE DRIVE OR DROPBOX

); } // The shared TabBar with a ref on each tab, so the cursor can aim at them. function TabBarRefs({ active, refs }) { const tabs = [ { id: 'gdrive', label: 'Google Drive', icon: ( )}, { id: 'dropbox', label: 'Dropbox', icon: ( )}, { id: 'upload', label: 'Upload Files', icon: ( )}, ]; return (

{tabs.map((tb) => (

{tb.icon}

{tb.label}

))}

); } // ─── Scene 2: sent to a lawyer from the chat ────────────────────────────── function ReviewCard({ stage = 'brief', submitRef }) { const submitted = stage === 'submitted'; return (

{submitted ? 'Review request submitted' : 'Ready to send to a lawyer'}

{submitted ? 'Your document is with our legal team. You can track its progress in My Requests.' : 'Check the brief below and edit anything, then send it through.'}

{!submitted && ( <>

Lawyer review fee

Shown here before you submit, based on 9 pages. Nothing is charged until you do.

)}

{submitted ? ( <> Go to My Documents Go to My Requests ) : ( <> Keep chatting {stage === 'submitting' ? 'Sending…' : 'Submit for review'} )}

); } function SceneSend() { const { localTime: t, duration } = useSprite(); const rootRef = React.useRef(null); const submitRef = React.useRef(null); const submit = useLiveAnchor(submitRef, rootRef) || { x: 1500, y: 880 }; const stage = t >= 4.9 ? 'submitted' : t >= 4.45 ? 'submitting' : 'brief'; const pos = cursorAt(t, [[3.5, { x: submit.x - 520, y: submit.y - 320 }], [4.3, submit]]); const clicking = t > 4.35 && t < 4.52; const cursorOpacity = window_(t, 3.5, 4.9); return (

} > = 0.9} /> This is a services agreement between Acme Pty Ltd and your company. It sets the scope, the payment terms and who owns the work. The review would look closely at the 60-day payment terms in clause 6 and the ownership of deliverables in clause 11. What matters most to you here? Getting paid on time, and keeping ownership of our work. Thank you. We have put together a brief for the lawyer below. Check it over, then send it through. 0.3 && t < duration - 0.3} placement="top">SENT TO A LAWYER FROM THE CHAT

); } // ─── Scene 3: the reviewed document comes back ──────────────────────────── function LawyerLine({ name, role, when }) { return (

{name.split(' ').map((w) => w[0]).join('')}

{name}

{role} · Gosai Law · {when}

); } function ReturnedFile({ downloadRef, downloading }) { return (

{DOC_REVIEWED}

Word document · tracked changes and 6 comments · 9 pages

{downloading ? 'Downloading…' : 'Download'}

); } // A corner of the returned Word document: a struck run, an inserted run, a comment. function TrackedChangesPeek() { const del = { color: '#B91C1C', textDecoration: 'line-through', textDecorationColor: '#B91C1C' }; const ins = { color: '#1D4ED8', textDecoration: 'underline', textDecorationColor: '#1D4ED8' }; return (

6. Payment

6.1 The Client must pay each invoice within{' '} 60 days{' '} 14 days{' '} of the date of the invoice.{' '} Interest accrues on any overdue amount at 2% per month.

11. Intellectual property

11.1 All intellectual property in the Deliverables vests in the Client on creation.{' '} The Provider owns the Deliverables until paid in full.

Sarsha Jones

Sixty days is long for a services contract. Fourteen is market, and interest helps if they pay late.

); } function SceneReturn() { const { localTime: t, duration } = useSprite(); const rootRef = React.useRef(null); const downloadRef = React.useRef(null); const download = useLiveAnchor(downloadRef, rootRef) || { x: 1380, y: 700 }; const downloading = t >= 2.35 && t < 3.0; const peek = t >= 3.0; const pos = cursorAt(t, [[1.3, { x: download.x - 480, y: download.y + 260 }], [2.1, download]]); const clicking = t > 2.25 && t < 2.42; const cursorOpacity = window_(t, 1.3, 3.0); return (

} >

We have reviewed the agreement. Our tracked changes and comments are in the attached Word document, ready to send back to Acme.

{peek && ( )} 0.3 && t < duration - 0.3} placement="top">BACK AS A WORD DOCUMENT WITH TRACKED CHANGES

); } Object.assign(window, { SceneImport, SceneSend, SceneReturn, BigCursor });