// Viewer Seats, Unlimited // Story arc: legacy CLM caps seats → invite EVERYONE on ContractControl → live engagement → audit captures everything → faster, accountable decisions function ViewerSeatsAnim() { const STAGES = [ "capped", // 0 Legacy: 5 paid seats, request queue "switch", // 1 Switch / unlock unlimited "invite", // 2 Invite all 27 stakeholders "live", // 3 Real-time engagement "audit", // 4 Audit trail captures every view + comment ]; const [stage, setStage] = React.useState(0); React.useEffect(() => { const t = setTimeout(() => setStage((stage + 1) % STAGES.length), 2700); return () => clearTimeout(t); }, [stage]); const eq = (s) => stage === STAGES.indexOf(s); const at = (s) => stage >= STAGES.indexOf(s); // Roster of people; 5 paid in legacy, all 27 invited in CC const roster = [ { n: "AL", name: "Anna L.", role: "Legal", grad: "linear-gradient(135deg,#C7B4FF,#7C5CD3)" }, { n: "JN", name: "Jonas N.", role: "Legal", grad: "linear-gradient(135deg,#C7B4FF,#7C5CD3)" }, { n: "MK", name: "Mira K.", role: "Sales AE", grad: "linear-gradient(135deg,#FCD7C6,#B65532)" }, { n: "SH", name: "Sofia H.", role: "Sales AE", grad: "linear-gradient(135deg,#FCD7C6,#B65532)" }, { n: "TB", name: "Tomas B.", role: "Finance", grad: "linear-gradient(135deg,#B7E4C7,#1F8A4C)" }, { n: "EW", name: "Erik W.", role: "Procurement", grad: "linear-gradient(135deg,#FFE4A8,#C18B2C)" }, { n: "LA", name: "Lina A.", role: "Sales lead", grad: "linear-gradient(135deg,#FCD7C6,#B65532)" }, { n: "NK", name: "Noa K.", role: "Ops", grad: "linear-gradient(135deg,#C8DBFF,#3656B5)" }, { n: "PE", name: "Petra E.", role: "CFO", grad: "linear-gradient(135deg,#B7E4C7,#1F8A4C)" }, { n: "RD", name: "Ravi D.", role: "Counsel", grad: "linear-gradient(135deg,#C7B4FF,#7C5CD3)" }, { n: "AS", name: "Astrid S.", role: "Exec", grad: "linear-gradient(135deg,#E5D3FF,#5A3FA8)" }, { n: "OK", name: "Olov K.", role: "Sales eng", grad: "linear-gradient(135deg,#FCD7C6,#B65532)" }, { n: "VH", name: "Vera H.", role: "Customer", grad: "linear-gradient(135deg,#D9D9D9,#7A7A7A)" }, { n: "HM", name: "Henrik M.", role: "Ops", grad: "linear-gradient(135deg,#C8DBFF,#3656B5)" }, { n: "IB", name: "Iben B.", role: "Sales AE", grad: "linear-gradient(135deg,#FCD7C6,#B65532)" }, { n: "GO", name: "Gunnar O.", role: "Auditor", grad: "linear-gradient(135deg,#D9D9D9,#7A7A7A)" }, ]; return (
{/* Top chrome */}
MSA · Northwind × Brevia
{eq("capped") ? "Legacy CLM · 5 paid seats" : "ContractControl · unlimited viewers"}
{eq("capped") ? "Seat limit hit" : at("audit") ? "Auditable" : "Unlimited"}
{/* Main canvas */}
{/* === STAGE 0: capped === */} {eq("capped") && (
Paid seats · 5 of 5
FULL
{roster.slice(0, 5).map((p) => (
{p.n} {p.role.split(" ")[0]}
))}
Access requests · waiting
22 PENDING
{[ { who: "Mira K. · Sales AE", why: "Needs the redline before customer call", age: "12m" }, { who: "Tomas B. · Finance", why: "Reviewing payment terms", age: "1h" }, { who: "Petra E. · CFO", why: "Sign-off on cap on liability", age: "2h" }, { who: "Erik W. · Procurement",why: "Cross-checking against parent agreement", age: "3h" }, { who: "Astrid S. · Exec", why: "Status update for board pre-read", age: "4h" }, ].map((r, i) => (
{r.who}
{r.why}
{r.age} SEAT?
))}
EXTRA SEAT · €240 / MONTH OR · WAIT
)} {/* === STAGE 1: switch, animated unlock === */} {eq("switch") && (
Seat limit removed.
Add every stakeholder, colleagues, customers, auditors, at zero extra cost.
5 / 5 SEATS → ∞ VIEWERS
)} {/* === STAGE 2: invite, avatars cascade in === */} {eq("invite") && (
Invite stakeholders
+ 27 VIEWERS · €0
{roster.map((p, i) => (
{p.n}
))} {/* +11 more bubble */}
+11
{[ { l: "Internal", v: "16 colleagues · 6 teams" }, { l: "External", v: "8 customer counsel · 3 auditors" }, { l: "Cost", v: "€0, included in plan", accent: true }, ].map((r) => (
{r.l} {r.v}
))}
)} {/* === STAGE 3: live engagement === */} {eq("live") && (
{/* Left: doc with comment pins */}
§4 · LIABILITY
Cap on indirect damages
{[100, 92, 96, 70, 88, 82, 100, 60, 90, 76, 86, 70, 92, 84].map((w, i) => (
))}
{/* Comment pins */} {[ { top: 60, left: 78, n: "MK", grad: "linear-gradient(135deg,#FCD7C6,#B65532)", label: "Mira · Sales", q: "Can we cap at 12-mo fees?" }, { top: 110, left: 64, n: "PE", grad: "linear-gradient(135deg,#B7E4C7,#1F8A4C)", label: "Petra · CFO", q: "OK if mutual." }, { top: 156, left: 48, n: "RD", grad: "linear-gradient(135deg,#C7B4FF,#7C5CD3)", label: "Ravi · Counsel", q: "Aligned to playbook." }, ].map((p, i) => (
{p.n}
{p.label}
{p.q}
))}
{/* Right: live presence */}
Live now · 9
{[ { n: "MK", a: "commented on §4.2", t: "now", grad: "linear-gradient(135deg,#FCD7C6,#B65532)" }, { n: "PE", a: "approved §4.2", t: "now", grad: "linear-gradient(135deg,#B7E4C7,#1F8A4C)" }, { n: "TB", a: "viewing §6 payment", t: "1m", grad: "linear-gradient(135deg,#B7E4C7,#1F8A4C)" }, { n: "AS", a: "viewing summary", t: "1m", grad: "linear-gradient(135deg,#E5D3FF,#5A3FA8)" }, { n: "EW", a: "added a question", t: "2m", grad: "linear-gradient(135deg,#FFE4A8,#C18B2C)" }, { n: "RD", a: "approved §4", t: "2m", grad: "linear-gradient(135deg,#C7B4FF,#7C5CD3)" }, ].map((r, i) => (
{r.n} {r.a} {r.t}
))}
4× FASTER REVIEW
)} {/* === STAGE 4: audit === */} {eq("audit") && (
Audit log · MSA Northwind
284 EVENTS
{[ { t: "14:42", who: "Petra E.", what: "Approved §4.2 · cap on indirect damages", role: "CFO", new: true }, { t: "14:39", who: "Mira K.", what: "Comment on §4.2", role: "Sales" }, { t: "14:36", who: "Tomas B.", what: "Viewed §6 · payment terms (4m)", role: "Finance" }, { t: "14:30", who: "Astrid S.", what: "Viewed deal summary", role: "Exec" }, { t: "14:18", who: "Erik W.", what: "Posted question on §11", role: "Procurement" }, ].map((row, i) => (
{row.t} {row.who} · {row.what} {row.new ? "NEW" : row.role.toUpperCase()}
))}
{[ { num: "27", label: "viewers" }, { num: "284", label: "events captured" }, { num: "€0", label: "in seat fees", accent: true }, ].map((s) => (
{s.num}
{s.label}
))}
)}
{/* Stepper */}
{STAGES.map((s, i) => ( ))}
{[ "01 · LEGACY · SEATS CAPPED", "02 · UNLOCK · UNLIMITED", "03 · INVITE EVERYONE", "04 · LIVE COLLABORATION", "05 · FULL AUDIT TRAIL", ][stage]}
); } function ViewerSeatsHero() { const viewers = [ { initials: "AL", name: "Anna L.", role: "Legal", access: "Full read", grad: "linear-gradient(135deg,#C7B4FF,#7C5CD3)" }, { initials: "TB", name: "Tomas B.", role: "Finance", access: "Scoped", grad: "linear-gradient(135deg,#B7E4C7,#1F8A4C)" }, { initials: "MK", name: "Mira K.", role: "Sales AE", access: "Full read", grad: "linear-gradient(135deg,#FCD7C6,#B65532)" }, { initials: "VH", name: "Vera H.", role: "Customer", access: "Contract only", grad: "linear-gradient(135deg,#D9D9D9,#7A7A7A)" }, { initials: "GO", name: "Gunnar O.", role: "Auditor", access: "Read + export", grad: "linear-gradient(135deg,#D9D9D9,#7A7A7A)" }, ]; return (
Home› Power Modules› Unlimited Viewer Seats

Bring everyone
into the contract
, for free.

Velora MSA · Viewers 27 active
{viewers.map((v, i) => (
{v.initials}
{v.name}
{v.role}
{v.access}
))}
All views audited · 0 seat cost ● Live

Invite every reviewer, stakeholder, customer, and auditor for free. Unlimited read, comment, and approval seats, fully audited, scoped to exactly what they should see.

Velora MSA · Viewers 27 active
{viewers.map((v, i) => (
{v.initials}
{v.name}
{v.role}
{v.access}
))}
All views audited · 0 seat cost ● Live
); } function ViewerSeatsValueProps() { const props = [ { num: "∞", label: "free viewer seats", note: "Add every colleague, customer, partner, and auditor to a contract, no per-seat fee, ever. Pay only for editor seats." }, { num: "4×", label: "faster review cycles", note: "Stakeholders see redlines and approve in real time. No more chasing screenshots, PDFs over email, or waiting on someone's seat to free up." }, { num: "0", label: "shadow copies in inboxes", note: "Every comment, view, and approval lives in the contract, not in 14 different email threads. One source of truth, fully audited." }, ]; return (
Why teams switch

Stop rationing contract access.

Legacy CLMs charge per seat, so the people who should be in the contract end up on email instead. We took that tax off the table.

{props.map((p, i) => (
{p.num}
{p.label}
{p.note}
))}
); } function ViewerSeatsCompare() { const rows = [ { feature: "View & read documents, contracts, and document hubs", legacy: "Requires paid seat", cc: "Free · unlimited viewers", ccAccent: true }, { feature: "Comment on documents and ongoing contracts", legacy: "Requires paid seat", cc: "Free · included for all viewers" }, { feature: "Be added as contract responsible", legacy: "Requires paid seat", cc: "Free · full accountability, no seat fee" }, { feature: "Receive internal signatures & review requests", legacy: "Requires paid seat or workaround", cc: "Free · workflows route to any viewer" }, { feature: "Audit trail on viewer activity", legacy: "Often editor-only", cc: "Every view, comment, approval logged" }, ]; return (
Legacy vs. ContractControl

The math finally makes sense.

Capability Legacy CLM ContractControl
{rows.map((r, i) => (
{r.feature} {r.legacy} {r.cc}
))}
); } function ViewerInviteMockup() { const people = [ { name: "Lena Fischer", role: "Finance · CFO", status: "Viewing", color: "#16A34A" }, { name: "Erik Wallin", role: "Procurement · Lead", status: "Commented", color: "#7B61FF" }, { name: "Sara Björk", role: "External Counsel", status: "Approved", color: "#16A34A" }, { name: "Tom Heid", role: "Customer · Counterparty", status: "Invited", color: "#B97A00" }, ]; return (
MSA · Northwind × Brevia Active
Access · 4 people
{people.map((p, i) => (
{p.name}
{p.role}
{p.status} Free
))}
); } function ViewerAuditMockup() { const events = [ { who: "Sara Björk", action: "Approved clause 8.2", time: "2 min ago", icon: "✓", color: "#16A34A" }, { who: "Erik Wallin", action: "Commented on §4, Liability cap", time: "14 min ago", icon: "💬", color: "#7B61FF" }, { who: "Lena Fischer", action: "Viewed pages 1-6", time: "31 min ago", icon: "👁", color: "var(--ink-4)" }, { who: "Tom Heid", action: "Opened document", time: "1 hr ago", icon: "📄", color: "var(--ink-4)" }, ]; return (
Activity log 4 events · last hour
{events.map((e, i) => (
{e.icon}
{e.who}, {e.action}
{e.time}
))}
Export as PDF →
); } function ViewerSeatsModules() { return ( <>
Zero seat fees

Invite everyone who needs to see, not just the ones you can afford.

Finance, procurement, external counsel, even the customer counterparty. Anyone who needs visibility gets it, the moment you decide, without a procurement request or a budget approval.

{[ "Viewers can read documents, contracts, and document hubs", "Comment on ongoing contracts and flag concerns in context", "Be assigned as contract responsible without paying for a seat", "Receive signature and review requests directly in their workflow", ].map((b, i) => (

{b}

))}
Full audit trail

Every view, comment, and approval, logged and exportable.

Unlimited doesn't mean ungoverned. Every action a viewer takes is captured, who opened it, what they read, what they commented, when they approved, and exportable as a counter-signed PDF for your deal file.

{[ "Timestamped log of every view, comment, download, and approval", "Optional watermarks with name, IP, and timestamp on every page", "Access auto-revokes on signing, on a date, or after inactivity", "Export the full audit trail as a counter-signed PDF", ].map((b, i) => (

{b}

))}
); } function ViewerSeatsCapabilities() { const features = [ { title: "Scoped, not blanket", desc: "Grant access to a single contract, a folder, or a workspace. Viewers see only what you decide they need." }, { title: "Comment & approve", desc: "Viewers can leave comments, post questions, and tick off approvals, without needing an editor licence." }, { title: "Time-boxed access", desc: "Set expiry on signing, on a date, or after N days of inactivity. Access auto-revokes, you don't have to remember." }, { title: "Watermarked previews", desc: "Optional per-viewer watermarks (name · IP · timestamp) on every page they see. Discourages screenshots, supports auditing." }, { title: "Full audit trail", desc: "Every view, comment, download, and approval logged. Exportable as a counter-signed PDF for any deal file." }, { title: "SSO + AD provisioning", desc: "Provision viewers automatically from your IdP. Off-board the same way, when they leave the org, access leaves with them." }, ]; return (
Capabilities

Free, but not loose.

Unlimited doesn't mean ungoverned. Every viewer is scoped, audited, and revocable.

{features.map((f, i) => (

{f.title}

{f.desc}

))}
); } function ViewerSeatsQuote() { return (

"In our last CLM we paid €36k a year just so finance and procurement could read contracts. Here they're in the doc, on day one, no extra cost. Reviews moved from days to hours."

Anders Lindqvist
General Counsel · Klarna alumni · Series C SaaS
); } function ViewerSeatsPage() { return (
); } Object.assign(window, { ViewerSeatsPage });