From 55423e01169984aaadc1fa698f6c7e9590b7c7b4 Mon Sep 17 00:00:00 2001
From: Sejal Batra <sejalbatra08@gmail.com>
Date: Tue, 8 Sep 2026 18:06:42 +0530
Subject: [PATCH 1/2] Use Geist with tabular figures for standalone numerals

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
---
 website/src/components/features/home/HeroBanner.astro         | 4 +++-
 website/src/components/features/home/ProblemSection.astro     | 4 +++-
 website/src/components/features/launch/FactsSection.astro     | 4 +++-
 .../components/features/technology/ScalabilitySection.astro   | 4 +++-
 4 files changed, 12 insertions(+), 4 deletions(-)

diff --git a/website/src/components/features/home/HeroBanner.astro b/website/src/components/features/home/HeroBanner.astro
index 3d9c1b89..75b8a793 100644
--- a/website/src/components/features/home/HeroBanner.astro
+++ b/website/src/components/features/home/HeroBanner.astro
@@ -334,7 +334,9 @@ const t = await createTranslator(locale);
     color: var(--color-muted);
   }
   .t-val {
-    font-family: "Geist Mono", monospace;
+    font-family: "Geist", sans-serif;
+    font-variant-numeric: tabular-nums;
+    font-feature-settings: "tnum" 1;
     font-size: 12px;
     font-weight: 500;
     color: var(--color-content);
diff --git a/website/src/components/features/home/ProblemSection.astro b/website/src/components/features/home/ProblemSection.astro
index c2e1f455..e5a3151b 100644
--- a/website/src/components/features/home/ProblemSection.astro
+++ b/website/src/components/features/home/ProblemSection.astro
@@ -305,7 +305,9 @@ const t = await createTranslator(locale);
     margin-bottom: 10px;
   }
   .prob-data-row1 .cell-num {
-    font-family: "Geist Mono", monospace;
+    font-family: "Geist", sans-serif;
+    font-variant-numeric: tabular-nums;
+    font-feature-settings: "tnum" 1;
     font-size: 64px;
     font-weight: 500;
     line-height: 1;
diff --git a/website/src/components/features/launch/FactsSection.astro b/website/src/components/features/launch/FactsSection.astro
index 8a688f37..47e6d23d 100644
--- a/website/src/components/features/launch/FactsSection.astro
+++ b/website/src/components/features/launch/FactsSection.astro
@@ -58,7 +58,9 @@ const t = await createTranslator(locale);
   }
 
   .launch-stat-value {
-    font-family: "Geist Mono", monospace;
+    font-family: "Geist", sans-serif;
+    font-variant-numeric: tabular-nums;
+    font-feature-settings: "tnum" 1;
     font-size: 36px;
     font-weight: 400;
     color: var(--color-flare);
diff --git a/website/src/components/features/technology/ScalabilitySection.astro b/website/src/components/features/technology/ScalabilitySection.astro
index c48672d1..c4b460a3 100644
--- a/website/src/components/features/technology/ScalabilitySection.astro
+++ b/website/src/components/features/technology/ScalabilitySection.astro
@@ -47,7 +47,9 @@ const t = await createTranslator(locale);
   }
 
   .tech-stat-num {
-    font-family: "Geist Mono", monospace;
+    font-family: "Geist", sans-serif;
+    font-variant-numeric: tabular-nums;
+    font-feature-settings: "tnum" 1;
     font-size: 96px;
     font-weight: 500;
     line-height: 1;

From fbbad3b063a465fddccdfadb865f2560137076af Mon Sep 17 00:00:00 2001
From: Sejal Batra <sejalbatra08@gmail.com>
Date: Tue, 8 Sep 2026 18:48:10 +0530
Subject: [PATCH 2/2] Split mainnet ticker item into label and value

Removes the glitch effect, which depended on fixed-pitch
character widths, and replaces duplicate element ids with a
data-ticker attribute.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
---
 .../components/features/home/HeroBanner.astro |  5 +-
 website/src/i18n/de-DE.json                   |  5 +-
 website/src/i18n/en-US.json                   |  5 +-
 website/src/i18n/es-ES.json                   |  5 +-
 website/src/i18n/hi-IN.json                   |  5 +-
 website/src/i18n/id-ID.json                   |  5 +-
 website/src/i18n/ja-JP.json                   |  5 +-
 website/src/i18n/ko-KR.json                   |  5 +-
 website/src/i18n/ru-RU.json                   |  5 +-
 website/src/i18n/zh-CN.json                   |  5 +-
 website/src/scripts/home/glitch.ts            | 55 -------------------
 .../src/scripts/home/ticker-mainnet.test.ts   | 19 +++++--
 website/src/scripts/home/ticker.ts            | 23 +++++---
 13 files changed, 67 insertions(+), 80 deletions(-)
 delete mode 100644 website/src/scripts/home/glitch.ts

diff --git a/website/src/components/features/home/HeroBanner.astro b/website/src/components/features/home/HeroBanner.astro
index 75b8a793..4ba5fa62 100644
--- a/website/src/components/features/home/HeroBanner.astro
+++ b/website/src/components/features/home/HeroBanner.astro
@@ -53,7 +53,8 @@ const t = await createTranslator(locale);
       data-i18n-qtps={t("home.hero_banner.ticker.qtps")}
       data-i18n-uptime={t("home.hero_banner.ticker.uptime")}
       data-i18n-nodes={t("home.hero_banner.ticker.nodes")}
-      data-i18n-mainnet={t("home.hero_banner.ticker.mainnet")}
+      data-i18n-mainnet-label={t("home.hero_banner.ticker.mainnet.label")}
+      data-i18n-mainnet-value={t("home.hero_banner.ticker.mainnet.value")}
     >
     </div>
   </div>
@@ -367,7 +368,6 @@ const t = await createTranslator(locale);
 </style>
 
 <script>
-  import { startGlitchLoop } from "@/scripts/home/glitch";
   import {
     calcHeroDims,
     heroLoop,
@@ -378,7 +378,6 @@ const t = await createTranslator(locale);
   calcHeroDims();
   heroLoop();
   buildTicker();
-  startGlitchLoop();
 
   window.addEventListener("resize", calcHeroDims);
   window.addEventListener("mousemove", updateMousePosition);
diff --git a/website/src/i18n/de-DE.json b/website/src/i18n/de-DE.json
index 6bc53af0..7524defd 100644
--- a/website/src/i18n/de-DE.json
+++ b/website/src/i18n/de-DE.json
@@ -146,7 +146,10 @@
         "qtps": "QTPS",
         "uptime": "UPTIME",
         "nodes": "MINER",
-        "mainnet": "MAINNET: 9/9/26"
+        "mainnet": {
+          "label": "MAINNET",
+          "value": "9/9/26"
+        }
       }
     },
     "problem": {
diff --git a/website/src/i18n/en-US.json b/website/src/i18n/en-US.json
index 6b81e0ea..570b9a8f 100644
--- a/website/src/i18n/en-US.json
+++ b/website/src/i18n/en-US.json
@@ -146,7 +146,10 @@
         "qtps": "QTPS",
         "uptime": "UPTIME",
         "nodes": "MINERS",
-        "mainnet": "MAINNET: 9/9/26"
+        "mainnet": {
+          "label": "MAINNET",
+          "value": "9/9/26"
+        }
       }
     },
     "problem": {
diff --git a/website/src/i18n/es-ES.json b/website/src/i18n/es-ES.json
index 31a58f66..d45a514d 100644
--- a/website/src/i18n/es-ES.json
+++ b/website/src/i18n/es-ES.json
@@ -146,7 +146,10 @@
         "qtps": "QTPS",
         "uptime": "TIEMPO DE ACTIVIDAD",
         "nodes": "MINEROS",
-        "mainnet": "MAINNET: 9/9/26"
+        "mainnet": {
+          "label": "MAINNET",
+          "value": "9/9/26"
+        }
       }
     },
     "problem": {
diff --git a/website/src/i18n/hi-IN.json b/website/src/i18n/hi-IN.json
index 3445c9de..fca96ee1 100644
--- a/website/src/i18n/hi-IN.json
+++ b/website/src/i18n/hi-IN.json
@@ -146,7 +146,10 @@
         "qtps": "QTPS",
         "uptime": "अपटाइम",
         "nodes": "माइनर्स",
-        "mainnet": "MAINNET: 9/9/26"
+        "mainnet": {
+          "label": "MAINNET",
+          "value": "9/9/26"
+        }
       }
     },
     "problem": {
diff --git a/website/src/i18n/id-ID.json b/website/src/i18n/id-ID.json
index 96d40cb7..9b8b739a 100644
--- a/website/src/i18n/id-ID.json
+++ b/website/src/i18n/id-ID.json
@@ -146,7 +146,10 @@
         "qtps": "QTPS",
         "uptime": "UPTIME",
         "nodes": "PENAMBANG",
-        "mainnet": "MAINNET: 9/9/26"
+        "mainnet": {
+          "label": "MAINNET",
+          "value": "9/9/26"
+        }
       }
     },
     "problem": {
diff --git a/website/src/i18n/ja-JP.json b/website/src/i18n/ja-JP.json
index da603672..67e3c174 100644
--- a/website/src/i18n/ja-JP.json
+++ b/website/src/i18n/ja-JP.json
@@ -146,7 +146,10 @@
         "qtps": "QTPS",
         "uptime": "稼働時間",
         "nodes": "マイナー",
-        "mainnet": "メインネット: 9/9/26"
+        "mainnet": {
+          "label": "メインネット",
+          "value": "9/9/26"
+        }
       }
     },
     "problem": {
diff --git a/website/src/i18n/ko-KR.json b/website/src/i18n/ko-KR.json
index d6472cbc..6326c07f 100644
--- a/website/src/i18n/ko-KR.json
+++ b/website/src/i18n/ko-KR.json
@@ -146,7 +146,10 @@
         "qtps": "QTPS",
         "uptime": "업타임",
         "nodes": "채굴자",
-        "mainnet": "MAINNET: 9/9/26"
+        "mainnet": {
+          "label": "MAINNET",
+          "value": "9/9/26"
+        }
       }
     },
     "problem": {
diff --git a/website/src/i18n/ru-RU.json b/website/src/i18n/ru-RU.json
index 7738231e..a4f5078b 100644
--- a/website/src/i18n/ru-RU.json
+++ b/website/src/i18n/ru-RU.json
@@ -146,7 +146,10 @@
         "qtps": "QTPS",
         "uptime": "АПТАЙМ",
         "nodes": "МАЙНЕРЫ",
-        "mainnet": "MAINNET: 9/9/26"
+        "mainnet": {
+          "label": "MAINNET",
+          "value": "9/9/26"
+        }
       }
     },
     "problem": {
diff --git a/website/src/i18n/zh-CN.json b/website/src/i18n/zh-CN.json
index 006e2b6e..9d0e5ba4 100644
--- a/website/src/i18n/zh-CN.json
+++ b/website/src/i18n/zh-CN.json
@@ -146,7 +146,10 @@
         "qtps": "QTPS",
         "uptime": "运行时间",
         "nodes": "矿工",
-        "mainnet": "主网: 9/9/26"
+        "mainnet": {
+          "label": "主网",
+          "value": "9/9/26"
+        }
       }
     },
     "problem": {
diff --git a/website/src/scripts/home/glitch.ts b/website/src/scripts/home/glitch.ts
deleted file mode 100644
index fe7acc28..00000000
--- a/website/src/scripts/home/glitch.ts
+++ /dev/null
@@ -1,55 +0,0 @@
-export const startGlitchLoop = () => {
-  const GLITCH_CHARS = "ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789!@#$%&?";
-  const els = document.querySelectorAll<HTMLElement>("#ticker-mainnet");
-  if (els.length === 0) {
-    throw new Error("No #ticker-mainnet elements found");
-  }
-
-  const reals = Array.from(els, (el) => el.textContent ?? "");
-  const real = reals[0];
-  if (reals.some((text) => text !== real)) {
-    throw new Error("Mainnet ticker copies do not agree");
-  }
-
-  const separator = ": ";
-  const sepIndex = real.lastIndexOf(separator);
-  if (sepIndex === -1) {
-    throw new Error(`Mainnet ticker text must contain "${separator}"`);
-  }
-
-  const staticPart = real.slice(0, sepIndex + separator.length);
-  const glitchPart = real.slice(sepIndex + separator.length);
-  let frame = 0;
-  const totalFrames = 12;
-
-  const nextCycle = () => {
-    const scrambleInterval = setInterval(() => {
-      const scrambled = glitchPart
-        .split("")
-        .map((char) => {
-          if (char === " ") return " ";
-          if (frame > totalFrames * 0.65 || Math.random() > 0.45) return char;
-          const rand =
-            GLITCH_CHARS[Math.floor(Math.random() * GLITCH_CHARS.length)];
-          return Math.random() > 0.5
-            ? '<span style="color:#FF6B35">' + rand + "</span>"
-            : rand;
-        })
-        .join("");
-      const html = staticPart + scrambled;
-      els.forEach((el) => {
-        el.innerHTML = html;
-      });
-      frame++;
-      if (frame > totalFrames) {
-        clearInterval(scrambleInterval);
-        els.forEach((el) => {
-          el.textContent = real;
-        });
-        frame = 0;
-        setTimeout(nextCycle, 500);
-      }
-    }, 30);
-  };
-  nextCycle();
-};
diff --git a/website/src/scripts/home/ticker-mainnet.test.ts b/website/src/scripts/home/ticker-mainnet.test.ts
index 410ac18c..9ece3cb1 100644
--- a/website/src/scripts/home/ticker-mainnet.test.ts
+++ b/website/src/scripts/home/ticker-mainnet.test.ts
@@ -11,11 +11,22 @@ describe("home hero ticker mainnet", () => {
 
     for (const file of localeFiles) {
       const data = JSON.parse(readFileSync(join(i18nDir, file), "utf8")) as {
-        home: { hero_banner: { ticker: { mainnet: string } } };
+        home: {
+          hero_banner: { ticker: { mainnet: { label: string; value: string } } };
+        };
       };
-      const mainnet = data.home.hero_banner.ticker.mainnet;
-      expect(mainnet.includes("9/9/26"), `${file}: ${mainnet}`).toBe(true);
-      expect(/\?{2}/.test(mainnet), `${file}: ${mainnet}`).toBe(false);
+      const { label, value } = data.home.hero_banner.ticker.mainnet;
+
+      // The date is the shared source of truth and is not localised.
+      expect(value, `${file}: ${value}`).toBe("9/9/26");
+
+      // The label is translated, so only assert it is present and legible.
+      expect(label.length > 0, `${file}: empty label`).toBe(true);
+      expect(/\?{2}/.test(label), `${file}: ${label}`).toBe(false);
+      expect(/\?{2}/.test(value), `${file}: ${value}`).toBe(false);
+
+      // The label must not still carry the date it was split away from.
+      expect(label.includes("9/9/26"), `${file}: ${label}`).toBe(false);
     }
   });
 });
