design: first impl of logo, still with glitch

crates/lanspread-tauri-deno-ts/src/components/Brand.tsx

@@ -1,10 +1,13 @@
+import { LiveLogo } from './LiveLogo';
+
 interface Props {
+    accent: string;
     peerCount: number;
 }
 
-export const Brand = ({ peerCount }: Props) => (
+export const Brand = ({ accent, peerCount }: Props) => (
     <div className="brand">
-        <div className="brand-mark">S</div>
+        <LiveLogo className="brand-mark" accent={accent} size={28} />
         <div className="brand-name">SoftLAN</div>
         {peerCount > 0 && (
             <span

crates/lanspread-tauri-deno-ts/src/components/LiveLogo.tsx

@@ -0,0 +1,275 @@
+// The LIVE animated pixel "S" for SoftLAN. At rest it is the baseline pixel S;
+// on hover (and at random idle moments) it "comes alive": it slithers like the
+// game Snake across the 5×5 grid and reforms, glitches sideways, or splits into
+// an RGB datamosh. Exposes play(trick) via ref.
+//
+// Grid geometry matches the static marks in design/design_reference/logo/assets
+// exactly (viewBox 0 0 100 100, cell 17, offset 7.5, gap 2.4, radius 3) so the
+// swap between the static and animated S is pixel-identical.
+
+import {
+    useCallback,
+    useEffect,
+    useImperativeHandle,
+    useRef,
+    useState,
+    type ReactElement,
+    type Ref,
+} from 'react';
+
+// ── shared grid geometry ──
+const LCELL = 17;
+const LOFF = 7.5;
+const LGAP = 2.4;
+const LR = 3;
+const LSIZE = LCELL - LGAP; // 14.6
+
+// the "S" as an ORDERED walk (tail → head). Each step is grid-adjacent.
+// head = (0,4) bottom-left, tail = (4,0) top-right.
+const SORD: ReadonlyArray<readonly [number, number]> = [
+    [4, 0], [3, 0], [2, 0], [1, 0], [0, 0], // top bar    (R→L)
+    [0, 1],                                  // left drop
+    [0, 2], [1, 2], [2, 2], [3, 2], [4, 2], // middle bar (L→R)
+    [4, 3],                                  // right drop
+    [4, 4], [3, 4], [2, 4], [1, 4], [0, 4], // bottom bar (R→L)
+];
+
+// boustrophedon sweep of the whole 5×5 board, (0,4) → (4,0) — the Snake "playfield".
+const BOUS: ReadonlyArray<readonly [number, number]> = (() => {
+    const b: Array<[number, number]> = [];
+    for (let col = 0; col < 5; col++) {
+        const rows = col % 2 === 0 ? [4, 3, 2, 1, 0] : [0, 1, 2, 3, 4];
+        rows.forEach(r => b.push([col, r]));
+    }
+    return b; // 25 cells, b[0]=(0,4), b[24]=(4,0)
+})();
+
+// full head path P: lay the S, sweep the board, re-lay the S.
+const PATH: ReadonlyArray<readonly [number, number]> = (() => {
+    const p: Array<[number, number]> = SORD.map(c => [c[0], c[1]]); // 0..16  (full S)
+    for (let i = 1; i < BOUS.length; i++) p.push([BOUS[i][0], BOUS[i][1]]); // 17..40
+    for (let i = 1; i < SORD.length; i++) p.push([SORD[i][0], SORD[i][1]]); // 41..56
+    return p; // length 57
+})();
+const I0 = 16;
+const I1 = PATH.length - 1; // animate head index 16 → 56
+
+// snake length schedule: full S → short snake → full S
+function lenAt(i: number): number {
+    if (i <= 16) return 17;
+    if (i <= 26) return Math.round(17 + (7 - 17) * ((i - 16) / 10));
+    if (i <= 40) return 7;
+    if (i <= 56) return Math.round(7 + (17 - 7) * ((i - 40) / 16));
+    return 17;
+}
+
+// hex → rgb mixed toward white(t>0)/black(t<0)
+function lshade(hex: string, t: number): string {
+    let h = (hex || '#000').replace('#', '');
+    if (h.length === 3) h = h.split('').map(x => x + x).join('');
+    let r = parseInt(h.slice(0, 2), 16);
+    let g = parseInt(h.slice(2, 4), 16);
+    let b = parseInt(h.slice(4, 6), 16);
+    const tgt = t >= 0 ? 255 : 0;
+    const a = Math.min(1, Math.abs(t));
+    r = Math.round(r + (tgt - r) * a);
+    g = Math.round(g + (tgt - g) * a);
+    b = Math.round(b + (tgt - b) * a);
+    return `rgb(${r},${g},${b})`;
+}
+
+function px(col: number, row: number): { x: number; y: number } {
+    return { x: LOFF + col * LCELL + LGAP / 2, y: LOFF + row * LCELL + LGAP / 2 };
+}
+
+interface CellProps {
+    col: number;
+    row: number;
+    fill: string;
+    opacity?: number;
+    dx?: number;
+    dy?: number;
+    w?: number;
+    h?: number;
+    rx?: number;
+}
+
+function Cell({ col, row, fill, opacity = 1, dx = 0, dy = 0, w = LSIZE, h = LSIZE, rx = LR }: CellProps) {
+    const { x, y } = px(col, row);
+    return <rect x={x + dx} y={y + dy} width={w} height={h} rx={rx} fill={fill} opacity={opacity} />;
+}
+
+// ── renderers ──
+function renderStatic(accent: string): ReactElement[] {
+    return SORD.map(([c, r], i) => <Cell key={i} col={c} row={r} fill={accent} />);
+}
+
+function renderSnake(p: number, accent: string): ReactElement[] {
+    const i = Math.min(I1, Math.max(I0, I0 + Math.round(p * (I1 - I0))));
+    const L = lenAt(i);
+    const start = Math.max(0, i - L + 1);
+    const body = PATH.slice(start, i + 1);
+    const n = body.length;
+    return body.map((cell, j) => {
+        const t = n > 1 ? j / (n - 1) : 1;             // 0 tail → 1 head
+        const fill = lshade(accent, (t - 0.45) * 0.5); // head brighter, tail darker
+        const opacity = 0.42 + 0.58 * t;
+        const isHead = j === n - 1;
+        const grow = isHead ? 1.06 : 1;
+        const s = LSIZE * grow;
+        const d = (LSIZE - s) / 2;
+        return <Cell key={j} col={cell[0]} row={cell[1]} fill={fill} opacity={opacity} dx={d} dy={d} w={s} h={s} />;
+    });
+}
+
+const GLX = [11, -7, 13, -5, 9]; // per-row horizontal kick
+function renderGlitch(p: number, accent: string): ReactElement[] {
+    const burst = Math.max(0, 1 - p) * (0.45 + 0.55 * Math.abs(Math.sin(p * 26)));
+    return SORD.map(([c, r], i) => {
+        const dx = GLX[r] * burst;
+        const drop = burst > 0.55 && Math.sin(i * 12.9 + p * 50) > 0.82; // occasional dropout
+        const flick = 0.7 + 0.3 * Math.abs(Math.sin(p * 70 + i));
+        return <Cell key={i} col={c} row={r} fill={accent} opacity={drop ? 0.12 : flick} dx={dx} />;
+    });
+}
+
+function renderRGB(p: number, accent: string): ReactElement[] {
+    const burst = Math.pow(Math.max(0, 1 - p), 1.25);
+    const jit = Math.sin(p * 52) * 0.5 + Math.sin(p * 31) * 0.5;
+    const off = (4.5 + 2.5 * jit) * burst;
+    const voff = 1.6 * jit * burst;
+    const layers = [
+        { fill: '#ff2d55', dx: -off, dy: -voff, op: 0.8 },
+        { fill: '#21e3a8', dx: off, dy: voff, op: 0.8 },
+        { fill: accent, dx: 0, dy: 0, op: 1 },
+    ];
+    return layers.flatMap((ly, li) =>
+        SORD.map(([c, r], i) => (
+            <g key={`${li}-${i}`} style={{ mixBlendMode: li < 2 ? 'screen' : 'normal' }}>
+                <Cell col={c} row={r} fill={ly.fill} opacity={ly.op} dx={ly.dx} dy={ly.dy} />
+            </g>
+        ))
+    );
+}
+
+export type Trick = 'snake' | 'rgb' | 'glitch';
+
+const RENDER: Record<Trick, (p: number, accent: string) => ReactElement[]> = {
+    snake: renderSnake,
+    glitch: renderGlitch,
+    rgb: renderRGB,
+};
+const TRICK_DUR: Record<Trick, number> = { snake: 2600, glitch: 1100, rgb: 1350 };
+const POOL: ReadonlyArray<Trick> = ['snake', 'snake', 'snake', 'rgb', 'glitch']; // snake-weighted
+function randomTrick(): Trick {
+    return POOL[Math.floor(Math.random() * POOL.length)];
+}
+
+const prefersReducedMotion = (): boolean =>
+    typeof window !== 'undefined' &&
+    typeof window.matchMedia === 'function' &&
+    window.matchMedia('(prefers-reduced-motion: reduce)').matches;
+
+export interface LiveLogoHandle {
+    /** Trigger a specific trick (ignored if one is already playing). */
+    play: (trick: Trick) => void;
+    isPlaying: () => boolean;
+}
+
+interface Props {
+    /** The S color (any CSS color). Wire this to the theme accent. */
+    accent?: string;
+    /** Rendered width/height in px (square SVG). */
+    size?: number;
+    /** When true, plays a random trick by itself every idleMin–idleMax ms. */
+    idleAuto?: boolean;
+    idleMin?: number;
+    idleMax?: number;
+    className?: string;
+    /** Accessible label for the brand mark. */
+    label?: string;
+    ref?: Ref<LiveLogoHandle>;
+}
+
+export function LiveLogo({
+    accent = '#3b82f6',
+    size = 140,
+    idleAuto = true,
+    idleMin = 5000,
+    idleMax = 11000,
+    className,
+    label = 'SoftLAN',
+    ref,
+}: Props) {
+    const [anim, setAnim] = useState<{ trick: Trick; p: number } | null>(null);
+    const [reduce, setReduce] = useState(prefersReducedMotion);
+    const rafRef = useRef(0);
+    const playingRef = useRef(false);
+
+    const play = useCallback((trick: Trick) => {
+        if (playingRef.current) return;
+        playingRef.current = true;
+        const dur = TRICK_DUR[trick];
+        const t0 = performance.now();
+        const step = (now: number) => {
+            const p = (now - t0) / dur;
+            if (p >= 1) {
+                setAnim(null);
+                playingRef.current = false;
+                return;
+            }
+            setAnim({ trick, p });
+            rafRef.current = requestAnimationFrame(step);
+        };
+        setAnim({ trick, p: 0 });
+        rafRef.current = requestAnimationFrame(step);
+    }, []);
+
+    useImperativeHandle(ref, () => ({ play, isPlaying: () => playingRef.current }), [play]);
+
+    // Track prefers-reduced-motion live so toggling the OS setting takes effect.
+    useEffect(() => {
+        if (typeof window === 'undefined' || typeof window.matchMedia !== 'function') return;
+        const mq = window.matchMedia('(prefers-reduced-motion: reduce)');
+        const onChange = () => setReduce(mq.matches);
+        onChange();
+        mq.addEventListener('change', onChange);
+        return () => mq.removeEventListener('change', onChange);
+    }, []);
+
+    // Idle auto-play on a jittered timer — paused in hidden tabs and when the
+    // user prefers reduced motion (at rest it stays a clean static S).
+    useEffect(() => {
+        if (!idleAuto || reduce) return;
+        let timer: ReturnType<typeof setTimeout>;
+        const schedule = () => {
+            timer = setTimeout(() => {
+                if (!document.hidden && !playingRef.current) play(randomTrick());
+                schedule();
+            }, idleMin + Math.random() * (idleMax - idleMin));
+        };
+        schedule();
+        return () => clearTimeout(timer);
+    }, [idleAuto, idleMin, idleMax, reduce, play]);
+
+    useEffect(() => () => cancelAnimationFrame(rafRef.current), []);
+
+    const content = anim ? RENDER[anim.trick](anim.p, accent) : renderStatic(accent);
+
+    return (
+        <svg
+            viewBox="0 0 100 100"
+            width={size}
+            height={size}
+            fill="none"
+            role="img"
+            aria-label={label}
+            className={className}
+            style={{ cursor: 'pointer', overflow: 'visible' }}
+            onMouseEnter={() => { if (!reduce) play(randomTrick()); }}
+            onClick={() => { if (!reduce) play('snake'); }}
+        >
+            {content}
+        </svg>
+    );
+}

crates/lanspread-tauri-deno-ts/src/components/topbar/TopBar.tsx

@@ -8,6 +8,7 @@ import { FilterCounts } from '../../lib/gameState';
 import { GameFilter, GameSort } from '../../lib/types';
 
 interface Props {
+    accent: string;
     peerCount: number;
     filter: GameFilter;
     setFilter: (value: GameFilter) => void;
@@ -20,6 +21,7 @@ interface Props {
 }
 
 export const TopBar = ({
+    accent,
     peerCount,
     filter,
     setFilter,
@@ -32,7 +34,7 @@ export const TopBar = ({
 }: Props) => (
     <header className="topbar">
         <div className="topbar-left">
-            <Brand peerCount={peerCount} />
+            <Brand accent={accent} peerCount={peerCount} />
             <div className="topbar-left-trail">
                 <SegmentedFilters value={filter} onChange={setFilter} counts={counts} />
             </div>