From 10eaa29b93cd69b3545d6071eb4e37a5c703ae75 Mon Sep 17 00:00:00 2001
From: Sejal Batra <sejalbatra08@gmail.com>
Date: Thu, 27 Aug 2026 18:19:50 +0530
Subject: [PATCH 1/2] Add /launch squeeze page

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_011o5vpPXd6NvFFj43ZGRUbS
---
 website/astro.config.mjs                      |   4 +
 website/src/api/client.ts                     |   9 +
 .../features/launch/AsciiFrame.astro          | 225 +++++++++++++
 .../features/launch/FactsSection.astro        |  93 ++++++
 .../features/launch/HeroSection.astro         |  49 +++
 .../features/launch/SignupForm.astro          | 309 ++++++++++++++++++
 website/src/components/layout/Layout.astro    |   8 +-
 website/src/constants/waitlist.ts             |  16 +
 website/src/i18n/de-DE.json                   |  30 ++
 website/src/i18n/en-US.json                   |  30 ++
 website/src/i18n/es-ES.json                   |  30 ++
 website/src/i18n/hi-IN.json                   |  30 ++
 website/src/i18n/id-ID.json                   |  30 ++
 website/src/i18n/ja-JP.json                   |  30 ++
 website/src/i18n/ko-KR.json                   |  30 ++
 website/src/i18n/ru-RU.json                   |  30 ++
 website/src/i18n/zh-CN.json                   |  30 ++
 website/src/pages/[lang]/launch.astro         |  85 +++++
 website/src/pages/launch.astro                |  77 +++++
 website/src/styles/fonts.css                  |   2 +-
 20 files changed, 1143 insertions(+), 4 deletions(-)
 create mode 100644 website/src/components/features/launch/AsciiFrame.astro
 create mode 100644 website/src/components/features/launch/FactsSection.astro
 create mode 100644 website/src/components/features/launch/HeroSection.astro
 create mode 100644 website/src/components/features/launch/SignupForm.astro
 create mode 100644 website/src/constants/waitlist.ts
 create mode 100644 website/src/pages/[lang]/launch.astro
 create mode 100644 website/src/pages/launch.astro

