nathangong 0.1.0 → 0.4.0

package/INSTALL.md

@@ -0,0 +1,51 @@
+# nathangong — install from zip
+
+macOS only. Requires **Node 18+** and **Claude Code** (for the Stop hook).
+
+## Quick start
+
+```bash
+unzip nathangong-0.4.0.zip
+cd nathangong-0.4.0
+npm install
+npm install -g .
+nathangong test
+```
+
+You should get one Nathan + whip overlay. Click Nathan to whip him away.
+
+## What gets installed
+
+- `postinstall` wires a Claude Code **Stop** hook in `~/.claude/settings.json`
+- After every Claude Code turn, Nathan slides in from the side and your cursor becomes an OpenWhip-style whip
+- He runs away from your mouse — chase him down and click to dismiss
+
+## Commands
+
+```bash
+nathangong test        # try it now
+nathangong install     # re-wire the hook
+nathangong uninstall   # remove the hook
+```
+
+## Uninstall
+
+```bash
+nathangong uninstall
+npm uninstall -g nathangong
+```
+
+## Notes
+
+- Only one Nathan session at a time (duplicate hook fires are ignored)
+- Optional timeout: `NATHANGONG_POPUP_SECONDS=120`
+- Whip overlay uses Electron (~150MB download on first `npm install`)
+- Does **not** run on the Fleetline web app — local Claude Code only
+
+## Troubleshooting
+
+**Nothing appears:** run `nathangong test` and check Node ≥ 18.
+
+**Multiple Nathans:** dismiss the current one first; lock clears on exit.
+
+**Native fallback only (no whip):** Electron failed to start — re-run `npm install` in the package folder.

package/README.md

@@ -1,7 +1,8 @@
 # nathangong
 
-Pops a macOS notification with a photo of **Nathan Gong** every time Claude Code
-finishes responding to a prompt. Download it and it just works.
+Whip-a-Nathan for Claude Code: after every turn, your cursor becomes an
+**OpenWhip**-style whip and a photo of **Nathan Gong** slides in slowly from
+the left or right. Click Nathan to whip him away.
 
 ## Install
 
@@ -9,28 +10,20 @@ finishes responding to a prompt. Download it and it just works.
 npm install -g nathangong
 ```
 
-That's it. The `postinstall` step wires a Claude Code [`Stop` hook](https://docs.claude.com/en/docs/claude-code/hooks)
-into `~/.claude/settings.json`. The next time Claude finishes a turn, Nathan says hi.
+The `postinstall` step wires a Claude Code [`Stop` hook](https://docs.claude.com/en/docs/claude-code/hooks)
+into `~/.claude/settings.json`.
 
-### Photos vs. emoji
+Uses an Electron overlay with OpenWhip whip physics (adapted from
+[OpenWhip](https://github.com/GitFrog1111/OpenWhip)). Falls back to a native
+macOS popup if Electron can't launch.
 
-The photo is rendered via the bundled [`node-notifier`](https://github.com/mikaelbr/node-notifier),
-whose `terminal-notifier` binary is **x86_64**. So:
-
-- **Intel Mac**, or **Apple Silicon with Rosetta** → you get the **photo**. 📸
-- **Apple Silicon without Rosetta** → you get an **emoji notification** (macOS
-  can't attach a custom image without a runnable helper binary).
-
-To get photos on Apple Silicon, install Rosetta once:
-
-```bash
-softwareupdate --install-rosetta --agree-to-license
-```
+Set a max timeout if Nathan survives too long (default 60s):
+`NATHANGONG_POPUP_SECONDS=120`.
 
 ## Commands
 
 ```bash
-nathangong test        # fire a notification right now to check it works
+nathangong test        # pop Nathan on screen right now to check it works
 nathangong install     # (re)wire the Stop hook
 nathangong uninstall   # remove the Stop hook
 ```
@@ -47,11 +40,17 @@ The `preuninstall` step removes the hook from your settings. (You can also run
 ## How it works
 
 - The `Stop` hook runs `node .../scripts/notify.js` when Claude ends a turn.
-- `notify.js` picks a random photo from `assets/` and fires a notification via
-  `node-notifier` (`contentImage`), falling back to `osascript` (emoji only).
+- `notify.js` picks a random photo from `assets/` and shows it with the native
+  `vendor/nathan-popup` window, falling back to an `osascript` text notification.
 - Editing `~/.claude/settings.json` is idempotent and backs the file up to
   `settings.json.nathangong.bak` before any change.
 
+## Rebuilding the native binary
+
+```bash
+bash native/build.sh   # needs Xcode; rebuilds vendor/nathan-popup (universal, ad-hoc signed)
+```
+
 ## Use as a library
 
 ```js

package/native/build.sh

@@ -0,0 +1,32 @@
+#!/usr/bin/env bash
+# Builds the universal (arm64 + x86_64) nathan-popup binary into ../vendor.
+# Requires Xcode / the Swift toolchain. Run on macOS.
+set -euo pipefail
+cd "$(dirname "$0")"
+
+SRC="nathan-popup.swift"
+OUT="../vendor/nathan-popup"
+mkdir -p ../vendor
+
+build() { # <arch>
+  swiftc -O -target "$1-apple-macos11" "$SRC" -o "nathan-popup-$1"
+}
+
+echo "building arm64…"
+build arm64
+SLICES=(nathan-popup-arm64)
+
+if build x86_64 2>/dev/null; then
+  echo "building x86_64… ok"
+  SLICES+=(nathan-popup-x86_64)
+else
+  echo "x86_64 slice failed — shipping arm64-only"
+fi
+
+lipo -create -output "$OUT" "${SLICES[@]}"
+rm -f nathan-popup-arm64 nathan-popup-x86_64
+chmod +x "$OUT"
+codesign -s - -f "$OUT"   # ad-hoc sign so Gatekeeper is happy
+echo "--- built $OUT ---"
+lipo -info "$OUT"
+codesign -dv "$OUT" 2>&1 | head -3

