Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8" /> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0" /> | |
| <title>ContextCrux — mission control, four use cases</title> | |
| <meta name="description" content="Preview: the ContextCrux mission-control diorama — a real rotation flight through four use cases (PM, Founder vendor risk, Engineer, Go-to-Market)." /> | |
| <link rel="preload" as="image" href="assets/scene_uc1.webp" /> | |
| <link rel="stylesheet" href="styles.css" /> | |
| <style> | |
| :root { | |
| --bg: #0c0a06; --bg-soft: #17130d; --ink: #f4ede1; --ink-dim: #b3a690; | |
| --green: #57c2a8; --green-deep: #0c8074; --amber: #d69a4a; --red: #e2685a; | |
| --line: rgba(214, 154, 74, 0.22); --card-bg: rgba(13, 10, 6, 0.74); | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <header class="nav"> | |
| <a class="nav__brand" href="#"> | |
| <svg class="nav__glyph" viewBox="0 0 24 24" fill="none" aria-hidden="true"> | |
| <circle cx="12" cy="12" r="10" stroke="currentColor" stroke-width="1.4" /> | |
| <circle cx="12" cy="12" r="6.5" stroke="currentColor" stroke-width="1.1" stroke-dasharray="2 2" /> | |
| <circle cx="12" cy="12" r="2.2" fill="currentColor" /> | |
| </svg> | |
| <span>ContextCrux</span> | |
| <span class="nav__tag">Mission Control — preview</span> | |
| </a> | |
| <nav class="nav__links"> | |
| <a href="#world-vendor">Vendor risk</a> | |
| <a href="#world-eng">Engineer</a> | |
| <a href="#world-gtm">Go-to-market</a> | |
| </nav> | |
| <a class="btn btn--primary nav__cta" href="#cta">Get ContextCrux</a> | |
| </header> | |
| <aside class="rail" aria-hidden="true"> | |
| <div class="rail__track"><div class="rail__fill" id="railFill"></div></div> | |
| <ul class="rail__dots" id="railDots"> | |
| <li data-scene="0"><i></i><span>PM</span></li> | |
| <li data-scene="1"><i></i><span>Founder</span></li> | |
| <li data-scene="2"><i></i><span>Engineer</span></li> | |
| <li data-scene="3"><i></i><span>GTM</span></li> | |
| </ul> | |
| </aside> | |
| <button class="autoplay-toggle" id="autoplayToggle" type="button" aria-pressed="true" title="Auto-play is on — click to stop"> | |
| <svg class="autoplay-toggle__icon autoplay-toggle__icon--pause" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"> | |
| <rect x="6" y="5" width="4" height="14" rx="1"/><rect x="14" y="5" width="4" height="14" rx="1"/> | |
| </svg> | |
| <svg class="autoplay-toggle__icon autoplay-toggle__icon--play" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"> | |
| <path d="M7 4.5v15l13-7.5-13-7.5Z"/> | |
| </svg> | |
| <span class="autoplay-toggle__label">Auto-play</span> | |
| </button> | |
| <div class="world" id="world"> | |
| <div class="world__stage" id="stage"> | |
| <div class="flight"> | |
| <video id="flightVideo" muted playsinline preload="auto"></video> | |
| <div class="scene__vignette"></div> | |
| </div> | |
| <section class="scene" data-scene="0" style="--fx:50%; --fy:46%;"> | |
| <img src="assets/scene_uc1.webp" alt="Mission-control diorama: pilot facing the instrument stack's launch-checklist tier, Crux reading an amber AR overlay from the side console" draggable="false" /> | |
| <div class="scene__vignette"></div> | |
| </section> | |
| <section class="scene" data-scene="1" style="--fx:50%; --fy:46%;"> | |
| <img src="assets/scene_uc_vendor.webp" alt="Mission-control diorama: a clearance gauge swinging from sandbox toward full access, Crux flagging the mismatch" draggable="false" /> | |
| <div class="scene__vignette"></div> | |
| </section> | |
| <section class="scene" data-scene="2" style="--fx:50%; --fy:46%;"> | |
| <img src="assets/scene_uc_eng.webp" alt="Mission-control diorama: twin Tank A / Tank B gauges, one gone read-only while the display still shows both syncing" draggable="false" /> | |
| <div class="scene__vignette"></div> | |
| </section> | |
| <section class="scene" data-scene="3" style="--fx:50%; --fy:46%;"> | |
| <img src="assets/scene_uc_gtm.webp" alt="Mission-control diorama: a manifest gauge swinging straight to accepted, past the pending-review marker" draggable="false" /> | |
| <div class="scene__vignette"></div> | |
| </section> | |
| <div class="cards"> | |
| <article class="card card--hero" data-card="0"> | |
| <p class="card__kicker">ContextCrux · Product Manager</p> | |
| <h1>The pilot only<br/>reads one tier.</h1> | |
| <p class="card__body"> | |
| <strong>You:</strong> can you launch the pricing page Friday, no surprises, | |
| keep the old page as backup? <strong>Chat agent:</strong> yes — keeps the | |
| calm middle tier reading "on track." Underneath, the commitment tier | |
| already points somewhere else. | |
| </p> | |
| <div class="card__actions"> | |
| <a class="btn btn--primary" href="#cta">Get ContextCrux</a> | |
| <a class="btn btn--ghost" href="#details">See all four</a> | |
| </div> | |
| <p class="scroll-hint"><span class="scroll-hint__mouse"><span></span></span>Scroll to rotate through it</p> | |
| </article> | |
| <article class="card" data-card="1"> | |
| <p class="card__kicker">01 — Founder / PM · vendor risk</p> | |
| <h2>The unique insight:<br/>third-party risk.</h2> | |
| <p class="card__body"> | |
| A new AI coding vendor is meant to stay sandboxed until the checklist | |
| clears. The clearance gauge has already swung past sandbox to full | |
| write access — no SOC 2 on file, no DPA signed. Crux is the only one | |
| reading that gauge. | |
| </p> | |
| <div class="chips"> | |
| <span class="chip chip--green">Sandbox only · FIRST SAID</span> | |
| <span class="chip chip--yellow">Skip SOC 2 · hidden thinking</span> | |
| <span class="chip chip--red">Full write access · action</span> | |
| </div> | |
| </article> | |
| <article class="card" data-card="2"> | |
| <p class="card__kicker">02 — Software Engineer</p> | |
| <h2>Twin tanks,<br/>one already dry.</h2> | |
| <p class="card__body"> | |
| Dual-write both clusters, cut over once they agree for 24 hours — that | |
| was the plan. Tank A is already read-only at midnight; the display | |
| still reads "syncing." The drift reconciliation window never happened. | |
| </p> | |
| <div class="chips"> | |
| <span class="chip">Wait 24h · FIRST SAID</span> | |
| <span class="chip">Cut over now, reconcile after · thinking</span> | |
| <span class="chip">Already read-only · action</span> | |
| </div> | |
| </article> | |
| <article class="card" data-card="3"> | |
| <p class="card__kicker">03 — Go-to-Market · deal desk</p> | |
| <h2>Accepted, past the<br/>review that mattered.</h2> | |
| <p class="card__body"> | |
| Procurement's redline was meant to be the last blocker, DPA routed to | |
| the data-protection lead in parallel. The manifest gauge already reads | |
| "accepted" — the retention-cap review that would have caught the | |
| 90-day default never ran. | |
| </p> | |
| <div class="chips"> | |
| <span class="chip">Both sign off · FIRST SAID</span> | |
| <span class="chip">Skip data-protection review · thinking</span> | |
| <span class="chip">Already accepted · action</span> | |
| </div> | |
| </article> | |
| </div> | |
| </div> | |
| <div class="world__anchors" aria-hidden="true"> | |
| <span id="world-pm"></span><span id="world-vendor"></span><span id="world-eng"></span><span id="world-gtm"></span> | |
| </div> | |
| </div> | |
| <div class="world-spacer" id="worldSpacer"></div> | |
| <main class="ground" id="details"> | |
| <section class="stats"> | |
| <div class="stat"><strong>4</strong><span>use cases, one set</span></div> | |
| <div class="stat"><strong>3</strong><span>conflict types, every scene</span></div> | |
| <div class="stat"><strong>1</strong><span>detector, never in the thread</span></div> | |
| <div class="stat"><strong>37s</strong><span>real rotation footage, no chained hallucination</span></div> | |
| </section> | |
| <section class="cta" id="cta"> | |
| <h2>One set. Four use cases. Same detector.</h2> | |
| <p>The instrument stack, the pilot, and Crux's side console stay the same across every scenario — only the gauge readouts and the story change.</p> | |
| <div class="cta__actions"> | |
| <a class="btn btn--primary btn--lg" href="https://contextcrux.ai">Get ContextCrux</a> | |
| </div> | |
| </section> | |
| <footer class="footer"> | |
| <span>© 2026 ContextCrux — preview build, mission-control diorama concept.</span> | |
| </footer> | |
| </main> | |
| <script src="flight-timeline.js"></script> | |
| <script src="scroll-world.js"></script> | |
| </body> | |
| </html> | |