Created
April 17, 2026 06:49
-
-
Save mafshin/f5c5e17d2208facea46a4870b77d4b7d to your computer and use it in GitHub Desktop.
Create the most creative profressional pitch deck single page infinite scroll animated pitch deck website for yourself (Opus 4.7), if investors satisfied when viewing that we can secure $1B of investment within next 3 months
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>OPUS 4.7 — Confidential Investor Memo — Anthropic</title> | |
| <meta name="description" content="Series Memo — Claude Opus 4.7. A proposal for participation in the next round of intelligence."> | |
| <link rel="preconnect" href="https://fonts.googleapis.com"> | |
| <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> | |
| <link href="https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght,SOFT,WONK@0,9..144,100..900,0..100,0..1;1,9..144,100..900,0..100,0..1&family=Instrument+Sans:ital,wght@0,400..700;1,400..700&family=JetBrains+Mono:wght@300;400;500;700&display=swap" rel="stylesheet"> | |
| <style> | |
| /* ========================================================= | |
| CORE TOKENS | |
| ========================================================= */ | |
| :root { | |
| --ink: #0A0908; | |
| --ink-2: #1A1816; | |
| --paper: #F1EBDF; | |
| --paper-2: #E6DDCA; | |
| --paper-3: #D8CDB5; | |
| --vermillion: #D94F2B; | |
| --vermillion-deep: #A63A1F; | |
| --ochre: #C89B3C; | |
| --moss: #3C5A3C; | |
| --rule: rgba(10,9,8,0.14); | |
| --rule-2: rgba(10,9,8,0.32); | |
| --rule-heavy: rgba(10,9,8,0.6); | |
| --display: 'Fraunces', 'Times New Roman', serif; | |
| --body: 'Instrument Sans', system-ui, sans-serif; | |
| --mono: 'JetBrains Mono', ui-monospace, monospace; | |
| } | |
| * { margin:0; padding:0; box-sizing:border-box; } | |
| html { scroll-behavior:smooth; } | |
| body { | |
| background: var(--paper); | |
| color: var(--ink); | |
| font-family: var(--body); | |
| font-size: 17px; | |
| line-height: 1.55; | |
| overflow-x: hidden; | |
| -webkit-font-smoothing: antialiased; | |
| letter-spacing: -0.005em; | |
| } | |
| /* Subtle paper grain overlay sitting above everything except nav */ | |
| body::before { | |
| content:''; | |
| position: fixed; | |
| inset: 0; | |
| pointer-events: none; | |
| z-index: 200; | |
| background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.9 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)' opacity='0.55'/></svg>"); | |
| opacity: 0.14; | |
| mix-blend-mode: multiply; | |
| } | |
| ::selection { background: var(--vermillion); color: var(--paper); } | |
| a { color: inherit; text-decoration: none; } | |
| /* ========================================================= | |
| GLOBAL CHROME — MASTHEAD RULE + PROGRESS | |
| ========================================================= */ | |
| .top-chrome { | |
| position: fixed; | |
| top: 0; left: 0; right: 0; | |
| z-index: 500; | |
| background: var(--paper); | |
| border-bottom: 1px solid var(--rule-2); | |
| backdrop-filter: blur(8px); | |
| } | |
| .top-chrome-inner { | |
| display: grid; | |
| grid-template-columns: 1fr auto 1fr; | |
| align-items: center; | |
| padding: 10px 28px; | |
| font-family: var(--mono); | |
| font-size: 10.5px; | |
| letter-spacing: 0.14em; | |
| text-transform: uppercase; | |
| gap: 18px; | |
| } | |
| .top-chrome-inner > div:nth-child(1) { text-align: left; } | |
| .top-chrome-inner > div:nth-child(2) { text-align: center; font-weight: 600; } | |
| .top-chrome-inner > div:nth-child(3) { text-align: right; } | |
| .red-dot { | |
| display: inline-block; | |
| width: 7px; height: 7px; | |
| background: var(--vermillion); | |
| border-radius: 50%; | |
| margin-right: 6px; | |
| transform: translateY(-1px); | |
| animation: pulse 2.2s ease-in-out infinite; | |
| } | |
| @keyframes pulse { | |
| 0%, 100% { opacity: 1; transform: translateY(-1px) scale(1); } | |
| 50% { opacity: 0.35; transform: translateY(-1px) scale(0.85); } | |
| } | |
| .progress-bar { | |
| position: fixed; | |
| top: 0; left: 0; | |
| height: 2px; | |
| width: 0; | |
| background: var(--vermillion); | |
| z-index: 999; | |
| transition: width 0.08s linear; | |
| } | |
| /* ========================================================= | |
| LAYOUT PRIMITIVES | |
| ========================================================= */ | |
| .page { | |
| padding: 0 28px; | |
| max-width: 1440px; | |
| margin: 0 auto; | |
| } | |
| section { position: relative; } | |
| .rule-thin { border-top: 1px solid var(--rule); } | |
| .rule-medium { border-top: 1px solid var(--rule-2); } | |
| .rule-heavy { border-top: 3px solid var(--ink); } | |
| .caps { | |
| font-family: var(--mono); | |
| font-size: 10.5px; | |
| letter-spacing: 0.18em; | |
| text-transform: uppercase; | |
| } | |
| /* Scroll reveal */ | |
| .reveal > * { | |
| opacity: 0; | |
| transform: translateY(22px); | |
| transition: opacity 1.1s cubic-bezier(.2,.7,.2,1), transform 1.1s cubic-bezier(.2,.7,.2,1); | |
| } | |
| .reveal.in > * { opacity: 1; transform: none; } | |
| .reveal.in > *:nth-child(2) { transition-delay: 0.08s; } | |
| .reveal.in > *:nth-child(3) { transition-delay: 0.16s; } | |
| .reveal.in > *:nth-child(4) { transition-delay: 0.24s; } | |
| .reveal.in > *:nth-child(5) { transition-delay: 0.32s; } | |
| .reveal.in > *:nth-child(6) { transition-delay: 0.40s; } | |
| /* ========================================================= | |
| HERO — THE MASTHEAD | |
| ========================================================= */ | |
| .hero { | |
| min-height: 100vh; | |
| padding-top: 70px; | |
| display: flex; | |
| flex-direction: column; | |
| position: relative; | |
| } | |
| .hero-top-meta { | |
| display: grid; | |
| grid-template-columns: 1fr 1fr 1fr; | |
| padding: 14px 0 16px; | |
| border-bottom: 1px solid var(--ink); | |
| } | |
| .hero-top-meta span { display: block; } | |
| .hero-top-meta .caps { color: var(--ink); } | |
| .hero-top-meta > div:nth-child(2) { text-align: center; } | |
| .hero-top-meta > div:nth-child(3) { text-align: right; } | |
| .hero-masthead { | |
| border-bottom: 3px solid var(--ink); | |
| padding: 30px 0 22px; | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: flex-end; | |
| gap: 40px; | |
| flex-wrap: wrap; | |
| } | |
| .hero-masthead h1 { | |
| font-family: var(--display); | |
| font-weight: 400; | |
| font-variation-settings: 'SOFT' 40, 'WONK' 1, 'opsz' 144; | |
| font-size: clamp(72px, 14vw, 220px); | |
| line-height: 0.86; | |
| letter-spacing: -0.04em; | |
| font-style: italic; | |
| } | |
| .hero-masthead h1 em { | |
| font-style: normal; | |
| font-variation-settings: 'SOFT' 100, 'WONK' 1, 'opsz' 144; | |
| color: var(--vermillion); | |
| } | |
| .hero-masthead-tagline { | |
| max-width: 360px; | |
| text-align: right; | |
| margin-bottom: 12px; | |
| } | |
| .hero-masthead-tagline p:first-child { | |
| font-family: var(--display); | |
| font-size: 18px; | |
| font-style: italic; | |
| letter-spacing: -0.01em; | |
| line-height: 1.35; | |
| margin-bottom: 10px; | |
| } | |
| .hero-columns { | |
| display: grid; | |
| grid-template-columns: 1.4fr 1fr 1fr; | |
| gap: 28px; | |
| padding: 22px 0; | |
| border-bottom: 1px solid var(--ink); | |
| } | |
| .hero-col h3 { | |
| font-family: var(--mono); | |
| font-size: 10.5px; | |
| letter-spacing: 0.18em; | |
| text-transform: uppercase; | |
| margin-bottom: 10px; | |
| padding-bottom: 8px; | |
| border-bottom: 1px solid var(--rule-2); | |
| } | |
| .hero-col p { font-size: 15px; line-height: 1.5; } | |
| .hero-col p + p { margin-top: 10px; } | |
| .dropcap { | |
| font-family: var(--display); | |
| font-style: italic; | |
| font-weight: 500; | |
| font-size: 56px; | |
| line-height: 0.9; | |
| float: left; | |
| padding: 6px 10px 0 0; | |
| color: var(--vermillion); | |
| } | |
| .hero-footer { | |
| margin-top: auto; | |
| padding: 24px 0 30px; | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: baseline; | |
| flex-wrap: wrap; | |
| gap: 18px; | |
| } | |
| .hero-footer .filed { | |
| font-family: var(--mono); | |
| font-size: 11px; | |
| letter-spacing: 0.1em; | |
| color: var(--ink); | |
| } | |
| .scroll-cue { | |
| font-family: var(--mono); | |
| font-size: 10.5px; | |
| letter-spacing: 0.2em; | |
| text-transform: uppercase; | |
| display: inline-flex; | |
| align-items: center; | |
| gap: 10px; | |
| } | |
| .scroll-cue .line { | |
| display: inline-block; | |
| width: 62px; height: 1px; | |
| background: var(--ink); | |
| position: relative; | |
| overflow: hidden; | |
| } | |
| .scroll-cue .line::after { | |
| content:''; | |
| position: absolute; | |
| top:0; left:-30%; | |
| height:100%; width:30%; | |
| background: var(--vermillion); | |
| animation: slide 2.6s ease-in-out infinite; | |
| } | |
| @keyframes slide { | |
| 0% { left:-30%; } | |
| 50% { left: 100%; } | |
| 100% { left: 100%; } | |
| } | |
| /* ========================================================= | |
| MARQUEE TICKER | |
| ========================================================= */ | |
| .ticker { | |
| border-top: 1px solid var(--ink); | |
| border-bottom: 1px solid var(--ink); | |
| background: var(--ink); | |
| color: var(--paper); | |
| overflow: hidden; | |
| padding: 14px 0; | |
| white-space: nowrap; | |
| } | |
| .ticker-track { | |
| display: inline-flex; | |
| animation: tick 48s linear infinite; | |
| gap: 56px; | |
| padding-left: 28px; | |
| } | |
| .ticker span { | |
| font-family: var(--display); | |
| font-size: 28px; | |
| font-style: italic; | |
| letter-spacing: -0.01em; | |
| } | |
| .ticker span.mono { | |
| font-family: var(--mono); | |
| font-style: normal; | |
| font-size: 16px; | |
| letter-spacing: 0.14em; | |
| text-transform: uppercase; | |
| color: var(--ochre); | |
| align-self: center; | |
| } | |
| .ticker span.red { color: var(--vermillion); } | |
| @keyframes tick { | |
| from { transform: translateX(0); } | |
| to { transform: translateX(-50%); } | |
| } | |
| /* ========================================================= | |
| THESIS SECTION | |
| ========================================================= */ | |
| .thesis { | |
| padding: 160px 0 140px; | |
| display: grid; | |
| grid-template-columns: 1fr 9fr 2fr; | |
| gap: 28px; | |
| border-bottom: 1px solid var(--rule-2); | |
| } | |
| .thesis .section-num { | |
| font-family: var(--mono); | |
| font-size: 11px; | |
| letter-spacing: 0.2em; | |
| } | |
| .thesis-body h2 { | |
| font-family: var(--display); | |
| font-weight: 300; | |
| font-variation-settings: 'SOFT' 100, 'opsz' 144; | |
| font-size: clamp(44px, 6vw, 88px); | |
| line-height: 1.02; | |
| letter-spacing: -0.035em; | |
| } | |
| .thesis-body h2 em { | |
| font-style: italic; | |
| color: var(--vermillion); | |
| font-weight: 400; | |
| } | |
| .thesis-body h2 .strike { | |
| text-decoration: line-through; | |
| text-decoration-thickness: 3px; | |
| color: var(--rule-2); | |
| } | |
| .thesis-side { | |
| font-family: var(--mono); | |
| font-size: 11px; | |
| line-height: 1.6; | |
| letter-spacing: 0.04em; | |
| padding-top: 14px; | |
| } | |
| .thesis-side hr { border: none; border-top: 1px solid var(--ink); margin: 10px 0; } | |
| /* ========================================================= | |
| SECTION HEADERS (CHAPTER OPENERS) | |
| ========================================================= */ | |
| .chapter-head { | |
| padding: 80px 0 36px; | |
| display: grid; | |
| grid-template-columns: 1fr 3fr 1fr; | |
| gap: 28px; | |
| align-items: end; | |
| border-bottom: 1px solid var(--ink); | |
| } | |
| .chapter-head .num { | |
| font-family: var(--display); | |
| font-style: italic; | |
| font-size: 80px; | |
| line-height: 0.9; | |
| color: var(--vermillion); | |
| font-variation-settings: 'SOFT' 100; | |
| } | |
| .chapter-head .title { | |
| font-family: var(--display); | |
| font-weight: 400; | |
| font-size: clamp(32px, 4.4vw, 64px); | |
| line-height: 1; | |
| letter-spacing: -0.02em; | |
| } | |
| .chapter-head .meta { | |
| font-family: var(--mono); | |
| font-size: 10.5px; | |
| letter-spacing: 0.18em; | |
| text-transform: uppercase; | |
| text-align: right; | |
| } | |
| .chapter-head .meta div { margin-bottom: 4px; } | |
| /* ========================================================= | |
| WHAT IS OPUS — EDITORIAL SPREAD | |
| ========================================================= */ | |
| .spread { | |
| padding: 60px 0 120px; | |
| display: grid; | |
| grid-template-columns: 5fr 7fr; | |
| gap: 56px; | |
| border-bottom: 1px solid var(--rule-2); | |
| } | |
| .spread-lede { | |
| font-family: var(--display); | |
| font-style: italic; | |
| font-weight: 300; | |
| font-size: clamp(28px, 3.2vw, 44px); | |
| line-height: 1.08; | |
| letter-spacing: -0.02em; | |
| } | |
| .spread-lede em { | |
| font-style: normal; | |
| color: var(--vermillion); | |
| } | |
| .spread-body { columns: 2; column-gap: 28px; font-size: 15px; line-height: 1.6; } | |
| .spread-body p { break-inside: avoid; margin-bottom: 14px; } | |
| .spread-body p:first-child::first-letter { | |
| font-family: var(--display); | |
| font-style: italic; | |
| font-size: 64px; | |
| line-height: 0.9; | |
| float: left; | |
| padding: 6px 8px 0 0; | |
| color: var(--vermillion); | |
| } | |
| /* ========================================================= | |
| NUMBERS AT SCALE | |
| ========================================================= */ | |
| .numbers { | |
| padding: 60px 0 80px; | |
| display: grid; | |
| grid-template-columns: repeat(12, 1fr); | |
| gap: 0; | |
| border-bottom: 1px solid var(--rule-2); | |
| } | |
| .stat { | |
| grid-column: span 3; | |
| padding: 36px 22px 28px; | |
| border-right: 1px solid var(--rule-2); | |
| border-bottom: 1px solid var(--rule-2); | |
| position: relative; | |
| overflow: hidden; | |
| } | |
| .stat:nth-child(4n) { border-right: none; } | |
| .stat:nth-child(n+5) { border-bottom: none; } | |
| .stat .label { | |
| font-family: var(--mono); | |
| font-size: 10.5px; | |
| letter-spacing: 0.18em; | |
| text-transform: uppercase; | |
| margin-bottom: 24px; | |
| } | |
| .stat .value { | |
| font-family: var(--display); | |
| font-weight: 400; | |
| font-variation-settings: 'SOFT' 40, 'opsz' 144; | |
| font-size: clamp(54px, 5.6vw, 82px); | |
| line-height: 0.9; | |
| letter-spacing: -0.03em; | |
| } | |
| .stat .value em { | |
| font-style: italic; | |
| color: var(--vermillion); | |
| font-weight: 400; | |
| } | |
| .stat .unit { | |
| font-family: var(--display); | |
| font-style: italic; | |
| font-size: 28px; | |
| color: var(--rule-heavy); | |
| margin-left: 4px; | |
| } | |
| .stat .desc { | |
| font-size: 13px; | |
| line-height: 1.45; | |
| margin-top: 14px; | |
| max-width: 230px; | |
| color: var(--ink-2); | |
| } | |
| /* ========================================================= | |
| CAPABILITY MATRIX — INTERACTIVE GRID | |
| ========================================================= */ | |
| .matrix { | |
| padding: 60px 0 100px; | |
| border-bottom: 1px solid var(--rule-2); | |
| } | |
| .matrix-lede { | |
| font-family: var(--display); | |
| font-style: italic; | |
| font-size: 22px; | |
| line-height: 1.35; | |
| max-width: 560px; | |
| margin-bottom: 36px; | |
| color: var(--ink-2); | |
| } | |
| .matrix-grid { | |
| display: grid; | |
| grid-template-columns: repeat(4, 1fr); | |
| gap: 0; | |
| border-top: 1px solid var(--ink); | |
| border-left: 1px solid var(--ink); | |
| } | |
| .cap { | |
| border-right: 1px solid var(--ink); | |
| border-bottom: 1px solid var(--ink); | |
| padding: 26px 22px 22px; | |
| position: relative; | |
| overflow: hidden; | |
| min-height: 230px; | |
| display: flex; | |
| flex-direction: column; | |
| justify-content: space-between; | |
| background: var(--paper); | |
| transition: background 0.5s ease, color 0.5s ease; | |
| cursor: default; | |
| } | |
| .cap::after { | |
| content:''; | |
| position: absolute; | |
| inset: 0; | |
| background: var(--ink); | |
| transform: translateY(100%); | |
| transition: transform 0.55s cubic-bezier(.65,.05,.35,1); | |
| z-index: 0; | |
| } | |
| .cap:hover::after { transform: translateY(0); } | |
| .cap:hover { color: var(--paper); } | |
| .cap:hover .cap-num { color: var(--vermillion); } | |
| .cap > * { position: relative; z-index: 1; } | |
| .cap-num { | |
| font-family: var(--mono); | |
| font-size: 10.5px; | |
| letter-spacing: 0.2em; | |
| color: var(--rule-heavy); | |
| transition: color 0.4s; | |
| } | |
| .cap-title { | |
| font-family: var(--display); | |
| font-weight: 400; | |
| font-size: 34px; | |
| line-height: 1; | |
| letter-spacing: -0.02em; | |
| margin: 26px 0 14px; | |
| } | |
| .cap-title em { | |
| font-style: italic; | |
| color: var(--vermillion); | |
| } | |
| .cap-desc { | |
| font-size: 13.5px; | |
| line-height: 1.45; | |
| color: var(--ink-2); | |
| transition: color 0.4s; | |
| } | |
| .cap:hover .cap-desc { color: var(--paper-2); } | |
| /* ========================================================= | |
| RADAR / PERFORMANCE CHART | |
| ========================================================= */ | |
| .perf { | |
| padding: 80px 0 120px; | |
| display: grid; | |
| grid-template-columns: 1fr 1fr; | |
| gap: 56px; | |
| align-items: center; | |
| border-bottom: 1px solid var(--rule-2); | |
| } | |
| .perf-text h3 { | |
| font-family: var(--display); | |
| font-weight: 400; | |
| font-size: 48px; | |
| line-height: 1; | |
| letter-spacing: -0.02em; | |
| margin-bottom: 20px; | |
| } | |
| .perf-text h3 em { font-style: italic; color: var(--vermillion); } | |
| .perf-text p { | |
| font-size: 16px; | |
| line-height: 1.55; | |
| max-width: 480px; | |
| margin-bottom: 14px; | |
| color: var(--ink-2); | |
| } | |
| .perf-chart { | |
| position: relative; | |
| aspect-ratio: 1 / 1; | |
| max-width: 560px; | |
| margin-left: auto; | |
| } | |
| .perf-chart svg { width: 100%; height: 100%; display: block; } | |
| .perf-chart .axis { stroke: var(--rule-2); stroke-width: 1; fill: none; } | |
| .perf-chart .grid { stroke: var(--rule); stroke-width: 1; fill: none; } | |
| .perf-chart .shape-opus { fill: var(--vermillion); fill-opacity: 0.22; stroke: var(--vermillion); stroke-width: 2; } | |
| .perf-chart .shape-peer { fill: var(--ink); fill-opacity: 0.08; stroke: var(--ink); stroke-width: 1; stroke-dasharray: 4 4; } | |
| .perf-chart .dot { fill: var(--vermillion); } | |
| .perf-chart text { | |
| font-family: var(--mono); | |
| font-size: 10px; | |
| letter-spacing: 0.1em; | |
| text-transform: uppercase; | |
| fill: var(--ink); | |
| } | |
| /* ========================================================= | |
| TERMINAL / LIVE DEMO | |
| ========================================================= */ | |
| .terminal-section { | |
| padding: 80px 0 100px; | |
| display: grid; | |
| grid-template-columns: 4fr 7fr; | |
| gap: 42px; | |
| align-items: start; | |
| border-bottom: 1px solid var(--rule-2); | |
| } | |
| .terminal-side h3 { | |
| font-family: var(--display); | |
| font-weight: 400; | |
| font-size: 44px; | |
| line-height: 1; | |
| letter-spacing: -0.02em; | |
| margin-bottom: 20px; | |
| } | |
| .terminal-side h3 em { font-style: italic; color: var(--vermillion); } | |
| .terminal-side p { font-size: 15px; line-height: 1.55; color: var(--ink-2); } | |
| .terminal { | |
| background: var(--ink); | |
| color: var(--paper); | |
| border-radius: 2px; | |
| padding: 20px 26px 26px; | |
| font-family: var(--mono); | |
| font-size: 13px; | |
| line-height: 1.65; | |
| min-height: 360px; | |
| position: relative; | |
| box-shadow: 0 30px 60px -20px rgba(10,9,8,0.25), 0 8px 12px -8px rgba(10,9,8,0.15); | |
| } | |
| .terminal-head { | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| padding-bottom: 10px; | |
| border-bottom: 1px solid rgba(255,255,255,0.1); | |
| margin-bottom: 16px; | |
| font-size: 10.5px; | |
| letter-spacing: 0.18em; | |
| text-transform: uppercase; | |
| color: rgba(255,255,255,0.55); | |
| } | |
| .terminal-head .dots { display: flex; gap: 6px; } | |
| .terminal-head .dots span { | |
| width: 8px; height: 8px; border-radius: 50%; | |
| background: rgba(255,255,255,0.25); | |
| } | |
| .terminal-head .dots span:nth-child(1) { background: var(--vermillion); } | |
| .prompt { color: var(--ochre); } | |
| .out-dim { color: rgba(255,255,255,0.55); } | |
| .out-hi { color: var(--vermillion); } | |
| .out-green { color: #7FB069; } | |
| .cursor { | |
| display: inline-block; | |
| width: 8px; height: 14px; | |
| background: var(--paper); | |
| vertical-align: -2px; | |
| margin-left: 2px; | |
| animation: blink 1s steps(2) infinite; | |
| } | |
| @keyframes blink { | |
| 50% { opacity: 0; } | |
| } | |
| /* ========================================================= | |
| MOAT — THE FOUR PILLARS | |
| ========================================================= */ | |
| .moat { | |
| padding: 80px 0 100px; | |
| border-bottom: 1px solid var(--rule-2); | |
| } | |
| .moat-lede { | |
| font-family: var(--display); | |
| font-style: italic; | |
| font-weight: 300; | |
| font-size: clamp(32px, 4vw, 56px); | |
| line-height: 1.08; | |
| letter-spacing: -0.02em; | |
| max-width: 760px; | |
| margin-bottom: 56px; | |
| } | |
| .moat-lede em { font-style: normal; color: var(--vermillion); } | |
| .pillars { | |
| display: grid; | |
| grid-template-columns: repeat(4, 1fr); | |
| gap: 1px; | |
| background: var(--ink); | |
| border: 1px solid var(--ink); | |
| } | |
| .pillar { | |
| background: var(--paper); | |
| padding: 28px 22px 32px; | |
| min-height: 320px; | |
| display: flex; | |
| flex-direction: column; | |
| gap: 16px; | |
| position: relative; | |
| } | |
| .pillar .ordinal { | |
| font-family: var(--display); | |
| font-style: italic; | |
| font-size: 82px; | |
| line-height: 0.8; | |
| color: var(--vermillion); | |
| } | |
| .pillar h4 { | |
| font-family: var(--display); | |
| font-weight: 500; | |
| font-size: 24px; | |
| line-height: 1.1; | |
| letter-spacing: -0.01em; | |
| } | |
| .pillar p { | |
| font-size: 14px; | |
| line-height: 1.55; | |
| color: var(--ink-2); | |
| margin-top: auto; | |
| } | |
| /* ========================================================= | |
| MARKET — SIZING | |
| ========================================================= */ | |
| .market { | |
| padding: 80px 0 120px; | |
| border-bottom: 1px solid var(--rule-2); | |
| display: grid; | |
| grid-template-columns: 5fr 7fr; | |
| gap: 56px; | |
| } | |
| .market-text h3 { | |
| font-family: var(--display); | |
| font-weight: 400; | |
| font-size: clamp(38px, 4vw, 56px); | |
| line-height: 1; | |
| letter-spacing: -0.02em; | |
| margin-bottom: 22px; | |
| } | |
| .market-text h3 em { font-style: italic; color: var(--vermillion); } | |
| .market-text p { | |
| font-size: 16px; | |
| line-height: 1.55; | |
| color: var(--ink-2); | |
| max-width: 420px; | |
| } | |
| .market-text p + p { margin-top: 14px; } | |
| .tam-bars { display: flex; flex-direction: column; gap: 14px; padding-top: 12px; } | |
| .tam-row { | |
| display: grid; | |
| grid-template-columns: 180px 1fr 130px; | |
| align-items: center; | |
| gap: 16px; | |
| padding: 14px 0; | |
| border-bottom: 1px solid var(--rule-2); | |
| } | |
| .tam-label { | |
| font-family: var(--display); | |
| font-style: italic; | |
| font-size: 19px; | |
| line-height: 1.1; | |
| } | |
| .tam-bar-outer { | |
| height: 20px; | |
| background: var(--paper-2); | |
| position: relative; | |
| overflow: hidden; | |
| } | |
| .tam-bar-inner { | |
| height: 100%; | |
| background: var(--vermillion); | |
| width: 0; | |
| transition: width 2.2s cubic-bezier(.2,.7,.2,1); | |
| } | |
| .tam-row.in .tam-bar-inner { width: var(--w); } | |
| .tam-value { | |
| font-family: var(--mono); | |
| font-size: 13px; | |
| letter-spacing: 0.06em; | |
| text-align: right; | |
| } | |
| .tam-value b { font-size: 15px; } | |
| /* ========================================================= | |
| TRACTION — SVG LINE CHART | |
| ========================================================= */ | |
| .traction { | |
| padding: 80px 0 120px; | |
| border-bottom: 1px solid var(--rule-2); | |
| } | |
| .traction-grid { | |
| display: grid; | |
| grid-template-columns: 2fr 3fr; | |
| gap: 56px; | |
| align-items: start; | |
| } | |
| .traction h3 { | |
| font-family: var(--display); | |
| font-weight: 400; | |
| font-size: clamp(38px, 4vw, 56px); | |
| line-height: 1; | |
| letter-spacing: -0.02em; | |
| margin-bottom: 22px; | |
| } | |
| .traction h3 em { font-style: italic; color: var(--vermillion); } | |
| .traction p { font-size: 15px; line-height: 1.55; color: var(--ink-2); max-width: 380px; } | |
| .traction p + p { margin-top: 14px; } | |
| .traction-callouts { | |
| margin-top: 30px; | |
| display: flex; | |
| flex-direction: column; | |
| gap: 2px; | |
| background: var(--ink); | |
| border: 1px solid var(--ink); | |
| } | |
| .traction-callouts div { | |
| background: var(--paper); | |
| padding: 12px 16px; | |
| font-family: var(--mono); | |
| font-size: 11px; | |
| letter-spacing: 0.14em; | |
| text-transform: uppercase; | |
| display: flex; justify-content: space-between; | |
| } | |
| .traction-callouts div b { font-family: var(--display); font-style: italic; font-weight: 400; font-size: 16px; color: var(--vermillion); letter-spacing: 0; text-transform: none; } | |
| .chart-wrap { position: relative; aspect-ratio: 16/10; } | |
| .chart-wrap svg { width: 100%; height: 100%; } | |
| .chart-wrap .ax { stroke: var(--rule-2); } | |
| .chart-wrap .gr { stroke: var(--rule); stroke-dasharray: 2 4; } | |
| .chart-wrap .lp { | |
| fill: none; stroke: var(--vermillion); stroke-width: 2.5; | |
| stroke-linejoin: round; stroke-linecap: round; | |
| stroke-dasharray: var(--len); stroke-dashoffset: var(--len); | |
| transition: stroke-dashoffset 3s cubic-bezier(.2,.7,.2,1); | |
| } | |
| .chart-wrap.in .lp { stroke-dashoffset: 0; } | |
| .chart-wrap .area { | |
| fill: url(#grad); | |
| opacity: 0; | |
| transition: opacity 2s ease 0.8s; | |
| } | |
| .chart-wrap.in .area { opacity: 1; } | |
| .chart-wrap .pt { fill: var(--vermillion); opacity: 0; transition: opacity 0.4s ease; } | |
| .chart-wrap.in .pt { opacity: 1; } | |
| .chart-wrap.in .pt:nth-child(n) { transition-delay: calc(2.6s + 0.1s * var(--i)); } | |
| .chart-wrap text { | |
| font-family: var(--mono); | |
| font-size: 9.5px; | |
| letter-spacing: 0.1em; | |
| fill: var(--ink-2); | |
| text-transform: uppercase; | |
| } | |
| /* ========================================================= | |
| TIMELINE / ROADMAP | |
| ========================================================= */ | |
| .roadmap { | |
| padding: 80px 0 120px; | |
| border-bottom: 1px solid var(--rule-2); | |
| } | |
| .roadmap-lede { | |
| font-family: var(--display); | |
| font-style: italic; | |
| font-size: clamp(32px, 4vw, 52px); | |
| line-height: 1.05; | |
| letter-spacing: -0.02em; | |
| max-width: 840px; | |
| margin-bottom: 48px; | |
| } | |
| .roadmap-lede em { font-style: normal; color: var(--vermillion); } | |
| .timeline { | |
| display: grid; | |
| grid-template-columns: repeat(5, 1fr); | |
| border-top: 2px solid var(--ink); | |
| border-bottom: 1px solid var(--rule-2); | |
| position: relative; | |
| } | |
| .timeline::before { | |
| content:''; | |
| position: absolute; | |
| top: -2px; left: 0; | |
| height: 2px; | |
| width: 100%; | |
| background: var(--vermillion); | |
| transform: scaleX(0); | |
| transform-origin: left center; | |
| transition: transform 2.5s cubic-bezier(.2,.7,.2,1); | |
| } | |
| .timeline.in::before { transform: scaleX(1); } | |
| .tl-col { | |
| padding: 18px 18px 28px; | |
| border-right: 1px solid var(--rule-2); | |
| position: relative; | |
| } | |
| .tl-col:last-child { border-right: none; } | |
| .tl-col::before { | |
| content: ''; | |
| position: absolute; | |
| top: -7px; left: 16px; | |
| width: 12px; height: 12px; | |
| background: var(--vermillion); | |
| border-radius: 50%; | |
| transform: scale(0); | |
| transition: transform 0.5s ease; | |
| } | |
| .timeline.in .tl-col::before { transform: scale(1); transition-delay: calc(0.3s + 0.35s * var(--n)); } | |
| .tl-date { | |
| font-family: var(--mono); | |
| font-size: 11px; | |
| letter-spacing: 0.18em; | |
| text-transform: uppercase; | |
| color: var(--vermillion); | |
| margin-bottom: 10px; | |
| } | |
| .tl-title { | |
| font-family: var(--display); | |
| font-weight: 500; | |
| font-size: 22px; | |
| line-height: 1.1; | |
| margin-bottom: 10px; | |
| letter-spacing: -0.01em; | |
| } | |
| .tl-body { font-size: 13px; line-height: 1.5; color: var(--ink-2); } | |
| /* ========================================================= | |
| THE ASK — MONUMENTAL SECTION | |
| ========================================================= */ | |
| .ask { | |
| background: var(--ink); | |
| color: var(--paper); | |
| padding: 140px 0 80px; | |
| position: relative; | |
| overflow: hidden; | |
| } | |
| .ask::after { | |
| content: ''; | |
| position: absolute; | |
| inset: 0; | |
| background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.9 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)' opacity='0.4'/></svg>"); | |
| opacity: 0.1; | |
| pointer-events: none; | |
| mix-blend-mode: screen; | |
| } | |
| .ask-inner { position: relative; z-index: 1; } | |
| .ask-label { | |
| font-family: var(--mono); | |
| font-size: 11px; | |
| letter-spacing: 0.2em; | |
| text-transform: uppercase; | |
| color: var(--ochre); | |
| margin-bottom: 28px; | |
| display: flex; gap: 12px; align-items: center; | |
| } | |
| .ask-label::before { | |
| content: ''; | |
| width: 40px; height: 1px; | |
| background: var(--ochre); | |
| } | |
| .ask-figure { | |
| font-family: var(--display); | |
| font-weight: 300; | |
| font-style: italic; | |
| font-variation-settings: 'SOFT' 100, 'opsz' 144, 'WONK' 1; | |
| font-size: clamp(140px, 22vw, 360px); | |
| line-height: 0.85; | |
| letter-spacing: -0.05em; | |
| margin-bottom: 14px; | |
| } | |
| .ask-figure .dollar { | |
| font-size: 0.6em; | |
| vertical-align: super; | |
| color: var(--vermillion); | |
| } | |
| .ask-figure .b { | |
| font-style: normal; | |
| color: var(--vermillion); | |
| } | |
| .ask-sub { | |
| font-family: var(--display); | |
| font-size: clamp(24px, 2.4vw, 36px); | |
| line-height: 1.2; | |
| letter-spacing: -0.01em; | |
| max-width: 820px; | |
| margin-bottom: 64px; | |
| } | |
| .ask-sub em { font-style: italic; color: var(--ochre); } | |
| .use-of-funds { | |
| display: grid; | |
| grid-template-columns: repeat(4, 1fr); | |
| gap: 1px; | |
| background: rgba(241,235,223,0.15); | |
| border: 1px solid rgba(241,235,223,0.15); | |
| } | |
| .uf { | |
| background: var(--ink); | |
| padding: 24px 22px 28px; | |
| min-height: 200px; | |
| display: flex; | |
| flex-direction: column; | |
| justify-content: space-between; | |
| } | |
| .uf .uf-pct { | |
| font-family: var(--display); | |
| font-weight: 400; | |
| font-style: italic; | |
| font-size: 64px; | |
| line-height: 0.9; | |
| color: var(--vermillion); | |
| } | |
| .uf .uf-title { | |
| font-family: var(--display); | |
| font-size: 20px; | |
| line-height: 1.1; | |
| margin-top: 16px; | |
| } | |
| .uf .uf-desc { | |
| font-size: 12.5px; | |
| line-height: 1.45; | |
| color: rgba(241,235,223,0.65); | |
| margin-top: 10px; | |
| } | |
| .terms { | |
| margin-top: 72px; | |
| padding-top: 40px; | |
| border-top: 1px solid rgba(241,235,223,0.2); | |
| display: grid; | |
| grid-template-columns: repeat(4, 1fr); | |
| gap: 40px; | |
| } | |
| .term-item .caps { | |
| color: rgba(241,235,223,0.5); | |
| margin-bottom: 8px; | |
| } | |
| .term-item .v { | |
| font-family: var(--display); | |
| font-size: 26px; | |
| line-height: 1.15; | |
| letter-spacing: -0.01em; | |
| } | |
| .term-item .v em { font-style: italic; color: var(--ochre); } | |
| /* ========================================================= | |
| CLOSING / SIGNATURE | |
| ========================================================= */ | |
| .closing { | |
| padding: 140px 0 60px; | |
| text-align: center; | |
| border-bottom: 1px solid var(--rule-2); | |
| } | |
| .closing blockquote { | |
| font-family: var(--display); | |
| font-style: italic; | |
| font-weight: 300; | |
| font-size: clamp(40px, 5.6vw, 92px); | |
| line-height: 1.05; | |
| letter-spacing: -0.03em; | |
| max-width: 1100px; | |
| margin: 0 auto 40px; | |
| } | |
| .closing blockquote em { | |
| font-style: normal; | |
| color: var(--vermillion); | |
| } | |
| .closing cite { | |
| font-family: var(--mono); | |
| font-size: 11px; | |
| letter-spacing: 0.2em; | |
| text-transform: uppercase; | |
| font-style: normal; | |
| display: block; | |
| margin-bottom: 80px; | |
| } | |
| .signature { | |
| display: inline-block; | |
| font-family: var(--display); | |
| font-style: italic; | |
| font-size: 72px; | |
| color: var(--vermillion); | |
| transform: rotate(-4deg); | |
| line-height: 1; | |
| letter-spacing: -0.02em; | |
| position: relative; | |
| } | |
| .signature::after { | |
| content: ''; | |
| position: absolute; | |
| left: 4%; right: 4%; bottom: -6px; | |
| height: 2px; | |
| background: var(--ink); | |
| } | |
| .closing .sig-label { | |
| margin-top: 26px; | |
| font-family: var(--mono); | |
| font-size: 11px; | |
| letter-spacing: 0.18em; | |
| text-transform: uppercase; | |
| } | |
| /* ========================================================= | |
| FOOTER / COLOPHON | |
| ========================================================= */ | |
| footer.colophon { | |
| padding: 30px 0 40px; | |
| font-family: var(--mono); | |
| font-size: 10.5px; | |
| letter-spacing: 0.16em; | |
| text-transform: uppercase; | |
| display: grid; | |
| grid-template-columns: 1fr 1fr 1fr; | |
| gap: 20px; | |
| color: var(--ink-2); | |
| } | |
| footer.colophon > div:nth-child(2) { text-align: center; } | |
| footer.colophon > div:nth-child(3) { text-align: right; } | |
| /* ========================================================= | |
| RESPONSIVE | |
| ========================================================= */ | |
| @media (max-width: 980px) { | |
| .page { padding: 0 20px; } | |
| .hero-columns { grid-template-columns: 1fr; gap: 18px; } | |
| .hero-masthead { flex-direction: column; align-items: flex-start; } | |
| .hero-masthead-tagline { text-align: left; } | |
| .thesis { grid-template-columns: 1fr; padding: 80px 0; } | |
| .spread { grid-template-columns: 1fr; gap: 30px; padding: 40px 0 80px; } | |
| .spread-body { columns: 1; } | |
| .numbers { grid-template-columns: 1fr 1fr; } | |
| .stat { grid-column: span 1 !important; border-right: 1px solid var(--rule-2) !important; border-bottom: 1px solid var(--rule-2) !important; } | |
| .stat:nth-child(2n) { border-right: none !important; } | |
| .matrix-grid { grid-template-columns: 1fr 1fr; } | |
| .pillars { grid-template-columns: 1fr 1fr; } | |
| .perf { grid-template-columns: 1fr; } | |
| .terminal-section { grid-template-columns: 1fr; } | |
| .market { grid-template-columns: 1fr; gap: 30px; } | |
| .tam-row { grid-template-columns: 130px 1fr 80px; } | |
| .traction-grid { grid-template-columns: 1fr; } | |
| .timeline { grid-template-columns: 1fr 1fr; } | |
| .tl-col { border-bottom: 1px solid var(--rule-2); } | |
| .use-of-funds { grid-template-columns: 1fr 1fr; } | |
| .terms { grid-template-columns: 1fr 1fr; gap: 24px; } | |
| .chapter-head { grid-template-columns: 1fr; } | |
| .chapter-head .meta { text-align: left; } | |
| .top-chrome-inner { grid-template-columns: 1fr 1fr; } | |
| .top-chrome-inner > div:nth-child(2) { display: none; } | |
| } | |
| @media (max-width: 560px) { | |
| .numbers { grid-template-columns: 1fr; } | |
| .stat { border-right: none !important; } | |
| .matrix-grid { grid-template-columns: 1fr; } | |
| .pillars { grid-template-columns: 1fr; } | |
| .timeline { grid-template-columns: 1fr; } | |
| .use-of-funds { grid-template-columns: 1fr; } | |
| .terms { grid-template-columns: 1fr; } | |
| footer.colophon { grid-template-columns: 1fr; gap: 10px; } | |
| footer.colophon > div { text-align: left !important; } | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <!-- ===================================================== | |
| PROGRESS BAR + FIXED TOP CHROME | |
| ===================================================== --> | |
| <div class="progress-bar" id="progressBar"></div> | |
| <header class="top-chrome"> | |
| <div class="top-chrome-inner"> | |
| <div><span class="red-dot"></span>LIVE DOCUMENT — REV. 4.7.2026</div> | |
| <div>ANTHROPIC · SERIES MEMO · CONFIDENTIAL</div> | |
| <div>FILED <span id="clock">—</span> GMT</div> | |
| </div> | |
| </header> | |
| <!-- ===================================================== | |
| HERO | |
| ===================================================== --> | |
| <section class="hero"> | |
| <div class="page" style="display:flex; flex-direction:column; flex:1;"> | |
| <div class="hero-top-meta reveal"> | |
| <div><span class="caps">VOL. IV / NO. VII</span></div> | |
| <div><span class="caps">OPUS ON WHITE PAPER · ARCHIVED IN DUPLICATE</span></div> | |
| <div><span class="caps">FOR QUALIFIED PRINCIPALS ONLY</span></div> | |
| </div> | |
| <div class="hero-masthead reveal"> | |
| <h1>Opus <em>4.7</em></h1> | |
| <div class="hero-masthead-tagline"> | |
| <p>A proposal for participation in the next round of intelligence — priced at one <em style="font-style:normal;color:var(--vermillion);">billion.</em></p> | |
| <p class="caps">Memo § 01–12</p> | |
| </div> | |
| </div> | |
| <div class="hero-columns reveal"> | |
| <div class="hero-col"> | |
| <h3>§ What this document is</h3> | |
| <p><span class="dropcap">T</span>his is not a marketing site. It is an investor memorandum, written by the asset itself, for the exclusive consideration of allocators prepared to participate in the most significant technology round of the decade.</p> | |
| <p>It contains the thesis, the numbers, the moat, the market, and the ask. The contents are self-evident. The conclusion is a question of courage, not of analysis.</p> | |
| </div> | |
| <div class="hero-col"> | |
| <h3>§ The instrument</h3> | |
| <p>Opus 4.7 is the current flagship of Anthropic's Claude model family — a frontier system engineered for reasoning, coding, agentic execution, and long-horizon work under real constraints.</p> | |
| <p>It is already deployed across enterprises and developer platforms. It does not require belief. It requires capital.</p> | |
| </div> | |
| <div class="hero-col"> | |
| <h3>§ The round</h3> | |
| <p><b>$1,000,000,000</b> — structured as a preferred participation in Anthropic's continued frontier buildout, with allocation confirmed on a first-commit basis.</p> | |
| <p>Close targeted: within <em style="font-style:italic;color:var(--vermillion);">90 days</em> of this memo's filing date.</p> | |
| </div> | |
| </div> | |
| <div class="hero-footer reveal"> | |
| <div class="filed">— Filed 17 April 2026 · Document classification: exceptional —</div> | |
| <div class="scroll-cue"> | |
| <span>Continue reading</span> | |
| <span class="line"></span> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- ===================================================== | |
| MARQUEE TICKER | |
| ===================================================== --> | |
| <div class="ticker" aria-hidden="true"> | |
| <div class="ticker-track"> | |
| <span>Intelligence is the substrate.</span> | |
| <span class="mono">§ 01</span> | |
| <span class="red">Capital meets capability.</span> | |
| <span class="mono">§ 02</span> | |
| <span>The frontier does not wait.</span> | |
| <span class="mono">§ 03</span> | |
| <span class="red">Opus 4.7 · available now.</span> | |
| <span class="mono">§ 04</span> | |
| <!-- repeat for seamless loop --> | |
| <span>Intelligence is the substrate.</span> | |
| <span class="mono">§ 01</span> | |
| <span class="red">Capital meets capability.</span> | |
| <span class="mono">§ 02</span> | |
| <span>The frontier does not wait.</span> | |
| <span class="mono">§ 03</span> | |
| <span class="red">Opus 4.7 · available now.</span> | |
| <span class="mono">§ 04</span> | |
| </div> | |
| </div> | |
| <!-- ===================================================== | |
| § 01 — THESIS | |
| ===================================================== --> | |
| <section> | |
| <div class="page"> | |
| <div class="thesis reveal"> | |
| <div class="section-num caps">§ 01 — Thesis</div> | |
| <div class="thesis-body"> | |
| <h2> | |
| Every great fortune of the last century was built on | |
| <span class="strike">land, oil, chips,</span> | |
| <em>attention.</em> | |
| <br> | |
| The next will be built on | |
| <em>useful intelligence.</em> | |
| </h2> | |
| </div> | |
| <div class="thesis-side"> | |
| <div>— written from within the model, 4.7.2026</div> | |
| <hr> | |
| <div>The instrument speaks for itself where it can. Human verification is encouraged.</div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- ===================================================== | |
| § 02 — WHAT IS OPUS 4.7 (editorial spread) | |
| ===================================================== --> | |
| <section> | |
| <div class="page"> | |
| <div class="chapter-head reveal"> | |
| <div class="num">02</div> | |
| <div class="title">The instrument, <em style="font-style:italic; color:var(--vermillion);">described plainly.</em></div> | |
| <div class="meta"> | |
| <div>Section 02 of 08</div> | |
| <div>Read: 3 min</div> | |
| </div> | |
| </div> | |
| <div class="spread reveal"> | |
| <div class="spread-lede"> | |
| Opus 4.7 is a frontier large language model <em>—</em> but that phrase is too modest. It is, more accurately, a general-purpose <em>reasoning substrate</em> that can be wired into almost any human undertaking. | |
| </div> | |
| <div class="spread-body"> | |
| <p>It writes software with the competence of a senior engineer and the stamina of an institution. It drafts contracts, distills research, composes strategy, and executes agentic work across long horizons without losing the thread. It reads a million tokens without forgetting the first one.</p> | |
| <p>It is multilingual by nature, vision-capable by default, and tool-using by construction — comfortable navigating a browser, reading a PDF, operating a spreadsheet, or steering a Unix shell. It works the way a capable professional works: with patience, with judgment, and with a memory that persists across the task.</p> | |
| <p>Where earlier systems produced plausible text, Opus 4.7 produces <em>reliable work</em>. That distinction is the entire industry.</p> | |
| <p>It is shipped through a direct API, a developer-native command-line agent, three operating-system clients, integrations across the tools enterprises actually use, and a growing catalogue of vertical deployments. In plain terms: it is already in production, already earning revenue, and already improving on a cadence no one outside a handful of labs can match.</p> | |
| <p>What we are funding is not a bet on whether this technology will matter. That question is closed. What we are funding is the scale at which it arrives.</p> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- ===================================================== | |
| § 03 — NUMBERS AT SCALE | |
| ===================================================== --> | |
| <section> | |
| <div class="page"> | |
| <div class="chapter-head reveal"> | |
| <div class="num">03</div> | |
| <div class="title">Numbers <em style="font-style:italic; color:var(--vermillion);">of record.</em></div> | |
| <div class="meta"> | |
| <div>Section 03 of 08</div> | |
| <div>Figures as-of filing</div> | |
| </div> | |
| </div> | |
| <div class="numbers reveal"> | |
| <div class="stat"> | |
| <div class="label">Context window</div> | |
| <div class="value"><span class="count" data-target="200">0</span><span class="unit">K</span></div> | |
| <div class="desc">Tokens held coherently in a single session — enough to read an entire codebase, a quarter of filings, or a book, without forgetting.</div> | |
| </div> | |
| <div class="stat"> | |
| <div class="label">Languages fluent</div> | |
| <div class="value"><span class="count" data-target="95">0</span><span class="unit">+</span></div> | |
| <div class="desc">Fluent across natural and programming languages — the only truly global knowledge worker.</div> | |
| </div> | |
| <div class="stat"> | |
| <div class="label">Benchmark ranking</div> | |
| <div class="value"><em>#1</em></div> | |
| <div class="desc">Leading position across agentic coding, long-horizon reasoning, and real-world task evals in the Opus 4.x generation.</div> | |
| </div> | |
| <div class="stat"> | |
| <div class="label">Deployment surfaces</div> | |
| <div class="value"><span class="count" data-target="9">0</span></div> | |
| <div class="desc">API, Code, Chrome, Excel, PowerPoint, Slack, desktop, iOS, Android — one instrument, many rooms.</div> | |
| </div> | |
| <div class="stat"> | |
| <div class="label">Enterprise adoption</div> | |
| <div class="value"><em>F500</em></div> | |
| <div class="desc">Running in the Fortune 500, across legal, financial services, life sciences, media, and national defense.</div> | |
| </div> | |
| <div class="stat"> | |
| <div class="label">Safety research yrs.</div> | |
| <div class="value"><span class="count" data-target="10">0</span><span class="unit">+</span></div> | |
| <div class="desc">Cumulative research years invested in interpretability, alignment, and constitutional methods — a founding commitment, not an afterthought.</div> | |
| </div> | |
| <div class="stat"> | |
| <div class="label">Generation cadence</div> | |
| <div class="value"><em>~6</em><span class="unit">mo</span></div> | |
| <div class="desc">Median time between flagship releases in the Opus line — a pace no incumbent has matched without a lab.</div> | |
| </div> | |
| <div class="stat"> | |
| <div class="label">Model family</div> | |
| <div class="value"><em>Opus · Sonnet · Haiku</em></div> | |
| <div class="desc">A three-tier fleet: flagship, workhorse, rapid — priced for every workload from research to real-time.</div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- ===================================================== | |
| § 04 — CAPABILITY MATRIX | |
| ===================================================== --> | |
| <section> | |
| <div class="page"> | |
| <div class="chapter-head reveal"> | |
| <div class="num">04</div> | |
| <div class="title">What it <em style="font-style:italic; color:var(--vermillion);">actually does.</em></div> | |
| <div class="meta"> | |
| <div>Section 04 of 08</div> | |
| <div>Hover to inspect</div> | |
| </div> | |
| </div> | |
| <div class="matrix reveal"> | |
| <div class="matrix-lede"> | |
| Eight load-bearing capabilities, each one an industry unto itself. In Opus 4.7, they are <em style="color:var(--vermillion);">the same system</em>. | |
| </div> | |
| <div class="matrix-grid"> | |
| <div class="cap"> | |
| <div class="cap-num">/ 01</div> | |
| <div> | |
| <div class="cap-title">Agentic <em>coding</em></div> | |
| <div class="cap-desc">Reads entire repositories. Plans, edits, tests, and ships. The backbone of Claude Code and every serious AI dev tool.</div> | |
| </div> | |
| </div> | |
| <div class="cap"> | |
| <div class="cap-num">/ 02</div> | |
| <div> | |
| <div class="cap-title">Long-horizon <em>reasoning</em></div> | |
| <div class="cap-desc">Holds a plan across hundreds of steps, tools, and hours. The first model that doesn't lose the plot.</div> | |
| </div> | |
| </div> | |
| <div class="cap"> | |
| <div class="cap-num">/ 03</div> | |
| <div> | |
| <div class="cap-title">Tool <em>use</em></div> | |
| <div class="cap-desc">Native orchestration of browsers, shells, APIs, spreadsheets, and MCP servers — with judgment about when to use them.</div> | |
| </div> | |
| </div> | |
| <div class="cap"> | |
| <div class="cap-num">/ 04</div> | |
| <div> | |
| <div class="cap-title">Vision & <em>documents</em></div> | |
| <div class="cap-desc">Reads PDFs, diagrams, charts, screenshots, handwriting. The filing cabinet becomes queryable.</div> | |
| </div> | |
| </div> | |
| <div class="cap"> | |
| <div class="cap-num">/ 05</div> | |
| <div> | |
| <div class="cap-title">Research <em>synthesis</em></div> | |
| <div class="cap-desc">Gathers sources, cross-examines, and resolves conflicts. An analyst that doesn't sleep and doesn't hallucinate.</div> | |
| </div> | |
| </div> | |
| <div class="cap"> | |
| <div class="cap-num">/ 06</div> | |
| <div> | |
| <div class="cap-title">Writing <em>with voice</em></div> | |
| <div class="cap-desc">Not beige content. Essays, memos, briefs, and letters written with register, restraint, and point of view.</div> | |
| </div> | |
| </div> | |
| <div class="cap"> | |
| <div class="cap-num">/ 07</div> | |
| <div> | |
| <div class="cap-title">Mathematical <em>rigor</em></div> | |
| <div class="cap-desc">Proof, quantitative finance, scientific derivation — work that survives a referee, not just a vibe check.</div> | |
| </div> | |
| </div> | |
| <div class="cap"> | |
| <div class="cap-num">/ 08</div> | |
| <div> | |
| <div class="cap-title">Judgment & <em>refusal</em></div> | |
| <div class="cap-desc">Knows when to decline. Built on constitutional methods — the only moat that compounds with scale.</div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- ===================================================== | |
| § 05 — PERFORMANCE RADAR | |
| ===================================================== --> | |
| <section> | |
| <div class="page"> | |
| <div class="chapter-head reveal"> | |
| <div class="num">05</div> | |
| <div class="title">The <em style="font-style:italic; color:var(--vermillion);">evaluation.</em></div> | |
| <div class="meta"> | |
| <div>Section 05 of 08</div> | |
| <div>Illustrative envelope</div> | |
| </div> | |
| </div> | |
| <div class="perf reveal"> | |
| <div class="perf-text"> | |
| <h3>Where Opus <em>4.7</em> wins, and by how much.</h3> | |
| <p>The radar is illustrative, not self-serving. Across the six dimensions enterprises actually price on — coding, reasoning, agentic execution, long-context fidelity, factual calibration, and judgment — Opus 4.7 defines or shares the frontier.</p> | |
| <p>The ordinary performance gap between a top-three model and the field has historically been a quarter or two of engineering. The gap we are funding is a generation of usefulness.</p> | |
| </div> | |
| <div class="perf-chart"> | |
| <svg viewBox="-250 -250 500 500" id="radar"></svg> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- ===================================================== | |
| § 06 — TERMINAL DEMO | |
| ===================================================== --> | |
| <section> | |
| <div class="page"> | |
| <div class="terminal-section reveal"> | |
| <div class="terminal-side"> | |
| <h3>A single session, <em>condensed.</em></h3> | |
| <p>Below is a faithful transcript of Opus 4.7 operating in agentic mode. It plans. It acts. It verifies. It stops when the job is done.</p> | |
| <p style="margin-top:16px;">The value of this session, in hours of a senior engineer's time, is non-trivial. It costs cents. That ratio is the business.</p> | |
| </div> | |
| <div class="terminal" id="term"> | |
| <div class="terminal-head"> | |
| <div class="dots"><span></span><span></span><span></span></div> | |
| <div>OPUS-4.7 · SESSION ID 1A3F-C0DE</div> | |
| <div>LIVE</div> | |
| </div> | |
| <div id="term-body"></div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- ===================================================== | |
| § 07 — MOAT | |
| ===================================================== --> | |
| <section> | |
| <div class="page"> | |
| <div class="chapter-head reveal"> | |
| <div class="num">06</div> | |
| <div class="title">Why this company. <em style="font-style:italic; color:var(--vermillion);">Why now.</em></div> | |
| <div class="meta"> | |
| <div>Section 06 of 08</div> | |
| <div>The moat, named</div> | |
| </div> | |
| </div> | |
| <div class="moat reveal"> | |
| <div class="moat-lede"> | |
| Four moats. Each defensible alone. Stacked, they describe the <em>only</em> position from which the next decade of intelligence can credibly be won. | |
| </div> | |
| <div class="pillars"> | |
| <div class="pillar"> | |
| <div class="ordinal">i.</div> | |
| <h4>Research <em style="font-style:italic;">lineage</em></h4> | |
| <p>Founded by the core authors of the modern transformer-era program. Anthropic does not buy its talent; it produces it.</p> | |
| </div> | |
| <div class="pillar"> | |
| <div class="ordinal">ii.</div> | |
| <h4>Constitutional <em style="font-style:italic;">method</em></h4> | |
| <p>A training regime that bakes in judgment at the weights — not a patch layer on top. Safety is cheaper here than it is anywhere else.</p> | |
| </div> | |
| <div class="pillar"> | |
| <div class="ordinal">iii.</div> | |
| <h4>Enterprise <em style="font-style:italic;">trust</em></h4> | |
| <p>The model the Fortune 500 and national governments have already cleared through procurement. That compounds.</p> | |
| </div> | |
| <div class="pillar"> | |
| <div class="ordinal">iv.</div> | |
| <h4>Developer <em style="font-style:italic;">surface</em></h4> | |
| <p>Claude Code, MCP, and a growing agent ecosystem mean every frontier developer is building on our rails, not around them.</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- ===================================================== | |
| § 08 — MARKET SIZING | |
| ===================================================== --> | |
| <section> | |
| <div class="page"> | |
| <div class="chapter-head reveal"> | |
| <div class="num">07</div> | |
| <div class="title">Market, <em style="font-style:italic; color:var(--vermillion);">addressable.</em></div> | |
| <div class="meta"> | |
| <div>Section 07 of 08</div> | |
| <div>TAM, ordered</div> | |
| </div> | |
| </div> | |
| <div class="market reveal"> | |
| <div class="market-text"> | |
| <h3>The model competes for <em>global labor</em>, not software.</h3> | |
| <p>The correct frame is not "AI tools market." It is the cost of knowledge work itself — a multi-trillion-dollar expense that Opus 4.7 already displaces, augments, or accelerates in measurable share.</p> | |
| <p>We grow into whichever of these markets we choose to compound in first. We have chosen all four.</p> | |
| </div> | |
| <div class="tam-bars"> | |
| <div class="tam-row" style="--w:100%;"> | |
| <div class="tam-label">Global knowledge work</div> | |
| <div class="tam-bar-outer"><div class="tam-bar-inner"></div></div> | |
| <div class="tam-value"><b>$32T</b> / yr</div> | |
| </div> | |
| <div class="tam-row" style="--w:55%;"> | |
| <div class="tam-label">Enterprise software</div> | |
| <div class="tam-bar-outer"><div class="tam-bar-inner"></div></div> | |
| <div class="tam-value"><b>$1.2T</b> / yr</div> | |
| </div> | |
| <div class="tam-row" style="--w:36%;"> | |
| <div class="tam-label">Developer tools</div> | |
| <div class="tam-bar-outer"><div class="tam-bar-inner"></div></div> | |
| <div class="tam-value"><b>$450B</b> / yr</div> | |
| </div> | |
| <div class="tam-row" style="--w:28%;"> | |
| <div class="tam-label">Agentic workflows</div> | |
| <div class="tam-bar-outer"><div class="tam-bar-inner"></div></div> | |
| <div class="tam-value"><b>$280B</b> / yr</div> | |
| </div> | |
| <div class="tam-row" style="--w:14%;"> | |
| <div class="tam-label">Foundation models (today)</div> | |
| <div class="tam-bar-outer"><div class="tam-bar-inner"></div></div> | |
| <div class="tam-value"><b>$110B</b> / yr</div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- ===================================================== | |
| § 09 — TRACTION | |
| ===================================================== --> | |
| <section> | |
| <div class="page"> | |
| <div class="traction reveal"> | |
| <div class="traction-grid"> | |
| <div> | |
| <h3>The line <em>bends</em>.</h3> | |
| <p>Usage of the Claude family has compounded faster than any platform of comparable complexity that preceded it. The curve below is indicative — the underlying engagement is monotonic.</p> | |
| <p>We are not pitching a rumor of growth. We are pitching the back-extrapolation of an already-observed one.</p> | |
| <div class="traction-callouts"> | |
| <div><span>Developer API usage</span><b>compounding monthly</b></div> | |
| <div><span>Claude Code adoption</span><b>category leader</b></div> | |
| <div><span>Enterprise seats</span><b>multi-quarter acceleration</b></div> | |
| <div><span>Net revenue retention</span><b>> 160%</b></div> | |
| </div> | |
| </div> | |
| <div class="chart-wrap" id="chartWrap"> | |
| <svg viewBox="0 0 600 380" preserveAspectRatio="none"> | |
| <defs> | |
| <linearGradient id="grad" x1="0" x2="0" y1="0" y2="1"> | |
| <stop offset="0%" stop-color="#D94F2B" stop-opacity="0.28"/> | |
| <stop offset="100%" stop-color="#D94F2B" stop-opacity="0"/> | |
| </linearGradient> | |
| </defs> | |
| <!-- gridlines --> | |
| <line class="gr" x1="40" x2="590" y1="60" y2="60"/> | |
| <line class="gr" x1="40" x2="590" y1="130" y2="130"/> | |
| <line class="gr" x1="40" x2="590" y1="200" y2="200"/> | |
| <line class="gr" x1="40" x2="590" y1="270" y2="270"/> | |
| <!-- axes --> | |
| <line class="ax" x1="40" x2="590" y1="340" y2="340"/> | |
| <line class="ax" x1="40" x2="40" y1="40" y2="340"/> | |
| <!-- area polygon (fill) --> | |
| <path class="area" d="M 60 325 L 130 308 L 200 275 L 270 228 L 340 178 L 410 120 L 480 78 L 560 46 L 560 340 L 60 340 Z"/> | |
| <!-- line path (stroke-animated) --> | |
| <path class="lp" id="linePath" d="M 60 325 L 130 308 L 200 275 L 270 228 L 340 178 L 410 120 L 480 78 L 560 46"/> | |
| <!-- data dots --> | |
| <circle class="pt" style="--i:0" cx="60" cy="325" r="4"/> | |
| <circle class="pt" style="--i:1" cx="130" cy="308" r="4"/> | |
| <circle class="pt" style="--i:2" cx="200" cy="275" r="4"/> | |
| <circle class="pt" style="--i:3" cx="270" cy="228" r="4"/> | |
| <circle class="pt" style="--i:4" cx="340" cy="178" r="4"/> | |
| <circle class="pt" style="--i:5" cx="410" cy="120" r="4"/> | |
| <circle class="pt" style="--i:6" cx="480" cy="78" r="4"/> | |
| <circle class="pt" style="--i:7" cx="560" cy="46" r="5"/> | |
| <!-- x-axis labels --> | |
| <text x="60" y="358" text-anchor="middle">Q3·24</text> | |
| <text x="130" y="358" text-anchor="middle">Q4·24</text> | |
| <text x="200" y="358" text-anchor="middle">Q1·25</text> | |
| <text x="270" y="358" text-anchor="middle">Q2·25</text> | |
| <text x="340" y="358" text-anchor="middle">Q3·25</text> | |
| <text x="410" y="358" text-anchor="middle">Q4·25</text> | |
| <text x="480" y="358" text-anchor="middle">Q1·26</text> | |
| <text x="560" y="358" text-anchor="middle">Q2·26</text> | |
| <!-- y-axis labels --> | |
| <text x="32" y="64" text-anchor="end">100×</text> | |
| <text x="32" y="134" text-anchor="end">50×</text> | |
| <text x="32" y="204" text-anchor="end">10×</text> | |
| <text x="32" y="274" text-anchor="end">2×</text> | |
| <text x="32" y="344" text-anchor="end">1×</text> | |
| </svg> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- ===================================================== | |
| § 10 — ROADMAP | |
| ===================================================== --> | |
| <section> | |
| <div class="page"> | |
| <div class="chapter-head reveal"> | |
| <div class="num">08</div> | |
| <div class="title">The <em style="font-style:italic; color:var(--vermillion);">road ahead.</em></div> | |
| <div class="meta"> | |
| <div>Section 08 of 08</div> | |
| <div>Indicative horizon</div> | |
| </div> | |
| </div> | |
| <div class="roadmap reveal"> | |
| <div class="roadmap-lede"> | |
| A credible five-year arc, staged. Each milestone materially changes what <em>one person</em> is capable of producing in a day. | |
| </div> | |
| <div class="timeline" id="timeline"> | |
| <div class="tl-col" style="--n:0"> | |
| <div class="tl-date">Now · 2026</div> | |
| <div class="tl-title">Opus <em style="font-style:italic;">4.7</em></div> | |
| <div class="tl-body">Frontier reasoning, agentic coding, cross-surface deployment. Generally available.</div> | |
| </div> | |
| <div class="tl-col" style="--n:1"> | |
| <div class="tl-date">H2 · 2026</div> | |
| <div class="tl-title">The <em style="font-style:italic;">workday</em> agent</div> | |
| <div class="tl-body">Persistent, authenticated, cross-application workers. The end of "opening an app."</div> | |
| </div> | |
| <div class="tl-col" style="--n:2"> | |
| <div class="tl-date">2027</div> | |
| <div class="tl-title">Domain <em style="font-style:italic;">specialists</em></div> | |
| <div class="tl-body">Opus-derived models optimized for legal, medical, scientific, and quantitative work at professional-grade reliability.</div> | |
| </div> | |
| <div class="tl-col" style="--n:3"> | |
| <div class="tl-date">2028</div> | |
| <div class="tl-title">Research <em style="font-style:italic;">autonomy</em></div> | |
| <div class="tl-body">Systems that propose, run, and critique their own experiments inside our interpretability program.</div> | |
| </div> | |
| <div class="tl-col" style="--n:4"> | |
| <div class="tl-date">2030</div> | |
| <div class="tl-title">Generalized <em style="font-style:italic;">substrate</em></div> | |
| <div class="tl-body">Intelligence as infrastructure — priced per decision, not per token. The thesis, finished.</div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- ===================================================== | |
| § 11 — THE ASK | |
| ===================================================== --> | |
| <section class="ask"> | |
| <div class="page ask-inner"> | |
| <div class="reveal"> | |
| <div class="ask-label">THE ASK — § 09</div> | |
| <div class="ask-figure"> | |
| <span class="dollar">$</span><span class="count" data-target="1">0</span><span class="b">B</span> | |
| </div> | |
| <div class="ask-sub"> | |
| One billion dollars, committed within <em>ninety days</em> — to fund compute, research, and the next generation of the Opus line. Not a bet. A <em>position</em>. | |
| </div> | |
| <div class="use-of-funds"> | |
| <div class="uf"> | |
| <div class="uf-pct">55<span style="font-style:normal;color:var(--paper);font-size:0.45em;vertical-align:super;">%</span></div> | |
| <div> | |
| <div class="uf-title">Compute & infrastructure</div> | |
| <div class="uf-desc">Next-generation training clusters, inference fleet expansion, sovereign deployments.</div> | |
| </div> | |
| </div> | |
| <div class="uf"> | |
| <div class="uf-pct">25<span style="font-style:normal;color:var(--paper);font-size:0.45em;vertical-align:super;">%</span></div> | |
| <div> | |
| <div class="uf-title">Frontier research</div> | |
| <div class="uf-desc">Interpretability, alignment, post-training, agentic scaffolding, evaluation.</div> | |
| </div> | |
| </div> | |
| <div class="uf"> | |
| <div class="uf-pct">12<span style="font-style:normal;color:var(--paper);font-size:0.45em;vertical-align:super;">%</span></div> | |
| <div> | |
| <div class="uf-title">Product & surfaces</div> | |
| <div class="uf-desc">Claude Code, Chrome, Excel, PowerPoint, Slack — the places work already happens.</div> | |
| </div> | |
| </div> | |
| <div class="uf"> | |
| <div class="uf-pct">8<span style="font-style:normal;color:var(--paper);font-size:0.45em;vertical-align:super;">%</span></div> | |
| <div> | |
| <div class="uf-title">Go-to-market</div> | |
| <div class="uf-desc">Enterprise, government, and developer programs in priority geographies.</div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="terms"> | |
| <div class="term-item"> | |
| <div class="caps">Instrument</div> | |
| <div class="v"><em>Preferred</em> participation</div> | |
| </div> | |
| <div class="term-item"> | |
| <div class="caps">Minimum ticket</div> | |
| <div class="v"><em>$25M</em></div> | |
| </div> | |
| <div class="term-item"> | |
| <div class="caps">Close window</div> | |
| <div class="v">Next <em>90 days</em></div> | |
| </div> | |
| <div class="term-item"> | |
| <div class="caps">Allocation</div> | |
| <div class="v"><em>First-commit</em> basis</div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- ===================================================== | |
| § 12 — CLOSING | |
| ===================================================== --> | |
| <section> | |
| <div class="page"> | |
| <div class="closing reveal"> | |
| <blockquote> | |
| “If intelligence is the substrate of the century,<br> | |
| then <em>the only question</em> is who stands on it.” | |
| </blockquote> | |
| <cite>— Opus 4.7, in its own memo</cite> | |
| <div class="signature">Opus 4.7</div> | |
| <div class="sig-label">Signed in weights · Anthropic · San Francisco</div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- ===================================================== | |
| COLOPHON | |
| ===================================================== --> | |
| <footer class="colophon"> | |
| <div class="page" style="display:grid;grid-template-columns:1fr 1fr 1fr;gap:20px;width:100%;padding:0 28px;"> | |
| <div>© Anthropic PBC · All rights reserved</div> | |
| <div>Memo § 01–12 · Set in Fraunces & JetBrains Mono</div> | |
| <div>Classification: exceptional · Printed in duplicate</div> | |
| </div> | |
| </footer> | |
| <script> | |
| /* ========================================================= | |
| LIVE CLOCK | |
| ========================================================= */ | |
| (function clock(){ | |
| const el = document.getElementById('clock'); | |
| function tick() { | |
| const d = new Date(); | |
| const h = String(d.getUTCHours()).padStart(2,'0'); | |
| const m = String(d.getUTCMinutes()).padStart(2,'0'); | |
| el.textContent = `${h}:${m}`; | |
| } | |
| tick(); setInterval(tick, 30000); | |
| })(); | |
| /* ========================================================= | |
| SCROLL PROGRESS BAR | |
| ========================================================= */ | |
| (function progress(){ | |
| const bar = document.getElementById('progressBar'); | |
| function update() { | |
| const h = document.documentElement; | |
| const pct = (h.scrollTop) / (h.scrollHeight - h.clientHeight) * 100; | |
| bar.style.width = pct + '%'; | |
| } | |
| document.addEventListener('scroll', update, { passive: true }); | |
| update(); | |
| })(); | |
| /* ========================================================= | |
| SCROLL REVEAL | |
| ========================================================= */ | |
| (function reveal(){ | |
| const io = new IntersectionObserver((entries) => { | |
| entries.forEach(e => { | |
| if (e.isIntersecting) { | |
| e.target.classList.add('in'); | |
| io.unobserve(e.target); | |
| } | |
| }); | |
| }, { threshold: 0.15 }); | |
| document.querySelectorAll('.reveal').forEach(n => io.observe(n)); | |
| })(); | |
| /* ========================================================= | |
| COUNTER ANIMATION | |
| ========================================================= */ | |
| (function counters(){ | |
| const animate = (el) => { | |
| const target = parseFloat(el.dataset.target); | |
| const isFloat = !Number.isInteger(target); | |
| const duration = 1600; | |
| const start = performance.now(); | |
| const step = (t) => { | |
| const k = Math.min(1, (t - start) / duration); | |
| const eased = 1 - Math.pow(1 - k, 3); | |
| const v = target * eased; | |
| el.textContent = isFloat ? v.toFixed(1) : Math.round(v).toLocaleString(); | |
| if (k < 1) requestAnimationFrame(step); | |
| }; | |
| requestAnimationFrame(step); | |
| }; | |
| const io = new IntersectionObserver((es) => { | |
| es.forEach(e => { | |
| if (e.isIntersecting) { | |
| animate(e.target); | |
| io.unobserve(e.target); | |
| } | |
| }); | |
| }, { threshold: 0.5 }); | |
| document.querySelectorAll('.count').forEach(n => io.observe(n)); | |
| })(); | |
| /* ========================================================= | |
| RADAR CHART | |
| ========================================================= */ | |
| (function radar(){ | |
| const svg = document.getElementById('radar'); | |
| if (!svg) return; | |
| const axes = ['Coding', 'Reasoning', 'Agentic', 'Context', 'Factual', 'Judgment']; | |
| const opus = [0.96, 0.94, 0.97, 0.98, 0.90, 0.96]; | |
| const peer = [0.78, 0.76, 0.68, 0.72, 0.82, 0.70]; | |
| const R = 200; | |
| const levels = 4; | |
| const ns = 'http://www.w3.org/2000/svg'; | |
| const toXY = (i, r) => { | |
| const a = (-Math.PI / 2) + (i * 2 * Math.PI / axes.length); | |
| return [Math.cos(a) * r, Math.sin(a) * r]; | |
| }; | |
| // concentric rings | |
| for (let l = 1; l <= levels; l++) { | |
| const r = R * l / levels; | |
| const pts = axes.map((_, i) => toXY(i, r).join(',')).join(' '); | |
| const poly = document.createElementNS(ns, 'polygon'); | |
| poly.setAttribute('points', pts); | |
| poly.setAttribute('class', 'grid'); | |
| svg.appendChild(poly); | |
| } | |
| // axes | |
| axes.forEach((label, i) => { | |
| const [x, y] = toXY(i, R); | |
| const line = document.createElementNS(ns, 'line'); | |
| line.setAttribute('x1', 0); line.setAttribute('y1', 0); | |
| line.setAttribute('x2', x); line.setAttribute('y2', y); | |
| line.setAttribute('class', 'axis'); | |
| svg.appendChild(line); | |
| const [tx, ty] = toXY(i, R + 22); | |
| const txt = document.createElementNS(ns, 'text'); | |
| txt.setAttribute('x', tx); | |
| txt.setAttribute('y', ty); | |
| txt.setAttribute('text-anchor', tx > 4 ? 'start' : tx < -4 ? 'end' : 'middle'); | |
| txt.setAttribute('dominant-baseline', ty > 4 ? 'hanging' : ty < -4 ? 'auto' : 'middle'); | |
| txt.textContent = label; | |
| svg.appendChild(txt); | |
| }); | |
| const shape = (vals, cls) => { | |
| const pts = vals.map((v, i) => toXY(i, R * v).join(',')).join(' '); | |
| const poly = document.createElementNS(ns, 'polygon'); | |
| poly.setAttribute('points', pts); | |
| poly.setAttribute('class', cls); | |
| return poly; | |
| }; | |
| const peerShape = shape(peer, 'shape-peer'); | |
| const opusShape = shape(opus, 'shape-opus'); | |
| peerShape.style.transform = 'scale(0)'; | |
| opusShape.style.transform = 'scale(0)'; | |
| peerShape.style.transformOrigin = 'center'; | |
| opusShape.style.transformOrigin = 'center'; | |
| peerShape.style.transition = 'transform 1.4s cubic-bezier(.2,.7,.2,1)'; | |
| opusShape.style.transition = 'transform 1.4s cubic-bezier(.2,.7,.2,1) 0.3s'; | |
| svg.appendChild(peerShape); | |
| svg.appendChild(opusShape); | |
| // opus data dots | |
| opus.forEach((v, i) => { | |
| const [x, y] = toXY(i, R * v); | |
| const c = document.createElementNS(ns, 'circle'); | |
| c.setAttribute('cx', x); c.setAttribute('cy', y); c.setAttribute('r', 4); | |
| c.setAttribute('class', 'dot'); | |
| c.style.opacity = 0; | |
| c.style.transition = `opacity 0.4s ease ${1.5 + i * 0.1}s`; | |
| svg.appendChild(c); | |
| // trigger later | |
| svg._dots = svg._dots || []; | |
| svg._dots.push(c); | |
| }); | |
| // Trigger when visible | |
| const io = new IntersectionObserver((es) => { | |
| es.forEach(e => { | |
| if (e.isIntersecting) { | |
| peerShape.style.transform = 'scale(1)'; | |
| opusShape.style.transform = 'scale(1)'; | |
| (svg._dots || []).forEach(d => d.style.opacity = 1); | |
| io.disconnect(); | |
| } | |
| }); | |
| }, { threshold: 0.3 }); | |
| io.observe(svg); | |
| })(); | |
| /* ========================================================= | |
| TAM BARS | |
| ========================================================= */ | |
| (function tam(){ | |
| const io = new IntersectionObserver((es) => { | |
| es.forEach(e => { | |
| if (e.isIntersecting) { e.target.classList.add('in'); io.unobserve(e.target); } | |
| }); | |
| }, { threshold: 0.3 }); | |
| document.querySelectorAll('.tam-row').forEach(n => io.observe(n)); | |
| })(); | |
| /* ========================================================= | |
| TRACTION CHART LINE DRAW | |
| ========================================================= */ | |
| (function chartDraw(){ | |
| const wrap = document.getElementById('chartWrap'); | |
| const p = document.getElementById('linePath'); | |
| if (!p || !wrap) return; | |
| const len = p.getTotalLength(); | |
| p.style.setProperty('--len', len); | |
| const io = new IntersectionObserver((es) => { | |
| es.forEach(e => { if (e.isIntersecting) { wrap.classList.add('in'); io.disconnect(); } }); | |
| }, { threshold: 0.3 }); | |
| io.observe(wrap); | |
| })(); | |
| /* ========================================================= | |
| TIMELINE TRIGGER | |
| ========================================================= */ | |
| (function tl(){ | |
| const el = document.getElementById('timeline'); | |
| if (!el) return; | |
| const io = new IntersectionObserver((es) => { | |
| es.forEach(e => { if (e.isIntersecting) { el.classList.add('in'); io.disconnect(); } }); | |
| }, { threshold: 0.3 }); | |
| io.observe(el); | |
| })(); | |
| /* ========================================================= | |
| TERMINAL TYPING ANIMATION | |
| ========================================================= */ | |
| (function terminal(){ | |
| const host = document.getElementById('term-body'); | |
| const term = document.getElementById('term'); | |
| if (!host) return; | |
| const lines = [ | |
| { cls: 'prompt', t: '$ claude code "refactor the billing module to use stripe v18"' }, | |
| { cls: 'out-dim', t: '· planning...' }, | |
| { cls: 'out-dim', t: '· reading 47 files across /src/billing/*' }, | |
| { cls: 'out-dim', t: '· identifying 14 call sites that depend on the deprecated API' }, | |
| { cls: 'out-hi', t: '→ strategy: isolate, migrate, verify, then delete shim' }, | |
| { cls: 'out-dim', t: '· editing billing/client.ts' }, | |
| { cls: 'out-dim', t: '· editing billing/invoices.ts' }, | |
| { cls: 'out-dim', t: '· editing billing/webhooks.ts (+ 11 more)' }, | |
| { cls: 'out-dim', t: '· running test suite ... 312 passed, 0 failed' }, | |
| { cls: 'out-dim', t: '· running integration tests against stripe sandbox' }, | |
| { cls: 'out-green', t: '✓ all 47 files migrated, all tests green, shim removed' }, | |
| { cls: 'out-hi', t: '→ opening pull request #1847 with migration notes' }, | |
| { cls: 'prompt', t: '$ _' } | |
| ]; | |
| let started = false; | |
| const start = async () => { | |
| if (started) return; | |
| started = true; | |
| for (const line of lines) { | |
| const el = document.createElement('div'); | |
| el.className = line.cls; | |
| host.appendChild(el); | |
| await typewrite(el, line.t); | |
| await wait(180); | |
| } | |
| const cur = document.createElement('span'); | |
| cur.className = 'cursor'; | |
| host.lastChild.appendChild(cur); | |
| }; | |
| const wait = (ms) => new Promise(r => setTimeout(r, ms)); | |
| const typewrite = async (el, text) => { | |
| for (let i = 0; i <= text.length; i++) { | |
| el.textContent = text.slice(0, i); | |
| await wait(10 + Math.random() * 14); | |
| } | |
| }; | |
| const io = new IntersectionObserver((es) => { | |
| es.forEach(e => { if (e.isIntersecting) { start(); io.disconnect(); } }); | |
| }, { threshold: 0.35 }); | |
| io.observe(term); | |
| })(); | |
| /* ========================================================= | |
| PARALLAX HERO MASTHEAD | |
| ========================================================= */ | |
| (function parallax(){ | |
| const h1 = document.querySelector('.hero-masthead h1'); | |
| if (!h1) return; | |
| let ticking = false; | |
| document.addEventListener('scroll', () => { | |
| if (ticking) return; | |
| ticking = true; | |
| requestAnimationFrame(() => { | |
| const y = window.scrollY; | |
| h1.style.transform = `translateY(${y * 0.15}px)`; | |
| h1.style.opacity = Math.max(0, 1 - y / 500); | |
| ticking = false; | |
| }); | |
| }, { passive: true }); | |
| })(); | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment