feat: rebrand app and packaging icons to new Motionity logo

Swap the small icon mark, README banner, packaged app icon, and
favicon over to the new brand assets. make-icon.cjs and the new
make-favicon.cjs re-derive their bar geometry/colours from
src/assets/logo.svg instead of the old white-bars mark.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>

README.md

@@ -1,8 +1,6 @@
 <div align="center">
 
-<img src="src/assets/logo.svg" alt="Motionity" width="72">
+<img src="src/assets/logo-full.svg" alt="Motionity" width="320">
-
-# Motionity
 
 **Web-based motion graphics editor** — keyframing, masking, filters, text animations.
 A free alternative to After Effects and Canva, running entirely in the browser.

package.json

@@ -11,6 +11,7 @@
   "scripts": {
     "vendor": "node scripts/vendor.mjs",
     "icons": "node scripts/make-icon.cjs",
+    "favicon": "node scripts/make-favicon.cjs",
     "start": "node scripts/server.cjs",
     "dev": "electron .",
     "dist:win": "npm run vendor && npm run icons && electron-builder --win",

scripts/make-favicon.cjs

@@ -0,0 +1,109 @@
+#!/usr/bin/env node
+// Renders src/favicon.ico (32x32) from the same geometry as
+// src/assets/logo.svg: three coloured rounded bars on the app's dark background.
+//
+// Hand-rolled so packaging needs no image toolchain (no ImageMagick, no sharp).
+
+const { writeFileSync } = require('node:fs');
+const { resolve } = require('node:path');
+
+const SIZE = 32;
+const SS = 8; // supersampling factor, for antialiased edges at small size
+const BG = [0x14, 0x16, 0x29];
+const BG_RADIUS = 6; // squircle-ish corner on the icon plate
+
+// viewBox="0 0 157 183" in src/assets/logo.svg
+const VIEW = { w: 157, h: 183 };
+const BARS = [
+  { x: 79, y: 0, w: 79, h: 47, r: 23.5, fg: [0x75, 0x4b, 0xff] },
+  { x: 0, y: 68, w: 157, h: 47, r: 23.5, fg: [0x60, 0x2f, 0xff] },
+  { x: 0, y: 136, w: 79, h: 47, r: 23.5, fg: [0x06, 0x93, 0xc0] },
+];
+
+function insideRoundedRect(px, py, { x, y, w, h, r }) {
+  const dx = Math.max(x + r - px, 0, px - (x + w - r));
+  const dy = Math.max(y + r - py, 0, py - (y + h - r));
+  return dx * dx + dy * dy <= r * r;
+}
+
+// The logo occupies 62% of the plate, centred.
+const scale = (SIZE * 0.62) / VIEW.h;
+const offsetX = (SIZE - VIEW.w * scale) / 2;
+const offsetY = (SIZE - VIEW.h * scale) / 2;
+
+const plate = { x: 0, y: 0, w: SIZE, h: SIZE, r: BG_RADIUS };
+
+// BGRA pixels, row-major, top-to-bottom.
+const pixels = Buffer.alloc(SIZE * SIZE * 4);
+for (let py = 0; py < SIZE; py++) {
+  for (let px = 0; px < SIZE; px++) {
+    let plateHits = 0;
+    const colorSum = [0, 0, 0];
+    for (let sy = 0; sy < SS; sy++) {
+      for (let sx = 0; sx < SS; sx++) {
+        const fx = px + (sx + 0.5) / SS;
+        const fy = py + (sy + 0.5) / SS;
+        if (!insideRoundedRect(fx, fy, plate)) continue;
+        plateHits++;
+        const lx = (fx - offsetX) / scale;
+        const ly = (fy - offsetY) / scale;
+        const bar = BARS.find((b) => insideRoundedRect(lx, ly, b));
+        const pixel = bar ? bar.fg : BG;
+        for (let c = 0; c < 3; c++) colorSum[c] += pixel[c];
+      }
+    }
+    const total = SS * SS;
+    const alpha = Math.round((plateHits / total) * 255);
+    const o = (py * SIZE + px) * 4;
+    const r = plateHits ? Math.round(colorSum[0] / plateHits) : 0;
+    const g = plateHits ? Math.round(colorSum[1] / plateHits) : 0;
+    const b = plateHits ? Math.round(colorSum[2] / plateHits) : 0;
+    pixels[o] = b;
+    pixels[o + 1] = g;
+    pixels[o + 2] = r;
+    pixels[o + 3] = alpha;
+  }
+}
+
+// Pack into a single-image .ico: ICONDIR + ICONDIRENTRY + BITMAPINFOHEADER
+// + 32bpp XOR data (bottom-up) + 1bpp AND mask (bottom-up, all-zero since
+// the XOR data already carries a full alpha channel).
+const xor = Buffer.alloc(SIZE * SIZE * 4);
+for (let py = 0; py < SIZE; py++) {
+  const srcRow = py * SIZE * 4;
+  const dstRow = (SIZE - 1 - py) * SIZE * 4; // bottom-up
+  pixels.copy(xor, dstRow, srcRow, srcRow + SIZE * 4);
+}
+const andMaskRowBytes = Math.ceil(SIZE / 32) * 4; // 1bpp, padded to 4 bytes
+const and = Buffer.alloc(andMaskRowBytes * SIZE, 0);
+
+const dib = Buffer.alloc(40);
+dib.writeUInt32LE(40, 0); // biSize
+dib.writeInt32LE(SIZE, 4); // biWidth
+dib.writeInt32LE(SIZE * 2, 8); // biHeight (XOR + AND)
+dib.writeUInt16LE(1, 12); // biPlanes
+dib.writeUInt16LE(32, 14); // biBitCount
+dib.writeUInt32LE(0, 16); // biCompression: BI_RGB
+
+const imageData = Buffer.concat([dib, xor, and]);
+
+const iconDir = Buffer.alloc(6);
+iconDir.writeUInt16LE(0, 0); // reserved
+iconDir.writeUInt16LE(1, 2); // type: icon
+iconDir.writeUInt16LE(1, 4); // image count
+
+const entry = Buffer.alloc(16);
+entry[0] = SIZE; // width
+entry[1] = SIZE; // height
+entry[2] = 0; // color count
+entry[3] = 0; // reserved
+entry.writeUInt16LE(1, 4); // planes
+entry.writeUInt16LE(32, 6); // bit count
+entry.writeUInt32LE(imageData.length, 8); // bytes in resource
+entry.writeUInt32LE(6 + 16, 12); // image offset
+
+const ico = Buffer.concat([iconDir, entry, imageData]);
+
+const dest = resolve(__dirname, '..', 'src', 'favicon.ico');
+writeFileSync(dest, ico);
+console.log(`Wrote ${dest} (${SIZE}x${SIZE}, ${Math.round(ico.length / 1024)} KB)`);

scripts/make-icon.cjs

@@ -1,6 +1,6 @@
 #!/usr/bin/env node
 // Renders build/icon.png (512x512) from the same geometry as
-// src/assets/logo.svg: three white rounded bars on the app's dark background.
+// src/assets/logo.svg: three coloured rounded bars on the app's dark background.
 //
 // Hand-rolled so packaging needs no image toolchain (no ImageMagick, no sharp).
 // electron-builder derives the Windows .ico and the Linux icon set from it.
@@ -12,15 +12,14 @@ const { join, resolve } = require('node:path');
 const SIZE = 512;
 const SS = 4; // supersampling factor, for antialiased edges
 const BG = [0x14, 0x16, 0x29];
-const FG = [0xff, 0xff, 0xff];
 const BG_RADIUS = 96; // squircle-ish corner on the icon plate
 
-// viewBox="0 0 24 19" in src/assets/logo.svg
+// viewBox="0 0 157 183" in src/assets/logo.svg
-const VIEW = { w: 24, h: 19 };
+const VIEW = { w: 157, h: 183 };
 const BARS = [
-  { x: 17.3193, y: 8.36011, w: 6.08, h: 10.64, r: 3.04 },
+  { x: 79, y: 0, w: 79, h: 47, r: 23.5, fg: [0x75, 0x4b, 0xff] },
-  { x: 8.95996, y: 0, w: 6.08, h: 19, r: 3.04 },
+  { x: 0, y: 68, w: 157, h: 47, r: 23.5, fg: [0x60, 0x2f, 0xff] },
-  { x: 0.599609, y: 0, w: 6.08, h: 19, r: 3.04 },
+  { x: 0, y: 136, w: 79, h: 47, r: 23.5, fg: [0x06, 0x93, 0xc0] },
 ];
 
 function insideRoundedRect(px, py, { x, y, w, h, r }) {
@@ -43,7 +42,7 @@ for (let py = 0; py < SIZE; py++) {
   raw[rowStart] = 0;
   for (let px = 0; px < SIZE; px++) {
     let plateHits = 0;
-    let barHits = 0;
+    const colorSum = [0, 0, 0];
     for (let sy = 0; sy < SS; sy++) {
       for (let sx = 0; sx < SS; sx++) {
         const fx = px + (sx + 0.5) / SS;
@@ -52,16 +51,16 @@ for (let py = 0; py < SIZE; py++) {
         plateHits++;
         const lx = (fx - offsetX) / scale;
         const ly = (fy - offsetY) / scale;
-        if (BARS.some((bar) => insideRoundedRect(lx, ly, bar))) barHits++;
+        const bar = BARS.find((b) => insideRoundedRect(lx, ly, b));
+        const pixel = bar ? bar.fg : BG;
+        for (let c = 0; c < 3; c++) colorSum[c] += pixel[c];
       }
     }
     const total = SS * SS;
     const alpha = Math.round((plateHits / total) * 255);
-    // Blend bar coverage over the plate colour; alpha carries the plate edge.
-    const mix = plateHits ? barHits / plateHits : 0;
     const o = rowStart + 1 + px * 4;
     for (let c = 0; c < 3; c++) {
-      raw[o + c] = Math.round(BG[c] + (FG[c] - BG[c]) * mix);
+      raw[o + c] = plateHits ? Math.round(colorSum[c] / plateHits) : 0;
     }
     raw[o + 3] = alpha;
   }

src/assets/logo.svg

@@ -1,5 +1 @@
-<svg width="24" height="19" viewBox="0 0 24 19" fill="none" xmlns="http://www.w3.org/2000/svg">
+<svg width="246" xmlns="http://www.w3.org/2000/svg" height="271" id="screenshot-4511fdde-0f5d-8050-8008-831c5de8b5f2" viewBox="-32 -32 246 271" xmlns:xlink="http://www.w3.org/1999/xlink" fill="none" version="1.1"><g id="shape-4511fdde-0f5d-8050-8008-831c5de8b5f2" filter="url(#filter-render-1)" rx="0" ry="0"><defs><filter id="filter-render-1" x="-0.17088607594936708" y="-0.14754098360655737" width="1.4177215189873418" height="1.360655737704918" filterUnits="objectBoundingBox" color-interpolation-filters="sRGB"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/><feOffset dx="4" dy="4"/><feGaussianBlur stdDeviation="2"/><feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.2 0"/><feBlend mode="normal" in2="BackgroundImageFix" result="filter_2e51c812-4a20-800d-8008-830c8cbbedac"/><feBlend mode="normal" in="SourceGraphic" in2="filter_2e51c812-4a20-800d-8008-830c8cbbedac" result="shape"/></filter><filter id="filter-shadow-render-1" x="-0.17088607594936708" y="-0.14754098360655737" width="1.4177215189873418" height="1.360655737704918" filterUnits="objectBoundingBox" color-interpolation-filters="sRGB"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/><feOffset dx="4" dy="4"/><feGaussianBlur stdDeviation="2"/><feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.2 0"/><feBlend mode="normal" in2="BackgroundImageFix" result="filter_2e51c812-4a20-800d-8008-830c8cbbedac"/><feBlend mode="normal" in="SourceGraphic" in2="filter_2e51c812-4a20-800d-8008-830c8cbbedac" result="shape"/></filter></defs><g id="shape-4511fdde-0f5d-8050-8008-831c5de8b5f3"><g class="fills" id="fills-4511fdde-0f5d-8050-8008-831c5de8b5f3"><rect rx="23.5" ry="23.5" x="79" y="0" transform="matrix(1.000000, 0.000000, 0.000000, 1.000000, 0.000000, 0.000000)" width="79" height="47" style="fill: rgb(117, 75, 255); fill-opacity: 1;"/></g></g><g id="shape-4511fdde-0f5d-8050-8008-831c5de8b5f4"><g class="fills" id="fills-4511fdde-0f5d-8050-8008-831c5de8b5f4"><rect rx="23.5" ry="23.5" x="0" y="68" transform="matrix(1.000000, 0.000000, 0.000000, 1.000000, 0.000000, 0.000000)" width="157" height="47" style="fill: rgb(96, 47, 255); fill-opacity: 1;"/></g></g><g id="shape-4511fdde-0f5d-8050-8008-831c5de8b5f5"><g class="fills" id="fills-4511fdde-0f5d-8050-8008-831c5de8b5f5"><rect rx="23.5" ry="23.5" x="0" y="136" transform="matrix(1.000000, 0.000000, 0.000000, 1.000000, 0.000000, 0.000000)" width="79" height="47" style="fill: rgb(6, 147, 192); fill-opacity: 1;"/></g></g></g></svg>
-<rect x="17.3193" y="8.36011" width="6.08" height="10.64" rx="3.04" fill="white"/>
-<rect x="8.95996" width="6.08" height="19" rx="3.04" fill="white"/>
-<rect x="0.599609" width="6.08" height="19" rx="3.04" fill="white"/>
-</svg>