From 6642aaa16a008db53945354f7d642fca5d9beff6 Mon Sep 17 00:00:00 2001 From: Qa'id Jacobs Date: Sun, 15 Mar 2026 22:52:55 +0100 Subject: [PATCH 1/7] Update landing page with network topology animation and app gallery Replace hero menu bar mock with animated SVG network topology widget, move screenshots to dedicated App section with uniform height grid, remove inline screenshots from features, update footer attribution. Co-Authored-By: Claude Opus 4.6 (1M context) --- docs/index.html | 202 ++++++++++++++++++++++++++++++++++++++++-------- 1 file changed, 168 insertions(+), 34 deletions(-) diff --git a/docs/index.html b/docs/index.html index ec3a92f..d9f7667 100644 --- a/docs/index.html +++ b/docs/index.html @@ -16,6 +16,8 @@ --cta-color: #aaa; --cta-hover: #f0f0f0; --cta-border: #444; --cta-border-hover: #777; --link-color: #888; --link-hover: #ccc; --link-border: #444; --link-border-hover: #777; --dl-color: #4e7fff; --ul-color: #34c759; + --node-color: rgba(255,255,255,0.5); --edge-color: rgba(255,255,255,0.08); + --pulse-dl: rgba(78,127,255,0.6); --pulse-ul: rgba(52,199,89,0.6); color-scheme: dark; } @@ -27,6 +29,8 @@ --scanline: rgba(0,0,0,0.006); --note-num: #e8e6e0; --cta-color: #555; --cta-hover: #111; --cta-border: #bbb; --cta-border-hover: #666; --link-color: #666; --link-hover: #222; --link-border: #bbb; --link-border-hover: #666; + --node-color: rgba(0,0,0,0.35); --edge-color: rgba(0,0,0,0.06); + --pulse-dl: rgba(78,127,255,0.5); --pulse-ul: rgba(52,199,89,0.5); color-scheme: light; } @@ -39,6 +43,8 @@ --scanline: rgba(0,0,0,0.006); --note-num: #e8e6e0; --cta-color: #555; --cta-hover: #111; --cta-border: #bbb; --cta-border-hover: #666; --link-color: #666; --link-hover: #222; --link-border: #bbb; --link-border-hover: #666; + --node-color: rgba(0,0,0,0.35); --edge-color: rgba(0,0,0,0.06); + --pulse-dl: rgba(78,127,255,0.5); --pulse-ul: rgba(52,199,89,0.5); color-scheme: light; } } @@ -87,7 +93,7 @@ .divider { border: none; border-top: 1px solid var(--border); margin: 0; transition: border-color 0.3s; } /* HERO */ - .hero { padding-top: 100px; padding-bottom: 80px; } + .hero { padding-top: 100px; padding-bottom: 40px; } .hero-overline { font-size: 14px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--text-faint); margin-bottom: 20px; } .hero h1 { font-family: Georgia, 'Times New Roman', serif; font-size: clamp(52px, 9vw, 112px); @@ -96,15 +102,13 @@ .hero h1 em { font-weight: 400; font-style: italic; color: var(--text-muted); } .hero-desc { font-size: 20px; color: var(--text-muted); max-width: 520px; line-height: 1.6; margin-bottom: 44px; } - /* Menu bar mock */ - .menubar-mock { - display: inline-flex; align-items: center; gap: 12px; - padding: 8px 16px; background: rgba(20,20,20,0.8); border: 1px solid rgba(255,255,255,0.07); - border-radius: 12px; backdrop-filter: blur(20px); font-family: 'SF Mono', Menlo, monospace; - font-size: 14px; color: var(--text-secondary); transition: background 0.3s, border-color 0.3s; + /* Network topology widget */ + .topology-widget { + position: relative; width: 100%; max-width: 600px; height: 200px; + border: 1px solid var(--border); border-radius: 12px; + background: var(--code-bg); overflow: hidden; transition: background 0.3s, border-color 0.3s; } - .mock-dl { color: var(--dl-color); } - .mock-ul { color: var(--ul-color); } + .topology-widget svg { width: 100%; height: 100%; } /* TRACKLIST */ .tracklist { padding: 72px 0; } @@ -116,6 +120,23 @@ .track-desc { font-size: 17px; color: var(--text-muted); line-height: 1.55; } .track-duration { margin-left: auto; font-size: 16px; color: var(--text-ghost); font-variant-numeric: tabular-nums; flex-shrink: 0; padding-left: 16px; } + /* APP SCREENSHOTS */ + .app-section { padding: 72px 0; } + .app-header { font-size: 14px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--text-faint); margin-bottom: 36px; } + .app-grid { + display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 24px; + align-items: start; + } + .app-screenshot-card { display: flex; flex-direction: column; gap: 10px; } + .app-screenshot-card img { + width: 100%; height: 280px; object-fit: cover; object-position: top; + border-radius: 8px; border: 1px solid var(--border); + box-shadow: 0 4px 16px rgba(0,0,0,0.2); transition: border-color 0.3s; + } + .app-screenshot-card span { + font-size: 14px; color: var(--text-faint); letter-spacing: 0.02em; + } + /* LINER NOTES */ .liner-notes { padding: 72px 0; } .liner-notes-header { font-size: 14px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--text-faint); margin-bottom: 36px; } @@ -175,15 +196,15 @@ .track { flex-wrap: wrap; gap: 4px 16px; } .track-title { min-width: unset; } .track-duration { margin-left: 48px; } + .app-grid { grid-template-columns: repeat(2, 1fr); } + .app-screenshot-card img { height: 220px; } } - .screenshot-showcase { padding: 0 0 60px; text-align: center; } - .screenshot-img { max-width: 600px; width: 100%; border-radius: 12px; border: 1px solid var(--border); box-shadow: 0 8px 32px rgba(0,0,0,0.3); } - .feature-screenshot { max-width: 400px; width: 100%; border-radius: 8px; border: 1px solid var(--border); margin-top: 16px; box-shadow: 0 4px 16px rgba(0,0,0,0.2); } - @media (max-width: 768px) { .screenshot-img { max-width: 100%; } .feature-screenshot { max-width: 100%; } } @media (max-width: 480px) { .hero h1 { font-size: 44px; } .track-title { font-size: 19px; } .privacy-grid { grid-template-columns: 1fr 1fr; } + .app-grid { grid-template-columns: 1fr; } + .app-screenshot-card img { height: 260px; } footer { flex-direction: column; gap: 8px; text-align: center; } } @@ -206,25 +227,20 @@
macOS Network Monitor — Open Source