package/native/nathan-popup.swift

@@ -0,0 +1,144 @@
+// nathan-popup <imagePath> [caption] [seconds]
+//
+// Fallback when Electron/OpenWhip overlay isn't available: Nathan slides in
+// slowly from the left or right. Click him to dismiss.
+
+import Cocoa
+
+let args = CommandLine.arguments
+guard args.count >= 2 else { exit(0) }
+let imagePath = args[1]
+let caption = args.count >= 3 ? args[2] : ""
+let maxSeconds = args.count >= 4 ? (Double(args[3]) ?? 60) : 60
+
+guard let image = NSImage(contentsOfFile: imagePath) else { exit(0) }
+
+enum EntrySide: CaseIterable {
+    case left, right
+}
+
+final class WhackTargetView: NSView {
+    var onWhack: (() -> Void)?
+
+    override func mouseDown(with event: NSEvent) {
+        onWhack?()
+    }
+}
+
+func targetFrame(for side: EntrySide, in visibleFrame: NSRect, size: NSSize) -> NSRect {
+    let y = visibleFrame.midY - size.height / 2
+    switch side {
+    case .left:
+        return NSRect(x: visibleFrame.minX + 20, y: y, width: size.width, height: size.height)
+    case .right:
+        return NSRect(x: visibleFrame.maxX - size.width - 20, y: y, width: size.width, height: size.height)
+    }
+}
+
+func offScreenFrame(for side: EntrySide, resting: NSRect, visibleFrame: NSRect) -> NSRect {
+    switch side {
+    case .left:
+        return NSRect(x: visibleFrame.minX - resting.width - 20, y: resting.origin.y, width: resting.width, height: resting.height)
+    case .right:
+        return NSRect(x: visibleFrame.maxX + 20, y: resting.origin.y, width: resting.width, height: resting.height)
+    }
+}
+
+let app = NSApplication.shared
+app.setActivationPolicy(.accessory)
+
+let imgW: CGFloat = 240
+let ratio = image.size.width > 0 ? image.size.height / image.size.width : 1
+let imgH = (imgW * ratio).rounded()
+let capH: CGFloat = caption.isEmpty ? 0 : 24
+let pad: CGFloat = 12
+let winW = imgW + pad * 2
+let winH = imgH + capH + pad * 2
+let winSize = NSSize(width: winW, height: winH)
+
+guard let screen = NSScreen.main else { exit(0) }
+let vf = screen.visibleFrame
+let side = EntrySide.allCases.randomElement() ?? .right
+let endFrame = targetFrame(for: side, in: vf, size: winSize)
+let startFrame = offScreenFrame(for: side, resting: endFrame, visibleFrame: vf)
+
+let panel = NSPanel(
+    contentRect: startFrame,
+    styleMask: [.borderless, .nonactivatingPanel],
+    backing: .buffered,
+    defer: false
+)
+panel.isFloatingPanel = true
+panel.level = .floating
+panel.backgroundColor = .clear
+panel.isOpaque = false
+panel.hasShadow = true
+panel.ignoresMouseEvents = false
+panel.acceptsMouseMovedEvents = true
+panel.collectionBehavior = [.canJoinAllSpaces, .fullScreenAuxiliary]
+
+let container = WhackTargetView(frame: NSRect(x: 0, y: 0, width: winW, height: winH))
+container.wantsLayer = true
+container.layer?.backgroundColor = NSColor(calibratedWhite: 0.10, alpha: 0.94).cgColor
+container.layer?.cornerRadius = 16
+
+let iv = NSImageView(frame: NSRect(x: pad, y: pad + capH, width: imgW, height: imgH))
+iv.image = image
+iv.imageScaling = .scaleProportionallyUpOrDown
+iv.wantsLayer = true
+iv.layer?.cornerRadius = 10
+iv.layer?.masksToBounds = true
+container.addSubview(iv)
+
+if !caption.isEmpty {
+    let label = NSTextField(labelWithString: caption)
+    label.frame = NSRect(x: pad, y: pad - 3, width: imgW, height: capH)
+    label.alignment = .center
+    label.textColor = .white
+    label.font = NSFont.systemFont(ofSize: 13, weight: .semibold)
+    label.backgroundColor = .clear
+    label.isBezeled = false
+    label.isEditable = false
+    label.lineBreakMode = .byTruncatingTail
+    container.addSubview(label)
+}
+
+panel.contentView = container
+panel.alphaValue = 0
+panel.setFrame(startFrame, display: false)
+panel.orderFrontRegardless()
+
+var dismissed = false
+
+func cleanupAndExit() {
+    app.terminate(nil)
+}
+
+func dismissWhacked() {
+    guard !dismissed else { return }
+    dismissed = true
+
+    NSAnimationContext.runAnimationGroup({ ctx in
+        ctx.duration = 0.25
+        panel.animator().alphaValue = 0
+    }, completionHandler: {
+        cleanupAndExit()
+    })
+}
+
+container.onWhack = dismissWhacked
+
+NSAnimationContext.runAnimationGroup { ctx in
+    ctx.duration = 1.5
+    ctx.timingFunction = CAMediaTimingFunction(name: .easeInEaseOut)
+    panel.animator().alphaValue = 1
+    panel.animator().setFrame(endFrame, display: true)
+}
+
+DispatchQueue.main.asyncAfter(deadline: .now() + max(maxSeconds, 10)) {
+    guard !dismissed else { return }
+    dismissed = true
+    cleanupAndExit()
+}
+
+app.run()

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "nathangong",
-  "version": "0.1.0",
-  "description": "Pops a macOS notification with a photo of Nathan Gong after every Claude Code turn.",
+  "version": "0.4.0",
+  "description": "Whip-a-Nathan: OpenWhip cursor + Nathan slides in from the side after every Claude Code turn.",
   "keywords": [
     "nathan gong",
     "claude",
@@ -20,8 +20,12 @@
     "bin",
     "scripts",
     "assets",
+    "vendor",
+    "native",
+    "whip",
     "index.js",
-    "README.md"
+    "README.md",
+    "INSTALL.md"
   ],
   "scripts": {
     "postinstall": "node scripts/postinstall.js",
@@ -29,9 +33,9 @@
     "test": "node bin/cli.js test"
   },
   "engines": {
-    "node": ">=14"
+    "node": ">=18.0.0"
   },
   "dependencies": {
-    "node-notifier": "^10.0.1"
+    "electron": "^33.0.0"
   }
 }

