brignano 2.0.2 → 2.1.0

package/dist/banner.js

@@ -1,57 +1,127 @@
+import chalk from 'chalk';
 import figlet from 'figlet';
-import gradient from 'gradient-string';
 import { sleep } from './reveal.js';
-// Brand palette — matches brignano.io's electric indigo/violet accent
-// (violet-700 → violet-500 → violet-400). Reads well on a dark terminal.
-const BRAND = ['#6d28d9', '#8b5cf6', '#a78bfa'];
-// A longer ramp with a bright crest (violet-300) used for the shimmer sweep.
-const SHIMMER = [
-    '#5b21b6',
-    '#6d28d9',
-    '#7c3aed',
-    '#8b5cf6',
-    '#a78bfa',
-    '#c4b5fd',
-    '#a78bfa',
-    '#8b5cf6',
-    '#7c3aed',
-    '#6d28d9',
+import { center, mix, paintGradient, sample, termWidth, tokens } from './ui.js';
+// Fonts in order of preference, with the terminal width each one needs. The
+// widest that fits wins; on a very narrow terminal we fall back to plain text so
+// nothing ever wraps mid-letter.
+const FONTS = [
+    { font: 'ANSI Shadow', minColumns: 72 },
+    { font: 'Small', minColumns: 44 },
 ];
-function bannerArt(text) {
+// Figlet output as a clean rectangle: trailing blank lines dropped, every line
+// padded to the same width so per-column effects line up.
+function bannerArt(text, columns = termWidth()) {
+    const choice = FONTS.find((f) => columns >= f.minColumns);
+    let lines;
     try {
-        return figlet.textSync(text, { font: 'ANSI Shadow' });
+        lines = choice
+            ? figlet.textSync(text, { font: choice.font }).split('\n')
+            : [text.toUpperCase()];
     }
     catch {
-        return text.toUpperCase();
+        lines = [text.toUpperCase()];
     }
+    while (lines.length > 0 && (lines.at(-1) ?? '').trim() === '')
+        lines.pop();
+    const width = Math.max(...lines.map((l) => l.length), 1);
+    return lines.map((l) => l.padEnd(width));
 }
-function paint(colors, art) {
-    try {
-        return gradient(colors).multiline(art);
-    }
-    catch {
-        return art;
-    }
+const BAND = 4; // width of the bright leading edge, in columns
+const GLINT = 3; // half-width of the glint, in columns
+// The banner is the monogram: identity, inked with `--mark`. The sweep's crest
+// is the mark pushed most of the way to the page's ink; letters the light hasn't
+// reached yet sit at the strong-border neutral, like an unlit surface.
+const CREST = mix(tokens.mark[2], tokens.ink, 0.75);
+const GHOST = tokens.lineStrong;
+// Paints one frame of the art. Pure: same inputs, same string.
+function paintFrame(art, { revealEdge, glintAt } = {}) {
+    const width = art[0]?.length ?? 1;
+    const last = Math.max(1, width - 1);
+    return art
+        .map((line) => {
+        let out = '';
+        for (let x = 0; x < line.length; x++) {
+            const ch = line[x] ?? ' ';
+            if (ch === ' ') {
+                out += ch;
+                continue;
+            }
+            let color = sample(tokens.mark, x / last);
+            if (revealEdge !== undefined) {
+                const behind = revealEdge - x; // >0 once the edge has passed this column
+                if (behind <= 0)
+                    color = GHOST;
+                else if (behind < BAND)
+                    color = mix(color, CREST, 1 - behind / BAND);
+            }
+            if (glintAt !== undefined) {
+                const dist = Math.abs(x - glintAt);
+                if (dist < GLINT)
+                    color = mix(color, CREST, 0.85 * (1 - dist / GLINT));
+            }
+            out += chalk.hex(color)(ch);
+        }
+        return out;
+    })
+        .join('\n');
 }
-// Static gradient banner (used for the non-animated path).
-export function renderBanner(text = 'brignano') {
-    return paint(BRAND, bannerArt(text));
+function subtitle(text, color = tokens.inkSoft) {
+    return chalk.hex(color).italic(text);
 }
-// Animated splash: a violet highlight sweeps across the letters, then settles on
-// the static brand gradient. Redraws in place via ANSI cursor moves, so it must
-// only be called on a TTY (the caller gates this behind `shouldAnimate`).
-export async function animateBanner(text = 'brignano', frames = 14, frameMs = 70) {
+// Static, centered banner with the tagline beneath (non-animated path).
+export function renderBanner(tagline, text = 'brignano') {
     const art = bannerArt(text);
-    const lineCount = art.split('\n').length;
-    for (let i = 0; i < frames; i++) {
-        const offset = i % SHIMMER.length;
-        const rotated = SHIMMER.slice(offset).concat(SHIMMER.slice(0, offset));
-        if (i > 0)
-            process.stdout.write(`\u001b[${lineCount}A`);
-        process.stdout.write(`\r${paint(rotated, art)}\n`);
-        await sleep(frameMs);
+    return center([paintGradient(art.join('\n'), tokens.mark), '', subtitle(tagline)].join('\n'));
+}
+// Writes a block of lines in place, overwriting the previous block of the same
+// height when `redraw` is set. Every line is erased to its end first so a
+// shorter line never leaves debris from the one it replaces.
+function draw(lines, redraw) {
+    const out = lines.map((l) => `\r\u001b[2K${l}`).join('\n');
+    process.stdout.write(`${redraw ? `\u001b[${lines.length}A` : ''}${out}\n`);
+}
+// Animated splash. A light sweeps across the lettering from left to right,
+// revealing the brand gradient behind it, a quick glint follows, and the tagline
+// fades in underneath. Redraws in place via ANSI cursor moves, so it must only
+// be called on a TTY (the caller gates this behind `shouldAnimate`).
+export async function animateBanner(tagline, text = 'brignano') {
+    const columns = termWidth();
+    const art = bannerArt(text, columns);
+    const width = art[0]?.length ?? 1;
+    const pad = ' '.repeat(Math.max(0, Math.floor((columns - width) / 2)));
+    const frame = (body, sub = '') => [
+        ...body.split('\n').map((l) => pad + l),
+        '',
+        center(sub, columns),
+    ];
+    let drawn = false;
+    const show = (body, sub) => {
+        draw(frame(body, sub), drawn);
+        drawn = true;
+    };
+    // 1. Sweep: the edge travels from just before the first column to just past
+    //    the last, so the final frame is fully lit.
+    const sweepSteps = 22;
+    for (let i = 0; i <= sweepSteps; i++) {
+        const edge = -1 + ((width + BAND + 1) * i) / sweepSteps;
+        show(paintFrame(art, { revealEdge: edge }));
+        await sleep(24);
+    }
+    // 2. Glint: a fast, narrow highlight skims across the settled gradient.
+    const glintSteps = 16;
+    for (let i = 0; i <= glintSteps; i++) {
+        const at = -GLINT + ((width + 2 * GLINT) * i) / glintSteps;
+        show(paintFrame(art, { glintAt: at }));
+        await sleep(18);
+    }
+    // 3. Settle, then fade the tagline in.
+    const settled = paintFrame(art);
+    show(settled);
+    await sleep(80);
+    const fade = [0.25, 0.55, 0.8, 1];
+    for (const t of fade) {
+        show(settled, subtitle(tagline, mix(GHOST, tokens.inkSoft, t)));
+        await sleep(70);
     }
-    // Settle on the canonical brand gradient.
-    process.stdout.write(`\u001b[${lineCount}A`);
-    process.stdout.write(`${renderBanner(text)}\n`);
 }

package/dist/card.js

@@ -1,13 +1,13 @@
 #!/usr/bin/env node
-import chalk from 'chalk';
 import { animateBanner, renderBanner } from './banner.js';
 import { renderCard } from './cardBox.js';
-import { funFacts, pick, profile, taglines } from './data.js';
+import { funFacts, liveFact, pick, profile, taglines } from './data.js';
 import { isInteractive, parseFlags, readVersion, shouldAnimate, shouldFetchLive, unknownFlags, } from './env.js';
 import { fetchLive } from './live.js';
-import { promptForAction, sendEmail, viewResume } from './menu.js';
+import { promptForAction, quit, sendEmail, viewResume } from './menu.js';
 import { renderQr } from './qrcode.js';
 import { reveal, sleep } from './reveal.js';
+import { attention, center, glyph, ink, link, mark, soft, withHiddenCursor, } from './ui.js';
 import { writeAndOpenVCard } from './vcard.js';
 function printHelp() {
     console.log('\nUsage: npx brignano [options]\n');
@@ -22,6 +22,9 @@ function printHelp() {
     console.log('      --no-prompt     Show the card only (non-interactive)');
     console.log('  -d, --download      Deprecated alias for --view\n');
 }
+function farewell() {
+    console.log(`\n${center(`${mark(glyph.star)} ${ink('Thanks for stopping by — have a great day!')}`)}\n`);
+}
 async function main() {
     const argv = process.argv.slice(2);
     // Reject typos loudly rather than silently rendering the default card.
@@ -42,7 +45,7 @@ async function main() {
     }
     if (flags.view || flags.download) {
         if (flags.download) {
-            console.warn('Note: --download is deprecated; opening the resume instead.');
+            console.warn(`${attention(`${glyph.warning} Note:`)} --download is deprecated; opening the resume instead.`);
         }
         return viewResume();
     }
@@ -50,7 +53,7 @@ async function main() {
         return sendEmail();
     if (flags.qr) {
         console.log(await renderQr(profile.website));
-        console.log(chalk.gray(`  ${profile.website}\n`));
+        console.log(`  ${link(profile.website)}\n`);
         return;
     }
     if (flags.vcard)
@@ -60,30 +63,49 @@ async function main() {
     // Kick off the live fetch early (don't await yet) so its timeout budget
     // overlaps the banner render. Skipped entirely when non-interactive/CI.
     const livePromise = shouldFetchLive(flags) ? fetchLive() : Promise.resolve(null);
-    // Banner first: an animated violet shimmer when we can animate, otherwise the
-    // static gradient.
+    // Banner first: a light-sweep reveal when we can animate, otherwise the static
+    // gradient. Both are centered on the terminal, like the card below them.
+    const tagline = pick(taglines);
+    console.log();
+    let live;
     if (animate) {
-        await animateBanner();
-        await sleep(120);
+        live = await withHiddenCursor(async () => {
+            await animateBanner(tagline);
+            // Card, enriched with whatever the (bounded) live fetch returned.
+            const data = await livePromise;
+            await reveal(renderCard({ live: data }), 30, true);
+            return data;
+        });
     }
     else {
-        console.log(renderBanner());
+        console.log(renderBanner(tagline));
+        live = await livePromise;
+        console.log(renderCard({ live }));
     }
-    // Card, enriched with whatever the (bounded) live fetch returned.
-    const live = await livePromise;
-    const tagline = pick(taglines);
-    await reveal(renderCard({ live, tagline }), 30, animate);
-    console.log(`Tip: ${chalk.cyanBright.bold('cmd/ctrl + click')} the links above.`);
-    console.log(chalk.gray(`     ${pick(funFacts)}\n`));
+    // The "live stats" fact only makes sense when the live line is on the card.
+    const facts = live ? [...funFacts, liveFact] : funFacts;
+    console.log(center(`${soft('Tip:')} ${ink.bold('cmd/ctrl + click')} ${soft('the links above.')}`));
+    console.log(center(soft(pick(facts))));
+    console.log();
     if (!interactive)
         return;
-    const action = await promptForAction();
-    await action();
+    // The menu comes back after every action, so visitors can copy an email, open
+    // a link and grab the QR in one sitting. "Quit" (or Ctrl+C) ends it.
+    let message = 'What would you like to do?';
+    for (;;) {
+        const action = await promptForAction(message);
+        if (action === quit)
+            break;
+        await action();
+        message = 'Anything else?';
+        await sleep(150);
+    }
+    farewell();
 }
 main().catch((err) => {
     // Ctrl+C / Esc at the menu is a normal way to leave, not a crash.
     if (err instanceof Error && err.name === 'ExitPromptError') {
-        console.log('\nHave a great day!\n');
+        farewell();
         return;
     }
     const message = err instanceof Error ? err.message : String(err);

package/dist/cardBox.js

@@ -1,44 +1,50 @@
 import boxen from 'boxen';
-import chalk from 'chalk';
 import { profile } from './data.js';
+import { glyph, ink, link, slate, soft, tokens } from './ui.js';
 // Right-aligns labels to a common width so the values line up cleanly.
-const LABEL_WIDTH = 10;
+const LABEL_WIDTH = 8;
 function label(text) {
-    return chalk.white.bold(text.padStart(LABEL_WIDTH) + ':');
+    return slate(text.padStart(LABEL_WIDTH));
+}
+function row(name, value) {
+    return `${label(name)}  ${value}`;
+}
+// A URL where only the handle is emphasised: the scheme and host stay regular,
+// so the eye lands on the part that is actually mine. Cobalt throughout,
+// because the whole thing is clickable.
+function url(prefix, handle) {
+    return `${link(prefix)}${link.bold(handle)}`;
 }
 // Builds the boxen business card. `live` is optional — when absent the live
 // line is simply omitted, so the card looks intentional with or without network.
-export function renderCard({ live, tagline }) {
-    // Violet accent matches brignano.io (violet-400 #a78bfa on dark).
-    const accent = chalk.hex('#a78bfa');
+export function renderCard({ live }) {
     const lines = [
-        accent.bold(profile.fullName) + '  ' + chalk.gray(profile.handle),
-        '',
-        `${label('Work')}  ${profile.title} ${chalk.gray('at')} ${chalk
-            .hex('#3A5A78')
-            .bold(profile.org)}`,
+        ink.bold(profile.fullName),
+        `${ink(profile.title)} ${slate('·')} ${ink.bold(profile.org)}`,
         '',
-        `${label('GitHub')}  ${chalk.gray('https://github.com/')}${chalk.green(profile.username)}`,
-        `${label('LinkedIn')}  ${chalk.gray('https://linkedin.com/in/')}${chalk.blue(profile.username)}`,
-        `${label('Website')}  ${chalk.cyan(profile.website)}`,
+        row('GitHub', url('https://github.com/', profile.username)),
+        row('LinkedIn', url('https://linkedin.com/in/', profile.username)),
+        row('Website', link(profile.website)),
+        row('Email', link(profile.email)),
     ];
     if (live) {
-        lines.push('');
         const parts = [
-            `${chalk.yellow('★')} ${chalk.bold(live.followers)} followers`,
-            `${chalk.bold(live.publicRepos)} repos`,
+            `${slate(glyph.star)} ${ink.bold(live.followers)} ${soft('followers')}`,
+            `${ink.bold(live.publicRepos)} ${soft('repos')}`,
         ];
         if (live.latestRepo) {
-            parts.push(`latest: ${chalk.green(live.latestRepo.name)}`);
+            parts.push(`${soft('latest')} ${link(live.latestRepo.name)}`);
         }
-        lines.push(`${label('Live')}  ${chalk.gray(parts.join(' · '))}`);
+        lines.push('', row('Stats', parts.join(slate('  ·  '))));
     }
-    lines.push('', `${label('Card')}  ${chalk.red('npx')} ${chalk.white('brignano')}`, '', chalk.italic(tagline));
+    lines.push('', row('Card', `${slate('$')} ${ink('npx')} ${ink.bold('brignano')}`));
     return boxen(lines.join('\n'), {
-        margin: 1,
+        margin: { top: 1, bottom: 1, left: 0, right: 0 },
         float: 'center',
-        padding: 1,
+        padding: { top: 1, bottom: 1, left: 3, right: 3 },
         borderStyle: 'round',
-        borderColor: 'gray',
+        borderColor: tokens.lineStrong,
+        title: soft(profile.handle),
+        titleAlignment: 'center',
     });
 }

package/dist/data.js

@@ -22,12 +22,13 @@ export const taglines = [
     'Self-hoster, spec-driven, and unreasonably fond of a tidy terminal.',
     'Good engineering is mostly good taste applied consistently. Say hello.',
 ];
-// Small easter-egg facts, shown occasionally below the card.
+// Small easter-egg facts, shown below the card.
 export const funFacts = [
     'This card is open source — `npx brignano --help` shows every trick.',
-    'Tip: scan the QR with your phone to save my contact instantly.',
-    'The live stats above are pulled fresh from GitHub (with a strict timeout).',
+    'Scan the contact QR with your phone to save my details instantly.',
 ];
+// Only makes sense when the card actually shows the live GitHub line.
+export const liveFact = 'The live stats above are pulled fresh from GitHub (with a strict timeout).';
 // Deterministic-enough pick without Math.random (kept simple + dependency-free).
 // The `?? items[0]` fallback is unreachable for a NonEmpty list, but it keeps the
 // return type honest under `noUncheckedIndexedAccess` without an assertion.

package/dist/menu.js

@@ -1,86 +1,131 @@
 import { select } from '@inquirer/prompts';
-import chalk from 'chalk';
 import clipboard from 'clipboardy';
 import open from 'open';
 import { profile } from './data.js';
 import { renderQr } from './qrcode.js';
+import { danger, glyph, ink, link, soft, success } from './ui.js';
 import { buildVCard, writeAndOpenVCard } from './vcard.js';
+// Every state ships with an icon and a word (design system §3): forest for
+// done, rust for gone wrong.
+const done = (word) => success(`${glyph.tick} ${word}`);
+const failed = (word) => danger(`${glyph.cross} ${word}`);
 // --- Action helpers (kept as named functions so flags and the menu share them) ---
 export async function copyEmail() {
     try {
         await clipboard.write(profile.email);
-        console.log(`\n${chalk.green('Copied')} ${profile.email} to your clipboard.\n`);
+        console.log(`\n${done('Copied')} ${link(profile.email)} to your clipboard.\n`);
     }
     catch {
         // Clipboard access fails in headless/SSH environments — degrade gracefully.
-        console.log(`\nMy email is ${chalk.green(profile.email)} — drop me a line!\n`);
+        console.log(`\nMy email is ${link(profile.email)} — drop me a line!\n`);
     }
 }
 export async function sendEmail() {
     try {
         await open(`mailto:${profile.email}`);
-        console.log('\nOpened your mail client — see you in the inbox.\n');
+        console.log(`\n${done('Opened')} your mail client — see you in the inbox.\n`);
     }
     catch (err) {
         const message = err instanceof Error ? err.message : String(err);
-        console.error(`Failed to open mail client: ${message}`);
-        console.error(`Reach me directly at ${profile.email}`);
+        console.error(`\n${failed('Failed')} to open your mail client: ${message}`);
+        console.error(`Reach me directly at ${link(profile.email)}\n`);
     }
 }
 export async function openUrl(url, label) {
     try {
         await open(url);
-        console.log(`\nOpened ${label}: ${url}\n`);
+        console.log(`\n${done('Opened')} ${label}: ${link(url)}\n`);
     }
     catch (err) {
         const message = err instanceof Error ? err.message : String(err);
-        console.error(`Failed to open ${label}: ${message}`);
-        console.error(`Here it is: ${url}`);
+        console.error(`\n${failed('Failed')} to open ${label}: ${message}`);
+        console.error(`Here it is: ${link(url)}\n`);
     }
 }
 export async function viewResume() {
-    await openUrl(profile.resume, 'resume');
+    await openUrl(profile.resume, 'my resume');
 }
 export async function showContactQr() {
     const qr = await renderQr(buildVCard());
     console.log('\nScan to save my contact:\n');
     console.log(qr);
 }
+// Sentinel action: choosing it ends the session instead of bringing the menu back.
+export const quit = () => { };
+// Names stay unstyled on purpose: the active row is highlighted as a whole, and
+// embedded colour resets would break that highlight mid-line.
 export function buildChoices() {
     return [
-        { name: `Copy my ${chalk.green.bold('email')} to clipboard`, value: copyEmail },
-        { name: `Send me an ${chalk.green.bold('email')}`, value: sendEmail },
         {
-            name: `Open my ${chalk.green.bold('GitHub')}`,
+            name: 'Copy my email to your clipboard',
+            description: profile.email,
+            value: copyEmail,
+        },
+        {
+            name: 'Send me an email',
+            description: `Opens a new message to ${profile.email}`,
+            value: sendEmail,
+        },
+        {
+            name: 'Open my GitHub',
+            description: profile.github,
             value: () => openUrl(profile.github, 'GitHub'),
         },
         {
-            name: `Open my ${chalk.blue.bold('LinkedIn')}`,
+            name: 'Open my LinkedIn',
+            description: profile.linkedin,
             value: () => openUrl(profile.linkedin, 'LinkedIn'),
         },
-        { name: `View my ${chalk.magentaBright.bold('resume')}`, value: viewResume },
         {
-            name: `Save my ${chalk.cyan.bold('contact')} (.vcf)`,
+            name: 'View my resume',
+            description: profile.resume,
+            value: viewResume,
+        },
+        {
+            name: 'Save my contact card',
+            description: 'Writes a .vcf and opens it in your contacts app',
             value: writeAndOpenVCard,
         },
-        { name: `Show a ${chalk.yellow.bold('contact QR')} code`, value: showContactQr },
         {
-            name: 'Just quit',
-            value: () => {
-                console.log('\nHave a great day!\n');
-            },
+            name: 'Show a contact QR code',
+            description: 'Scan it with your phone to save my details',
+            value: showContactQr,
+        },
+        {
+            name: 'Quit',
+            description: 'Thanks for stopping by',
+            value: quit,
         },
     ];
 }
 // Shows the action menu and returns the chosen handler. Ctrl+C / Esc throws an
 // `ExitPromptError`, which the entry point treats as a normal exit.
-export async function promptForAction() {
+export async function promptForAction(message) {
     const choices = buildChoices();
     return select({
-        message: 'What would you like to do?',
+        message,
         choices,
         // Default page size is 7, which would hide the last entry behind a scroll.
         // Show every action at once — the list is short and fixed.
         pageSize: choices.length,
+        // Cobalt is the "you can act on this" hue; the selected row and the final
+        // answer wear it. The done prefix is forest, like every other confirmation.
+        theme: {
+            prefix: { idle: link(glyph.pointer), done: success(glyph.tick) },
+            icon: { cursor: glyph.pointer },
+            style: {
+                message: (text) => ink.bold(text),
+                highlight: (text) => link.bold(text),
+                answer: (text) => link(text),
+                description: (text) => soft(`  ${text}`),
+                // inquirer hardcodes ↑↓ and ⏎ here; swap in whatever this console can draw.
+                keysHelpTip: (keys) => keys
+                    .map(([key, action]) => {
+                    const shown = key.replace('↑↓', glyph.arrows).replace('⏎', glyph.enter);
+                    return `${ink.bold(shown)} ${soft(action)}`;
+                })
+                    .join(soft(' • ')),
+            },
+        },
     });
 }

package/dist/tokens.js

@@ -0,0 +1,36 @@
+// Colour tokens, copied from @brignano/design 0.2.0 (tokens.css) and named after
+// the CSS custom properties they mirror. A terminal can't load a stylesheet, so
+// this is the one file allowed to hold a hex: everything else styles by role.
+//
+// The design system's rule is "one hue, one meaning": the mark inks a graphic
+// (the banner), cobalt means "you can act on this" (links, the menu), forest
+// means done, amber means attention, rust means something went wrong, and the
+// rest is a cool neutral ramp.
+// Dark theme (`:root:not([data-theme='light'])`). The default — most terminals
+// people run `npx` in are dark.
+export const dark = {
+    ink: '#f2f2f0',
+    inkSoft: '#a8a8b0',
+    slate: '#8b8b93',
+    lineStrong: '#3a3a41',
+    link: '#60a5fa',
+    success: '#8fd4ae',
+    attention: '#e0a44f',
+    danger: '#ec9880',
+    // --mark-ink (light) → --mark → --larch-deep (dark): deep larch to bright larch.
+    mark: ['#b4741f', '#e0a44f', '#f0bd74'],
+};
+// Light theme (`:root`). Picked only when the terminal advertises a light
+// background (see `isLightTerminal` in ui.ts).
+export const light = {
+    ink: '#111111',
+    inkSoft: '#52525b',
+    slate: '#8a8a8f',
+    lineStrong: '#cbcbce',
+    link: '#1d4ed8',
+    success: '#245740',
+    attention: '#8a5714',
+    danger: '#8a3722',
+    // --mark-ink → --mark → --mark-ink: the text-safe step at the edges.
+    mark: ['#8a5714', '#b4741f', '#8a5714'],
+};

package/dist/ui.js

@@ -0,0 +1,136 @@
+// Shared terminal/layout primitives: theme-aware styles built on the design
+// tokens, glyphs with legacy-console fallbacks, width-aware centering, tiny
+// colour math for gradients, and cursor hiding during animations.
+import figures from '@inquirer/figures';
+import chalk from 'chalk';
+import stringWidth from 'string-width';
+import { dark, light } from './tokens.js';
+// --- Theme --------------------------------------------------------------------
+// Terminals don't expose their theme, but several (iTerm2, Konsole, rxvt, some
+// tmux setups) export COLORFGBG as "<fg>;<bg>" using ANSI palette indexes.
+// Index 7 and 15 are the two whites; everything else we treat as dark.
+export function isLightTerminal(env = process.env) {
+    const spec = env.COLORFGBG;
+    if (!spec)
+        return false;
+    const bg = Number.parseInt(spec.split(';').at(-1) ?? '', 10);
+    return bg === 7 || bg === 15;
+}
+export const tokens = isLightTerminal() ? light : dark;
+// Styles by role, so no module outside tokens.ts ever names a hex.
+export const ink = chalk.hex(tokens.ink);
+export const soft = chalk.hex(tokens.inkSoft);
+export const slate = chalk.hex(tokens.slate);
+export const link = chalk.hex(tokens.link);
+export const success = chalk.hex(tokens.success);
+export const attention = chalk.hex(tokens.attention);
+export const danger = chalk.hex(tokens.danger);
+export const mark = chalk.hex(tokens.mark[1]);
+export const tier = figures.pointer === '❯' ? 'full' : process.platform === 'win32' ? 'basic' : 'ascii';
+const GLYPHS = {
+    pointer: { full: '❯', basic: '›', ascii: '>' },
+    tick: { full: '✔', basic: '√', ascii: '√' },
+    cross: { full: '✖', basic: '×', ascii: '×' },
+    // ▲ is the design system's own "degraded" symbol, and it is in every console font.
+    warning: { full: '▲', basic: '▲', ascii: '!' },
+    star: { full: '★', basic: '★', ascii: '*' },
+    // Key names for the menu's help line (inquirer hardcodes ↑↓ and ⏎).
+    arrows: { full: '↑↓', basic: '↑↓', ascii: 'up/down' },
+    enter: { full: '⏎', basic: 'enter', ascii: 'enter' },
+};
+export const glyph = Object.fromEntries(Object.entries(GLYPHS).map(([name, byTier]) => [name, byTier[tier]]));
+// --- Layout -------------------------------------------------------------------
+// Mirrors boxen's fallback order so our centering agrees with its `float: 'center'`.
+export function termWidth() {
+    if (process.stdout.columns)
+        return process.stdout.columns;
+    if (process.stderr.columns)
+        return process.stderr.columns;
+    if (process.env.COLUMNS)
+        return Number.parseInt(process.env.COLUMNS, 10) || 80;
+    return 80;
+}
+// Centers every line of `text` on the terminal. Lines wider than the terminal
+// are left alone (never negative padding, never truncation).
+export function center(text, width = termWidth()) {
+    return text
+        .split('\n')
+        .map((line) => {
+        if (line === '')
+            return line;
+        const pad = Math.max(0, Math.floor((width - stringWidth(line)) / 2));
+        return ' '.repeat(pad) + line;
+    })
+        .join('\n');
+}
+function hexToRgb(hex) {
+    const n = Number.parseInt(hex.slice(1), 16);
+    return [(n >> 16) & 255, (n >> 8) & 255, n & 255];
+}
+function rgbToHex([r, g, b]) {
+    const part = (v) => Math.round(Math.min(255, Math.max(0, v)))
+        .toString(16)
+        .padStart(2, '0');
+    return `#${part(r)}${part(g)}${part(b)}`;
+}
+// Linear blend from `from` to `to`; `t` is clamped to [0, 1].
+export function mix(from, to, t) {
+    const k = Math.min(1, Math.max(0, t));
+    const a = hexToRgb(from);
+    const b = hexToRgb(to);
+    return rgbToHex([
+        a[0] + (b[0] - a[0]) * k,
+        a[1] + (b[1] - a[1]) * k,
+        a[2] + (b[2] - a[2]) * k,
+    ]);
+}
+// Samples a multi-stop gradient at position `t` in [0, 1].
+export function sample(stops, t) {
+    const first = stops[0];
+    if (first === undefined)
+        return tokens.ink;
+    if (stops.length === 1)
+        return first;
+    const k = Math.min(1, Math.max(0, t)) * (stops.length - 1);
+    const i = Math.min(stops.length - 2, Math.floor(k));
+    const a = stops[i] ?? first;
+    const b = stops[i + 1] ?? a;
+    return mix(a, b, k - i);
+}
+// Paints a horizontal gradient across each line of a multi-line string.
+export function paintGradient(text, stops) {
+    return text
+        .split('\n')
+        .map((line) => {
+        const last = Math.max(1, line.length - 1);
+        let out = '';
+        for (let x = 0; x < line.length; x++) {
+            const ch = line[x] ?? '';
+            out += ch === ' ' ? ch : chalk.hex(sample(stops, x / last))(ch);
+        }
+        return out;
+    })
+        .join('\n');
+}
+// --- Cursor -------------------------------------------------------------------
+const HIDE = '\u001b[?25l';
+const SHOW = '\u001b[?25h';
+// Runs `fn` with the cursor hidden and guarantees it comes back — including when
+// the user hits Ctrl+C mid-animation, which would otherwise leave their shell
+// without a cursor.
+export async function withHiddenCursor(fn) {
+    const restore = () => process.stdout.write(SHOW);
+    const onSigint = () => {
+        restore();
+        process.exit(130);
+    };
+    process.stdout.write(HIDE);
+    process.once('SIGINT', onSigint);
+    try {
+        return await fn();
+    }
+    finally {
+        process.removeListener('SIGINT', onSigint);
+        restore();
+    }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "brignano",
-  "version": "2.0.2",
+  "version": "2.1.0",
   "type": "module",
   "engines": {
     "node": ">=20"
@@ -44,14 +44,15 @@
     "provenance": true
   },
   "dependencies": {
+    "@inquirer/figures": "^2.0.9",
     "@inquirer/prompts": "^8.6.0",
     "boxen": "^8.0.1",
     "chalk": "^6.0.0",
     "clipboardy": "^5.3.2",
     "figlet": "^1.11.4",
-    "gradient-string": "^3.0.0",
     "open": "^11.0.1",
-    "qrcode-terminal": "^0.12.0"
+    "qrcode-terminal": "^0.12.0",
+    "string-width": "^7.2.0"
   },
   "devDependencies": {
     "@biomejs/biome": "^2.5.10",

package/readme.md

@@ -5,7 +5,7 @@
 [![CI](https://img.shields.io/github/actions/workflow/status/brignano/card/ci.yml?branch=main&style=flat-square&label=ci)](https://github.com/brignano/card/actions/workflows/ci.yml)
 [![license](https://img.shields.io/npm/l/brignano?style=flat-square&color=8b5cf6)](LICENSE)
 
-An interactive terminal business card for Anthony Brignano. Run it with `npx` to get a gradient ASCII-art intro, a styled card with **live GitHub stats**, and quick actions — copy my email, open my socials, save my contact, or grab a scannable QR code.
+An interactive terminal business card for Anthony Brignano. Run it with `npx` to get an animated, centered ASCII-art intro, a styled card with **live GitHub stats**, and quick actions — copy my email, open my socials, save my contact, or grab a scannable QR code.
 
 ## Quick start
 
@@ -17,20 +17,36 @@ npx brignano
 
 ## What it does
 
-- **Gradient ASCII banner** (`figlet` + `gradient-string`) with a smooth line-by-line reveal animation.
-- **Styled business card** (`boxen` + `chalk`) with name, role, and links.
+- **Animated splash** (`figlet` + `chalk`): a light sweeps across the lettering to reveal the larch-amber monogram, a glint follows, and a tagline fades in beneath. Everything is centered on your terminal, and the banner steps down to a smaller font on narrow windows.
+- **Styled business card** (`boxen` + `chalk`) with name, role, links and email, revealed line by line under the banner.
 - **Live GitHub stats** — follower/repo counts and my latest repo, fetched fresh with a strict ~1.5s timeout. If the network is slow or offline, the card renders instantly and just omits the live line. It never hangs.
-- **Interactive menu** (`inquirer`) with quick actions:
+- **Interactive menu** (`inquirer`) that comes back after each action, so you can do several things in one sitting:
   - Copy my email to your clipboard
   - Send me an email (`mailto:`)
   - Open my GitHub / LinkedIn
   - View my resume
   - Save my contact as a `.vcf` (opens in Contacts)
   - Show a scannable contact **QR code**
-  - Quit
+  - Quit (or press Ctrl+C at any time)
 
 The animation, network fetch, and prompt are all skipped automatically when output isn't a TTY (piped, CI, or `--no-prompt`), so it stays fast and never blocks scripts.
 
+## Design
+
+Colours come from [`@brignano/design`](https://github.com/brignano/design), the
+shared design system behind `brignano.io`, and follow its "one hue, one meaning"
+rule: the banner is the monogram and takes the larch-amber **mark**; anything you
+can act on (links, the selected menu row) is **cobalt**; confirmations are
+**forest**, failures are **rust**, and everything else sits on the neutral ramp.
+The hex values live in one place, `src/tokens.ts`, named after the CSS custom
+properties they mirror; the dark set is the default and the light set is picked
+when the terminal advertises a light background via `COLORFGBG`.
+
+Icons come in three tiers so nothing ever renders as an empty box: full Unicode
+where the terminal supports it; a set drawn from the blocks the legacy Windows
+console's font does cover (it draws `★`, `›` and arrows fine, just not `❯` or
+`✔`); and plain ASCII on the Linux kernel console.
+
 ## CLI
 
 Run `npx brignano --help` to see this list.
@@ -81,12 +97,17 @@ node dist/card.js
 > TypeScript directly, no build step), or `npm run build` first. To exercise the
 > published package instead, run `npx brignano` from any other directory.
 
+The recording in `demo.gif` is produced by `vhs/demo.tape`. Re-record it from
+the Actions tab (**Demo GIF → Run workflow**) after a visual change lands; the
+workflow renders it on a Linux runner and pushes the new file back, so VHS
+doesn't need to be installed locally.
+
 Source lives in `src/` (split into small modules — `card.ts` is the entry/`bin`
 target) and compiles to `dist/` via `tsc`. `npm run dev` runs the TypeScript
 directly through `tsx`; `npm run lint` and `npm run format` use
 [Biome](https://biomejs.dev).
 
-Only `dist/` is published — the tarball is ~8 kB, so `npx brignano` stays a fast
+Only `dist/` is published — the tarball is ~13 kB, so `npx brignano` stays a fast
 cold start.
 
 ## Prerequisites