diff --git a/website/astro.config.mjs b/website/astro.config.mjs
index 643583c2..509198a7 100644
--- a/website/astro.config.mjs
+++ b/website/astro.config.mjs
@@ -70,8 +70,12 @@ export default defineConfig({
         const path = new URL(page).pathname.replace(/\/$/, "") || "/";
         const isTeamIndex =
           path === "/team" || /\/[a-z]{2}-[A-Z]{2}\/team$/.test(path);
+        // Squeeze page: indexable and shareable, but kept out of the sitemap.
+        const isLaunch =
+          path === "/launch" || /\/[a-z]{2}-[A-Z]{2}\/launch$/.test(path);
         return (
           !isTeamIndex &&
+          !isLaunch &&
           !page.includes("/tags/") &&
           !page.includes("/account/") &&
           !page.includes("/oauth/") &&
diff --git a/website/src/api/client.ts b/website/src/api/client.ts
index ae6d1c21..d383e8b8 100644
--- a/website/src/api/client.ts
+++ b/website/src/api/client.ts
@@ -35,6 +35,10 @@ interface ContactData {
 
 interface SubscribeData {
   email: string;
+  firstName: string;
+  lastName: string;
+  /** Which list this signup belongs to. Omitted by the site newsletter. */
+  source?: string;
 }
 
 export interface Entrant {
@@ -106,11 +110,15 @@ const createApiClient = () => {
 
     /**
      * Subscribe to waitlist
+     *
+     * `source` identifies which list the signup belongs to. Omitting it
+     * produces the original payload, so existing callers are unaffected.
      */
     subscribe: (
       email: string,
       firstName: string,
       lastName: string,
+      source?: string,
     ): ApiResponse => {
       return fetch(`${env.API_URL}/waitlist`, {
         headers: {
@@ -121,6 +129,7 @@ const createApiClient = () => {
           email,
           firstName,
           lastName,
+          ...(source ? { source } : {}),
         } as SubscribeData),
       });
     },
diff --git a/website/src/components/features/launch/AsciiFrame.astro b/website/src/components/features/launch/AsciiFrame.astro
new file mode 100644
index 00000000..d4b1de7b
--- /dev/null
+++ b/website/src/components/features/launch/AsciiFrame.astro
@@ -0,0 +1,225 @@
+---
+/**
+ * ASCII edge framing for /launch.
+ *
+ * Uses the home hero's generator unchanged — renderASCIIRect over the
+ * chladniRect field, same RAMP (" .,·:;|+x#"), same node-threshold density
+ * gradient. One continuous field is generated for the whole section, then
+ * sliced into four edge strips, so the pattern is the same one Home draws,
+ * just framing the content instead of running full-bleed behind it.
+ *
+ * Character advance and line height are measured from a live probe rather
+ * than estimated, so the strip geometry lands exactly and the left/right
+ * insets stay symmetrical.
+ */
+---
+
+<div class="ascii-frame" aria-hidden="true">
+  <pre class="af-strip" data-edge="top"></pre>
+  <pre class="af-strip" data-edge="bottom"></pre>
+  <pre class="af-strip" data-edge="left"></pre>
+  <pre class="af-strip" data-edge="right"></pre>
+</div>
+
+<style>
+  .ascii-frame {
+    position: absolute;
+    inset: 0;
+    overflow: hidden;
+    pointer-events: none;
+    user-select: none;
+    z-index: 0;
+  }
+
+  .af-strip {
+    position: absolute;
+    margin: 0;
+    font-family: "Geist Mono", monospace;
+    font-size: 11px;
+    line-height: 1.22;
+    letter-spacing: 0.05em;
+    white-space: pre;
+    color: rgba(255, 107, 53, 0.22);
+    overflow: hidden;
+  }
+
+  @media (max-width: 768px) {
+    .af-strip {
+      font-size: 6px;
+      line-height: 1.15;
+    }
+  }
+</style>
+
+<script>
+  import { RAMP } from "@/scripts/home/ascii";
+  import { chladniRect } from "@/scripts/home/base-math";
+
+  const frame = document.querySelector<HTMLElement>(".ascii-frame");
+  const inner = document.querySelector<HTMLElement>(".launch-inner");
+  const section = document.getElementById("launch");
+
+  if (frame && inner && section) {
+    const strips = {
+      top: frame.querySelector<HTMLElement>('[data-edge="top"]')!,
+      bottom: frame.querySelector<HTMLElement>('[data-edge="bottom"]')!,
+      left: frame.querySelector<HTMLElement>('[data-edge="left"]')!,
+      right: frame.querySelector<HTMLElement>('[data-edge="right"]')!,
+    };
+
+    /** Mode pair from the hero's MODES table; t=0 gives the symmetric figure. */
+    const MODE_M = 2;
+    const MODE_N = 3;
+    const TIME = 0;
+
+    /**
+     * Ramp ceiling. The raw field pins to '#' along every nodal line, which
+     * renders as solid diagonal runs; capping mid-ramp keeps those lines
+     * legible as texture instead of blocks.
+     */
+    const MAX_IDX = 6;
+    /** Share of field glyphs kept at the corners; dithered away elsewhere. */
+    const COVERAGE = 1;
+    /** Falloff exponent — higher pulls weight harder into the corners. */
+    const CORNER_P = 1;
+
+    /**
+     * Deterministic dither in [0,1). Folded to the near corner so it is
+     * identical in all four quadrants and cannot break the symmetry.
+     */
+    const dither = (col: number, row: number, cols: number, rows: number) => {
+      const fc = Math.min(col, cols - 1 - col);
+      const fr = Math.min(row, rows - 1 - row);
+      const n = Math.sin(fc * 127.1 + fr * 311.7) * 43758.5453;
+      return n - Math.floor(n);
+    };
+
+    /**
+     * One cell of the field.
+     *
+     * The glyph comes from chladniRect on folded coordinates, so the pattern
+     * mirrors about both axes — the raw field is only symmetric under 180°
+     * rotation, which is what left top-left empty while top-right was heavy.
+     * Coverage is then weighted by |x|·|y|, peaking at the four corners and
+     * falling to nothing at each edge midpoint and at the centre.
+     */
+    const cell = (col: number, row: number, cols: number, rows: number) => {
+      // Cell centres, not cell origins: (col/cols) is not the exact negation
+      // of ((cols-1-col)/cols), and that half-cell offset breaks the mirror.
+      const px = ((col + 0.5) / cols) * 2 - 1;
+      const py = ((row + 0.5) / rows) * 2 - 1;
+      const ax = Math.abs(px);
+      const ay = Math.abs(py);
+
+      const weight = Math.pow(ax, CORNER_P) * Math.pow(ay, CORNER_P);
+      if (dither(col, row, cols, rows) > weight * COVERAGE) return " ";
+
+      // Fold into one quadrant, then span the full plate across it.
+      const v = chladniRect(2 * ax - 1, 2 * ay - 1, MODE_M, MODE_N, TIME);
+      const a = Math.abs(v);
+      const NODE = 0.12;
+
+      let idx =
+        a < NODE
+          ? Math.floor((1 - a / NODE) * (RAMP.length - 1))
+          : Math.max(0, Math.floor(((0.4 - a) / 0.4) * 2));
+
+      idx = Math.min(Math.max(idx, 0), MAX_IDX);
+      return RAMP[idx];
+    };
+
+    const block = (
+      c0: number,
+      c1: number,
+      r0: number,
+      r1: number,
+      cols: number,
+      rows: number,
+    ) => {
+      const lines: string[] = [];
+      for (let r = r0; r < r1; r++) {
+        let line = "";
+        for (let c = c0; c < c1; c++) line += cell(c, r, cols, rows);
+        lines.push(line);
+      }
+      return lines.join("\n");
+    };
+
+    /** Measure real glyph advance and line box from the rendered font. */
+    const metrics = () => {
+      const probe = document.createElement("span");
+      probe.style.cssText =
+        "position:absolute;visibility:hidden;white-space:pre;";
+      probe.textContent = "x".repeat(100);
+      strips.top.appendChild(probe);
+      const chW = probe.getBoundingClientRect().width / 100;
+      probe.remove();
+
+      const cs = getComputedStyle(strips.top);
+      let lh = parseFloat(cs.lineHeight);
+      if (!Number.isFinite(lh)) lh = parseFloat(cs.fontSize) * 1.2;
+      return { chW, lh };
+    };
+
+    const draw = () => {
+      const { chW, lh } = metrics();
+      if (!(chW > 0) || !(lh > 0)) return;
+
+      const isMobile = window.innerWidth <= 768;
+      const gutter = isMobile ? 16 : 28;
+
+      const sect = section.getBoundingClientRect();
+      const box = inner.getBoundingClientRect();
+      const W = sect.width;
+      const H = sect.height;
+
+      const cols = Math.ceil(W / chW);
+      const rows = Math.ceil(H / lh);
+      if (cols < 2 || rows < 2) return;
+
+      // Hole measured from the centre out, so both sides match exactly.
+      const sideGap = Math.max(0, W / 2 - box.width / 2 - gutter);
+      const vertGap = Math.max(0, H / 2 - box.height / 2 - gutter);
+      const sideCols = Math.max(0, Math.floor(sideGap / chW));
+      const edgeRows = Math.max(0, Math.floor(vertGap / lh));
+      const midRows = rows - edgeRows;
+
+      // Top and bottom: full width, equal row counts, anchored to each edge.
+      strips.top.style.cssText = "top:0;left:0;";
+      strips.top.textContent = block(0, cols, 0, edgeRows, cols, rows);
+
+      strips.bottom.style.cssText = "bottom:0;left:0;";
+      strips.bottom.textContent = block(0, cols, midRows, rows, cols, rows);
+
+      // Sides: equal column counts anchored to opposite edges, so the inset
+      // is symmetrical by construction.
+      strips.left.style.cssText = `top:${edgeRows * lh}px;left:0;`;
+      strips.left.textContent = block(
+        0,
+        sideCols,
+        edgeRows,
+        midRows,
+        cols,
+        rows,
+      );
+
+      strips.right.style.cssText = `top:${edgeRows * lh}px;right:0;`;
+      strips.right.textContent = block(
+        cols - sideCols,
+        cols,
+        edgeRows,
+        midRows,
+        cols,
+        rows,
+      );
+    };
+
+    draw();
+
+    let raf = 0;
+    window.addEventListener("resize", () => {
+      cancelAnimationFrame(raf);
+      raf = requestAnimationFrame(draw);
+    });
+  }
+</script>
diff --git a/website/src/components/features/launch/FactsSection.astro b/website/src/components/features/launch/FactsSection.astro
new file mode 100644
index 00000000..8a688f37
--- /dev/null
+++ b/website/src/components/features/launch/FactsSection.astro
@@ -0,0 +1,93 @@
+---
+import Button from "@/components/ui/Button.astro";
+import { createTranslator, getLocaleFromUrl } from "@/utils/i18n";
+
+const locale = getLocaleFromUrl(Astro.url.pathname);
+const t = await createTranslator(locale);
+---
+
+<div class="launch-facts">
+  <div class="launch-stat">
+    <span class="launch-stat-label">{t("launch.facts.supply.label")}</span>
+    <span class="launch-stat-value">{t("launch.facts.supply.value")}</span>
+  </div>
+
+  <div class="launch-consensus">
+    <span class="launch-stat-label">{t("launch.facts.consensus.label")}</span>
+
+    <Button
+      href="https://docs.quantus.com/guides/mining/"
+      variant="secondary"
+      size="medium"
+      target="_blank"
+      rel="noopener"
+      class="launch-mining-btn border-white hover:border-flare hover:text-flare"
+      data-track="mining_docs_click"
+      data-track-cta-location="launch"
+    >
+      {t("launch.mining_cta")}
+    </Button>
+  </div>
+</div>
+
+<style>
+  .launch-facts {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: var(--launch-space-group);
+  }
+
+  /* Both blocks share one label/value treatment so they read as a pair. */
+  .launch-stat {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: var(--launch-space-tight);
+  }
+
+  .launch-stat-label {
+    font-family: "Geist Mono", monospace;
+    font-size: 11px;
+    font-weight: 400;
+    color: rgba(232, 230, 224, 0.4);
+    letter-spacing: 0.14em;
+    text-transform: uppercase;
+    text-align: center;
+    line-height: 1.4;
+  }
+
+  .launch-stat-value {
+    font-family: "Geist Mono", monospace;
+    font-size: 36px;
+    font-weight: 400;
+    color: var(--color-flare);
+    letter-spacing: -0.01em;
+    text-align: center;
+    line-height: 1.1;
+  }
+
+  /* Match the NOTIFY ME button's padding so the two CTAs carry equal weight. */
+  .launch-mining-btn {
+    padding: 13px 26px;
+  }
+
+  /* Tighter than the stack gap so the eyebrow binds to its button. */
+  .launch-consensus {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: var(--launch-space-tight);
+  }
+
+  @media (max-width: 768px) {
+    .launch-stat-label {
+      font-size: 10px;
+      letter-spacing: 0.12em;
+    }
+
+    .launch-stat-value {
+      font-size: 28px;
+    }
+  }
+</style>
diff --git a/website/src/components/features/launch/HeroSection.astro b/website/src/components/features/launch/HeroSection.astro
new file mode 100644
index 00000000..7d1e6ab1
--- /dev/null
+++ b/website/src/components/features/launch/HeroSection.astro
@@ -0,0 +1,49 @@
+---
+import LogoLong from "@/assets/brand/logo-long.svg";
+import { createTranslator, getLocaleFromUrl } from "@/utils/i18n";
+
+const locale = getLocaleFromUrl(Astro.url.pathname);
+const t = await createTranslator(locale);
+---
+
+<div class="launch-hero">
+  <LogoLong class="launch-logo" />
+  <span class="launch-eyebrow">{t("launch.hero.eyebrow")}</span>
+</div>
+
+<style>
+  .launch-hero {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: var(--launch-space-tight);
+  }
+
+  .launch-logo {
+    display: block;
+    height: 28px;
+    width: auto;
+  }
+
+  .launch-eyebrow {
+    font-family: "Geist Mono", monospace;
+    font-size: 12px;
+    font-weight: 400;
+    color: rgba(232, 230, 224, 0.45);
+    letter-spacing: 0.14em;
+    text-transform: uppercase;
+    text-align: center;
+    line-height: 1.5;
+  }
+
+  @media (max-width: 768px) {
+    .launch-logo {
+      height: 22px;
+    }
+
+    .launch-eyebrow {
+      font-size: 11px;
+      letter-spacing: 0.12em;
+    }
+  }
+</style>
diff --git a/website/src/components/features/launch/SignupForm.astro b/website/src/components/features/launch/SignupForm.astro
new file mode 100644
index 00000000..07e1a0ee
--- /dev/null
+++ b/website/src/components/features/launch/SignupForm.astro
@@ -0,0 +1,309 @@
+---
+import Button from "@/components/ui/Button.astro";
+import { createTranslator, getLocaleFromUrl } from "@/utils/i18n";
+import { WAITLIST_SOURCE, type WaitlistSource } from "@/constants/waitlist";
+
+interface Props {
+  /** Which waitlist these signups belong to. */
+  source?: WaitlistSource;
+}
+
+const { source = WAITLIST_SOURCE.LAUNCH } = Astro.props;
+
+const locale = getLocaleFromUrl(Astro.url.pathname);
+const t = await createTranslator(locale);
+---
+
+<div class="launch-signup" data-source={source}>
+  <div id="launch-form-wrap" class="launch-form-wrap">
+    <h1 class="launch-headline">{t("launch.signup.headline")}</h1>
+
+    <div class="launch-form-row">
+      <div class="launch-input-wrap">
+        <input
+          type="email"
+          id="launch-email"
+          class="launch-input"
+          placeholder={t("launch.signup.email_placeholder")}
+          aria-label={t("launch.signup.email_aria")}
+          autocomplete="email"
+          required
+        />
+        {/* Decorative resting cursor; the real caret takes over on focus. */}
+        <span class="launch-cursor" aria-hidden="true"></span>
+      </div>
+      <Button id="launch-submit" class="launch-btn">
+        {t("launch.signup.submit_label")}
+      </Button>
+    </div>
+
+    <span class="launch-error-msg" id="launch-error">
+      {t("launch.signup.error_message")}
+    </span>
+  </div>
+
+  <div class="launch-success" id="launch-success">
+    <span class="launch-success-headline">
+      {t("launch.signup.success.headline")}
+    </span>
+    <span class="launch-success-sub">
+      {t("launch.signup.success.sub")}
+    </span>
+  </div>
+</div>
+
+<style>
+  .launch-signup {
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+  }
+
+  .launch-form-wrap {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    width: 100%;
+  }
+
+  /* The page's focal point: display scale, directly above the field. */
+  .launch-headline {
+    font-family: "Geist", sans-serif;
+    font-size: 44px;
+    font-weight: 500;
+    color: var(--color-white);
+    letter-spacing: -0.02em;
+    line-height: 1.08;
+    text-align: center;
+    text-wrap: balance;
+    margin: 0 0 var(--launch-space-group) 0;
+  }
+
+  .launch-form-row {
+    display: flex;
+    width: 100%;
+    max-width: 420px;
+  }
+
+  .launch-input-wrap {
+    position: relative;
+    display: flex;
+    flex: 1;
+    min-width: 0;
+  }
+
+  /* Resting cursor: a thin vertical caret, centred on the input's text line.
+     Reuses the shared `bl` keyframe from global.css at the same rate as
+     the terminal loader's block cursor. */
+  .launch-cursor {
+    position: absolute;
+    left: 18px;
+    top: 50%;
+    transform: translateY(-50%);
+    width: 2px;
+    height: 15px;
+    background: rgba(255, 255, 255, 0.85);
+    animation: bl 0.9s step-end infinite;
+    pointer-events: none;
+  }
+
+  /* Hand off to the real caret on focus, and drop it once anything is typed. */
+  .launch-input:focus ~ .launch-cursor,
+  .launch-input:not(:placeholder-shown) ~ .launch-cursor {
+    display: none;
+  }
+
+  .launch-input {
+    flex: 1;
+    min-width: 0;
+    background: transparent;
+    /* Matches the mining button's border-white so the two bordered
+       elements on the page agree. */
+    border: 1px solid var(--color-white);
+    border-right: none;
+    /* Left pad = cursor left (18) + cursor width (2) + 6px, so the caret
+       sits right against the placeholder like a terminal prompt. */
+    padding: 13px 18px 13px 26px;
+    font-family: "Geist", sans-serif;
+    font-size: 14px;
+    color: #ffffff;
+    outline: none;
+    border-radius: 0;
+    transition: border-color 0.2s;
+  }
+
+  .launch-input::placeholder {
+    color: rgba(232, 230, 224, 0.3);
+  }
+
+  .launch-input:focus {
+    /* Rest is already white, so focus shifts to flare — the same
+       interaction colour the mining button uses on hover. */
+    border-color: var(--color-flare);
+  }
+
+  .launch-input.error {
+    border-color: rgba(255, 59, 59, 0.6);
+  }
+
+  .launch-btn {
+    padding: 13px 26px;
+    white-space: nowrap;
+  }
+
+  .launch-error-msg {
+    font-family: "Geist Mono", monospace;
+    font-size: 12px;
+    color: rgba(255, 59, 59, 0.8);
+    letter-spacing: 0.08em;
+    margin-top: var(--launch-space-tight);
+    display: none;
+    text-align: center;
+  }
+
+  .launch-error-msg.visible {
+    display: block;
+  }
+
+  .launch-success {
+    display: none;
+    flex-direction: column;
+    align-items: center;
+    gap: var(--launch-space-tight);
+    opacity: 0;
+    transform: translateY(20px);
+    transition:
+      opacity 0.7s ease,
+      transform 0.7s ease;
+  }
+
+  .launch-success.visible {
+    opacity: 1;
+    transform: translateY(0);
+  }
+
+  .launch-success-headline {
+    font-family: "Geist", sans-serif;
+    font-size: 26px;
+    font-weight: 500;
+    color: #ffffff;
+    letter-spacing: -0.01em;
+    text-align: center;
+  }
+
+  .launch-success-sub {
+    font-family: "Geist", sans-serif;
+    font-size: 15px;
+    color: rgba(232, 230, 224, 0.45);
+    line-height: 1.6;
+    text-align: center;
+  }
+
+  @media (max-width: 768px) {
+    .launch-headline {
+      font-size: 32px;
+    }
+
+    .launch-form-row {
+      flex-direction: column;
+      gap: var(--launch-space-tight);
+      max-width: 100%;
+    }
+
+    .launch-input {
+      border-right: 1px solid var(--color-white);
+      padding: 12px 16px 12px 24px;
+    }
+
+    .launch-cursor {
+      left: 16px;
+    }
+
+    .launch-btn {
+      width: 100%;
+      padding: 12px 20px;
+    }
+
+    .launch-success-headline {
+      font-size: 22px;
+    }
+  }
+</style>
+
+<script>
+  import apiClient from "@/api/client";
+  import { trackEvent } from "@/scripts/shared/analytics";
+
+  const root = document.querySelector<HTMLElement>(".launch-signup");
+  const submitBtn = document.getElementById(
+    "launch-submit",
+  ) as HTMLButtonElement | null;
+  const emailInput = document.getElementById(
+    "launch-email",
+  ) as HTMLInputElement | null;
+  const errorMsg = document.getElementById("launch-error");
+  const formWrap = document.getElementById("launch-form-wrap");
+  const successWrap = document.getElementById("launch-success");
+
+  if (root && submitBtn && emailInput && errorMsg && formWrap && successWrap) {
+    const source = root.dataset.source;
+
+    const isValidEmail = (val: string) =>
+      /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(val);
+
+    const setLoading = (loading: boolean) => {
+      submitBtn.disabled = loading;
+      if (loading) {
+        submitBtn.dataset.originalText = submitBtn.innerText;
+        submitBtn.innerText = "...";
+      } else {
+        submitBtn.innerText = submitBtn.dataset.originalText ?? "";
+      }
+    };
+
+    submitBtn.addEventListener("click", async () => {
+      emailInput.classList.remove("error");
+      errorMsg.classList.remove("visible");
+
+      const email = emailInput.value.trim();
+
+      if (!email || !isValidEmail(email)) {
+        emailInput.classList.add("error");
+        errorMsg.classList.add("visible");
+        return;
+      }
+
+      setLoading(true);
+
+      try {
+        // The squeeze page collects email only; the API still expects the
+        // name fields, so they go up empty.
+        const resp = await apiClient.subscribe(email, "", "", source);
+        const data = await resp.json();
+
+        if (resp.status !== 201) {
+          if (data.error) window.toast.error(data.error);
+          setLoading(false);
+          return;
+        }
+
+        trackEvent("generate_lead", {
+          lead_type: "launch",
+          form_id: "launch_squeeze",
+        });
+
+        formWrap.style.transition = "opacity 0.4s ease";
+        formWrap.style.opacity = "0";
+        setTimeout(() => {
+          formWrap.style.display = "none";
+          successWrap.style.display = "flex";
+          requestAnimationFrame(() => successWrap.classList.add("visible"));
+        }, 400);
+      } catch (error) {
+        window.toast.error((error as Error).message);
+        setLoading(false);
+      }
+    });
+  }
+</script>
diff --git a/website/src/components/layout/Layout.astro b/website/src/components/layout/Layout.astro
index c761ad42..f3a581ee 100644
--- a/website/src/components/layout/Layout.astro
+++ b/website/src/components/layout/Layout.astro
@@ -39,9 +39,11 @@ import env from "@/config";
 
 interface Props extends SEOProps {
   jsonLd?: WithContext<Thing> | Graph;
+  /** Render the navbar and footer. Off for standalone pages like /launch. */
+  showChrome?: boolean;
 }
 
-const { jsonLd, ...metadata } = Astro.props;
+const { jsonLd, showChrome = true, ...metadata } = Astro.props;
 
 const currentLocale = getLocaleFromUrl(Astro.url.pathname);
 const t = await createTranslator(currentLocale);
@@ -115,11 +117,11 @@ const breadcrumbs = generateBreadcrumbs({
       )
     }
 
-    <Navbar locale={currentLocale} />
+    {showChrome && <Navbar locale={currentLocale} />}
     <main class="grow">
       <slot />
     </main>
-    <Footer />
+    {showChrome && <Footer />}
 
     <CookieConsent />
     <Toast />
diff --git a/website/src/constants/waitlist.ts b/website/src/constants/waitlist.ts
new file mode 100644
index 00000000..d6ab7620
--- /dev/null
+++ b/website/src/constants/waitlist.ts
@@ -0,0 +1,16 @@
+/**
+ * Identifies which list a POST /waitlist submission belongs to.
+ *
+ * The site newsletter omits this and keeps the original payload shape; the
+ * launch squeeze page sends LAUNCH. Switching the launch page to a different
+ * list is a one-line change here.
+ *
+ * NOTE: the API does not read this field yet. Until it does, launch signups
+ * land in the same list as the newsletter — the field is inert, not wrong.
+ */
+export const WAITLIST_SOURCE = {
+  LAUNCH: "launch",
+} as const;
+
+export type WaitlistSource =
+  (typeof WAITLIST_SOURCE)[keyof typeof WAITLIST_SOURCE];
diff --git a/website/src/i18n/de-DE.json b/website/src/i18n/de-DE.json
index 67571377..2da2c4fc 100644
--- a/website/src/i18n/de-DE.json
+++ b/website/src/i18n/de-DE.json
@@ -828,6 +828,36 @@
       "copy": "Empfehlungscode kopiert!"
     }
   },
+  "launch": {
+    "meta": {
+      "title": "Quantus Launch",
+      "description": "Quantensicheres verschlüsseltes Geld. 21 Millionen Angebotsgrenze, Proof of Work. Erhalten Sie die Launch-Details."
+    },
+    "hero": {
+      "eyebrow": "Quantensicheres verschlüsseltes Geld"
+    },
+    "signup": {
+      "headline": "Launch-Details erhalten.",
+      "email_placeholder": "your@email.com",
+      "email_aria": "E-Mail-Adresse",
+      "submit_label": "BENACHRICHTIGEN",
+      "error_message": "Bitte geben Sie eine gültige E-Mail-Adresse ein.",
+      "success": {
+        "headline": "Sie stehen auf der Liste.",
+        "sub": "Die Launch-Details kommen in Ihr Postfach."
+      }
+    },
+    "facts": {
+      "supply": {
+        "label": "ANGEBOTSGRENZE",
+        "value": "21,000,000"
+      },
+      "consensus": {
+        "label": "PROOF OF WORK"
+      }
+    },
+    "mining_cta": "MINING-GUIDE LESEN"
+  },
   "blog": {
     "title": "Die neuesten Nachrichten von Quantus.",
     "hero": {
diff --git a/website/src/i18n/en-US.json b/website/src/i18n/en-US.json
index 966b997c..fb2585aa 100644
--- a/website/src/i18n/en-US.json
+++ b/website/src/i18n/en-US.json
@@ -828,6 +828,36 @@
       "copy": "Referral code copied!"
     }
   },
+  "launch": {
+    "meta": {
+      "title": "Quantus Launch",
+      "description": "Quantum secure encrypted money. 21 million supply cap, Proof of Work. Get launch details."
+    },
+    "hero": {
+      "eyebrow": "Quantum Secure Encrypted Money"
+    },
+    "signup": {
+      "headline": "Get launch details.",
+      "email_placeholder": "your@email.com",
+      "email_aria": "Email address",
+      "submit_label": "NOTIFY ME",
+      "error_message": "Please enter a valid email address.",
+      "success": {
+        "headline": "You're on the list.",
+        "sub": "Launch details will land in your inbox."
+      }
+    },
+    "facts": {
+      "supply": {
+        "label": "SUPPLY CAP",
+        "value": "21,000,000"
+      },
+      "consensus": {
+        "label": "PROOF OF WORK"
+      }
+    },
+    "mining_cta": "READ THE MINING GUIDE"
+  },
   "blog": {
     "title": "The latest news from the Quantus.",
     "hero": {
diff --git a/website/src/i18n/es-ES.json b/website/src/i18n/es-ES.json
index 286f6033..994f3cfb 100644
--- a/website/src/i18n/es-ES.json
+++ b/website/src/i18n/es-ES.json
@@ -828,6 +828,36 @@
       "copy": "¡Código de referido copiado!"
     }
   },
+  "launch": {
+    "meta": {
+      "title": "Lanzamiento de Quantus",
+      "description": "Dinero encriptado seguro cuánticamente. Suministro máximo de 21 millones, Proof of Work. Reciba los detalles del lanzamiento."
+    },
+    "hero": {
+      "eyebrow": "Dinero Encriptado Seguro Cuánticamente"
+    },
+    "signup": {
+      "headline": "Reciba los detalles del lanzamiento.",
+      "email_placeholder": "your@email.com",
+      "email_aria": "Dirección de correo electrónico",
+      "submit_label": "AVÍSAME",
+      "error_message": "Por favor, introduzca una dirección de correo electrónico válida.",
+      "success": {
+        "headline": "Está en la lista.",
+        "sub": "Los detalles del lanzamiento llegarán a su bandeja de entrada."
+      }
+    },
+    "facts": {
+      "supply": {
+        "label": "SUMINISTRO MÁXIMO",
+        "value": "21,000,000"
+      },
+      "consensus": {
+        "label": "PROOF OF WORK"
+      }
+    },
+    "mining_cta": "LEER LA GUÍA DE MINERÍA"
+  },
   "blog": {
     "title": "Las últimas noticias de Quantus.",
     "hero": {
diff --git a/website/src/i18n/hi-IN.json b/website/src/i18n/hi-IN.json
index a724e152..1a95b4fc 100644
--- a/website/src/i18n/hi-IN.json
+++ b/website/src/i18n/hi-IN.json
@@ -828,6 +828,36 @@
       "copy": "रेफरल कोड कॉपी किया गया!"
     }
   },
+  "launch": {
+    "meta": {
+      "title": "Quantus लॉन्च",
+      "description": "क्वांटम-सुरक्षित एन्क्रिप्टेड मनी। 21 मिलियन सप्लाई कैप, Proof of Work। लॉन्च की जानकारी पाएं।"
+    },
+    "hero": {
+      "eyebrow": "क्वांटम-सुरक्षित एन्क्रिप्टेड मनी"
+    },
+    "signup": {
+      "headline": "लॉन्च की जानकारी पाएं।",
+      "email_placeholder": "your@email.com",
+      "email_aria": "ईमेल पता",
+      "submit_label": "मुझे सूचित करें",
+      "error_message": "कृपया एक मान्य ईमेल पता दर्ज करें।",
+      "success": {
+        "headline": "आप सूची में हैं।",
+        "sub": "लॉन्च की जानकारी आपके इनबॉक्स में पहुंचेगी।"
+      }
+    },
+    "facts": {
+      "supply": {
+        "label": "सप्लाई कैप",
+        "value": "21,000,000"
+      },
+      "consensus": {
+        "label": "PROOF OF WORK"
+      }
+    },
+    "mining_cta": "माइनिंग गाइड पढ़ें"
+  },
   "blog": {
     "title": "Quantus की नवीनतम खबरें।",
     "hero": {
diff --git a/website/src/i18n/id-ID.json b/website/src/i18n/id-ID.json
index ed60fcda..3a282271 100644
--- a/website/src/i18n/id-ID.json
+++ b/website/src/i18n/id-ID.json
@@ -828,6 +828,36 @@
       "copy": "Kode referal disalin!"
     }
   },
+  "launch": {
+    "meta": {
+      "title": "Peluncuran Quantus",
+      "description": "Uang terenkripsi aman secara kuantum. Batas pasokan 21 juta, Proof of Work. Dapatkan detail peluncuran."
+    },
+    "hero": {
+      "eyebrow": "Uang Terenkripsi Aman Secara Kuantum"
+    },
+    "signup": {
+      "headline": "Dapatkan detail peluncuran.",
+      "email_placeholder": "your@email.com",
+      "email_aria": "Alamat email",
+      "submit_label": "BERI TAHU SAYA",
+      "error_message": "Harap masukkan alamat email yang valid.",
+      "success": {
+        "headline": "Anda sudah terdaftar.",
+        "sub": "Detail peluncuran akan dikirim ke kotak masuk Anda."
+      }
+    },
+    "facts": {
+      "supply": {
+        "label": "BATAS PASOKAN",
+        "value": "21,000,000"
+      },
+      "consensus": {
+        "label": "PROOF OF WORK"
+      }
+    },
+    "mining_cta": "BACA PANDUAN MINING"
+  },
   "blog": {
     "title": "Berita terbaru dari Quantus.",
     "hero": {
diff --git a/website/src/i18n/ja-JP.json b/website/src/i18n/ja-JP.json
index acb58165..2105821a 100644
--- a/website/src/i18n/ja-JP.json
+++ b/website/src/i18n/ja-JP.json
@@ -828,6 +828,36 @@
       "copy": "紹介コードをコピーしました！"
     }
   },
+  "launch": {
+    "meta": {
+      "title": "Quantus ローンチ",
+      "description": "量子セキュアな暗号化通貨。供給上限2,100万、Proof of Work。ローンチ情報を受け取る。"
+    },
+    "hero": {
+      "eyebrow": "量子セキュアな暗号化通貨"
+    },
+    "signup": {
+      "headline": "ローンチ情報を受け取る。",
+      "email_placeholder": "your@email.com",
+      "email_aria": "メールアドレス",
+      "submit_label": "通知を受け取る",
+      "error_message": "有効なメールアドレスを入力してください。",
+      "success": {
+        "headline": "登録が完了しました。",
+        "sub": "ローンチ情報をメールでお届けします。"
+      }
+    },
+    "facts": {
+      "supply": {
+        "label": "供給上限",
+        "value": "21,000,000"
+      },
+      "consensus": {
+        "label": "PROOF OF WORK"
+      }
+    },
+    "mining_cta": "マイニングガイドを読む"
+  },
   "blog": {
     "title": "Quantusからの最新ニュース。",
     "hero": {
diff --git a/website/src/i18n/ko-KR.json b/website/src/i18n/ko-KR.json
index 5e0c3f21..d4424195 100644
--- a/website/src/i18n/ko-KR.json
+++ b/website/src/i18n/ko-KR.json
@@ -828,6 +828,36 @@
       "copy": "추천 코드가 복사되었습니다!"
     }
   },
+  "launch": {
+    "meta": {
+      "title": "Quantus 출시",
+      "description": "양자 보안 암호화 화폐. 총 발행 한도 2,100만, Proof of Work. 출시 소식을 받아보세요."
+    },
+    "hero": {
+      "eyebrow": "양자 보안 암호화 화폐"
+    },
+    "signup": {
+      "headline": "출시 소식을 받아보세요.",
+      "email_placeholder": "your@email.com",
+      "email_aria": "이메일 주소",
+      "submit_label": "알림 받기",
+      "error_message": "유효한 이메일 주소를 입력하세요.",
+      "success": {
+        "headline": "등록되었습니다.",
+        "sub": "출시 소식을 이메일로 보내드립니다."
+      }
+    },
+    "facts": {
+      "supply": {
+        "label": "총 발행 한도",
+        "value": "21,000,000"
+      },
+      "consensus": {
+        "label": "PROOF OF WORK"
+      }
+    },
+    "mining_cta": "채굴 가이드 읽기"
+  },
   "blog": {
     "title": "Quantus의 최신 소식.",
     "hero": {
diff --git a/website/src/i18n/ru-RU.json b/website/src/i18n/ru-RU.json
index 3f8901c8..3e7fbda7 100644
--- a/website/src/i18n/ru-RU.json
+++ b/website/src/i18n/ru-RU.json
@@ -828,6 +828,36 @@
       "copy": "Реферальный код скопирован!"
     }
   },
+  "launch": {
+    "meta": {
+      "title": "Запуск Quantus",
+      "description": "Квантово-безопасные зашифрованные деньги. Максимальная эмиссия 21 млн, Proof of Work. Получите детали запуска."
+    },
+    "hero": {
+      "eyebrow": "Квантово-безопасные зашифрованные деньги"
+    },
+    "signup": {
+      "headline": "Получите детали запуска.",
+      "email_placeholder": "your@email.com",
+      "email_aria": "Адрес электронной почты",
+      "submit_label": "СООБЩИТЬ МНЕ",
+      "error_message": "Пожалуйста, введите корректный адрес электронной почты.",
+      "success": {
+        "headline": "Вы в списке.",
+        "sub": "Детали запуска придут на вашу почту."
+      }
+    },
+    "facts": {
+      "supply": {
+        "label": "МАКСИМАЛЬНАЯ ЭМИССИЯ",
+        "value": "21,000,000"
+      },
+      "consensus": {
+        "label": "PROOF OF WORK"
+      }
+    },
+    "mining_cta": "ЧИТАТЬ РУКОВОДСТВО ПО МАЙНИНГУ"
+  },
   "blog": {
     "title": "Последние новости от Quantus.",
     "hero": {
diff --git a/website/src/i18n/zh-CN.json b/website/src/i18n/zh-CN.json
index 15f47781..a53c6dbe 100644
--- a/website/src/i18n/zh-CN.json
+++ b/website/src/i18n/zh-CN.json
@@ -828,6 +828,36 @@
       "copy": "推荐码已复制！"
     }
   },
+  "launch": {
+    "meta": {
+      "title": "Quantus 上线",
+      "description": "量子安全加密货币。供应上限 2,100 万，工作量证明（Proof of Work）。获取上线详情。"
+    },
+    "hero": {
+      "eyebrow": "量子安全加密货币"
+    },
+    "signup": {
+      "headline": "获取上线详情。",
+      "email_placeholder": "your@email.com",
+      "email_aria": "电子邮件地址",
+      "submit_label": "通知我",
+      "error_message": "请输入有效的电子邮件地址。",
+      "success": {
+        "headline": "您已加入名单。",
+        "sub": "上线详情将发送至您的邮箱。"
+      }
+    },
+    "facts": {
+      "supply": {
+        "label": "供应上限",
+        "value": "21,000,000"
+      },
+      "consensus": {
+        "label": "工作量证明"
+      }
+    },
+    "mining_cta": "阅读挖矿指南"
+  },
   "blog": {
     "title": "来自 Quantus 的最新消息。",
     "hero": {
diff --git a/website/src/pages/[lang]/launch.astro b/website/src/pages/[lang]/launch.astro
new file mode 100644
index 00000000..8ca542bc
--- /dev/null
+++ b/website/src/pages/[lang]/launch.astro
@@ -0,0 +1,85 @@
+---
+import Layout from "@/components/layout/Layout.astro";
+import {
+  createTranslator,
+  getLocaleFromUrl,
+  PREFIXED_LOCALES,
+} from "@/utils/i18n";
+import { createMetadata } from "@/utils/create-metadata";
+import { JsonLdGraph } from "@/utils/build-json-ld";
+import {
+  organizationJsonLd,
+  websiteJsonLd,
+} from "@/constants/default-jsonld";
+import HeroSection from "@/components/features/launch/HeroSection.astro";
+import SignupForm from "@/components/features/launch/SignupForm.astro";
+import FactsSection from "@/components/features/launch/FactsSection.astro";
+import AsciiFrame from "@/components/features/launch/AsciiFrame.astro";
+
+export async function getStaticPaths() {
+  return PREFIXED_LOCALES.map((lang) => ({ params: { lang } }));
+}
+
+const locale = getLocaleFromUrl(Astro.url.pathname);
+const t = await createTranslator(locale);
+
+const metadata = createMetadata({
+  title: t("launch.meta.title"),
+  description: t("launch.meta.description"),
+  pathname: Astro.url.pathname,
+});
+
+const jsonLd = JsonLdGraph({
+  "@context": "https://schema.org",
+  "@graph": [websiteJsonLd, organizationJsonLd],
+});
+---
+
+<Layout {...metadata} jsonLd={jsonLd} showChrome={false}>
+  <section id="launch">
+    <AsciiFrame />
+    <div class="launch-inner">
+      <HeroSection />
+      <SignupForm />
+      <FactsSection />
+    </div>
+  </section>
+</Layout>
+
+<style>
+  /* Two-step spacing scale on an 8px base, inherited by every child block
+     so the whole page shares one rhythm. --tight binds a group together;
+     --group separates one group from the next. */
+  #launch {
+    --launch-space-tight: 8px;
+    --launch-space-group: 40px;
+
+    background: #0e0e0e;
+    position: relative;
+    overflow: hidden;
+    min-height: 100vh;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 48px 24px;
+  }
+
+  .launch-inner {
+    position: relative;
+    z-index: 1;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: var(--launch-space-group);
+    width: 100%;
+    max-width: 620px;
+  }
+
+  @media (max-width: 768px) {
+    #launch {
+      --launch-space-group: 32px;
+
+      padding: 40px 24px;
+    }
+  }
+</style>
diff --git a/website/src/pages/launch.astro b/website/src/pages/launch.astro
new file mode 100644
index 00000000..bf64dee4
--- /dev/null
+++ b/website/src/pages/launch.astro
@@ -0,0 +1,77 @@
+---
+import Layout from "@/components/layout/Layout.astro";
+import { createTranslator, getLocaleFromUrl } from "@/utils/i18n";
+import { createMetadata } from "@/utils/create-metadata";
+import { JsonLdGraph } from "@/utils/build-json-ld";
+import {
+  organizationJsonLd,
+  websiteJsonLd,
+} from "@/constants/default-jsonld";
+import HeroSection from "@/components/features/launch/HeroSection.astro";
+import SignupForm from "@/components/features/launch/SignupForm.astro";
+import FactsSection from "@/components/features/launch/FactsSection.astro";
+import AsciiFrame from "@/components/features/launch/AsciiFrame.astro";
+
+const locale = getLocaleFromUrl(Astro.url.pathname);
+const t = await createTranslator(locale);
+
+const metadata = createMetadata({
+  title: t("launch.meta.title"),
+  description: t("launch.meta.description"),
+  pathname: Astro.url.pathname,
+});
+
+const jsonLd = JsonLdGraph({
+  "@context": "https://schema.org",
+  "@graph": [websiteJsonLd, organizationJsonLd],
+});
+---
+
+<Layout {...metadata} jsonLd={jsonLd} showChrome={false}>
+  <section id="launch">
+    <AsciiFrame />
+    <div class="launch-inner">
+      <HeroSection />
+      <SignupForm />
+      <FactsSection />
+    </div>
+  </section>
+</Layout>
+
+<style>
+  /* Two-step spacing scale on an 8px base, inherited by every child block
+     so the whole page shares one rhythm. --tight binds a group together;
+     --group separates one group from the next. */
+  #launch {
+    --launch-space-tight: 8px;
+    --launch-space-group: 40px;
+
+    background: #0e0e0e;
+    position: relative;
+    overflow: hidden;
+    min-height: 100vh;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 48px 24px;
+  }
+
+  .launch-inner {
+    position: relative;
+    z-index: 1;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: var(--launch-space-group);
+    width: 100%;
+    max-width: 620px;
+  }
+
+  @media (max-width: 768px) {
+    #launch {
+      --launch-space-group: 32px;
+
+      padding: 40px 24px;
+    }
+  }
+</style>
diff --git a/website/src/styles/fonts.css b/website/src/styles/fonts.css
index 51958606..9fc9033b 100644
--- a/website/src/styles/fonts.css
+++ b/website/src/styles/fonts.css
@@ -39,7 +39,7 @@
 @utility font-cta-mono {
   font-family: var(--font-mono);
   font-size: 12px;
-  font-weight: medium;
+  font-weight: 500;
   letter-spacing: 0.12em;
   text-transform: uppercase;
 }

From a27edb9ea1aa9203267b4f549ec02746e1fbf3c4 Mon Sep 17 00:00:00 2001
From: Sejal Batra <sejalbatra08@gmail.com>
Date: Thu, 27 Aug 2026 18:27:52 +0530
Subject: [PATCH 2/2] Refine launch page ASCII and cursor

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_011o5vpPXd6NvFFj43ZGRUbS
---
 .../features/launch/AsciiFrame.astro          | 264 +++++-------------
 1 file changed, 67 insertions(+), 197 deletions(-)

diff --git a/website/src/components/features/launch/AsciiFrame.astro b/website/src/components/features/launch/AsciiFrame.astro
index d4b1de7b..0e288de4 100644
--- a/website/src/components/features/launch/AsciiFrame.astro
+++ b/website/src/components/features/launch/AsciiFrame.astro
@@ -1,225 +1,95 @@
 ---
 /**
- * ASCII edge framing for /launch.
+ * ASCII backdrop for /launch.
  *
- * Uses the home hero's generator unchanged — renderASCIIRect over the
- * chladniRect field, same RAMP (" .,·:;|+x#"), same node-threshold density
- * gradient. One continuous field is generated for the whole section, then
- * sliced into four edge strips, so the pattern is the same one Home draws,
- * just framing the content instead of running full-bleed behind it.
+ * This is Home's hero field, not a copy of it: the element carries
+ * id="ascii-hero" and the script drives it through the very same
+ * `calcHeroDims` / `heroLoop` exports in scripts/home/hero.ts, which render
+ * via renderASCIIRect over chladniRect with the shared RAMP.
  *
- * Character advance and line height are measured from a live probe rather
- * than estimated, so the strip geometry lands exactly and the left/right
- * insets stay symmetrical.
+ * hero.ts resolves #ascii-hero at module scope and gates its loop behind
+ * `heroActive`, which on Home is flipped by the terminal loader. There is no
+ * loader here, so we flip it ourselves. `updateMousePosition` is deliberately
+ * not wired — it is the one export that writes to Home's #fval readout and
+ * would throw on this page.
+ *
+ * Framing is done with a radial mask rather than by slicing the field, so the
+ * pattern stays whole and simply fades out behind the content.
  */
 ---
 
-<div class="ascii-frame" aria-hidden="true">
-  <pre class="af-strip" data-edge="top"></pre>
-  <pre class="af-strip" data-edge="bottom"></pre>
-  <pre class="af-strip" data-edge="left"></pre>
-  <pre class="af-strip" data-edge="right"></pre>
-</div>
+<div id="ascii-hero" class="launch-ascii" aria-hidden="true"></div>
 
 <style>
-  .ascii-frame {
+  /* Same type treatment as Home's #ascii-hero. */
+  .launch-ascii {
     position: absolute;
     inset: 0;
-    overflow: hidden;
-    pointer-events: none;
-    user-select: none;
-    z-index: 0;
-  }
-
-  .af-strip {
-    position: absolute;
-    margin: 0;
     font-family: "Geist Mono", monospace;
     font-size: 11px;
     line-height: 1.22;
     letter-spacing: 0.05em;
     white-space: pre;
-    color: rgba(255, 107, 53, 0.22);
+    color: rgba(255, 107, 53, 0.38);
+    display: flex;
+    align-items: center;
+    justify-content: center;
     overflow: hidden;
+    pointer-events: none;
+    user-select: none;
+    z-index: 0;
+
+    /* Transparent where the content sits, opaque toward the edges. */
+    -webkit-mask-image: radial-gradient(
+      ellipse 62% 56% at 50% 50%,
+      transparent 0%,
+      transparent 42%,
+      rgba(0, 0, 0, 0.5) 68%,
+      #000 92%
+    );
+    mask-image: radial-gradient(
+      ellipse 62% 56% at 50% 50%,
+      transparent 0%,
+      transparent 42%,
+      rgba(0, 0, 0, 0.5) 68%,
+      #000 92%
+    );
   }
 
   @media (max-width: 768px) {
-    .af-strip {
+    .launch-ascii {
       font-size: 6px;
       line-height: 1.15;
+
+      -webkit-mask-image: radial-gradient(
+        ellipse 78% 46% at 50% 50%,
+        transparent 0%,
+        transparent 46%,
+        rgba(0, 0, 0, 0.5) 70%,
+        #000 94%
+      );
+      mask-image: radial-gradient(
+        ellipse 78% 46% at 50% 50%,
+        transparent 0%,
+        transparent 46%,
+        rgba(0, 0, 0, 0.5) 70%,
+        #000 94%
+      );
     }
   }
 </style>
 
 <script>
-  import { RAMP } from "@/scripts/home/ascii";
-  import { chladniRect } from "@/scripts/home/base-math";
-
-  const frame = document.querySelector<HTMLElement>(".ascii-frame");
-  const inner = document.querySelector<HTMLElement>(".launch-inner");
-  const section = document.getElementById("launch");
-
-  if (frame && inner && section) {
-    const strips = {
-      top: frame.querySelector<HTMLElement>('[data-edge="top"]')!,
-      bottom: frame.querySelector<HTMLElement>('[data-edge="bottom"]')!,
-      left: frame.querySelector<HTMLElement>('[data-edge="left"]')!,
-      right: frame.querySelector<HTMLElement>('[data-edge="right"]')!,
-    };
-
-    /** Mode pair from the hero's MODES table; t=0 gives the symmetric figure. */
-    const MODE_M = 2;
-    const MODE_N = 3;
-    const TIME = 0;
-
-    /**
-     * Ramp ceiling. The raw field pins to '#' along every nodal line, which
-     * renders as solid diagonal runs; capping mid-ramp keeps those lines
-     * legible as texture instead of blocks.
-     */
-    const MAX_IDX = 6;
-    /** Share of field glyphs kept at the corners; dithered away elsewhere. */
-    const COVERAGE = 1;
-    /** Falloff exponent — higher pulls weight harder into the corners. */
-    const CORNER_P = 1;
-
-    /**
-     * Deterministic dither in [0,1). Folded to the near corner so it is
-     * identical in all four quadrants and cannot break the symmetry.
-     */
-    const dither = (col: number, row: number, cols: number, rows: number) => {
-      const fc = Math.min(col, cols - 1 - col);
-      const fr = Math.min(row, rows - 1 - row);
-      const n = Math.sin(fc * 127.1 + fr * 311.7) * 43758.5453;
-      return n - Math.floor(n);
-    };
-
-    /**
-     * One cell of the field.
-     *
-     * The glyph comes from chladniRect on folded coordinates, so the pattern
-     * mirrors about both axes — the raw field is only symmetric under 180°
-     * rotation, which is what left top-left empty while top-right was heavy.
-     * Coverage is then weighted by |x|·|y|, peaking at the four corners and
-     * falling to nothing at each edge midpoint and at the centre.
-     */
-    const cell = (col: number, row: number, cols: number, rows: number) => {
-      // Cell centres, not cell origins: (col/cols) is not the exact negation
-      // of ((cols-1-col)/cols), and that half-cell offset breaks the mirror.
-      const px = ((col + 0.5) / cols) * 2 - 1;
-      const py = ((row + 0.5) / rows) * 2 - 1;
-      const ax = Math.abs(px);
-      const ay = Math.abs(py);
-
-      const weight = Math.pow(ax, CORNER_P) * Math.pow(ay, CORNER_P);
-      if (dither(col, row, cols, rows) > weight * COVERAGE) return " ";
-
-      // Fold into one quadrant, then span the full plate across it.
-      const v = chladniRect(2 * ax - 1, 2 * ay - 1, MODE_M, MODE_N, TIME);
-      const a = Math.abs(v);
-      const NODE = 0.12;
-
-      let idx =
-        a < NODE
-          ? Math.floor((1 - a / NODE) * (RAMP.length - 1))
-          : Math.max(0, Math.floor(((0.4 - a) / 0.4) * 2));
-
-      idx = Math.min(Math.max(idx, 0), MAX_IDX);
-      return RAMP[idx];
-    };
-
-    const block = (
-      c0: number,
-      c1: number,
-      r0: number,
-      r1: number,
-      cols: number,
-      rows: number,
-    ) => {
-      const lines: string[] = [];
-      for (let r = r0; r < r1; r++) {
-        let line = "";
-        for (let c = c0; c < c1; c++) line += cell(c, r, cols, rows);
-        lines.push(line);
-      }
-      return lines.join("\n");
-    };
-
-    /** Measure real glyph advance and line box from the rendered font. */
-    const metrics = () => {
-      const probe = document.createElement("span");
-      probe.style.cssText =
-        "position:absolute;visibility:hidden;white-space:pre;";
-      probe.textContent = "x".repeat(100);
-      strips.top.appendChild(probe);
-      const chW = probe.getBoundingClientRect().width / 100;
-      probe.remove();
-
-      const cs = getComputedStyle(strips.top);
-      let lh = parseFloat(cs.lineHeight);
-      if (!Number.isFinite(lh)) lh = parseFloat(cs.fontSize) * 1.2;
-      return { chW, lh };
-    };
-
-    const draw = () => {
-      const { chW, lh } = metrics();
-      if (!(chW > 0) || !(lh > 0)) return;
-
-      const isMobile = window.innerWidth <= 768;
-      const gutter = isMobile ? 16 : 28;
-
-      const sect = section.getBoundingClientRect();
-      const box = inner.getBoundingClientRect();
-      const W = sect.width;
-      const H = sect.height;
-
-      const cols = Math.ceil(W / chW);
-      const rows = Math.ceil(H / lh);
-      if (cols < 2 || rows < 2) return;
-
-      // Hole measured from the centre out, so both sides match exactly.
-      const sideGap = Math.max(0, W / 2 - box.width / 2 - gutter);
-      const vertGap = Math.max(0, H / 2 - box.height / 2 - gutter);
-      const sideCols = Math.max(0, Math.floor(sideGap / chW));
-      const edgeRows = Math.max(0, Math.floor(vertGap / lh));
-      const midRows = rows - edgeRows;
-
-      // Top and bottom: full width, equal row counts, anchored to each edge.
-      strips.top.style.cssText = "top:0;left:0;";
-      strips.top.textContent = block(0, cols, 0, edgeRows, cols, rows);
-
-      strips.bottom.style.cssText = "bottom:0;left:0;";
-      strips.bottom.textContent = block(0, cols, midRows, rows, cols, rows);
-
-      // Sides: equal column counts anchored to opposite edges, so the inset
-      // is symmetrical by construction.
-      strips.left.style.cssText = `top:${edgeRows * lh}px;left:0;`;
-      strips.left.textContent = block(
-        0,
-        sideCols,
-        edgeRows,
-        midRows,
-        cols,
-        rows,
-      );
-
-      strips.right.style.cssText = `top:${edgeRows * lh}px;right:0;`;
-      strips.right.textContent = block(
-        cols - sideCols,
-        cols,
-        edgeRows,
-        midRows,
-        cols,
-        rows,
-      );
-    };
-
-    draw();
-
-    let raf = 0;
-    window.addEventListener("resize", () => {
-      cancelAnimationFrame(raf);
-      raf = requestAnimationFrame(draw);
-    });
-  }
+  import {
+    calcHeroDims,
+    heroLoop,
+    updateHeroActive,
+  } from "@/scripts/home/hero";
+
+  calcHeroDims();
+  // Home flips this from its terminal loader; /launch has none.
+  updateHeroActive(true);
+  heroLoop();
+
+  window.addEventListener("resize", calcHeroDims);
 </script>