ddidderr/lanspread
1
0
Fork 0
Code Issues 6 Pull Requests Actions Packages Projects Releases Wiki Activity

markdown formatting

Browse Source
This commit is contained in:
ddidderr
2026-08-09 16:16:45 +02:00
parent f4a6259cf3
commit 18dd3b7e07
21 changed files with 1630 additions and 893 deletions
Download Patch File Download Diff File Expand all files Collapse all files
design/logo/INTEGRATION.md
+71 -42
View File
@@ -2,12 +2,12 @@
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
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.
```
```text
logo_handoff/
├── pixel-live.jsx ← the live React component (the deliverable)
├── demo.html ← open in a browser to see it in motion + in context
@@ -31,34 +31,39 @@ 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. |
| 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.
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)
```jsx
const logo = useRef(null);
// ...
<LiveLogo ref={logo} accent="#3b82f6" size={32} />
<LiveLogo ref={logo} accent="#3b82f6" size={32} />;
// trigger a specific trick on demand:
logo.current.play('snake'); // 'snake' | 'rgb' | 'glitch'
logo.current.isPlaying(); // boolean
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.
- `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.
@@ -73,7 +78,9 @@ The current brand mark in `launcher.jsx` is a placeholder div:
```jsx
// BEFORE — both the 'single' and 'two' topbar variants:
<div className="brand-mark" style={{ background: accent }}>S</div>
<div className="brand-mark" style={{ background: accent }}>
S
</div>
```
Replace each with the live component:
@@ -91,19 +98,21 @@ Replace each with the live component:
event, share one `ref` and call `.play()`.
Import at the top of the file (or via your bundler):
```jsx
import { LiveLogo } from './pixel-live'; // if you convert exports to ES modules
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.
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:
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
@@ -120,6 +129,7 @@ Geometry note: all static marks use the exact same grid as the live component
and animated S are pixel-identical — no jump when the live one mounts.
### Generating raster PNGs (if your pipeline needs them)
```bash
# requires librsvg (rsvg-convert) or Inkscape
rsvg-convert -w 512 -h 512 assets/softlan-tile.svg > icon-512.png
@@ -136,22 +146,24 @@ tracked-out “LAUNCHER” beneath. This is the canonical lockup — use it for
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.
| 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`)
```jsx
import { Lockup, Wordmark } from './pixel-live';
@@ -164,21 +176,34 @@ import { Lockup, Wordmark } from './pixel-live';
// 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)
```html
<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 */
.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).
@@ -195,10 +220,14 @@ three `linearGradient` stops and the “LAN” `fill`.
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:
```jsx
const reduce = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
<LiveLogo idleAuto={!reduce} /* and skip the hover/click play when reduce */ />
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.
---
@@ -207,6 +236,6 @@ three `linearGradient` stops and the “LAN” `fill`.
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.
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.