// Act III — THE SOLUTION (THE PLATFORM) // God-mode redesign 2026-04-28: 5-panel beat-swap. Doug flagged the original // architecture diagram as "horrendously crowded" — V too small, INGEST/DELIVER // flat, hard to read. This rebuild lets the system unfold across clicks: // // b0 The Keystone — massive V mark, headline lands // b1 Six Capabilities — what the platform does (3×2 display grid) // b2 INGEST — partners flow in from the supply side // b3 DELIVER — users emerge on the demand side // b4 The Close — revenue streams + system summary // // The V is the protagonist on b0; on every subsequent panel the eye carries // it as the implied center the system orbits around. const SOL_CAPABILITIES = [ { kicker: '01', title: 'Museum-Quality Archive', body: 'High-res 360° scans of garments, accessories, textiles — partner museums globally.', glyph: '◉', tint: 'var(--gold)' }, { kicker: '02', title: 'Curriculum-Mapped Search', body: 'Tagged by era, designer, technique. Aligned to FIT, Parsons, SCAD, TJU.', glyph: '◈', tint: 'var(--sage)' }, { kicker: '03', title: 'Design Studio Tools', body: 'Annotation, mood-boards, citation. Fits a thesis, not a stock-photo workflow.', glyph: '✎', tint: 'var(--parchment-dim)' }, { kicker: '04', title: 'Museum Revenue Share', body: 'Per-access licensing fees. Solves the museum monetization problem.', glyph: '⚖', tint: 'var(--gold)' }, { kicker: '05', title: 'Curriculum Telemetry', body: 'Engagement, popular assets, syllabus effectiveness. Evidence for educators.', glyph: '▤', tint: 'var(--sage)' }, { kicker: '06', title: 'Rights-Cleared Licensing', body: 'Fully licensed for educational use. No copyright risk for the institution.', glyph: '⚿', tint: 'var(--parchment-dim)' }, ]; const SOL_PARTNERS = [ { kicker: 'P1', title: 'Fashion Museums', body: 'Collections, expertise, heritage assets.' }, { kicker: 'P2', title: 'Universities Archives', body: 'Academic collections, theses, research.' }, { kicker: 'P3', title: 'Brands Heritage', body: 'Lookbooks, campaigns, brand documentation.' }, { kicker: 'P4', title: 'Private Collections', body: 'Rare garments, accessories, ephemera.' }, ]; const SOL_USERS = [ { kicker: 'U1', title: 'Students', body: 'Authentic 3D assets for learning, analysis, creative dev.' }, { kicker: 'U2', title: 'Educators', body: 'Teaching tools, curriculum, digital studio.' }, { kicker: 'U3', title: 'Researchers', body: 'High-quality data for academic and industry research.' }, { kicker: 'U4', title: 'Designers', body: 'Inspiration, reference, innovation support.' }, { kicker: 'U5', title: 'General Public', body: 'Engaging exhibitions accessible to all.' }, ]; const SOL_REVENUE = [ { glyph: '◍', title: 'Subscriptions', body: 'Tiered access — students, educators, institutions.' }, { glyph: '◇', title: 'Asset Licensing', body: 'Educational, research, commercial use.' }, { glyph: '◐', title: 'Virtual Exhibitions', body: 'Ticketed exhibitions and immersive experiences.' }, { glyph: '◈', title: 'Training & Consulting', body: 'Workshops on 3D digitization and preservation.' }, { glyph: '◊', title: 'Partnerships & Grants', body: 'Institutional partnerships, public grants.' }, ]; // ─── The V Keystone ─────────────────────────────────────────────────────── // Massive center mark. Concentric sage + gold rings, rhizome dots, big italic // V. Visible only on b0; on later panels we let the audience CARRY the V as // the implied center the system orbits around (cleaner than persisting it // across every panel and competing with each panel's content). // // Sized 480px on a 1080-tall stage so it's monumental but doesn't crowd the // headline below it. function VKeystone({ progress = 1 }) { const eased = 1 - Math.pow(1 - Math.max(0, Math.min(1, progress)), 3); // 16 rhizome dots positioned around the rings const dots = []; const radius = 165; for (let i = 0; i < 16; i++) { const angle = (i / 16) * Math.PI * 2; const r = i % 2 === 0 ? radius : radius - 22; const x = Math.cos(angle) * r; const y = Math.sin(angle) * r; dots.push({ x, y, idx: i }); } return (
{/* Outer sage ring */}
{/* Inner gold ring */}
{/* Innermost hairline */}
{/* Rhizome dots — sage, alternating sizes around the perimeter */} {dots.map(d => (
))} {/* Connecting hairlines — internal rhizome geometry */} {/* Center V — display Play italic, monumental */}
V
); } // ─── Panel 0 · The Keystone ─────────────────────────────────────────────── function SolKeystonePanel({ vis }) { const eased = 1 - Math.pow(1 - vis, 3); return (
0.05 ? 'auto' : 'none', display: 'flex', alignItems: 'center', justifyContent: 'center', padding: '0 80px', }}>
{/* Left — typography */}
The Platform

Six capabilities,
nested in a system.

