design: updated design docs
This commit is contained in:
@@ -0,0 +1,212 @@
|
||||
# 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)
|
||||
```jsx
|
||||
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:
|
||||
|
||||
```jsx
|
||||
// BEFORE — both the 'single' and 'two' topbar variants:
|
||||
<div className="brand-mark" style={{ background: accent }}>S</div>
|
||||
```
|
||||
|
||||
Replace each with the live component:
|
||||
|
||||
```jsx
|
||||
// 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):
|
||||
```jsx
|
||||
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)
|
||||
```bash
|
||||
# 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`)
|
||||
```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)
|
||||
```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 */
|
||||
</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:
|
||||
```jsx
|
||||
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.
|
||||
Reference in New Issue
Block a user