tokenmaw 0.4.0 → 0.4.1

package/dist/ui/welcome.js

@@ -1,4 +1,10 @@
-/** A big animated wordmark: theme-gradient block letters with a clean ping-ponging shine; the phosphor theme rains glyphs through the background instead. */
+/** The big animated wordmark. Every theme plays its own one-shot opening
+ * act — under a second, each with a distinct mechanic — before the loop
+ * takes over: a ping-ponging shine for most themes, glyph rain for the
+ * phosphor one. All motion is a pure function of the frame, the mark is
+ * born from nothing (frame 0 paints nothing anywhere), each cell is
+ * monotonic — once painted, never erased — and the intro's final frame
+ * always equals the settled loop frame, so the handoff is invisible. */
 import { activeTuiTheme } from './theme.js';
 const GLYPH_LETTERS = [
     ['███╗   ███╗', '████╗ ████║', '██╔████╔██║', '██║╚██╔╝██║', '██║ ╚═╝ ██║', '╚═╝     ╚═╝'],
@@ -19,11 +25,16 @@ const LOGO_WIDTH = LOGO[0].length;
 const BRAND = 'T O K E N M A W';
 const TAGLINE = 'multi-agent coding runtime';
 const RAIN_GLYPHS = '01ﾊﾋｸｼｱｳﾄﾅﾆﾇﾈﾓﾘ';
-function hexToRgb(hex) {
+/** The whole opening act must finish inside a second: at 20 fps that is
+ * exactly 20 frames. The intro covers frames 0..19; the loop's own clock
+ * would render frame 20 with the shine band just off the left edge —
+ * exactly where frame 19 hands over — so the seam is invisible. */
+export const INTRO_DURATION = 20;
+export function hexToRgb(hex) {
     const value = hex.replace('#', '');
     return [parseInt(value.slice(0, 2), 16), parseInt(value.slice(2, 4), 16), parseInt(value.slice(4, 6), 16)];
 }
-function mix(from, to, t) {
+export function mix(from, to, t) {
     const a = hexToRgb(from);
     const b = hexToRgb(to);
     return '#' + a.map((channel, index) => Math.round(channel + (b[index] - channel) * t).toString(16).padStart(2, '0')).join('');
@@ -38,6 +49,387 @@ function flicker(frame, seed) {
     x ^= x >>> 16;
     return (x >>> 0) / 4294967296;
 }
+/** Stateless hash → [0,1), keyed by the seed alone. Chain seeds for variety. */
+export function hash01(seed) {
+    let x = (Math.imul(seed + 1, 2654435761) ^ Math.imul(0x9e3779b9, 97531)) >>> 0;
+    x ^= x >>> 16;
+    x = Math.imul(x, 0x45d9f3b);
+    x ^= x >>> 16;
+    x = Math.imul(x, 0x45d9f3b);
+    x ^= x >>> 16;
+    return (x >>> 0) / 4294967296;
+}
+/** Width of the shine's gaussian band, in diagonal cells. */
+export const SHINE_BAND_WIDTH = 18;
+/** Peak glow the band paints over the settled gradient. */
+export const SHINE_GLOW_BOOST = 0.7;
+/**
+ * Center of the shine band along the diagonal axis for loop-frame u. The band
+ * ping-pongs with a swaying rate: it lingers at the ends, then dashes across.
+ * At u = 0 the band sits just off the left edge — the loop always re-enters
+ * from the left, and the default theme's brush intro is exactly this phase's
+ * first sweep, so the handoff is seamless.
+ */
+export function shineBandCenter(u, span) {
+    const theta = 0.04 * u + 3.5 * Math.sin(u / 170) - Math.PI / 2;
+    return span / 2 + Math.sin(theta) * (span / 2 + 6);
+}
+/** The loop's settled cell with the shine band centered at `bandCenter`. */
+function cellAtBand(context, bandCenter) {
+    const dx = context.diagonal - bandCenter;
+    const glow = Math.exp(-(dx * dx) / SHINE_BAND_WIDTH);
+    const intensity = Math.min(0.95, glow * SHINE_GLOW_BOOST);
+    const color = intensity > 0.03 ? mix(context.base, context.headingStrong, intensity) : context.base;
+    return { glyph: context.glyph, color };
+}
+/** The loop state an intro must land on: the shine band where it sits at the
+ * moment the intro hands over. Every intro converges to this. */
+function settledCell(context) {
+    return cellAtBand(context, shineBandCenter(context.duration, context.span));
+}
+/** True while the welcome intro is playing and cells should be handed to the
+ * intro renderer instead of the settled shine loop. */
+export function introActive(frame) {
+    return frame < INTRO_DURATION;
+}
+/** Deterministic global birth order for a logo cell: 0..N-1 across the whole
+ * mark, from a fixed hash of the cell coordinates. Intros that key off
+ * "when this cell is due" add their own shaping on top of this. */
+function birthOrder(context, seed) {
+    const cells = context.width * 6;
+    return Math.floor(hash01(Math.floor((context.rowIndex * context.width + context.column) * 7.13 + seed * 7919)) * cells);
+}
+/** Per-theme opening acts, keyed by theme name. Each is a pure function of
+ * the frame, paints nothing at frame 0, and converges on the settled cell by
+ * the handoff frame. */
+const intros = {
+    // aurora — the shine band is the brush: a reveal front sweeps left to
+    // right across the mark, painting the settled palette in its wake with a
+    // faint trailing sheen at the edge. The front starts off the left edge so
+    // frame 0 is blank, and the colors are the settled ones, so the handoff
+    // is invisible.
+    aurora: {
+        cell(context) {
+            const front = (context.frame / (context.duration - 1)) * (context.span + 4) - 2;
+            if (context.diagonal > front)
+                return null; // ahead of the brush: still nothing
+            const dx = front - context.diagonal;
+            const sheen = Math.exp(-(dx * dx) / 6) * 0.45;
+            const settled = settledCell(context);
+            const color = sheen > 0.02 ? mix(settled.color, context.accent, sheen) : settled.color;
+            return { glyph: context.glyph, color };
+        },
+    },
+    // midnight — a narrow spotlight sweeps across a black stage; each cell the
+    // beam touches blazes white-hot at birth, then cools into the settled
+    // palette. Left to right, one pass.
+    midnight: {
+        cell(context) {
+            const front = context.progress * (context.span + 10) - 5;
+            if (context.diagonal > front)
+                return null;
+            const dx = context.diagonal - front;
+            const birth = Math.exp(-(dx * dx) / 3);
+            const settled = settledCell(context);
+            const color = birth > 0.02 ? mix(settled.color, '#ffffff', Math.min(1, birth * 1.4)) : settled.color;
+            return { glyph: context.glyph, color };
+        },
+    },
+    // nord — an aurora curtain: a cold green-white wave washes left to right
+    // through the mark, each row's edge slightly offset so the reveal ripples
+    // like light on ice.
+    nord: {
+        cell(context) {
+            const wave = context.progress * (context.span + 14) - 7;
+            const jitter = (context.rnd(1) - 0.5) * 5 + context.rowIndex * 2.2;
+            const edge = wave + jitter;
+            if (context.diagonal > edge)
+                return null;
+            const dx = context.diagonal - edge;
+            const glow = Math.exp(-(dx * dx) / 6);
+            const settled = settledCell(context);
+            const color = glow > 0.02 ? mix(settled.color, '#a8ffda', glow * 0.8) : settled.color;
+            return { glyph: context.glyph, color };
+        },
+    },
+    // dracula — an ink bleed: dark violet droplets surface at fixed points and
+    // spread outward as circles until the mark is flooded; each cell is born
+    // wet-glossy pink and dries into the settled gradient.
+    dracula: {
+        cell(context) {
+            const seeds = [3, 11, 23, 37, 53];
+            let born;
+            for (const seed of seeds) {
+                const cx = context.rnd(seed * 2) * context.span;
+                const cy = context.rnd(seed * 3) * 6;
+                const dist = Math.hypot(context.diagonal - cx, (context.rowIndex - cy) * 1.6);
+                const start = context.rnd(seed) * 0.3;
+                const reach = start + (dist / Math.max(1, context.span * 0.75)) * 0.6;
+                if (context.progress >= reach && (born === undefined || reach < born))
+                    born = reach;
+            }
+            if (born === undefined)
+                return null;
+            const wet = Math.max(0, 1 - (context.progress - born) / 0.14);
+            const settled = settledCell(context);
+            const color = wet > 0 ? mix(settled.color, '#ff79c6', wet * 0.75) : settled.color;
+            return { glyph: context.glyph, color };
+        },
+    },
+    // dawn — a sunrise: cells wake from the bottom row upward, each igniting
+    // gold as the light line passes and cooling into the settled pastel.
+    dawn: {
+        cell(context) {
+            const due = 0.06 + ((5 - context.rowIndex) / 6) * 0.72 + (context.rnd(2) - 0.5) * 0.06;
+            if (context.progress < due)
+                return null;
+            const heat = Math.max(0, 1 - (context.progress - due) / 0.15);
+            const settled = settledCell(context);
+            const color = heat > 0.02 ? mix(settled.color, '#ffb347', heat * 0.7) : settled.color;
+            return { glyph: context.glyph, color };
+        },
+    },
+    // solarized — a darkroom print developing: cells surface as a faint cyan
+    // ghost that deepens into full contrast, center cells first like a
+    // vignette developing from the middle out.
+    solarized: {
+        cell(context) {
+            const vignette = 1 - Math.abs(context.diagonal - context.span / 2) / context.span;
+            const due = 0.1 + (1 - vignette) * 0.5;
+            if (context.progress < due)
+                return null;
+            const develop = Math.min(1, (context.progress - due) / 0.2);
+            const settled = settledCell(context);
+            return { glyph: context.glyph, color: mix(mix(context.accent, '#000000', 0.8), settled.color, develop) };
+        },
+    },
+    // rose-pine — petals fall: pale rose petals drift down through the mark's
+    // bounding box and stick where they land, filling the letterforms from
+    // random contact points until every cell has settled.
+    'rose-pine': {
+        cell(context) {
+            const seeds = [7, 19, 31, 43, 59, 71];
+            let landed;
+            for (const seed of seeds) {
+                const drift = context.rnd(seed) * context.span;
+                const delay = context.rnd(seed * 5) * 0.24;
+                const fall = delay + (1 - (context.rowIndex + (context.rnd(seed * 3) - 0.5) * 2) / 6) * 0.4;
+                if (context.progress >= fall && Math.abs(context.diagonal - drift) < 7 + context.progress * 10) {
+                    if (landed === undefined || fall < landed)
+                        landed = fall;
+                }
+            }
+            if (landed === undefined)
+                return null;
+            const settle = Math.max(0, 1 - (context.progress - landed) / 0.12);
+            const settled = settledCell(context);
+            const color = settle > 0 ? mix(settled.color, '#eb6f92', settle * 0.65) : settled.color;
+            return { glyph: context.glyph, color };
+        },
+    },
+    // tokyo-night — neon ignition: the sign flickers on like a faulty neon
+    // tube — cells pop in a random order, sputtering briefly before holding
+    // steady.
+    'tokyo-night': {
+        cell(context) {
+            const due = 0.04 + (birthOrder(context, 13) / (context.width * 6)) * 0.62;
+            if (context.progress < due)
+                return null;
+            const fresh = context.progress - due;
+            if (fresh < 0.14) {
+                const sputter = context.rnd(Math.floor(fresh * 140) * 13 + context.rowIndex * 31 + context.column);
+                const settled = settledCell(context);
+                // A dying tube dims to near-black instead of vanishing: the cell
+                // stays painted, the neon still reads as sputtering.
+                if (sputter < 0.4)
+                    return { glyph: context.glyph, color: mix(settled.color, '#16161e', 0.88) };
+                return { glyph: context.glyph, color: mix(settled.color, '#7dcfff', 0.5) };
+            }
+            return settledCell(context);
+        },
+    },
+    // catppuccin-mocha — a ripple: a soft ring expands from the center of the
+    // mark, painting cells as it passes and leaving a brief pastel afterglow.
+    'catppuccin-mocha': {
+        cell(context) {
+            const ring = context.progress * (context.span * 0.75 + 8);
+            const dist = Math.hypot(context.diagonal - context.span / 2, (context.rowIndex - 2.5) * 2.4);
+            if (dist > ring)
+                return null;
+            const afterglow = Math.max(0, 1 - (ring - dist) / 7);
+            const settled = settledCell(context);
+            const color = afterglow > 0.02 ? mix(settled.color, '#cba6f7', afterglow * 0.55) : settled.color;
+            return { glyph: context.glyph, color };
+        },
+    },
+    // catppuccin-latte — a coffee pour: the cup fills bottom-up like an
+    // espresso being pulled, the surface line wobbling as it rises; each
+    // dunked cell flashes with a steamed-milk sheen that fades back into
+    // the settled pastel as the surface moves on.
+    'catppuccin-latte': {
+        cell(context) {
+            const level = -0.4 + context.progress * 6 + Math.sin(context.progress * 12 + context.column / 6) * 0.2;
+            if (context.rowIndex + (context.rnd(4) - 0.5) * 0.5 > level)
+                return null;
+            const flash = Math.exp(-Math.max(0, level - context.rowIndex) / 1.5);
+            const settled = settledCell(context);
+            const color = flash > 0.02 ? mix(settled.color, context.accent, flash * 0.6) : settled.color;
+            return { glyph: context.glyph, color };
+        },
+    },
+    // gruvbox-dark — a CRT power-on: the mark snaps in as a horizontal line
+    // that stretches vertically from the center outward, phosphor-bright at
+    // the growing edges, then relaxes into the settled warm palette.
+    'gruvbox-dark': {
+        cell(context) {
+            const half = context.progress * 4.2;
+            if (Math.abs(context.rowIndex - 2.5) > half)
+                return null;
+            const edge = Math.abs(Math.abs(context.rowIndex - 2.5) - half);
+            const bloom = edge < 0.9 ? 1 - edge / 0.9 : 0;
+            const settled = settledCell(context);
+            const color = bloom > 0 ? mix(settled.color, '#fe8019', bloom * 0.8) : settled.color;
+            return { glyph: context.glyph, color };
+        },
+    },
+    // one-dark — a typewriter: the mark is typed cell by cell, left to right,
+    // top to bottom, each keystroke landing full-strength with no fade.
+    'one-dark': {
+        cell(context) {
+            const order = context.rowIndex * context.width + context.column;
+            const total = 6 * context.width;
+            const typed = Math.floor((context.progress / 0.94) * total);
+            if (order >= typed)
+                return null; // strictly after 0: nothing is typed at frame 0
+            const settled = settledCell(context);
+            const fresh = order === typed - 1 ? 1 : 0;
+            const color = fresh ? mix(settled.color, '#98c379', 0.45) : settled.color;
+            return { glyph: context.glyph, color };
+        },
+    },
+    // monokai — a pixel mosaic: cells pop in as dim colored blocks in random
+    // order, dwell a few ticks scintillating, then resolve one by one into
+    // the true glyph with a brief bright flash.
+    monokai: {
+        cell(context) {
+            const pop = 0.05 + (birthOrder(context, 9) / (context.width * 6)) * 0.55;
+            if (context.progress <= pop)
+                return null;
+            const resolve = pop + 0.18;
+            const settled = settledCell(context);
+            if (context.progress <= resolve) {
+                const tick = Math.floor(context.progress * context.duration / 4);
+                const shades = ['░', '▒', '▓'];
+                return { glyph: shades[Math.floor(context.rnd(tick * 3 + 2) * 3)], color: mix(context.base, '#1e1f1c', 0.55 + context.rnd(5) * 0.25) };
+            }
+            const flash = Math.max(0, 1 - (context.progress - resolve) / 0.08);
+            const color = flash > 0 ? mix(settled.color, '#f8f8f2', flash * 0.85) : settled.color;
+            return { glyph: context.glyph, color };
+        },
+    },
+    // kanagawa — a sumi-e wash: a wide soft brush draws the mark in three
+    // passes (top, middle, bottom bands), each stroke wet and dark at the
+    // front, drying lighter toward the tail.
+    kanagawa: {
+        cell(context) {
+            const band = Math.floor(context.rowIndex / 2);
+            const strokeFront = (context.progress * 1.15 - band * 0.22) * (context.span + 8) - 4;
+            if (context.diagonal > strokeFront)
+                return null;
+            const dx = context.diagonal - strokeFront;
+            const wet = Math.exp(-(dx * dx) / 26);
+            const settled = settledCell(context);
+            const color = wet > 0.02 ? mix(settled.color, '#1f1f28', Math.min(0.5, wet * 0.5)) : settled.color;
+            return { glyph: context.glyph, color };
+        },
+    },
+    // everforest — fog lift: dense pale fog envelops nothing yet — the fog
+    // edge retreats to the left as time passes, and cells emerge in its wake
+    // from the right. Each cell brightens as the haze burns off.
+    everforest: {
+        cell(context) {
+            const drift = context.progress * (context.span + 16) - 8;
+            const wisp = (context.rnd(6) - 0.5) * 6 + context.rowIndex * 1.7;
+            if (context.diagonal > drift + wisp)
+                return null;
+            const thin = Math.max(0, 1 - (drift + wisp - context.diagonal) / 8);
+            const settled = settledCell(context);
+            const color = thin > 0.02 ? mix(settled.color, '#d3c6aa', thin * 0.5) : settled.color;
+            return { glyph: context.glyph, color };
+        },
+    },
+    // synthwave — VHS tear-in: the mark materializes out of tracking noise,
+    // rows tearing in top to bottom with chromatic aberration, stabilizing
+    // row by row until the tape locks.
+    synthwave: {
+        cell(context) {
+            const rowLock = 0.06 + (context.rowIndex / 6) * 0.6;
+            if (context.progress < rowLock)
+                return null;
+            const tear = Math.max(0, 1 - (context.progress - rowLock) / 0.14);
+            if (tear > 0 && context.rnd(Math.floor(context.progress * context.duration) * 17 + context.rowIndex * 41) < tear * 0.5)
+                return null;
+            const settled = settledCell(context);
+            const chroma = tear > 0 ? tear * 0.6 : 0;
+            const color = chroma > 0 ? mix(settled.color, chroma * 2 > 1 ? '#36f9f6' : '#fe4450', chroma) : settled.color;
+            return { glyph: context.glyph, color };
+        },
+    },
+    // matrix — rain condensation: glyph rain falls through the mark's bounding
+    // box and the letterforms condense where the rain strikes, as if the code
+    // itself is condensing out of the downpour.
+    matrix: {
+        cell(context) {
+            const strike = 0.06 + context.rnd(8) * 0.6;
+            if (context.progress < strike)
+                return null;
+            const settle = Math.max(0, 1 - (context.progress - strike) / 0.1);
+            const settled = settledCell(context);
+            const color = settle > 0 ? mix(settled.color, '#c8ffd9', settle * 0.7) : settled.color;
+            return { glyph: context.glyph, color };
+        },
+    },
+    // solarized-light — blueprint develop: a scanning bar sweeps down over
+    // blank paper; behind it the ink darkens rapidly from nothing into the
+    // finished solarized-light palette.
+    'solarized-light': {
+        cell(context) {
+            const scan = -1.5 + context.progress * 9;
+            if (context.rowIndex > scan)
+                return null;
+            const fresh = Math.max(0, 1 - (context.rowIndex - scan) / 1.4);
+            const settled = settledCell(context);
+            const color = fresh > 0.02 ? mix(settled.color, '#268bd2', fresh * 0.6) : settled.color;
+            return { glyph: context.glyph, color };
+        },
+    },
+    // github-light — skeleton shimmer: a pale wireframe flickers in for a
+    // couple of beats, then the fill floods in left to right with a crisp
+    // leading edge, converting the skeleton in place — nothing is ever
+    // erased — ending at full contrast.
+    'github-light': {
+        cell(context) {
+            const settled = settledCell(context);
+            const skeleton = { glyph: context.glyph, color: mix('#f6f8fa', '#d0d7de', 0.4) };
+            if (context.progress < 0.02)
+                return null;
+            if (context.progress < 0.28) {
+                // The wireframe breathes: bright beats and dim beats, but a cell
+                // stays painted once it has first appeared.
+                const sputter = context.rnd(Math.floor(context.progress * 100) * 29 + context.rowIndex * 17 + context.column);
+                if (sputter < 0.45)
+                    return { glyph: context.glyph, color: mix('#f6f8fa', '#d0d7de', 0.75) };
+                return skeleton;
+            }
+            const front = (context.progress - 0.28) / 0.72 * (context.span + 6) - 3;
+            if (context.diagonal > front)
+                return skeleton; // not yet flooded: skeleton holds
+            const fresh = Math.max(0, 1 - (front - context.diagonal) / 4);
+            const color = fresh > 0.02 ? mix(settled.color, '#0969da', fresh * 0.5) : settled.color;
+            return { glyph: context.glyph, color };
+        },
+    },
+};
 export function renderWelcome(width, height, terminalHeight = height, frame = 0) {
     width = Math.max(1, Math.floor(width));
     height = Math.max(1, Math.floor(height));
@@ -47,18 +439,11 @@ export function renderWelcome(width, height, terminalHeight = height, frame = 0)
     const cycle = frame % 80;
     const logoTop = center - 3;
     if (width >= LOGO_WIDTH + 3 && logoTop >= 0 && logoTop + LOGO.length <= height) {
-        // One clean motion layer for every theme: the shine rides diagonal "/"
-        // stripes (distance along u = x + rise · y) and ping-pongs end to end.
-        // Its phase advances at a rate that itself sways, so the band lingers at
-        // the ends, then dashes across — never a flat metronome. No other motion
-        // touches the letterforms.
         const rise = 2;
         const span = LOGO_WIDTH + rise * (LOGO.length - 1);
-        const theta = 0.04 * frame + 3.5 * Math.sin(frame / 170);
-        const ride = Math.sin(theta);
-        const bandCenter = span / 2 + ride * (span / 2 + 6);
-        const bandWidth = 18;
-        const glowBoost = 0.7;
+        // Loop phase: the shine ping-pongs with a swaying rate, re-entering from
+        // the left each cycle, so the band lingers at the ends then dashes across.
+        const bandCenter = shineBandCenter(frame, span);
         // The phosphor theme swaps the empty space around the mark for glyph
         // rain: per-column heads fall the full height of the screen, trailing a
         // fading wake. The letterforms themselves stay pristine on top.
@@ -99,21 +484,47 @@ export function renderWelcome(width, height, terminalHeight = height, frame = 0)
             return pad;
         };
         const leftCells = Math.floor((width - LOGO_WIDTH) / 2);
+        const themeName = activeTuiTheme().name;
+        const intro = intros[themeName];
         LOGO.forEach((template, rowIndex) => {
             const row = logoTop + rowIndex;
             let line = '';
             for (let column = 0; column < LOGO_WIDTH; column++) {
                 const diagonal = column + rowIndex * rise;
-                const dx = diagonal - bandCenter;
-                const glow = Math.exp(-(dx * dx) / bandWidth);
-                const base = mix(palette.accent, palette.heading, diagonal / span);
-                const intensity = Math.min(0.95, glow * glowBoost);
-                const color = intensity > 0.03 ? mix(base, palette.headingStrong, intensity) : base;
                 const glyph = template[column];
                 if (glyph === ' ') {
                     line += rainAt(row, leftCells + column);
                     continue;
                 }
+                const base = mix(palette.accent, palette.heading, diagonal / span);
+                if (intro && introActive(frame)) {
+                    const context = {
+                        frame,
+                        duration: INTRO_DURATION,
+                        progress: frame / INTRO_DURATION,
+                        rowIndex,
+                        column,
+                        diagonal,
+                        span,
+                        width: LOGO_WIDTH,
+                        glyph,
+                        base,
+                        accent: palette.accent,
+                        heading: palette.heading,
+                        headingStrong: palette.headingStrong,
+                        text: palette.text,
+                        rnd: (seed) => hash01(seed * 7919 + rowIndex * 131 + column * 7 + 5),
+                    };
+                    const painted = intro.cell(context);
+                    if (painted)
+                        line += `{${painted.color}-fg}${painted.glyph}{/${painted.color}-fg}`;
+                    continue;
+                }
+                // Loop: the settled gradient with the shine riding on top.
+                const dx = diagonal - bandCenter;
+                const glow = Math.exp(-(dx * dx) / SHINE_BAND_WIDTH);
+                const intensity = Math.min(0.95, glow * SHINE_GLOW_BOOST);
+                const color = intensity > 0.03 ? mix(base, palette.headingStrong, intensity) : base;
                 line += `{${color}-fg}${glyph}{/${color}-fg}`;
             }
             rows[row] = `${rainPad(row, 0, leftCells)}${line}${rainPad(row, leftCells + LOGO_WIDTH, width)}`;
@@ -121,7 +532,7 @@ export function renderWelcome(width, height, terminalHeight = height, frame = 0)
         const brandRow = logoTop + LOGO.length + 1;
         if (brandRow < height && BRAND.length <= width) {
             const brandLeft = Math.floor((width - BRAND.length) / 2);
-            const brand = `{${palette.headingStrong}-fg}{bold}${BRAND}{/bold}{/${palette.headingStrong}-fg}`;
+            const brand = `{${palette.headingStrong}-fg}{bold}{/bold}{/${palette.headingStrong}-fg}{white-fg}{bold}${BRAND}{/bold}{/white-fg}`;
             rows[brandRow] = `${rainPad(brandRow, 0, brandLeft)}${brand}${rainPad(brandRow, brandLeft + BRAND.length, width)}`;
         }
         const taglineRow = brandRow + 1;