From 666b1d7547c9d5ad352c3537d8b27b9a78646394 Mon Sep 17 00:00:00 2001
From: Marc Mintel <marc@mintel.me>
Date: Sun, 4 Oct 2026 14:58:35 +0200
Subject: [PATCH] fix: hero digits are readable on phones

On a phone the headline was built from 4px cells and the background field
kept its desktop ink, so the digits were specks or not visible at all. The
headline now uses cells of at least 6px there, and the background digits are
larger and stronger below 640px.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 .../src/components/Effects/AbstractCircuit.tsx   | 16 ++++++++++++----
 apps/web/src/components/home/BitHeadline.tsx     |  7 +++++--
 2 files changed, 17 insertions(+), 6 deletions(-)

diff --git a/apps/web/src/components/Effects/AbstractCircuit.tsx b/apps/web/src/components/Effects/AbstractCircuit.tsx
index d7296e5..d4d00aa 100644
--- a/apps/web/src/components/Effects/AbstractCircuit.tsx
+++ b/apps/web/src/components/Effects/AbstractCircuit.tsx
@@ -56,10 +56,18 @@ export const AbstractCircuit: React.FC<{
     // ── Seed characters ──
     const LANE = 28;
     const GAP = 20;
+    const PHONE_WIDTH = 640;
+    const PHONE_INK = 2.4;
+    const PHONE_GROW = 2;
 
     const seed = () => {
       const chars: Char[] = [];
       const { w, h } = s;
+      // On a phone the field is small and held close: the digits need more
+      // size and ink there, or they are not seen at all.
+      const small = w < PHONE_WIDTH;
+      const ink = small ? PHONE_INK : 1;
+      const grow = small ? PHONE_GROW : 0;
 
       // Horizontal lanes
       for (let y = 0; y < h; y += LANE) {
@@ -73,8 +81,8 @@ export const AbstractCircuit: React.FC<{
             val: Math.random() > 0.5 ? 1 : 0,
             speed: spd,
             vertical: false,
-            size: 9 + Math.floor(Math.random() * 2),
-            baseAlpha: 0.035 + Math.random() * 0.045,
+            size: 9 + grow + Math.floor(Math.random() * 2),
+            baseAlpha: (0.035 + Math.random() * 0.045) * ink,
             phase: Math.random() * Math.PI * 2,
             flipIn: 120 + Math.floor(Math.random() * 400),
           });
@@ -93,8 +101,8 @@ export const AbstractCircuit: React.FC<{
             val: Math.random() > 0.5 ? 1 : 0,
             speed: spd,
             vertical: true,
-            size: 8 + Math.floor(Math.random() * 2),
-            baseAlpha: 0.025 + Math.random() * 0.035,
+            size: 8 + grow + Math.floor(Math.random() * 2),
+            baseAlpha: (0.025 + Math.random() * 0.035) * ink,
             phase: Math.random() * Math.PI * 2,
             flipIn: 150 + Math.floor(Math.random() * 500),
           });
diff --git a/apps/web/src/components/home/BitHeadline.tsx b/apps/web/src/components/home/BitHeadline.tsx
index b8ba8f2..535d487 100644
--- a/apps/web/src/components/home/BitHeadline.tsx
+++ b/apps/web/src/components/home/BitHeadline.tsx
@@ -35,6 +35,7 @@ const LIGHT = "255, 255, 255";
 const INTRO_MS = 1600;
 const FRAME_MS = 1000 / 30;
 const POINTER_RADIUS = 170;
+const MIN_CELL = 6;
 
 const easeOut = (t: number): number => 1 - Math.pow(1 - t, 3);
 const clamp01 = (n: number): number => Math.min(1, Math.max(0, n));
@@ -155,9 +156,11 @@ export const BitHeadline: React.FC<{
       });
 
       const fontSize = parseFloat(getComputedStyle(wrap).fontSize) || 100;
-      cell = Math.round(Math.min(9, Math.max(4, fontSize / 19)));
+      // Digits below about 6px are specks, not digits: on phones the cells stay
+      // readable and the letters are built from fewer of them.
+      cell = Math.round(Math.min(9, Math.max(MIN_CELL, fontSize / 19)));
       // Small type needs a stronger wash under the digits to keep its shape.
-      wash = fontSize < 100 ? 0.2 : 0.07;
+      wash = fontSize < 100 ? 0.24 : 0.07;
       cols = Math.ceil(width / cell);
       rows = Math.ceil(height / cell);
       bits = new Uint8Array(cols * rows);