diff --git a/website/src/scripts/home/ticker.ts b/website/src/scripts/home/ticker.ts
index 3180107d..de3e8825 100644
--- a/website/src/scripts/home/ticker.ts
+++ b/website/src/scripts/home/ticker.ts
@@ -10,31 +10,36 @@ export const buildTicker = () => {
     qtps: track.dataset.i18nQtps || "QTPS",
     uptime: track.dataset.i18nUptime || "UPTIME",
     nodes: track.dataset.i18nNodes || "NODES",
-    mainnet: track.dataset.i18nMainnet || "MAINNET: 9/9/26",
+    mainnetLabel: track.dataset.i18nMainnetLabel || "MAINNET",
+    mainnetValue: track.dataset.i18nMainnetValue || "9/9/26",
   };
 
   const items = [
-    { lbl: labels.blockHeight, val: "—", live: true, id: "block-height" },
+    { lbl: labels.blockHeight, val: "—", live: true, ref: "block-height" },
     { lbl: labels.qtps, val: String(QTPS), live: false },
     { lbl: labels.uptime, val: "99.97%", live: false },
-    { lbl: labels.nodes, val: "—", live: true, id: "nodes" },
-    { lbl: "", val: labels.mainnet, live: false, id: "mainnet" },
+    { lbl: labels.nodes, val: "—", live: true, ref: "nodes" },
+    { lbl: labels.mainnetLabel, val: labels.mainnetValue, live: false },
   ];
 