Spook

See what's talking on your Mac. Real-time traffic monitoring from your menu bar. Per-app breakdown, connection details, and history graphs.

-
- ↓ 1.2 MB/s - ↑ 340 KB/s +
+
-
- Spook app panel showing speed stats, traffic history, and per-app list -
-
Features
-
A1Menu Bar TrafficLive ↓/↑ speeds updating every second right in your menu bar.
Menu bar status item showing speeds1s
-
A2Per-App BreakdownSee exactly which apps are using your network and how much.
Per-app traffic breakdown listAll
+
A1Menu Bar TrafficLive ↓/↑ speeds updating every second right in your menu bar.1s
+
A2Per-App BreakdownSee exactly which apps are using your network and how much.All
B1Connection DetailsRemote IPs, ports, protocols, and reverse DNS hostnames for every connection.DNS
-
B2Traffic GraphsVisualize network usage over 1 hour, 24 hours, or 7 days with dynamic time labels.
Traffic history graph7d
+
B2Traffic GraphsVisualize network usage over 1 hour, 24 hours, or 7 days with dynamic time labels.7d
C1Direction FilterToggle to focus on download-only or upload-only traffic.↓↑
C2Search & FreezeFind apps instantly with live search, freeze the list while inspecting rapidly changing entries.⚡
C3Pin ModeKeep the detail window visible while you work. Appears in Cmd+Tab when pinned.📌
@@ -232,6 +248,34 @@

Spook

