// Animated review mockup, narrates document collaboration and negotiation: // 1) Sofia highlights "unlimited liability" and comments asking for a cap // 2) Lukas (Legal) joins the document // 3) Lukas suggests 3x annual fees cap // 4) Sofia accepts Lukas's counter-proposal // 5) The text in the document updates with redline strike-through and green insertion // 6) Resolution toast appears at the bottom // 7) Hold and loop function ReviewAnimation({ bgImage }) { const [tick, setTick] = React.useState(0); React.useEffect(() => { const id = setInterval(() => setTick((t) => (t + 1) % 9), 1200); return () => clearInterval(id); }, []); const show = (n) => tick >= n; return (
{/* Background Image Layer */}
{/* Subtle white wash overlay */}
{/* Card wrapper */}
{/* Editor avatars */}
{/* Sofia */}
S
{/* Marcus */}
M
{/* Lukas - appears at tick >= 2 */}
L
{show(2) ? "3 editing" : "2 editing"}
} > {/* Document Editor Toolbar */}
Normal text
{/* Workspace Area: Page on Left, Comments on Right */}
{/* Document Page Column */}
{/* Page Paper */}
Section 12 · Indemnification

12.4 Limitation of Liability

Except for breaches of Section 8 (Confidentiality), each party's total aggregate liability under this Agreement shall be{" "} {show(5) ? ( unlimited. ) : ( "unlimited." )} {" "} {show(5) && ( capped at 3x annual contract value. )}

{/* Comments Sidebar Column */}
{/* Sofia's Comment Card */}
S Sofia 10:14 AM
Our board won't accept unlimited liability. Can we cap this?
{/* Lukas's Reply Card */}
L Lukas (Legal) 10:15 AM
Confidentiality and IP capped at 3x annual fees.
{/* Acceptance Badge */} {show(4) && (
Accepted by Sofia
)}
{/* Resolution Toast */}
✓ Negotiation resolved Redlines merged
); } // Helper component for styled editor toolbar buttons function ToolbarIcon({ name, active }) { const icons = { undo: ( ), redo: ( ), bold: ( B ), italic: ( I ), underline: ( U ), comment: ( ) }; return (
{icons[name]}
); } window.ReviewAnimation = ReviewAnimation; function NegotiationAnimation() { const [tick, setTick] = React.useState(0); React.useEffect(() => { const id = setInterval(() => setTick((t) => (t + 1) % 8), 1400); return () => clearInterval(id); }, []); const show = (n) => tick >= n; const versions = [ { v: "v1", by: "You", date: "Jun 2", status: "Sent" }, { v: "v2", by: "Counterparty", date: "Jun 5", status: "Redlined" }, { v: "v3", by: "You", date: "Jun 7", status: show(6) ? "Final" : show(4) ? "Pending" : "Draft" }, ]; const statusDot = show(6) ? "#1F8A4C" : show(4) ? "#D97706" : "#7B61FF"; const statusLabel = show(6) ? "ready to sign" : show(4) ? "approval pending" : "negotiating"; return (
{statusLabel} }> {/* Version timeline */}
{versions.map((ver, i) => { const isCounterparty = i === 1; const visible = i < 2 || show(1); const statusColor = ver.status === "Final" ? "#1F8A4C" : ver.status === "Redlined" || ver.status === "Pending" ? "#D97706" : "var(--ink-4)"; return (
{i < 2 &&
}
{ver.v} {isCounterparty && external} {ver.status}
{ver.by} · {ver.date}
); })}
{/* Diff section */}
Changes in v2
Payment terms: {show(2) && Net 30} {show(2) && " "} {show(2) && Net 45}
Liability cap: {show(2) && Unlimited} {show(2) && " "} {show(2) && 2x annual fees}
{/* Internal note */}
Internal Erik 10:22 AM
Net 45 is acceptable. Push back on the liability cap, request 3x.
{/* Approval status bar */}
{show(5) ? ( <> Approved by Legal · ready to sign ) : show(4) ? ( <> Awaiting Legal approval ) : ( <> 2 open redlines remaining )}
); } window.NegotiationAnimation = NegotiationAnimation;