package/scripts/notify.js

@@ -2,29 +2,27 @@
 "use strict";
 
 // The Claude Code `Stop` hook body: fires each time Claude finishes a turn.
-// Pops a macOS notification with a random photo of Nathan Gong.
-//
-// Uses node-notifier, which bundles its own copy of terminal-notifier and
-// supports `contentImage` — so the photo shows up with no extra system setup
-// (no Homebrew needed). Falls back to plain `osascript` (emoji only) if
-// node-notifier is unavailable or errors.
+// Opens an OpenWhip-style whip overlay (cursor becomes the whip) and slides
+// Nathan in gently from the left or right. Click Nathan to whip him away.
+// Falls back to the native popup, then osascript, if Electron can't launch.
 //
 // Rules: always exit 0 (a failing hook nags every turn) and never hang.
 
 const fs = require("fs");
 const path = require("path");
 const { spawn } = require("child_process");
+const { tryAcquireLock, claimLock, clearLock } = require("./session-lock");
 
 process.stdout.on("error", () => {});
 process.stderr.on("error", () => {});
 
 const TITLE = "nathan gong 🔔";
-const LINES = [
-  "nathan gong has entered the chat 🧑‍💻",
-  "a wild nathan gong appears 👋",
-  "nathan gong approves this prompt ✅",
-  "thinking about nathan gong 🤔",
-  "nathan gong says: nice turn 🏀",
+const CAPTIONS = [
+  "nathan gong 🧑‍💻",
+  "a wild nathan gong 👋",
+  "nathan approves ✅",
+  "thinking of nathan 🤔",
+  "nathan gong 🏀",
 ];
 
 function pick(arr) {
@@ -44,15 +42,69 @@ function pickImage() {
   }
 }
 
-function done() {
-  process.exit(0);
+function canRun(p) {
+  try {
+    fs.accessSync(p, fs.constants.X_OK);
+    return true;
+  } catch (_) {
+    return false;
+  }
+}
+
+function electronBinary() {
+  try {
+    return require("electron");
+  } catch (_) {
+    return null;
+  }
+}
+
+function launchWhipOverlay(image, caption, seconds) {
+  const electronPath = electronBinary();
+  if (!electronPath) return false;
+
+  const main = path.join(__dirname, "..", "whip", "main.js");
+  if (!fs.existsSync(main)) return false;
+
+  if (!tryAcquireLock()) return false;
+
+  const child = spawn(
+    electronPath,
+    [main, image, caption, seconds],
+    {
+      detached: true,
+      stdio: "ignore",
+      cwd: path.join(__dirname, "..", "whip"),
+    },
+  );
+
+  child.on("error", () => clearLock());
+  child.on("spawn", () => claimLock(child.pid));
+  child.unref();
+  return true;
 }
 
-// Emoji-only fallback — macOS's built-in notification can't render an image.
-function osascriptFallback(line) {
+function launchNativePopup(image, caption, seconds) {
+  const popup = path.join(__dirname, "..", "vendor", "nathan-popup");
+  if (!canRun(popup)) return false;
+
+  if (!tryAcquireLock()) return false;
+
+  const child = spawn(popup, [image, caption, seconds], {
+    detached: true,
+    stdio: "ignore",
+  });
+
+  child.on("error", () => clearLock());
+  child.on("spawn", () => claimLock(child.pid));
+  child.unref();
+  return true;
+}
+
+function osascriptFallback(caption) {
   const script =
     "display notification " +
-    JSON.stringify(line) +
+    JSON.stringify(caption) +
     " with title " +
     JSON.stringify(TITLE);
   const child = spawn("osascript", ["-e", script], {
@@ -63,42 +115,24 @@ function osascriptFallback(line) {
 }
 
 function main() {
-  if (process.platform !== "darwin") return done();
+  if (process.platform !== "darwin") return process.exit(0);
 
-  const line = pick(LINES);
+  const caption = pick(CAPTIONS);
   const image = pickImage();
+  const seconds = String(Number(process.env.NATHANGONG_POPUP_SECONDS) || 60);
 
-  // Safety net: never let the hook hang the turn.
-  const safety = setTimeout(done, 5000);
-  safety.unref();
-
-  let notifier;
-  try {
-    notifier = require("node-notifier");
-  } catch (_) {
-    osascriptFallback(line);
-    return done();
+  if (image && launchWhipOverlay(image, caption, seconds)) {
+    setTimeout(() => process.exit(0), 150);
+    return;
   }
 
-  try {
-    notifier.notify(
-      {
-        title: TITLE,
-        message: line,
-        contentImage: image || undefined, // right-side thumbnail (the photo)
-        appIcon: image || undefined, // left icon
-        sound: false,
-        wait: false,
-      },
-      (err) => {
-        if (err) osascriptFallback(line);
-        done();
-      }
-    );
-  } catch (_) {
-    osascriptFallback(line);
-    done();
+  if (image && launchNativePopup(image, caption, seconds)) {
+    setTimeout(() => process.exit(0), 150);
+    return;
   }
+
+  osascriptFallback(caption);
+  process.exit(0);
 }
 
 main();

package/scripts/postinstall.js

@@ -28,23 +28,3 @@ try {
   log("nathangong: couldn't wire the hook automatically (" + (err && err.message) + ").");
   log("nathangong: run `nathangong install` to set it up manually.");
 }
-
-// Apple Silicon without Rosetta can't run the bundled x86_64 terminal-notifier,
-// so it falls back to an emoji notification. Let the user know how to get photos.
-try {
-  const os = require("os");
-  if (process.platform === "darwin" && os.arch() === "arm64") {
-    const { execFileSync } = require("child_process");
-    let rosetta = false;
-    try {
-      execFileSync("/usr/bin/pgrep", ["-q", "oahd"]);
-      rosetta = true;
-    } catch (_) {}
-    if (!rosetta) {
-      log("");
-      log("nathangong: you're on Apple Silicon without Rosetta — you'll get emoji");
-      log("nathangong: notifications. For actual PHOTOS of Nathan, install Rosetta once:");
-      log("   softwareupdate --install-rosetta --agree-to-license");
-    }
-  }
-} catch (_) {}

package/scripts/session-lock.js

@@ -0,0 +1,74 @@
+"use strict";
+
+const fs = require("fs");
+const os = require("os");
+const path = require("path");
+
+const LOCK_PATH = path.join(os.tmpdir(), "nathangong-session.lock");
+const STALE_MS = 8000;
+
+function readLock() {
+  try {
+    const raw = fs.readFileSync(LOCK_PATH, "utf8").trim();
+    const [pidRaw, startedRaw] = raw.split(":");
+    return {
+      pid: Number(pidRaw),
+      startedAt: Number(startedRaw) || 0,
+    };
+  } catch (_) {
+    return null;
+  }
+}
+
+function isAlive(pid) {
+  if (!pid || !Number.isFinite(pid)) return false;
+  try {
+    process.kill(pid, 0);
+    return true;
+  } catch (_) {
+    return false;
+  }
+}
+
+function clearLock() {
+  try {
+    fs.unlinkSync(LOCK_PATH);
+  } catch (_) {}
+}
+
+/** Returns false if another live session already owns the lock. */
+function tryAcquireLock() {
+  const existing = readLock();
+  if (existing) {
+    const age = Date.now() - existing.startedAt;
+    if (isAlive(existing.pid) && age < STALE_MS * 60) {
+      return false;
+    }
+    clearLock();
+  }
+
+  try {
+    fs.writeFileSync(LOCK_PATH, `0:${Date.now()}`, { flag: "wx" });
+    return true;
+  } catch (err) {
+    if (err && err.code === "EEXIST") return false;
+    return false;
+  }
+}
+
+function claimLock(pid) {
+  fs.writeFileSync(LOCK_PATH, `${pid}:${Date.now()}`);
+}
+
+function releaseLock(pid) {
+  const existing = readLock();
+  if (existing && existing.pid === pid) clearLock();
+}
+
+module.exports = {
+  LOCK_PATH,
+  tryAcquireLock,
+  claimLock,
+  releaseLock,
+  clearLock,
+};

package/whip/main.js

@@ -0,0 +1,90 @@
+"use strict";
+
+const { app, BrowserWindow, ipcMain, screen } = require("electron");
+const path = require("path");
+const { claimLock, releaseLock } = require("../scripts/session-lock");
+
+let overlay = null;
+
+const gotLock = app.requestSingleInstanceLock();
+if (!gotLock) {
+  app.quit();
+}
+
+app.on("second-instance", () => {
+  // Ignore duplicate hook fires while Nathan is already on screen.
+});
+
+function createOverlay(imagePath, caption, maxSeconds) {
+  const display = screen.getPrimaryDisplay();
+  const { bounds } = display;
+
+  overlay = new BrowserWindow({
+    x: bounds.x,
+    y: bounds.y,
+    width: bounds.width,
+    height: bounds.height,
+    transparent: true,
+    frame: false,
+    alwaysOnTop: true,
+    focusable: false,
+    skipTaskbar: true,
+    resizable: false,
+    hasShadow: false,
+    webPreferences: {
+      preload: path.join(__dirname, "preload.js"),
+      contextIsolation: true,
+      nodeIntegration: false,
+    },
+  });
+
+  overlay.setAlwaysOnTop(true, "screen-saver");
+  overlay.setVisibleOnAllWorkspaces(true, { visibleOnFullScreen: true });
+
+  const query = new URLSearchParams({
+    maxSeconds: String(maxSeconds),
+  }).toString();
+
+  overlay.loadFile(path.join(__dirname, "overlay.html"), { query });
+
+  overlay.webContents.on("did-finish-load", () => {
+    overlay.webContents.send("init-nathan", { imagePath, caption });
+    overlay.webContents.send("spawn-whip");
+  });
+
+  const timeoutMs = Math.max(Number(maxSeconds) || 60, 10) * 1000;
+  setTimeout(() => {
+    if (overlay && !overlay.isDestroyed()) {
+      app.quit();
+    }
+  }, timeoutMs);
+}
+
+ipcMain.on("whip-crack", () => {
+  // Cosmetic only — OpenWhip sends Ctrl-C here; nathangong does not.
+});
+
+ipcMain.on("hide-overlay", () => {
+  app.quit();
+});
+
+app.whenReady().then(() => {
+  if (!gotLock) return;
+
+  const imagePath = process.argv[2];
+  const caption = process.argv[3] || "";
+  const maxSeconds = process.argv[4] || "60";
+  if (!imagePath) {
+    app.quit();
+    return;
+  }
+
+  claimLock(process.pid);
+  createOverlay(imagePath, caption, maxSeconds);
+});
+
+app.on("will-quit", () => {
+  releaseLock(process.pid);
+});
+
+app.on("window-all-closed", () => app.quit());

package/whip/overlay.html

@@ -0,0 +1,534 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>nathangong</title>
+  <style>
+    * { margin: 0; padding: 0; cursor: none; box-sizing: border-box; }
+    html, body { overflow: hidden; background: transparent; width: 100%; height: 100%; }
+    canvas { display: block; position: fixed; inset: 0; z-index: 1; }
+    #nathan-card {
+      position: fixed;
+      left: 0;
+      top: 0;
+      z-index: 2;
+      width: 264px;
+      padding: 12px;
+      border-radius: 16px;
+      background: rgba(26, 26, 26, 0.94);
+      box-shadow: 0 12px 40px rgba(0, 0, 0, 0.35);
+      opacity: 0;
+      pointer-events: auto;
+      will-change: left, top, opacity;
+    }
+    #nathan-card.visible {
+      opacity: 1;
+    }
+    #nathan-img {
+      display: block;
+      width: 240px;
+      height: auto;
+      border-radius: 10px;
+    }
+    #nathan-caption {
+      margin-top: 8px;
+      text-align: center;
+      color: #fff;
+      font: 600 13px/1.2 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+    }
+    #nathan-caption:empty { display: none; }
+  </style>
+</head>
+<body>
+  <canvas id="c"></canvas>
+  <div id="nathan-card">
+    <img id="nathan-img" alt="Nathan Gong" />
+    <div id="nathan-caption"></div>
+  </div>
+
+<script>
+const params = new URLSearchParams(window.location.search);
+
+const nathanCard = document.getElementById("nathan-card");
+const nathanImg = document.getElementById("nathan-img");
+const nathanCaptionEl = document.getElementById("nathan-caption");
+
+const clamp = (v, lo, hi) => Math.max(lo, Math.min(hi, v));
+const lerp = (a, b, t) => a + (b - a) * t;
+
+const N = {
+  margin: 24,
+  fleeRadius: 200,
+  fleeSpeed: 5.5,
+  slideDurationMs: 1500,
+};
+
+let fromLeft = Math.random() < 0.5;
+let nathanX = 0;
+let nathanY = 0;
+let nathanSlidingIn = false;
+let nathanCanFlee = false;
+let slideStartAt = 0;
+let slideFromX = 0;
+let slideFromY = 0;
+let slideToX = 0;
+let slideToY = 0;
+
+function nathanSize() {
+  const rect = nathanCard.getBoundingClientRect();
+  return { w: rect.width || 264, h: rect.height || 320 };
+}
+
+function clampNathanPosition(x, y) {
+  const { w, h } = nathanSize();
+  return {
+    x: clamp(x, N.margin, Math.max(N.margin, W - w - N.margin)),
+    y: clamp(y, N.margin, Math.max(N.margin, H - h - N.margin)),
+  };
+}
+
+function setNathanPosition(x, y) {
+  const clamped = clampNathanPosition(x, y);
+  nathanX = clamped.x;
+  nathanY = clamped.y;
+  nathanCard.style.left = `${nathanX}px`;
+  nathanCard.style.top = `${nathanY}px`;
+}
+
+function startSlideIn() {
+  const { w, h } = nathanSize();
+  slideToY = (H - h) / 2;
+  slideToX = fromLeft ? N.margin : Math.max(N.margin, W - w - N.margin);
+  slideFromY = slideToY;
+  slideFromX = fromLeft ? -w - 40 : W + 40;
+
+  setNathanPosition(slideFromX, slideFromY);
+  nathanCard.classList.add("visible");
+  nathanSlidingIn = true;
+  nathanCanFlee = false;
+  slideStartAt = performance.now();
+}
+
+function initNathan({ imagePath, caption }) {
+  nathanCaptionEl.textContent = caption || "";
+  if (imagePath) {
+    nathanImg.onload = () => startSlideIn();
+    nathanImg.src = encodeURI(`file://${imagePath}`);
+    if (nathanImg.complete) startSlideIn();
+  } else {
+    startSlideIn();
+  }
+}
+
+function updateNathanMotion() {
+  if (nathanWhacked) return;
+
+  if (nathanSlidingIn) {
+    const t = clamp((performance.now() - slideStartAt) / N.slideDurationMs, 0, 1);
+    const eased = 1 - Math.pow(1 - t, 3);
+    setNathanPosition(
+      lerp(slideFromX, slideToX, eased),
+      lerp(slideFromY, slideToY, eased),
+    );
+    if (t >= 1) {
+      nathanSlidingIn = false;
+      nathanCanFlee = true;
+    }
+    return;
+  }
+
+  if (!nathanCanFlee) return;
+
+  const { w, h } = nathanSize();
+  const cx = nathanX + w / 2;
+  const cy = nathanY + h / 2;
+  const dx = cx - mouseX;
+  const dy = cy - mouseY;
+  const dist = Math.hypot(dx, dy);
+  if (dist > N.fleeRadius || dist < 1) return;
+
+  const push = ((N.fleeRadius - dist) / N.fleeRadius) * N.fleeSpeed;
+  setNathanPosition(nathanX + (dx / dist) * push, nathanY + (dy / dist) * push);
+}
+
+window.bridge.onInitNathan(initNathan);
+
+let nathanWhacked = false;
+function whackNathan() {
+  if (nathanWhacked) return;
+  nathanWhacked = true;
+  nathanCanFlee = false;
+  nathanCard.style.opacity = "0";
+  nathanCard.style.transform = "scale(0.85)";
+  nathanCard.style.transition = "opacity 0.25s ease-in, transform 0.25s ease-in";
+  playCrackSound();
+  if (whip && !dropping) dropping = true;
+  setTimeout(() => window.bridge.hideOverlay(), 450);
+}
+
+nathanCard.addEventListener("mousedown", (e) => {
+  e.stopPropagation();
+  whackNathan();
+});
+
+// ── OpenWhip physics (adapted) ───────────────────────────────────────────────
+const P = {
+  segments: 28,
+  segmentLength: 25,
+  taper: 0.6,
+  gravity: 1.0,
+  dropGravity: 0.95,
+  damping: 0.96,
+  constraintIters: 20,
+  maxStretchRatio: 1.2,
+  baseTargetAngle: -1.12,
+  handleAimByMouseX: 0.4,
+  handleAimByMouseY: 0.2,
+  handleAimClamp: 2.0,
+  handleSpring: 0.7,
+  handleAngularDamping: 0.078,
+  basePoseSegments: 2,
+  basePoseStiffStart: 0.9,
+  basePoseStiffEnd: 0.8,
+  handleMaxBendDeg: 16,
+  tipMaxBendDeg: 130,
+  bendRigidityStart: 0.8,
+  bendRigidityEnd: 0.12,
+  wallBounce: 0.42,
+  wallFriction: 0.86,
+  crackSpeed: 340,
+  crackCooldownMs: 200,
+  firstCrackGraceMs: 350,
+  lineWidthHandle: 7,
+  lineWidthTip: 5,
+  outlineWidth: 3,
+  handleExtraWidth: 5,
+  handleThickSegments: 2,
+  bgAlpha: 0.011,
+  arcWidth: 260,
+  arcHeight: 185,
+};
+
+const canvas = document.getElementById("c");
+const ctx = canvas.getContext("2d");
+let W, H;
+
+function resize() {
+  W = canvas.width = window.innerWidth;
+  H = canvas.height = window.innerHeight;
+}
+resize();
+window.addEventListener("resize", resize);
+
+let mouseX = W / 2;
+let mouseY = H / 2;
+let prevMouseX = mouseX;
+let prevMouseY = mouseY;
+let whip = null;
+let dropping = false;
+let lastCrackTime = 0;
+let whipSpawnTime = 0;
+let handleAngle = P.baseTargetAngle;
+let handleAngVel = 0;
+
+const WHIP_CRACK_SOUNDS = ["sounds/A.mp3", "sounds/B.mp3", "sounds/C.mp3", "sounds/D.mp3", "sounds/E.mp3"];
+
+document.addEventListener("mousemove", (e) => {
+  mouseX = e.clientX;
+  mouseY = e.clientY;
+});
+
+document.addEventListener("mousedown", (e) => {
+  if (e.target.closest("#nathan-card")) return;
+  if (whip && !dropping) dropping = true;
+});
+
+function spawnWhip(mx, my) {
+  dropping = false;
+  lastCrackTime = 0;
+  whipSpawnTime = Date.now();
+  const pts = [];
+  for (let i = 0; i < P.segments; i++) {
+    const t = i / (P.segments - 1);
+    const x = mx + t * P.arcWidth;
+    const y = my - Math.sin(t * Math.PI * 0.75) * P.arcHeight;
+    pts.push({ x, y, px: x, py: y });
+  }
+  return pts;
+}
+
+function segLen(i) {
+  const t = i / (P.segments - 1);
+  return P.segmentLength * (1 - t * (1 - P.taper));
+}
+
+function catmullPoint(pts, i) {
+  const n = pts.length;
+  if (n === 0) return { x: 0, y: 0 };
+  if (i < 0) {
+    if (n >= 2) return { x: 2 * pts[0].x - pts[1].x, y: 2 * pts[0].y - pts[1].y };
+    return { x: pts[0].x, y: pts[0].y };
+  }
+  if (i >= n) {
+    if (n >= 2) {
+      const a = pts[n - 2], b = pts[n - 1];
+      return { x: 2 * b.x - a.x, y: 2 * b.y - a.y };
+    }
+    return { x: pts[n - 1].x, y: pts[n - 1].y };
+  }
+  return pts[i];
+}
+
+function whipSegmentBezier(pts, i) {
+  const p0 = catmullPoint(pts, i - 1);
+  const p1 = pts[i];
+  const p2 = pts[i + 1];
+  const p3 = catmullPoint(pts, i + 2);
+  return {
+    cp1x: p1.x + (p2.x - p0.x) / 6,
+    cp1y: p1.y + (p2.y - p0.y) / 6,
+    cp2x: p2.x - (p3.x - p1.x) / 6,
+    cp2y: p2.y - (p3.y - p1.y) / 6,
+    x2: p2.x,
+    y2: p2.y,
+  };
+}
+
+const wrapPi = (a) => {
+  while (a > Math.PI) a -= Math.PI * 2;
+  while (a < -Math.PI) a += Math.PI * 2;
+  return a;
+};
+
+function playCrackSound() {
+  if (!WHIP_CRACK_SOUNDS.length) return;
+  const src = WHIP_CRACK_SOUNDS[Math.floor(Math.random() * WHIP_CRACK_SOUNDS.length)];
+  const a = new Audio(src);
+  a.play().catch(() => {});
+}
+
+function updateHandleAim() {
+  if (dropping) return;
+  const mvx = mouseX - prevMouseX;
+  const mvy = mouseY - prevMouseY;
+  const delta = clamp(
+    mvx * P.handleAimByMouseX + mvy * P.handleAimByMouseY,
+    -P.handleAimClamp,
+    P.handleAimClamp
+  );
+  const target = P.baseTargetAngle + delta;
+  const err = wrapPi(target - handleAngle);
+  handleAngVel += err * P.handleSpring;
+  handleAngVel *= P.handleAngularDamping;
+  handleAngle = wrapPi(handleAngle + handleAngVel);
+}
+
+function applyBasePose() {
+  if (!whip || dropping) return;
+  const dx = Math.cos(handleAngle);
+  const dy = Math.sin(handleAngle);
+  const guided = Math.min(P.basePoseSegments, whip.length - 1);
+  for (let i = 1; i <= guided; i++) {
+    const t = (i - 1) / Math.max(guided - 1, 1);
+    const stiff = lerp(P.basePoseStiffStart, P.basePoseStiffEnd, t);
+    const prev = whip[i - 1];
+    const p = whip[i];
+    const targetLen = segLen(i - 1);
+    const tx = prev.x + dx * targetLen;
+    const ty = prev.y + dy * targetLen;
+    p.x = lerp(p.x, tx, stiff);
+    p.y = lerp(p.y, ty, stiff);
+  }
+}
+
+function applyBendLimits() {
+  if (!whip || whip.length < 3) return;
+  for (let i = 1; i < whip.length - 1; i++) {
+    const a = whip[i - 1];
+    const b = whip[i];
+    const c = whip[i + 1];
+    const v1x = a.x - b.x;
+    const v1y = a.y - b.y;
+    const v2x = c.x - b.x;
+    const v2y = c.y - b.y;
+    const l1 = Math.hypot(v1x, v1y) || 0.0001;
+    const l2 = Math.hypot(v2x, v2y) || 0.0001;
+    const n1x = v1x / l1, n1y = v1y / l1;
+    const n2x = v2x / l2, n2y = v2y / l2;
+    const dot = clamp(n1x * n2x + n1y * n2y, -1, 1);
+    const angle = Math.acos(dot);
+    const t = i / (whip.length - 2);
+    const maxBend = lerp(P.handleMaxBendDeg, P.tipMaxBendDeg, t) * Math.PI / 180;
+    const bend = Math.PI - angle;
+    if (bend <= maxBend) continue;
+    const cross = n1x * n2y - n1y * n2x;
+    const sign = cross >= 0 ? 1 : -1;
+    const targetAngle = Math.PI - maxBend;
+    const targetA = Math.atan2(n1y, n1x) + sign * targetAngle;
+    const tx = b.x + Math.cos(targetA) * l2;
+    const ty = b.y + Math.sin(targetA) * l2;
+    const rigidity = lerp(P.bendRigidityStart, P.bendRigidityEnd, t);
+    c.x = lerp(c.x, tx, rigidity);
+    c.y = lerp(c.y, ty, rigidity);
+  }
+}
+
+function capSegmentStretch() {
+  if (!whip || whip.length < 2) return;
+  for (let i = 0; i < whip.length - 1; i++) {
+    const a = whip[i];
+    const b = whip[i + 1];
+    const dx = b.x - a.x;
+    const dy = b.y - a.y;
+    const dist = Math.hypot(dx, dy) || 0.0001;
+    const maxLen = segLen(i) * P.maxStretchRatio;
+    if (dist <= maxLen) continue;
+    const k = maxLen / dist;
+    b.x = a.x + dx * k;
+    b.y = a.y + dy * k;
+  }
+}
+
+function applyWallCollisions() {
+  if (!whip || dropping) return;
+  for (let i = 1; i < whip.length; i++) {
+    const p = whip[i];
+    let vx = p.x - p.px;
+    let vy = p.y - p.py;
+    let hit = false;
+    if (p.x < 0) { p.x = 0; if (vx < 0) vx = -vx * P.wallBounce; vy *= P.wallFriction; hit = true; }
+    else if (p.x > W) { p.x = W; if (vx > 0) vx = -vx * P.wallBounce; vy *= P.wallFriction; hit = true; }
+    if (p.y < 0) { p.y = 0; if (vy < 0) vy = -vy * P.wallBounce; vx *= P.wallFriction; hit = true; }
+    else if (p.y > H) { p.y = H; if (vy > 0) vy = -vy * P.wallBounce; vx *= P.wallFriction; hit = true; }
+    if (hit) { p.px = p.x - vx; p.py = p.y - vy; }
+  }
+}
+
+function update() {
+  if (!whip) return;
+  const g = dropping ? P.dropGravity : P.gravity;
+  updateHandleAim();
+  const start = dropping ? 0 : 1;
+  for (let i = start; i < whip.length; i++) {
+    const p = whip[i];
+    const vx = (p.x - p.px) * P.damping;
+    const vy = (p.y - p.py) * P.damping;
+    p.px = p.x;
+    p.py = p.y;
+    p.x += vx;
+    p.y += vy + g;
+  }
+  if (!dropping) {
+    whip[0].x = mouseX;
+    whip[0].y = mouseY;
+    whip[0].px = mouseX;
+    whip[0].py = mouseY;
+  }
+  capSegmentStretch();
+  applyWallCollisions();
+  applyBasePose();
+  for (let iter = 0; iter < P.constraintIters; iter++) {
+    for (let i = 0; i < whip.length - 1; i++) {
+      const a = whip[i], b = whip[i + 1];
+      const dx = b.x - a.x, dy = b.y - a.y;
+      const dist = Math.sqrt(dx * dx + dy * dy) || 0.0001;
+      const target = segLen(i);
+      const diff = (dist - target) / dist * 0.5;
+      const ox = dx * diff, oy = dy * diff;
+      if (i === 0 && !dropping) {
+        b.x -= ox * 2;
+        b.y -= oy * 2;
+      } else {
+        a.x += ox; a.y += oy;
+        b.x -= ox; b.y -= oy;
+      }
+    }
+    applyBendLimits();
+    if (!dropping) applyBasePose();
+    capSegmentStretch();
+    applyWallCollisions();
+  }
+  const tip = whip[whip.length - 1];
+  const tipVel = Math.hypot(tip.x - tip.px, tip.y - tip.py);
+  if (!dropping && tipVel > P.crackSpeed) {
+    const now = Date.now();
+    if (now - whipSpawnTime >= P.firstCrackGraceMs && now - lastCrackTime > P.crackCooldownMs) {
+      lastCrackTime = now;
+      playCrackSound();
+    }
+  }
+  if (dropping && whip.every((p) => p.y > H + 60)) {
+    whip = null;
+    dropping = false;
+    if (nathanWhacked) window.bridge.hideOverlay();
+  }
+  prevMouseX = mouseX;
+  prevMouseY = mouseY;
+}
+
+function draw() {
+  ctx.clearRect(0, 0, W, H);
+  ctx.fillStyle = `rgba(0,0,0,${P.bgAlpha})`;
+  ctx.fillRect(0, 0, W, H);
+  if (!whip) return;
+  ctx.lineCap = "round";
+  ctx.lineJoin = "round";
+  ctx.strokeStyle = "#fff";
+  if (whip.length >= 2) {
+    ctx.beginPath();
+    ctx.moveTo(whip[0].x, whip[0].y);
+    for (let i = 0; i < whip.length - 1; i++) {
+      const { cp1x, cp1y, cp2x, cp2y, x2, y2 } = whipSegmentBezier(whip, i);
+      ctx.bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x2, y2);
+    }
+    ctx.lineWidth = P.lineWidthTip + P.outlineWidth * 2;
+    ctx.stroke();
+    const thickLinks = Math.min(P.handleThickSegments, whip.length - 1);
+    if (thickLinks > 0 && P.handleExtraWidth > 0) {
+      ctx.beginPath();
+      ctx.moveTo(whip[0].x, whip[0].y);
+      for (let i = 0; i < thickLinks; i++) {
+        const { cp1x, cp1y, cp2x, cp2y, x2, y2 } = whipSegmentBezier(whip, i);
+        ctx.bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x2, y2);
+      }
+      ctx.lineWidth = P.lineWidthHandle + P.handleExtraWidth + P.outlineWidth * 2;
+      ctx.stroke();
+    }
+  }
+  ctx.strokeStyle = "#111";
+  for (let i = 0; i < whip.length - 1; i++) {
+    const t = i / Math.max(1, whip.length - 2);
+    const extra = i < P.handleThickSegments ? P.handleExtraWidth : 0;
+    ctx.lineWidth = lerp(P.lineWidthHandle, P.lineWidthTip, t) + extra;
+    const { cp1x, cp1y, cp2x, cp2y, x2, y2 } = whipSegmentBezier(whip, i);
+    ctx.beginPath();
+    ctx.moveTo(whip[i].x, whip[i].y);
+    ctx.bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x2, y2);
+    ctx.stroke();
+  }
+}
+
+function loop() {
+  updateNathanMotion();
+  update();
+  draw();
+  requestAnimationFrame(loop);
+}
+loop();
+
+window.bridge.onSpawnWhip(() => {
+  whip = spawnWhip(mouseX || W / 2, mouseY || H / 2);
+  dropping = false;
+  prevMouseX = mouseX;
+  prevMouseY = mouseY;
+  handleAngle = P.baseTargetAngle;
+  handleAngVel = 0;
+});
+
+window.bridge.onDropWhip(() => {
+  if (whip && !dropping) dropping = true;
+});
+</script>
+</body>
+</html>

package/whip/preload.js

@@ -0,0 +1,9 @@
+const { contextBridge, ipcRenderer } = require("electron");
+
+contextBridge.exposeInMainWorld("bridge", {
+  whipCrack: () => ipcRenderer.send("whip-crack"),
+  hideOverlay: () => ipcRenderer.send("hide-overlay"),
+  onSpawnWhip: (fn) => ipcRenderer.on("spawn-whip", () => fn()),
+  onDropWhip: (fn) => ipcRenderer.on("drop-whip", () => fn()),
+  onInitNathan: (fn) => ipcRenderer.on("init-nathan", (_event, payload) => fn(payload)),
+});