+
+
App
+
+
+ Spook app panel showing speed stats, traffic history, and per-app list + Overview panel +
+
+ Speed overview showing download and upload rates + Speed readout +
+
+ Per-app traffic breakdown list + App breakdown +
+
+ Traffic history graph + Traffic history +
+
+ Menu bar status item showing speeds + Menu bar item +
+
+
+ +
+
How It Works
@@ -290,7 +334,7 @@

Requirements

- Spook + Spook: a project by constellation design
GitHub MIT License @@ -312,17 +356,107 @@

Requirements

btns.forEach(function(b) { b.addEventListener('click', function() { setTheme(this.dataset.theme); }); }); })(); -// Animated menu bar mock +// Animated network topology (function() { - var dl = document.getElementById('dl-speed'); - var ul = document.getElementById('ul-speed'); - function fmt(v) { return v >= 1 ? v.toFixed(1) + ' MB/s' : (v * 1000).toFixed(0) + ' KB/s'; } - setInterval(function() { - var d = 0.2 + Math.random() * 3.5; - var u = 0.05 + Math.random() * 0.8; - dl.textContent = '\u2193 ' + fmt(d); - ul.textContent = '\u2191 ' + fmt(u); - }, 2000); + var svg = document.getElementById('topology-svg'); + var ns = 'http://www.w3.org/2000/svg'; + + // Node positions — central hub + surrounding app nodes + var nodes = [ + { x: 300, y: 100, r: 8, label: 'Mac', hub: true }, + { x: 80, y: 50, r: 5, label: 'Safari' }, + { x: 160, y: 160, r: 5, label: 'Slack' }, + { x: 520, y: 45, r: 5, label: 'cloudd' }, + { x: 440, y: 155, r: 5, label: 'Mail' }, + { x: 80, y: 140, r: 4, label: 'DNS' }, + { x: 520, y: 130, r: 4, label: 'Xcode' }, + { x: 200, y: 40, r: 4, label: 'curl' }, + { x: 400, y: 50, r: 4, label: 'ssh' }, + { x: 300, y: 175, r: 4, label: 'brew' }, + { x: 160, y: 90, r: 3, label: '' }, + { x: 440, y: 90, r: 3, label: '' }, + ]; + + // Draw edges + var edgeGroup = document.createElementNS(ns, 'g'); + var edges = []; + for (var i = 1; i < nodes.length; i++) { + var line = document.createElementNS(ns, 'line'); + line.setAttribute('x1', nodes[0].x); + line.setAttribute('y1', nodes[0].y); + line.setAttribute('x2', nodes[i].x); + line.setAttribute('y2', nodes[i].y); + line.setAttribute('stroke', 'var(--edge-color)'); + line.setAttribute('stroke-width', '1'); + edgeGroup.appendChild(line); + edges.push({ el: line, node: nodes[i] }); + } + svg.appendChild(edgeGroup); + + // Draw nodes + var nodeGroup = document.createElementNS(ns, 'g'); + nodes.forEach(function(n) { + var c = document.createElementNS(ns, 'circle'); + c.setAttribute('cx', n.x); + c.setAttribute('cy', n.y); + c.setAttribute('r', n.r); + c.setAttribute('fill', 'var(--node-color)'); + n.el = c; + nodeGroup.appendChild(c); + + if (n.label) { + var t = document.createElementNS(ns, 'text'); + t.setAttribute('x', n.x); + t.setAttribute('y', n.y + n.r + 14); + t.setAttribute('text-anchor', 'middle'); + t.setAttribute('fill', 'var(--text-faint)'); + t.setAttribute('font-size', '10'); + t.setAttribute('font-family', '-apple-system, BlinkMacSystemFont, sans-serif'); + t.textContent = n.label; + nodeGroup.appendChild(t); + } + }); + svg.appendChild(nodeGroup); + + // Pulse animation — packets traveling along edges + function sendPulse() { + var idx = Math.floor(Math.random() * edges.length); + var edge = edges[idx]; + var isDl = Math.random() > 0.4; + + var circle = document.createElementNS(ns, 'circle'); + circle.setAttribute('r', '3'); + circle.setAttribute('fill', isDl ? 'var(--pulse-dl)' : 'var(--pulse-ul)'); + circle.setAttribute('opacity', '0.9'); + svg.appendChild(circle); + + var sx, sy, ex, ey; + if (isDl) { + sx = edge.node.x; sy = edge.node.y; + ex = nodes[0].x; ey = nodes[0].y; + } else { + sx = nodes[0].x; sy = nodes[0].y; + ex = edge.node.x; ey = edge.node.y; + } + + var start = null; + var duration = 800 + Math.random() * 600; + function animate(ts) { + if (!start) start = ts; + var p = Math.min((ts - start) / duration, 1); + var ease = p < 0.5 ? 2 * p * p : 1 - Math.pow(-2 * p + 2, 2) / 2; + circle.setAttribute('cx', sx + (ex - sx) * ease); + circle.setAttribute('cy', sy + (ey - sy) * ease); + circle.setAttribute('opacity', p < 0.1 ? p * 9 : p > 0.85 ? (1 - p) * 6.67 : 0.9); + if (p < 1) requestAnimationFrame(animate); + else svg.removeChild(circle); + } + requestAnimationFrame(animate); + } + + // Stagger pulses + setInterval(sendPulse, 400); + setTimeout(function() { setInterval(sendPulse, 600); }, 200); })(); // Scroll reveal From 92e4f28bc8bf96e818d0810d231fe2241ddcb2c8 Mon Sep 17 00:00:00 2001 From: Qa'id Jacobs Date: Sun, 15 Mar 2026 23:02:37 +0100 Subject: [PATCH 2/7] Redesign landing page with 3D topology, lightbox gallery, and reference layout - Replace SVG topology with 3D canvas animation: perspective-projected nodes rotating in space, no labels, slower packet movement (blue=download, green=upload) - Match look-ma-no-hands structure: 4-column screenshot grid with aspect-ratio thumbnails, click-to-lightbox (80vw, caption below) - Features section is text-only tracklist matching reference style - Section renamed from "App" to "The App" per reference convention - Footer links "constellation design" to constellation.design Co-Authored-By: Claude Opus 4.6 (1M context) --- docs/index.html | 438 +++++++++++++++++++++++++++++++----------------- 1 file changed, 286 insertions(+), 152 deletions(-) diff --git a/docs/index.html b/docs/index.html index d9f7667..474ddd0 100644 --- a/docs/index.html +++ b/docs/index.html @@ -16,8 +16,9 @@ --cta-color: #aaa; --cta-hover: #f0f0f0; --cta-border: #444; --cta-border-hover: #777; --link-color: #888; --link-hover: #ccc; --link-border: #444; --link-border-hover: #777; --dl-color: #4e7fff; --ul-color: #34c759; - --node-color: rgba(255,255,255,0.5); --edge-color: rgba(255,255,255,0.08); - --pulse-dl: rgba(78,127,255,0.6); --pulse-ul: rgba(52,199,89,0.6); + --screenshot-border: #1a1a1a; --img-shadow: none; + --node-color: rgba(255,255,255,0.35); --edge-color: rgba(255,255,255,0.06); + --pulse-dl: rgba(78,127,255,0.7); --pulse-ul: rgba(52,199,89,0.7); color-scheme: dark; } @@ -29,8 +30,9 @@ --scanline: rgba(0,0,0,0.006); --note-num: #e8e6e0; --cta-color: #555; --cta-hover: #111; --cta-border: #bbb; --cta-border-hover: #666; --link-color: #666; --link-hover: #222; --link-border: #bbb; --link-border-hover: #666; - --node-color: rgba(0,0,0,0.35); --edge-color: rgba(0,0,0,0.06); - --pulse-dl: rgba(78,127,255,0.5); --pulse-ul: rgba(52,199,89,0.5); + --screenshot-border: #ddd; --img-shadow: 0 2px 16px rgba(0,0,0,0.08); + --node-color: rgba(0,0,0,0.25); --edge-color: rgba(0,0,0,0.05); + --pulse-dl: rgba(78,127,255,0.6); --pulse-ul: rgba(52,199,89,0.6); color-scheme: light; } @@ -43,8 +45,9 @@ --scanline: rgba(0,0,0,0.006); --note-num: #e8e6e0; --cta-color: #555; --cta-hover: #111; --cta-border: #bbb; --cta-border-hover: #666; --link-color: #666; --link-hover: #222; --link-border: #bbb; --link-border-hover: #666; - --node-color: rgba(0,0,0,0.35); --edge-color: rgba(0,0,0,0.06); - --pulse-dl: rgba(78,127,255,0.5); --pulse-ul: rgba(52,199,89,0.5); + --screenshot-border: #ddd; --img-shadow: 0 2px 16px rgba(0,0,0,0.08); + --node-color: rgba(0,0,0,0.25); --edge-color: rgba(0,0,0,0.05); + --pulse-dl: rgba(78,127,255,0.6); --pulse-ul: rgba(52,199,89,0.6); color-scheme: light; } } @@ -93,7 +96,9 @@ .divider { border: none; border-top: 1px solid var(--border); margin: 0; transition: border-color 0.3s; } /* HERO */ - .hero { padding-top: 100px; padding-bottom: 40px; } + .hero { + padding-top: 100px; padding-bottom: 80px; + } .hero-overline { font-size: 14px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--text-faint); margin-bottom: 20px; } .hero h1 { font-family: Georgia, 'Times New Roman', serif; font-size: clamp(52px, 9vw, 112px); @@ -102,13 +107,11 @@ .hero h1 em { font-weight: 400; font-style: italic; color: var(--text-muted); } .hero-desc { font-size: 20px; color: var(--text-muted); max-width: 520px; line-height: 1.6; margin-bottom: 44px; } - /* Network topology widget */ - .topology-widget { - position: relative; width: 100%; max-width: 600px; height: 200px; - border: 1px solid var(--border); border-radius: 12px; - background: var(--code-bg); overflow: hidden; transition: background 0.3s, border-color 0.3s; + /* Network topology — 3D floating, no container */ + #topology-canvas { + width: 100%; max-width: 560px; height: 220px; + display: block; } - .topology-widget svg { width: 100%; height: 100%; } /* TRACKLIST */ .tracklist { padding: 72px 0; } @@ -120,22 +123,37 @@ .track-desc { font-size: 17px; color: var(--text-muted); line-height: 1.55; } .track-duration { margin-left: auto; font-size: 16px; color: var(--text-ghost); font-variant-numeric: tabular-nums; flex-shrink: 0; padding-left: 16px; } - /* APP SCREENSHOTS */ - .app-section { padding: 72px 0; } - .app-header { font-size: 14px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--text-faint); margin-bottom: 36px; } - .app-grid { - display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 24px; - align-items: start; + /* SCREENSHOTS */ + .screenshots { padding: 72px 0; } + .screenshots-header { font-size: 14px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--text-faint); margin-bottom: 36px; } + .screenshots-grid { + display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; gap: 24px; align-items: start; } - .app-screenshot-card { display: flex; flex-direction: column; gap: 10px; } - .app-screenshot-card img { - width: 100%; height: 280px; object-fit: cover; object-position: top; - border-radius: 8px; border: 1px solid var(--border); - box-shadow: 0 4px 16px rgba(0,0,0,0.2); transition: border-color 0.3s; + .screenshot { position: relative; cursor: pointer; } + .screenshot img { + width: 100%; aspect-ratio: 4 / 3; object-fit: contain; object-position: bottom; + border-radius: 8px; border: none; display: block; + } + .screenshot-caption { + display: block; margin-top: 10px; font-size: 14px; color: var(--text-faint); + } + + /* LIGHTBOX */ + .lightbox { + position: fixed; inset: 0; z-index: 2000; + display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 16px; + background: rgba(0, 0, 0, 0.85); + opacity: 0; visibility: hidden; transition: opacity 0.25s, visibility 0.25s; + cursor: pointer; } - .app-screenshot-card span { - font-size: 14px; color: var(--text-faint); letter-spacing: 0.02em; + .lightbox.open { opacity: 1; visibility: visible; } + .lightbox img { + max-width: 80vw; max-height: 80vh; border-radius: 10px; + box-shadow: 0 8px 40px rgba(0, 0, 0, 0.5); + transform: scale(0.95); transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1); } + .lightbox.open img { transform: scale(1); } + .lightbox-caption { font-size: 16px; color: var(--text-secondary); text-align: center; } /* LINER NOTES */ .liner-notes { padding: 72px 0; } @@ -178,6 +196,11 @@ max-width: 960px; margin: 0 auto; transition: border-color 0.3s; } .footer-name { font-size: 14px; font-weight: 600; color: var(--text-faint); } + .footer-name a { + color: var(--link-color); text-decoration: none; border-bottom: 1px solid var(--link-border); + padding-bottom: 1px; transition: all 0.2s; + } + .footer-name a:hover { color: var(--link-hover); border-color: var(--link-border-hover); } .footer-right { font-size: 14px; color: var(--text-ghost); display: flex; gap: 16px; } .footer-right a { color: var(--text-faint); text-decoration: none; transition: color 0.2s; } .footer-right a:hover { color: var(--text-secondary); } @@ -196,15 +219,12 @@ .track { flex-wrap: wrap; gap: 4px 16px; } .track-title { min-width: unset; } .track-duration { margin-left: 48px; } - .app-grid { grid-template-columns: repeat(2, 1fr); } - .app-screenshot-card img { height: 220px; } + .screenshots-grid { grid-template-columns: 1fr 1fr; gap: 16px; } } @media (max-width: 480px) { .hero h1 { font-size: 44px; } .track-title { font-size: 19px; } .privacy-grid { grid-template-columns: 1fr 1fr; } - .app-grid { grid-template-columns: 1fr; } - .app-screenshot-card img { height: 260px; } footer { flex-direction: column; gap: 8px; text-align: center; } } @@ -227,55 +247,94 @@
macOS Network Monitor — Open Source

