diff --git a/mascot/README.md b/mascot/README.md index 5520a8c..bad99af 100644 --- a/mascot/README.md +++ b/mascot/README.md @@ -61,6 +61,21 @@ by hand. Every piece comes in three forms: | `walk/patch-walk-animated` (0.96 s loop) | `.svg` (6.9 MB), `.webp` 512 × 352 | `.webp` 256 × 176 | `.svg` (1.2 MB), `.svgz` (2.6 MB), `.webp` 256 × 176 | | `walk/frames/patch-walk-0N` (eight frames) | `.svg` and `.png` 1024 × 704 | `.png` 256 × 176 | `.svg` and `.svgz` | +### Walking left (from the walk cycle) + +The approved left-facing walk, for anything that moves Patch to the left (a pet that follows the +pointer, a loan heading back). It is the walk cycle mirrored exactly by the script, never by hand, so +it shows Patch's other side. Same sizes, frames and timing as the walk cycle: + +| File | Full | Original | Compressed | +|---|---|---|---| +| `walk-left/patch-walk-left` (walking pose) | `.svg`, `.png` 1920 × 1440 | `.png` 480 × 360 | `.svg`, `.svgz` | +| `walk-left/patch-walk-left-animated` (0.96 s loop) | `.svg`, `.webp` 512 × 352 | `.webp` 256 × 176 | `.svg`, `.svgz`, `.webp` 256 × 176 | +| `walk-left/frames/patch-walk-left-0N` (eight frames) | `.svg` and `.png` 1024 × 704 | `.png` 256 × 176 | `.svg` and `.svgz` | + +Frame N of `walk-left/` is frame N of `walk/` facing the other way, on the same ground line, so you +can switch direction mid-stride without a jump. + **Which one to use:** - **Product UI** (apps, the web, chat): the animated **WebP**, or `compressed/` for the lightest. @@ -96,6 +111,8 @@ node scripts/cut-mascot.mjs Pass `concept` or `walk` to rebuild just one sheet. If a new sheet has a different layout, update its boxes in `SHEETS` at the top of the script first. A higher-resolution sheet gives finer vectors. +Rebuilding the walk also rebuilds `walk-left/`; pass `walk-left` to rebuild only that, from the current +walk files, in a few seconds and without tracing. **How faithful the vectors are.** The trace settings were chosen by rendering each candidate and scoring it against the sheet pixel by pixel. At the chosen settings about 0.27% of pixels differ visibly. Going @@ -160,7 +177,8 @@ Patch is the friendly face of the product. **The box symbol is still the logo.** ## Keep Patch intact 1. **Don't** recolour, filter or redraw Patch. Use these files as they are. -2. **Don't** stretch, skew or mirror Patch. The coat is asymmetric on purpose. +2. **Don't** stretch, skew or mirror Patch. The coat is asymmetric on purpose. To show Patch heading + left, use the approved `walk-left/` files; never flip the other files with CSS or an editor. 3. **Don't** add shadows, glows, gradients or outlines. 4. **Don't** make Patch fierce: no bared teeth, angry brows or hunting poses. 5. **Don't** scale up the PNGs or WebPs past their size. Use the full SVGs when you need bigger. diff --git a/mascot/compressed/walk-left/frames/patch-walk-left-01.svg b/mascot/compressed/walk-left/frames/patch-walk-left-01.svg new file mode 100644 index 0000000..98c642d --- /dev/null +++ b/mascot/compressed/walk-left/frames/patch-walk-left-01.svg @@ -0,0 +1 @@ +Patch, the Space Works mascot, walking left diff --git a/mascot/compressed/walk-left/frames/patch-walk-left-01.svgz b/mascot/compressed/walk-left/frames/patch-walk-left-01.svgz new file mode 100644 index 0000000..b0e860f Binary files /dev/null and b/mascot/compressed/walk-left/frames/patch-walk-left-01.svgz differ diff --git a/mascot/compressed/walk-left/frames/patch-walk-left-02.svg b/mascot/compressed/walk-left/frames/patch-walk-left-02.svg new file mode 100644 index 0000000..7513994 --- /dev/null +++ b/mascot/compressed/walk-left/frames/patch-walk-left-02.svg @@ -0,0 +1 @@ +Patch, the Space Works mascot, walking left diff --git a/mascot/compressed/walk-left/frames/patch-walk-left-02.svgz b/mascot/compressed/walk-left/frames/patch-walk-left-02.svgz new file mode 100644 index 0000000..b1b59a8 Binary files /dev/null and b/mascot/compressed/walk-left/frames/patch-walk-left-02.svgz differ diff --git a/mascot/compressed/walk-left/frames/patch-walk-left-03.svg b/mascot/compressed/walk-left/frames/patch-walk-left-03.svg new file mode 100644 index 0000000..8484bd6 --- /dev/null +++ b/mascot/compressed/walk-left/frames/patch-walk-left-03.svg @@ -0,0 +1 @@ +Patch, the Space Works mascot, walking left diff --git a/mascot/compressed/walk-left/frames/patch-walk-left-03.svgz b/mascot/compressed/walk-left/frames/patch-walk-left-03.svgz new file mode 100644 index 0000000..3b0a2be Binary files /dev/null and b/mascot/compressed/walk-left/frames/patch-walk-left-03.svgz differ diff --git a/mascot/compressed/walk-left/frames/patch-walk-left-04.svg b/mascot/compressed/walk-left/frames/patch-walk-left-04.svg new file mode 100644 index 0000000..c462e90 --- /dev/null +++ b/mascot/compressed/walk-left/frames/patch-walk-left-04.svg @@ -0,0 +1 @@ +Patch, the Space Works mascot, walking left diff --git a/mascot/compressed/walk-left/frames/patch-walk-left-04.svgz b/mascot/compressed/walk-left/frames/patch-walk-left-04.svgz new file mode 100644 index 0000000..e5670c4 Binary files /dev/null and b/mascot/compressed/walk-left/frames/patch-walk-left-04.svgz differ diff --git a/mascot/compressed/walk-left/frames/patch-walk-left-05.svg b/mascot/compressed/walk-left/frames/patch-walk-left-05.svg new file mode 100644 index 0000000..ea7396c --- /dev/null +++ b/mascot/compressed/walk-left/frames/patch-walk-left-05.svg @@ -0,0 +1 @@ +Patch, the Space Works mascot, walking left diff --git a/mascot/compressed/walk-left/frames/patch-walk-left-05.svgz b/mascot/compressed/walk-left/frames/patch-walk-left-05.svgz new file mode 100644 index 0000000..15385fa Binary files /dev/null and b/mascot/compressed/walk-left/frames/patch-walk-left-05.svgz differ diff --git a/mascot/compressed/walk-left/frames/patch-walk-left-06.svg b/mascot/compressed/walk-left/frames/patch-walk-left-06.svg new file mode 100644 index 0000000..a8644b7 --- /dev/null +++ b/mascot/compressed/walk-left/frames/patch-walk-left-06.svg @@ -0,0 +1 @@ +Patch, the Space Works mascot, walking left diff --git a/mascot/compressed/walk-left/frames/patch-walk-left-06.svgz b/mascot/compressed/walk-left/frames/patch-walk-left-06.svgz new file mode 100644 index 0000000..d11f385 Binary files /dev/null and b/mascot/compressed/walk-left/frames/patch-walk-left-06.svgz differ diff --git a/mascot/compressed/walk-left/frames/patch-walk-left-07.svg b/mascot/compressed/walk-left/frames/patch-walk-left-07.svg new file mode 100644 index 0000000..a37c373 --- /dev/null +++ b/mascot/compressed/walk-left/frames/patch-walk-left-07.svg @@ -0,0 +1 @@ +Patch, the Space Works mascot, walking left diff --git a/mascot/compressed/walk-left/frames/patch-walk-left-07.svgz b/mascot/compressed/walk-left/frames/patch-walk-left-07.svgz new file mode 100644 index 0000000..fadb5c9 Binary files /dev/null and b/mascot/compressed/walk-left/frames/patch-walk-left-07.svgz differ diff --git a/mascot/compressed/walk-left/frames/patch-walk-left-08.svg b/mascot/compressed/walk-left/frames/patch-walk-left-08.svg new file mode 100644 index 0000000..f9520b0 --- /dev/null +++ b/mascot/compressed/walk-left/frames/patch-walk-left-08.svg @@ -0,0 +1 @@ +Patch, the Space Works mascot, walking left diff --git a/mascot/compressed/walk-left/frames/patch-walk-left-08.svgz b/mascot/compressed/walk-left/frames/patch-walk-left-08.svgz new file mode 100644 index 0000000..b2a357f Binary files /dev/null and b/mascot/compressed/walk-left/frames/patch-walk-left-08.svgz differ diff --git a/mascot/compressed/walk-left/patch-walk-left-animated.svg b/mascot/compressed/walk-left/patch-walk-left-animated.svg new file mode 100644 index 0000000..b18b325 --- /dev/null +++ b/mascot/compressed/walk-left/patch-walk-left-animated.svg @@ -0,0 +1 @@ +Patch, the Space Works mascot, walking left with a wrench diff --git a/mascot/compressed/walk-left/patch-walk-left-animated.svgz b/mascot/compressed/walk-left/patch-walk-left-animated.svgz new file mode 100644 index 0000000..709866c Binary files /dev/null and b/mascot/compressed/walk-left/patch-walk-left-animated.svgz differ diff --git a/mascot/compressed/walk-left/patch-walk-left-animated.webp b/mascot/compressed/walk-left/patch-walk-left-animated.webp new file mode 100644 index 0000000..9e6261a Binary files /dev/null and b/mascot/compressed/walk-left/patch-walk-left-animated.webp differ diff --git a/mascot/compressed/walk-left/patch-walk-left.svg b/mascot/compressed/walk-left/patch-walk-left.svg new file mode 100644 index 0000000..4e6e299 --- /dev/null +++ b/mascot/compressed/walk-left/patch-walk-left.svg @@ -0,0 +1 @@ +Patch, the Space Works mascot, walking left diff --git a/mascot/compressed/walk-left/patch-walk-left.svgz b/mascot/compressed/walk-left/patch-walk-left.svgz new file mode 100644 index 0000000..6a852cb Binary files /dev/null and b/mascot/compressed/walk-left/patch-walk-left.svgz differ diff --git a/mascot/original/walk-left/frames/patch-walk-left-01.png b/mascot/original/walk-left/frames/patch-walk-left-01.png new file mode 100644 index 0000000..dcdde5e Binary files /dev/null and b/mascot/original/walk-left/frames/patch-walk-left-01.png differ diff --git a/mascot/original/walk-left/frames/patch-walk-left-02.png b/mascot/original/walk-left/frames/patch-walk-left-02.png new file mode 100644 index 0000000..8b0f659 Binary files /dev/null and b/mascot/original/walk-left/frames/patch-walk-left-02.png differ diff --git a/mascot/original/walk-left/frames/patch-walk-left-03.png b/mascot/original/walk-left/frames/patch-walk-left-03.png new file mode 100644 index 0000000..6c0bb21 Binary files /dev/null and b/mascot/original/walk-left/frames/patch-walk-left-03.png differ diff --git a/mascot/original/walk-left/frames/patch-walk-left-04.png b/mascot/original/walk-left/frames/patch-walk-left-04.png new file mode 100644 index 0000000..4710cb0 Binary files /dev/null and b/mascot/original/walk-left/frames/patch-walk-left-04.png differ diff --git a/mascot/original/walk-left/frames/patch-walk-left-05.png b/mascot/original/walk-left/frames/patch-walk-left-05.png new file mode 100644 index 0000000..3e2e2bc Binary files /dev/null and b/mascot/original/walk-left/frames/patch-walk-left-05.png differ diff --git a/mascot/original/walk-left/frames/patch-walk-left-06.png b/mascot/original/walk-left/frames/patch-walk-left-06.png new file mode 100644 index 0000000..57dd880 Binary files /dev/null and b/mascot/original/walk-left/frames/patch-walk-left-06.png differ diff --git a/mascot/original/walk-left/frames/patch-walk-left-07.png b/mascot/original/walk-left/frames/patch-walk-left-07.png new file mode 100644 index 0000000..67c966d Binary files /dev/null and b/mascot/original/walk-left/frames/patch-walk-left-07.png differ diff --git a/mascot/original/walk-left/frames/patch-walk-left-08.png b/mascot/original/walk-left/frames/patch-walk-left-08.png new file mode 100644 index 0000000..6000e10 Binary files /dev/null and b/mascot/original/walk-left/frames/patch-walk-left-08.png differ diff --git a/mascot/original/walk-left/patch-walk-left-animated.webp b/mascot/original/walk-left/patch-walk-left-animated.webp new file mode 100644 index 0000000..eedeb14 Binary files /dev/null and b/mascot/original/walk-left/patch-walk-left-animated.webp differ diff --git a/mascot/original/walk-left/patch-walk-left.png b/mascot/original/walk-left/patch-walk-left.png new file mode 100644 index 0000000..b8e9909 Binary files /dev/null and b/mascot/original/walk-left/patch-walk-left.png differ diff --git a/mascot/walk-left/frames/patch-walk-left-01.png b/mascot/walk-left/frames/patch-walk-left-01.png new file mode 100644 index 0000000..18e20d7 Binary files /dev/null and b/mascot/walk-left/frames/patch-walk-left-01.png differ diff --git a/mascot/walk-left/frames/patch-walk-left-01.svg b/mascot/walk-left/frames/patch-walk-left-01.svg new file mode 100644 index 0000000..38d65d3 --- /dev/null +++ b/mascot/walk-left/frames/patch-walk-left-01.svg @@ -0,0 +1 @@ +Patch, the Space Works mascot, walking left diff --git a/mascot/walk-left/frames/patch-walk-left-02.png b/mascot/walk-left/frames/patch-walk-left-02.png new file mode 100644 index 0000000..a0a4f21 Binary files /dev/null and b/mascot/walk-left/frames/patch-walk-left-02.png differ diff --git a/mascot/walk-left/frames/patch-walk-left-02.svg b/mascot/walk-left/frames/patch-walk-left-02.svg new file mode 100644 index 0000000..ab80367 --- /dev/null +++ b/mascot/walk-left/frames/patch-walk-left-02.svg @@ -0,0 +1 @@ +Patch, the Space Works mascot, walking left diff --git a/mascot/walk-left/frames/patch-walk-left-03.png b/mascot/walk-left/frames/patch-walk-left-03.png new file mode 100644 index 0000000..8d0ad88 Binary files /dev/null and b/mascot/walk-left/frames/patch-walk-left-03.png differ diff --git a/mascot/walk-left/frames/patch-walk-left-03.svg b/mascot/walk-left/frames/patch-walk-left-03.svg new file mode 100644 index 0000000..f700c06 --- /dev/null +++ b/mascot/walk-left/frames/patch-walk-left-03.svg @@ -0,0 +1 @@ +Patch, the Space Works mascot, walking left diff --git a/mascot/walk-left/frames/patch-walk-left-04.png b/mascot/walk-left/frames/patch-walk-left-04.png new file mode 100644 index 0000000..8461c06 Binary files /dev/null and b/mascot/walk-left/frames/patch-walk-left-04.png differ diff --git a/mascot/walk-left/frames/patch-walk-left-04.svg b/mascot/walk-left/frames/patch-walk-left-04.svg new file mode 100644 index 0000000..94ed3f8 --- /dev/null +++ b/mascot/walk-left/frames/patch-walk-left-04.svg @@ -0,0 +1 @@ +Patch, the Space Works mascot, walking left diff --git a/mascot/walk-left/frames/patch-walk-left-05.png b/mascot/walk-left/frames/patch-walk-left-05.png new file mode 100644 index 0000000..39abc34 Binary files /dev/null and b/mascot/walk-left/frames/patch-walk-left-05.png differ diff --git a/mascot/walk-left/frames/patch-walk-left-05.svg b/mascot/walk-left/frames/patch-walk-left-05.svg new file mode 100644 index 0000000..8f7ab97 --- /dev/null +++ b/mascot/walk-left/frames/patch-walk-left-05.svg @@ -0,0 +1 @@ +Patch, the Space Works mascot, walking left diff --git a/mascot/walk-left/frames/patch-walk-left-06.png b/mascot/walk-left/frames/patch-walk-left-06.png new file mode 100644 index 0000000..d1cc254 Binary files /dev/null and b/mascot/walk-left/frames/patch-walk-left-06.png differ diff --git a/mascot/walk-left/frames/patch-walk-left-06.svg b/mascot/walk-left/frames/patch-walk-left-06.svg new file mode 100644 index 0000000..ec522e2 --- /dev/null +++ b/mascot/walk-left/frames/patch-walk-left-06.svg @@ -0,0 +1 @@ +Patch, the Space Works mascot, walking left diff --git a/mascot/walk-left/frames/patch-walk-left-07.png b/mascot/walk-left/frames/patch-walk-left-07.png new file mode 100644 index 0000000..f33fa13 Binary files /dev/null and b/mascot/walk-left/frames/patch-walk-left-07.png differ diff --git a/mascot/walk-left/frames/patch-walk-left-07.svg b/mascot/walk-left/frames/patch-walk-left-07.svg new file mode 100644 index 0000000..ad885d4 --- /dev/null +++ b/mascot/walk-left/frames/patch-walk-left-07.svg @@ -0,0 +1 @@ +Patch, the Space Works mascot, walking left diff --git a/mascot/walk-left/frames/patch-walk-left-08.png b/mascot/walk-left/frames/patch-walk-left-08.png new file mode 100644 index 0000000..9a3cd05 Binary files /dev/null and b/mascot/walk-left/frames/patch-walk-left-08.png differ diff --git a/mascot/walk-left/frames/patch-walk-left-08.svg b/mascot/walk-left/frames/patch-walk-left-08.svg new file mode 100644 index 0000000..9443aea --- /dev/null +++ b/mascot/walk-left/frames/patch-walk-left-08.svg @@ -0,0 +1 @@ +Patch, the Space Works mascot, walking left diff --git a/mascot/walk-left/patch-walk-left-animated.svg b/mascot/walk-left/patch-walk-left-animated.svg new file mode 100644 index 0000000..b5ca949 --- /dev/null +++ b/mascot/walk-left/patch-walk-left-animated.svg @@ -0,0 +1 @@ +Patch, the Space Works mascot, walking left with a wrench diff --git a/mascot/walk-left/patch-walk-left-animated.webp b/mascot/walk-left/patch-walk-left-animated.webp new file mode 100644 index 0000000..c5b4b44 Binary files /dev/null and b/mascot/walk-left/patch-walk-left-animated.webp differ diff --git a/mascot/walk-left/patch-walk-left.png b/mascot/walk-left/patch-walk-left.png new file mode 100644 index 0000000..56c4ebc Binary files /dev/null and b/mascot/walk-left/patch-walk-left.png differ diff --git a/mascot/walk-left/patch-walk-left.svg b/mascot/walk-left/patch-walk-left.svg new file mode 100644 index 0000000..d94a8bb --- /dev/null +++ b/mascot/walk-left/patch-walk-left.svg @@ -0,0 +1 @@ +Patch, the Space Works mascot, walking left diff --git a/site/scripts/cut-mascot.mjs b/site/scripts/cut-mascot.mjs index cb6404c..62db923 100644 --- a/site/scripts/cut-mascot.mjs +++ b/site/scripts/cut-mascot.mjs @@ -14,9 +14,13 @@ // // The loops are built from the frames as animated SVGs (CSS only, plays in ) and animated WebPs. // -// Run from site/ after replacing a sheet: node scripts/cut-mascot.mjs [concept|walk] +// walk-left/ is the approved left-facing walk: every walk file mirrored exactly (vectors, pixels and +// loops), so Patch can head left without anyone flipping the artwork by hand. It is rebuilt with the +// walk sheet, or on its own from the current walk files. +// +// Run from site/ after replacing a sheet: node scripts/cut-mascot.mjs [concept|walk|walk-left] // (no argument rebuilds both sheets; tracing the concept sheet takes a few minutes) -import { mkdirSync, rmSync, writeFileSync } from 'node:fs'; +import { mkdirSync, readFileSync, rmSync, writeFileSync } from 'node:fs'; import { gzipSync } from 'node:zlib'; import { dirname, join } from 'node:path'; import { fileURLToPath } from 'node:url'; @@ -294,3 +298,42 @@ for (const s of SHEETS.filter((s) => !only || s.sheet.includes(only))) { console.log(`cut-mascot: ${s.sheet} -> ${s.hero.out}, ${s.frames.length} frames, ${s.animated}`); } + +// walk-left/: the walk files mirrored. SVGs get one mirroring group around their artwork, PNGs are +// flopped, and the loops are rebuilt from the flopped frames with the walk's own encoder settings. +const left = (out) => out.replace(/^walk\//, 'walk-left/').replace('patch-walk', 'patch-walk-left'); +const mirrorSvg = (svg, title) => + svg.replace(/^([\s\S]*?viewBox="0 0 (\d+) \d+"[\s\S]*?)[\s\S]*?(<\/title>(?:<style>[\s\S]*?<\/style>)?)([\s\S]*)<\/svg>\s*$/, + (_, head, width, close, body) => `${head}${title}${close}<g transform="matrix(-1 0 0 1 ${width} 0)">${body}</g></svg>\n`); + +async function mirrorWalk(s) { + for (const root of [[], ['original'], ['compressed']]) rmSync(at(...root, 'walk-left'), { recursive: true, force: true }); + const title = 'Patch, the Space Works mascot, walking left'; + for (const out of [s.hero.out, ...s.frames.map(([f]) => f)]) { + const full = mirrorSvg(readFileSync(at(`${out}.svg`), 'utf8'), title); + write(at(`${left(out)}.svg`), full); + write(at(`${left(out)}.png`), await sharp(at(`${out}.png`)).flop().png({ compressionLevel: 9 }).toBuffer()); + write(at('original', `${left(out)}.png`), await sharp(at('original', `${out}.png`)).flop().png({ compressionLevel: 9 }).toBuffer()); + write(at('compressed', `${left(out)}.svg`), mirrorSvg(readFileSync(at('compressed', `${out}.svg`), 'utf8'), title)); + write(at('compressed', `${left(out)}.svgz`), gzipSync(full, { level: 9 })); + } + const loopTitle = 'Patch, the Space Works mascot, walking left with a wrench'; + const full = mirrorSvg(readFileSync(at(`${s.animated}.svg`), 'utf8'), loopTitle); + write(at(`${left(s.animated)}.svg`), full); + write(at('compressed', `${left(s.animated)}.svg`), mirrorSvg(readFileSync(at('compressed', `${s.animated}.svg`), 'utf8'), loopTitle)); + write(at('compressed', `${left(s.animated)}.svgz`), gzipSync(full, { level: 9 })); + const [fw, fh] = s.frameSize; + const delay = s.timeline.map(([, ms]) => ms); + const sequence = (file) => Promise.all(s.timeline.map(([f]) => file(s.frames[f][0]))); + const flopped = (scale) => sequence((out) => sharp(at(`${out}.png`)).flop().resize(fw * scale, fh * scale).png().toBuffer()); + const webp = async (inputs, opts, file) => { + mkdirSync(dirname(file), { recursive: true }); + await sharp(inputs, { join: { animated: true } }).webp({ loop: 0, delay, effort: 6, ...opts }).toFile(file); + }; + await webp(await flopped(2), { quality: 92, alphaQuality: 100 }, at(`${left(s.animated)}.webp`)); + await webp(await sequence((out) => sharp(at('original', `${out}.png`)).flop().png().toBuffer()), { lossless: true }, at('original', `${left(s.animated)}.webp`)); + await webp(await flopped(1), { quality: 80, alphaQuality: 90 }, at('compressed', `${left(s.animated)}.webp`)); + console.log(`cut-mascot: walk -> walk-left, ${s.frames.length} frames, ${left(s.animated)}`); +} + +if (!only || only === 'walk' || only === 'walk-left') await mirrorWalk(SHEETS.find((s) => s.align === 'shadow')); diff --git a/site/src/components/MascotGallery.astro b/site/src/components/MascotGallery.astro index eb2db72..434f496 100644 --- a/site/src/components/MascotGallery.astro +++ b/site/src/components/MascotGallery.astro @@ -9,6 +9,7 @@ const files = [ { show: 'patch-animated.webp', name: 'Patch, sneeze loop', use: '7-second loop', surface: 'white', downloads: ['patch-animated.webp', 'patch-animated.svg', 'original/patch-animated.webp', 'compressed/patch-animated.svg'] }, { show: 'walk/patch-walk.png', name: 'Patch, walking', use: 'On its way', surface: 'cream', downloads: ['walk/patch-walk.svg', 'walk/patch-walk.png', 'original/walk/patch-walk.png', 'compressed/walk/patch-walk.svg'] }, { show: 'walk/patch-walk-animated.webp', name: 'Patch, walk cycle', use: '8 frames, 0.96 s', surface: 'sky', downloads: ['walk/patch-walk-animated.webp', 'walk/patch-walk-animated.svg', 'original/walk/patch-walk-animated.webp', 'compressed/walk/patch-walk-animated.svg'] }, + { show: 'walk-left/patch-walk-left-animated.webp', name: 'Patch, walking left', use: 'Heading left', surface: 'sky', downloads: ['walk-left/patch-walk-left-animated.webp', 'walk-left/patch-walk-left-animated.svg', 'original/walk-left/patch-walk-left-animated.webp', 'compressed/walk-left/patch-walk-left-animated.svg'] }, { show: 'concept/patch-concept-sheet.webp', name: 'Concept sheet', use: 'Pose and sneeze loop', surface: 'cream', downloads: ['concept/patch-concept-sheet.webp'] }, { show: 'concept/patch-walk-sheet.webp', name: 'Walk sheet', use: 'Walk cycle', surface: 'cream', downloads: ['concept/patch-walk-sheet.webp'] }, ]; @@ -31,6 +32,10 @@ const loops = [ label: 'Walk cycle frames', frames: [1, 2, 3, 4, 5, 6, 7, 8].map((n) => [`walk/frames/patch-walk-0${n}`, `${((n - 1) * 0.12).toFixed(2)} s`, `Step ${n}`]), }, + { + label: 'Walking left frames', + frames: [1, 2, 3, 4, 5, 6, 7, 8].map((n) => [`walk-left/frames/patch-walk-left-0${n}`, `${((n - 1) * 0.12).toFixed(2)} s`, `Step ${n}`]), + }, ]; // "SVG", "PNG", "Original PNG", "Lite SVG". const label = (f: string) => { diff --git a/site/src/content/docs/brand/mascot.mdx b/site/src/content/docs/brand/mascot.mdx index 62488eb..5a031d6 100644 --- a/site/src/content/docs/brand/mascot.mdx +++ b/site/src/content/docs/brand/mascot.mdx @@ -30,6 +30,10 @@ Nothing was redrawn. Each piece comes three ways: | Sneeze loop | `patch-animated.svg`, `patch-animated.webp`, and eight frames in `frames/` | | Walking pose | `walk/patch-walk.svg`, `walk/patch-walk.png` | | Walk cycle | `walk/patch-walk-animated.svg`, `walk/patch-walk-animated.webp`, and eight frames in `walk/frames/` | +| Walking left | `walk-left/patch-walk-left.svg`, `walk-left/patch-walk-left-animated.webp`, and eight frames in `walk-left/frames/` | + +**Walking left** is the approved way to move Patch to the left. The script mirrors the walk cycle +exactly, so it shows Patch's other side; frame N lines up with walk frame N for a mid-stride turn. The same names sit in `original/` and `compressed/`. In product UI, use the animated WebPs; they're far lighter than the animated SVGs. Browsers only show `.svgz` when the server sends it gzip-encoded, so use @@ -104,7 +108,8 @@ symbol as a combined mark. ## Keep Patch intact 1. **Don't recolour, filter or redraw** Patch. Use these files as they are. -2. **Don't stretch, skew or mirror** Patch. The coat is asymmetric on purpose. +2. **Don't stretch, skew or mirror** Patch. The coat is asymmetric on purpose. To head left, use the + `walk-left/` files; never flip the others with CSS. 3. **Don't add effects** such as shadows, glows, gradients or outlines. 4. **Don't make Patch fierce.** No bared teeth, angry brows or hunting poses. 5. **Don't scale up the PNGs or WebPs.** Use the full SVGs when you need bigger.