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>

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),
           });

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);