Spook

See what's talking on your Mac. Real-time traffic monitoring from your menu bar. Per-app breakdown, connection details, and history graphs.

-
- -
+
+
Features
-
A1Menu Bar TrafficLive ↓/↑ speeds updating every second right in your menu bar.1s
-
A2Per-App BreakdownSee exactly which apps are using your network and how much.All
-
B1Connection DetailsRemote IPs, ports, protocols, and reverse DNS hostnames for every connection.DNS
-
B2Traffic GraphsVisualize network usage over 1 hour, 24 hours, or 7 days with dynamic time labels.7d
-
C1Direction FilterToggle to focus on download-only or upload-only traffic.↓↑
-
C2Search & FreezeFind apps instantly with live search, freeze the list while inspecting rapidly changing entries.⚡
-
C3Pin ModeKeep the detail window visible while you work. Appears in Cmd+Tab when pinned.📌
+
+ A1 + Menu Bar Traffic + Live ↓/↑ speeds updating every second right in your menu bar. + 1s +
+ +
+ A2 + Per-App Breakdown + See exactly which apps are using your network and how much. + All +
+ +
+ B1 + Connection Details + Remote IPs, ports, protocols, and reverse DNS hostnames for every connection. + DNS +
+ +
+ B2 + Traffic Graphs + Visualize network usage over 1 hour, 24 hours, or 7 days with dynamic time labels. + 7d +
+ +
+ C1 + Direction Filter + Toggle to focus on download-only or upload-only traffic. + ↓↑ +
+ +
+ C2 + Search & Freeze + Find apps instantly with live search, freeze the list while inspecting rapidly changing entries. + ⚡ +
+ +
+ C3 + Pin Mode + Keep the detail window visible while you work. Appears in Cmd+Tab when pinned. + 📌 +
-
-
App
-
-
- Spook app panel showing speed stats, traffic history, and per-app list - Overview panel -
-
- Speed overview showing download and upload rates - Speed readout + +
+
The App
+ +
+
+ Spook app panel showing speed stats, traffic history, and per-app list + Overview panel
-
- Per-app traffic breakdown list - App breakdown +
+ Speed overview showing download and upload rates + Speed readout
-
- Traffic history graph - Traffic history +
+ Per-app traffic breakdown list + App breakdown
-
- Menu bar status item showing speeds - Menu bar item +
+ Traffic history graph + Traffic history
+
How It Works
@@ -334,15 +393,47 @@

Requirements

+ + +