Partners ingest. Users pull. Revenue closes.
One archive, one platform, one loop.

{/* Right — V keystone */}
); } // ─── Panel 1 · Six Capabilities ────────────────────────────────────────── function SolCapabilitiesPanel({ vis }) { const eased = 1 - Math.pow(1 - vis, 3); return (
0.05 ? 'auto' : 'none', display: 'flex', alignItems: 'center', justifyContent: 'center', padding: '0 80px', }}>
The Platform · what it does
◆ six capabilities · one product

What the archive can do.

{SOL_CAPABILITIES.map((c) => (
{c.kicker} {c.glyph}

{c.title}

{c.body}

))}
); } // ─── Panel 2 · INGEST (the supply side) ────────────────────────────────── function SolIngestPanel({ vis }) { const eased = 1 - Math.pow(1 - vis, 3); return (
0.05 ? 'auto' : 'none', display: 'flex', alignItems: 'center', justifyContent: 'center', padding: '0 80px', }}>
The Platform · supply side
→ flows into the V
{/* Cinematic INGEST headline */}

Ingest.

Where the archive comes from. Four supply lanes feed the platform — each with its own rights model, each with its own kind of artifact.

{/* Partners — 4 substantial cards in a row */}
{SOL_PARTNERS.map((p) => (
{p.kicker}

{p.title}

{p.body}

))}
{/* Flow indicator — sage line drawing toward right edge (toward V) */}
▸ to the platform
); } // ─── Panel 3 · DELIVER (the demand side) ───────────────────────────────── function SolDeliverPanel({ vis }) { const eased = 1 - Math.pow(1 - vis, 3); return (
0.05 ? 'auto' : 'none', display: 'flex', alignItems: 'center', justifyContent: 'center', padding: '0 80px', }}>
The Platform · demand side
from the V →

Deliver.

Who the archive serves. Five demand lanes — each with its own way of using the platform, each with its own willingness to pay.

{/* Users — 5 cards in a row */}
{SOL_USERS.map((u) => (
{u.kicker}

{u.title}

{u.body}

))}
◂ from the platform
); } // ─── Panel 4 · The Close (revenue + summary) ───────────────────────────── function SolClosePanel({ vis }) { const eased = 1 - Math.pow(1 - vis, 3); return (
0.05 ? 'auto' : 'none', display: 'flex', alignItems: 'center', justifyContent: 'center', padding: '0 80px', }}>
The Platform · the close
◆ five revenue streams

The loop closes.

{/* Revenue chips — 5 across */}
{SOL_REVENUE.map((r) => (
{r.glyph}
{r.title}

{r.body}

))}
{/* Summary line — partners → V → users → revenue */}
Partners → V → Users → Revenue
); } // ─── Panel 5 · The Full Map ────────────────────────────────────────────── // Recap. Every component the audience just walked through, now visible all at // once. The V is center; partners feed in from left, users emerge to right, // capabilities ride above V, revenue streams along the bottom. Subtle sage and // gold flow lines connect. function SolFullMapPanel({ vis }) { const eased = 1 - Math.pow(1 - vis, 3); return (
0.05 ? 'auto' : 'none', display: 'flex', alignItems: 'center', justifyContent: 'center', padding: '0 56px', }}>
{/* Header strip */}
The Platform · all together
◆ partners · capabilities · users · revenue

One system.

{/* The map — 3-column layout: partners | V+capabilities | users */}
{/* PARTNERS — left rail */}
Partners · ingest →
{SOL_PARTNERS.map((p) => (
{p.kicker}
{p.title}
))}
{/* CENTER — V mark + capabilities ledger */}
{/* Capabilities — 2x3 grid above V */}
{SOL_CAPABILITIES.map((c) => (
{c.kicker} {c.title}
))}
{/* The V mark — smaller, with rings */}
V
{/* INGEST/DELIVER labels straddling the V */}
INGEST →
→ DELIVER
{/* USERS — right rail */}
← deliver · Users
{SOL_USERS.map((u) => (
{u.kicker}
{u.title}
))}
{/* REVENUE — bottom strip */}
{SOL_REVENUE.map((r) => (
{r.glyph}
{r.title}
))}
Revenue · the loop closes
); } // ─── Inner act ──────────────────────────────────────────────────────────── function ActSolutionInner({ act, index, total }) { // Full Map recap restored 2026-04-29 round 3 — Doug noticed the very last // section got lost when I cut it during the click-economy pass. The Map // is the "all together now" zoom-out that lands the entire system after // walking through each component. Worth one extra click. const p0 = useBeatProgress(0); const p1 = useBeatProgress(1); const p2 = useBeatProgress(2); const p3 = useBeatProgress(3); const p4 = useBeatProgress(4); const p5 = useBeatProgress(5); const visKeystone = panelVis(p0, p1); const visCapabilities = panelVis(p1, p2); const visIngest = panelVis(p2, p3); const visDeliver = panelVis(p3, p4); const visClose = panelVis(p4, p5); const visMap = p5; // last panel holds return (
); } function ActSolution({ index, total, act }) { return ( ); } window.ActSolution = ActSolution;