+  // Every item is rendered twice so the marquee can loop seamlessly, so live
+  // values are addressed by data attribute rather than id.
   [0, 1].forEach(() => {
-    items.forEach(({ lbl, val, live, id }) => {
+    items.forEach(({ lbl, val, live, ref }) => {
       const el = document.createElement("div");
       el.className = "t-item";
-      const idAttr = id ? ` id="ticker-${id}"` : "";
+      const refAttr = ref ? ` data-ticker="${ref}"` : "";
       el.innerHTML = `${live ? '<div class="tdot"></div>' : ""}
         ${lbl ? '<span class="t-lbl">' + lbl + "</span>" : ""}
-        <span class="t-val${live ? " live" : ""}"${idAttr}>${val}</span>`;
+        <span class="t-val${live ? " live" : ""}"${refAttr}>${val}</span>`;
       track.appendChild(el);
     });
   });
 
-  const nodesEls = document.querySelectorAll("#ticker-nodes");
-  const blockHeightEls = document.querySelectorAll("#ticker-block-height");
+  const nodesEls = document.querySelectorAll('[data-ticker="nodes"]');
+  const blockHeightEls = document.querySelectorAll(
+    '[data-ticker="block-height"]',
+  );
 
   apiClient.nodeRpc.connect();
   apiClient.nodeRpc.subscribe((state) => {