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