lanspread/design/logo/INTEGRATION.md

SoftLAN — Logo handoff

The SoftLAN mark is a pixelated “S” (5×5 grid) that, at rest, is a static icon — but periodically and on hover it comes alive: it dissolves into a single segment that slithers across the board like the game Snake, then re-lays itself back into the S. Two shorter “glitch” flickers add variety.

This folder is everything an engineer/agent needs to ship it.

logo_handoff/
├── pixel-live.jsx          ← the live React component (the deliverable)
├── demo.html               ← open in a browser to see it in motion + in context
├── INTEGRATION.md          ← this file
└── assets/
    ├── softlan-mark.svg         static S, fill="currentColor" (inline use)
    ├── softlan-mark-blue.svg    static S, fixed #3b82f6 (img/favicon use)
    ├── softlan-tile.svg         rounded app-icon tile, gradient + white S
    ├── softlan-lockup.svg       full lockup (tile + SoftLAN + LAUNCHER), on dark
    ├── softlan-lockup-ink.svg   full lockup for light backgrounds
    └── favicon.svg              = tile (drop-in favicon)

---

1. The live component — pixel-live.jsx

A single React component, LiveLogo. No build step assumed in the demo (it’s loaded via Babel-in-browser), but the source is plain JSX — drop it into your normal React/TS toolchain and it compiles as-is.

Props

prop	type	default	notes
accent	string	#3b82f6	the S color (any CSS color). Wire this to your theme accent.
size	number	140	rendered width/height in px (it’s a square SVG).
idleAuto	boolean	true	when true, plays a random trick by itself every idleMin–idleMax ms.
idleMin	number	5000	min ms between idle auto-plays.
idleMax	number	11000	max ms between idle auto-plays.

Behavior (built in)

• Rest: renders the static pixel S in accent.
• Hover: plays a random trick (snake-weighted).
• Click: plays the snake trick.
• Idle: if idleAuto, fires a random trick on a 5–11s jitter — but only while the tab is visible (document.hidden guard), so background tabs stay quiet.
• It never overlaps plays (a playing guard ignores triggers mid-animation).

Imperative API (ref)

const logo = useRef(null);
// ...
<LiveLogo ref={logo} accent="#3b82f6" size={32} />
// trigger a specific trick on demand:
logo.current.play('snake');   // 'snake' | 'rgb' | 'glitch'
logo.current.isPlaying();     // boolean

Tricks

• snake (~2.6s) — the headline animation. S → slither across the 5×5 board → S.
• rgb (~1.35s) — chromatic-aberration split that settles back to clean.
• glitch (~1.1s) — rows tear/kick sideways, then snap back.

Edit the POOL array near the bottom of the file to change which tricks the random picker uses (and their weighting), and TRICK_DUR to retune durations.

---

2. Wiring it into the launcher

The current brand mark in launcher.jsx is a placeholder div:

// BEFORE — both the 'single' and 'two' topbar variants:
<div className="brand-mark" style={{ background: accent }}>S</div>

Replace each with the live component:

// AFTER:
<LiveLogo accent={accent} size={28} />

• Pass the existing accent tweak straight through — the mark recolors live.
• size={28} matches the current 28px brand-mark box; adjust to taste.
• Drop the old .brand-mark background/letter CSS (the SVG is self-contained).
• The component is small and animates only on hover/idle, so it’s fine to mount one instance per topbar. If you want the whole header to react to a single event, share one ref and call .play().

Import at the top of the file (or via your bundler):

import { LiveLogo } from './pixel-live'; // if you convert exports to ES modules

The file currently attaches LiveLogo to window for the no-build demo — swap the final Object.assign(window, …) line for export { LiveLogo } in a module build.

---

3. Static assets (assets/)

For places that must be static — favicons, OS app icons, store listings, loading splash, OG images, anywhere JS isn’t running:

• softlan-tile.svg — the rounded app-icon tile (gradient + white S). Use this for the favicon, dock/taskbar icon, and installer art. favicon.svg is an identical copy for convenient <link rel="icon">.
• softlan-mark-blue.svg — just the S in brand blue, transparent bg. Use in <img> tags and anywhere you need a fixed color.
• softlan-mark.svg — the S with fill="currentColor". Only inherits color when inlined into the DOM (inline <svg> or an SVG-as-component); via <img src> it won’t pick up currentColor. Best for inline React/JSX use where you want it to follow text/theme color.

Geometry note: all static marks use the exact same grid as the live component (viewBox 0 0 100 100, cell 17, offset 7.5, gap 2.4, radius 3), so the static and animated S are pixel-identical — no jump when the live one mounts.

Generating raster PNGs (if your pipeline needs them)

# requires librsvg (rsvg-convert) or Inkscape
rsvg-convert -w 512 -h 512 assets/softlan-tile.svg  > icon-512.png
rsvg-convert -w 256 -h 256 assets/softlan-tile.svg  > icon-256.png
rsvg-convert -w  32 -h  32 assets/favicon.svg       > favicon-32.png

---

4. The logo lockup (icon + wordmark)

The full logo is the gradient app-tile + the “SoftLAN” wordmark, with a tracked-out “LAUNCHER” beneath. This is the canonical lockup — use it for the top bar, About screen, installer, store header, splash, etc.

Exact spec

part	value
tile	rounded square, radius = round(size·0.225), the accent gradient (linear-gradient(155deg, mix(accent,white 22%) → accent 52% → mix(accent,black 28%))), white pixel S at round(size·0.62)
gap tile → text	size·0.32
wordmark	system font (-apple-system, "Segoe UI", system-ui), 700, font-size ≈ tile·0.568 (25px at a 44px tile), letter-spacing -0.01em
“Soft” color	#e6edf3 on dark UI · #0a0e13 on light UI
“LAN” color	the accent (#3b82f6) — always
“LAUNCHER”	system font, 700, font-size = wordmark·0.42, letter-spacing 0.34em, UPPERCASE, #6b7785 (dark) / #8b97a6 (light)

The wordmark is set in the system UI sans on purpose (it sits inline in the chrome). If you need a fixed, OS-independent render — store art, OG images, anywhere the system font isn’t guaranteed — use the SVG assets below, which carry the same metrics. For pixel-perfect raster, set the wordmark in your design tool and export, since system-ui varies by platform.

Drop-in React (from pixel-live.jsx)

import { Lockup, Wordmark } from './pixel-live';

// full lockup, mark stays alive inside the tile:
<Lockup accent="#3b82f6" tile={44} />            // on dark (default)
<Lockup accent="#3b82f6" tile={64} light={false} /> // on light bg
<Lockup accent="#3b82f6" tile={30} sub={false} />   // compact, no "LAUNCHER"
<Lockup live={false} />                            // static S in the tile

// just the lettering (e.g. next to the bare LiveLogo in a slim top bar):
<Wordmark accent="#3b82f6" size={19} />

Lockup props: accent, tile (px), light (true=dark UI), sub (show “LAUNCHER”), live (animate the mark). Wordmark props: accent, size, light, sub.

Plain CSS/HTML (no React)

<span class="sl-wm">Soft<b>LAN</b></span>
<style>
  .sl-wm   { font: 700 25px/1 -apple-system, "Segoe UI", system-ui, sans-serif;
             letter-spacing: -0.01em; color: #e6edf3; }   /* #0a0e13 on light */
  .sl-wm b { color: #3b82f6; font-weight: 700; }           /* the accent */
</style>

Static SVG

• assets/softlan-lockup.svg — full lockup for dark backgrounds.
• assets/softlan-lockup-ink.svg — same lockup for light backgrounds (“Soft” goes ink-dark; “LAN” stays accent).

Both are self-contained, baked to brand blue #3b82f6. To re-tint, edit the three linearGradient stops and the “LAN” fill.

---

5. Accessibility & motion

• The static SVGs carry role="img" + aria-label="SoftLAN". Give the live component an accessible label in its host (e.g. wrap with aria-label), since it’s decorative motion over a brand mark.
• The idle auto-play already pauses in hidden tabs. If you want to fully respect prefers-reduced-motion, gate the triggers:

  const reduce = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
  <LiveLogo idleAuto={!reduce} /* and skip the hover/click play when reduce */ />
  

  At rest it’s a clean static S, so reduced-motion users simply get the icon.

---

6. Quick check

Open demo.html in any browser: hover the big mark (or wait), use the trick buttons, and try the accent swatches. The small mark in the mock top bar is the same component at size={30} — that’s exactly how it looks in the launcher. The logo lockup card shows the full icon-plus-wordmark on dark and light, at several sizes, and recolors live with the accent swatches.