bloby-bot 0.50.3 → 0.51.2

package/package.json

@@ -1,10 +1,10 @@
 {
   "name": "bloby-bot",
-  "version": "0.50.3",
+  "version": "0.51.2",
   "releaseNotes": [
-    "1. Something great..",
-    "2. ",
-    "3. ",
+    "1. New Morphy animation system: config-driven sprites loaded from /morphy/*.json",
+    "2. Swapped teleporting (splash) and headphones (bubble + chat) to the new format",
+    "3. SW cache bumped to v16 to clear old assets",
     "4. "
   ],
   "description": "Self-hosted, self-evolving AI agent with its own dashboard.",

package/supervisor/chat/src/components/Chat/HeadphonesAnimation.tsx

@@ -1,26 +1,40 @@
 import { useEffect, useRef, useCallback } from 'react';
 
-// v2 sprite config
-const HP_COLS = 16;
-const HP_FRAME_W = 126;
-const HP_FRAME_H = 84;
-const HP_IDLE_FRAME = 10;
-const HP_ACTIVATE_START = 11;
-const HP_ACTIVATE_END = 40;
-const HP_RECORD_START = 40;
-const HP_RECORD_END = 85;
-const HP_BASE_FPS = 24;
-const HP_FAST_FPS = 48;
+// Config-driven. Loaded from /morphy/headphones.json.
+// Clips map to states:
+//   idle (hold)      → 'idle'
+//   enter (forward)  → 'activating'
+//   active (pingpong)→ 'recording'
+//   exit (forward)   → 'deactivating'
+const HP_CONFIG_URL = '/morphy/headphones.json';
+const HP_ASSETS_DIR = '/morphy/';
+
+interface HpConfig {
+  spritesheet: string;
+  frame: { w: number; h: number };
+  grid: { cols: number; rows: number };
+  fps: number;
+  clips: {
+    idle: { from: number; to: number; mode: string; fps?: number };
+    enter: { from: number; to: number; mode: string; fps?: number };
+    active: { from: number; to: number; mode: string; fps?: number };
+    exit: { from: number; to: number; mode: string; fps?: number };
+  };
+}
 
 let cachedSprite: HTMLImageElement | null = null;
-function getSprite(): Promise<HTMLImageElement> {
-  if (cachedSprite) return Promise.resolve(cachedSprite);
-  return new Promise((resolve, reject) => {
-    const img = new Image();
-    img.onload = () => { cachedSprite = img; resolve(img); };
-    img.onerror = reject;
-    img.src = '/headphones_spritesheet.webp';
-  });
+let cachedConfig: HpConfig | null = null;
+
+function loadConfigAndSprite(): Promise<{ img: HTMLImageElement; cfg: HpConfig }> {
+  if (cachedSprite && cachedConfig) return Promise.resolve({ img: cachedSprite, cfg: cachedConfig });
+  return fetch(HP_CONFIG_URL)
+    .then((r) => { if (!r.ok) throw new Error('hp config ' + r.status); return r.json() as Promise<HpConfig>; })
+    .then((cfg) => new Promise<{ img: HTMLImageElement; cfg: HpConfig }>((resolve, reject) => {
+      const img = new Image();
+      img.onload = () => { cachedSprite = img; cachedConfig = cfg; resolve({ img, cfg }); };
+      img.onerror = reject;
+      img.src = HP_ASSETS_DIR + cfg.spritesheet;
+    }));
 }
 
 interface Props {
@@ -34,8 +48,9 @@ type HpState = 'idle' | 'activating' | 'activating_then_deactivate' | 'recording
 export default function HeadphonesAnimation({ recording, height = 36, onDone }: Props) {
   const canvasRef = useRef<HTMLCanvasElement>(null);
   const spriteRef = useRef<HTMLImageElement | null>(cachedSprite);
+  const configRef = useRef<HpConfig | null>(cachedConfig);
   const stateRef = useRef<HpState>('idle');
-  const frameRef = useRef(HP_ACTIVATE_START);
+  const frameRef = useRef(0);
   const pingPongRef = useRef(1);
   const lastRef = useRef(0);
   const rafRef = useRef(0);
@@ -43,16 +58,28 @@ export default function HeadphonesAnimation({ recording, height = 36, onDone }:
   const onDoneRef = useRef(onDone);
   onDoneRef.current = onDone;
 
+  // Aspect ratio from config (defaults to 1:1 — matches new sprite).
+  const cfg = configRef.current;
+  const aspectW = cfg ? cfg.frame.w : 180;
+  const aspectH = cfg ? cfg.frame.h : 180;
   const displayH = height;
-  const displayW = Math.round(displayH * (HP_FRAME_W / HP_FRAME_H));
+  const displayW = Math.round(displayH * (aspectW / aspectH));
 
-  useEffect(() => { getSprite().then((img) => { spriteRef.current = img; }); }, []);
+  useEffect(() => {
+    loadConfigAndSprite().then(({ img, cfg }) => {
+      spriteRef.current = img;
+      configRef.current = cfg;
+      if (stateRef.current === 'idle') frameRef.current = cfg.clips.idle.from;
+    });
+  }, []);
 
   // React to recording prop
   useEffect(() => {
+    const cfg = configRef.current;
+    if (!cfg) return;
     if (recording && !prevRecording.current) {
       stateRef.current = 'activating';
-      frameRef.current = HP_ACTIVATE_START;
+      frameRef.current = cfg.clips.enter.from;
       pingPongRef.current = 1;
       lastRef.current = performance.now();
     } else if (!recording && prevRecording.current) {
@@ -60,7 +87,7 @@ export default function HeadphonesAnimation({ recording, height = 36, onDone }:
         stateRef.current = 'activating_then_deactivate';
       } else if (stateRef.current === 'recording') {
         stateRef.current = 'deactivating';
-        frameRef.current = HP_ACTIVATE_END;
+        frameRef.current = cfg.clips.exit.from;
         lastRef.current = performance.now();
       }
     }
@@ -70,17 +97,24 @@ export default function HeadphonesAnimation({ recording, height = 36, onDone }:
   const tick = useCallback((now: number) => {
     const canvas = canvasRef.current;
     const sprite = spriteRef.current;
+    const cfg = configRef.current;
     if (!canvas) { rafRef.current = requestAnimationFrame(tick); return; }
     const ctx = canvas.getContext('2d')!;
     const state = stateRef.current;
 
-    if (state === 'idle' || !sprite) {
+    if (state === 'idle' || !sprite || !cfg) {
       ctx.clearRect(0, 0, displayW, displayH);
       rafRef.current = requestAnimationFrame(tick);
       return;
     }
 
-    const fps = (state === 'activating' || state === 'activating_then_deactivate' || state === 'deactivating') ? HP_FAST_FPS : HP_BASE_FPS;
+    const baseFps = cfg.fps;
+    const fps =
+      state === 'activating' || state === 'activating_then_deactivate'
+        ? (cfg.clips.enter.fps ?? baseFps)
+        : state === 'deactivating'
+          ? (cfg.clips.exit.fps ?? baseFps)
+          : (cfg.clips.active.fps ?? baseFps);
     const frameMs = 1000 / fps;
     const delta = now - lastRef.current;
     if (delta >= frameMs) {
@@ -88,24 +122,25 @@ export default function HeadphonesAnimation({ recording, height = 36, onDone }:
 
       if (state === 'activating' || state === 'activating_then_deactivate') {
         frameRef.current++;
-        if (frameRef.current > HP_ACTIVATE_END) {
+        if (frameRef.current > cfg.clips.enter.to) {
           if (state === 'activating_then_deactivate') {
             stateRef.current = 'deactivating';
-            frameRef.current = HP_ACTIVATE_END;
+            frameRef.current = cfg.clips.exit.from;
           } else {
             stateRef.current = 'recording';
-            frameRef.current = HP_RECORD_START;
+            frameRef.current = cfg.clips.active.from;
             pingPongRef.current = 1;
           }
         }
       } else if (state === 'recording') {
         frameRef.current += pingPongRef.current;
-        if (frameRef.current >= HP_RECORD_END) { frameRef.current = HP_RECORD_END; pingPongRef.current = -1; }
-        else if (frameRef.current <= HP_RECORD_START) { frameRef.current = HP_RECORD_START; pingPongRef.current = 1; }
+        if (frameRef.current >= cfg.clips.active.to) { frameRef.current = cfg.clips.active.to; pingPongRef.current = -1; }
+        else if (frameRef.current <= cfg.clips.active.from) { frameRef.current = cfg.clips.active.from; pingPongRef.current = 1; }
       } else if (state === 'deactivating') {
-        frameRef.current--;
-        if (frameRef.current < HP_ACTIVATE_START) {
+        frameRef.current++;
+        if (frameRef.current > cfg.clips.exit.to) {
           stateRef.current = 'idle';
+          frameRef.current = cfg.clips.idle.from;
           ctx.clearRect(0, 0, displayW, displayH);
           onDoneRef.current?.();
           rafRef.current = requestAnimationFrame(tick);
@@ -114,12 +149,15 @@ export default function HeadphonesAnimation({ recording, height = 36, onDone }:
       }
     }
 
-    const col = frameRef.current % HP_COLS;
-    const row = Math.floor(frameRef.current / HP_COLS);
+    const cols = cfg.grid.cols;
+    const fw = cfg.frame.w;
+    const fh = cfg.frame.h;
+    const col = frameRef.current % cols;
+    const row = Math.floor(frameRef.current / cols);
     ctx.clearRect(0, 0, displayW, displayH);
     ctx.imageSmoothingEnabled = true;
     ctx.imageSmoothingQuality = 'high';
-    ctx.drawImage(sprite, col * HP_FRAME_W, row * HP_FRAME_H, HP_FRAME_W, HP_FRAME_H, 0, 0, displayW, displayH);
+    ctx.drawImage(sprite, col * fw, row * fh, fw, fh, 0, 0, displayW, displayH);
 
     rafRef.current = requestAnimationFrame(tick);
   }, [displayW, displayH]);

package/supervisor/index.ts

@@ -46,6 +46,11 @@ const PLATFORM_ASSETS = new Set([
   '/manifest.json',
 ]);
 
+// Directory-prefix platform assets — anything under these is served from supervisor/public/.
+// Used for the Morphy animation set: drop new {clip}.png + {clip}.json into public/morphy/
+// and they're automatically served without touching the allowlist.
+const PLATFORM_ASSET_DIRS = ['/morphy/'];
+
 // Ensure dist-bloby exists (postinstall may have failed silently)
 if (!fs.existsSync(DIST_BLOBY)) {
   log.info('Building bloby chat UI (first run)...');
@@ -85,7 +90,7 @@ const SW_JS = `// Service worker — app-shell caching + push notifications
 //   JS/CSS modules                      → stale-while-revalidate
 //   API, WebSocket, Vite internals      → network-only (no cache)
 
-var CACHE = 'bloby-v14';
+var CACHE = 'bloby-v16';
 var HASHED_RE = new RegExp('/assets/.+-[a-zA-Z0-9]{6,}[.](js|css)$');
 
 // Precache the HTML shell on install so the cache is never empty.
@@ -1631,7 +1636,8 @@ mint();
 
     // Platform assets — served from supervisor/public/ so they survive workspace swaps
     const cleanUrl = (req.url || '').split('?')[0];
-    if (PLATFORM_ASSETS.has(cleanUrl)) {
+    const inAssetDir = PLATFORM_ASSET_DIRS.some((d) => cleanUrl.startsWith(d) && !cleanUrl.includes('..'));
+    if (PLATFORM_ASSETS.has(cleanUrl) || inAssetDir) {
       const assetPath = path.join(SUPERVISOR_PUBLIC, cleanUrl);
       try {
         const stat = fs.statSync(assetPath);

package/supervisor/public/morphy/headphones.json

@@ -0,0 +1,40 @@
+{
+  "name": "headphones",
+  "spritesheet": "headphones.png",
+  "frame": {
+    "w": 174,
+    "h": 180
+  },
+  "grid": {
+    "cols": 16,
+    "rows": 8
+  },
+  "totalFrames": 121,
+  "fps": 24,
+  "clips": {
+    "idle": {
+      "from": 15,
+      "to": 15,
+      "mode": "hold",
+      "fps": 38
+    },
+    "enter": {
+      "from": 16,
+      "to": 25,
+      "mode": "forward",
+      "fps": 48,
+      "next": "active"
+    },
+    "active": {
+      "from": 26,
+      "to": 94,
+      "mode": "pingpong"
+    },
+    "exit": {
+      "from": 96,
+      "to": 105,
+      "mode": "forward",
+      "next": "idle"
+    }
+  }
+}

package/supervisor/public/morphy/teleporting.json

@@ -0,0 +1,38 @@
+{
+  "name": "teleporting",
+  "spritesheet": "teleporting.png",
+  "frame": {
+    "w": 218,
+    "h": 180
+  },
+  "grid": {
+    "cols": 16,
+    "rows": 8
+  },
+  "totalFrames": 121,
+  "fps": 24,
+  "clips": {
+    "idle": {
+      "from": 19,
+      "to": 19,
+      "mode": "hold"
+    },
+    "enter": {
+      "from": 20,
+      "to": 45,
+      "mode": "forward",
+      "next": "active"
+    },
+    "active": {
+      "from": 46,
+      "to": 68,
+      "mode": "pingpong"
+    },
+    "exit": {
+      "from": 69,
+      "to": 121,
+      "mode": "forward",
+      "next": "idle"
+    }
+  }
+}

package/supervisor/widget.js

@@ -33,24 +33,34 @@
 
   // ══════════════════════════════════════════════════════════════════
   // ── Blob Sprite Sheet Config (splash only) ───────────────────────
+  // Loaded from /morphy/teleporting.json. Clips map to animStates:
+  //   idle (hold)      → animState 'idle'
+  //   enter (forward)  → animState 'melting'
+  //   active (pingpong)→ animState 'traveling'
+  //   exit (forward)   → animState 'reforming'
   // ══════════════════════════════════════════════════════════════════
 
+  var BLOB_CONFIG_URL = '/morphy/teleporting.json';
+  var BLOB_ASSETS_DIR = '/morphy/';
+
+  // Defaults mirror the teleporting.json shipped at the URL above so
+  // animation works even if the fetch is cached at the wrong revision.
   var COLS = 16;
-  var FRAME_W = 125;
-  var FRAME_H = 120;
+  var FRAME_W = 218;
+  var FRAME_H = 180;
   var DISPLAY_H = 58;
   var DISPLAY_W = DISPLAY_H * (FRAME_W / FRAME_H);
 
-  var IDLE_START = 0, IDLE_END = 29;
-  var MELT_START = 30, MELT_END = 52;
-  var TRAVEL_START = 52, TRAVEL_END = 84;
-  var REFORM_START = 84, REFORM_END = 191;
+  var IDLE_START = 19, IDLE_END = 19;
+  var MELT_START = 20, MELT_END = 45;
+  var TRAVEL_START = 46, TRAVEL_END = 68;
+  var REFORM_START = 69, REFORM_END = 121;
 
-  var FPS = 29;
+  var FPS = 24;
   var FRAME_MS = 1000 / FPS;
-  var IDLE_FPS = 22;
+  var IDLE_FPS = 24;
   var IDLE_FRAME_MS = 1000 / IDLE_FPS;
-  var REFORM_FPS = 70;
+  var REFORM_FPS = 24;
   var REFORM_FRAME_MS = 1000 / REFORM_FPS;
 
   var TRAVEL_PX_PER_MS = 0.65;
@@ -67,24 +77,31 @@
   document.body.appendChild(badgeEl);
 
   // ══════════════════════════════════════════════════════════════════
-  // ── Headphones Sprite Sheet Config (v2 — bubble + recording) ─────
+  // ── Headphones Sprite Sheet Config (loaded from JSON) ────────────
+  // Clips map to hpStates:
+  //   idle (hold)      → hpState 'idle'
+  //   enter (forward)  → hpState 'activating'
+  //   active (pingpong)→ hpState 'recording'
+  //   exit (forward)   → hpState 'deactivating'
   // ══════════════════════════════════════════════════════════════════
 
+  var HP_CONFIG_URL = '/morphy/headphones.json';
+
+  // Defaults mirror the shipped JSON so animation works even if fetch is cached.
   var HP_COLS = 16;
-  var HP_FRAME_W = 126;
-  var HP_FRAME_H = 84;
-  // Bubble display: fill 60px width exactly
+  var HP_FRAME_W = 180;
+  var HP_FRAME_H = 180;
   var HP_BUBBLE_H = 40;
-  var HP_BUBBLE_W = HP_BUBBLE_H * (HP_FRAME_W / HP_FRAME_H); // 60
+  var HP_BUBBLE_W = HP_BUBBLE_H * (HP_FRAME_W / HP_FRAME_H);
 
-  // v2 frame ranges
-  var HP_IDLE_FRAME = 10;
-  var HP_ACTIVATE_START = 11, HP_ACTIVATE_END = 40;
-  var HP_RECORD_START = 40, HP_RECORD_END = 85;
+  var HP_IDLE_FRAME = 15;
+  var HP_ACTIVATE_START = 16, HP_ACTIVATE_END = 25;
+  var HP_RECORD_START = 26, HP_RECORD_END = 94;
+  var HP_EXIT_START = 96, HP_EXIT_END = 105;
 
-  // v2 FPS: 2x speed for activate/deactivate, normal for recording
-  var HP_BASE_FPS = 24;
-  var HP_FAST_FPS = 48;
+  var HP_BASE_FPS = 24;       // active / record default
+  var HP_ACTIVATE_FPS = 48;   // enter clip fps
+  var HP_EXIT_FPS = 24;       // exit clip fps
 
   // Long-press threshold
   var HP_HOLD_MS = 500;
@@ -147,6 +164,7 @@
   var animState = 'loading';
   var currentFrame = 0;
   var idleDirection = 1;
+  var travelFrameDir = 1;
   var lastFrameTime = 0;
   var travelDuration = 0;
   var travelStartTime = 0;
@@ -181,30 +199,70 @@
   var hpSpeechInstance = null;
   var hpSpeechTranscript = '';
 
-  // ── Load blob sprite sheet ──
+  // ── Load blob sprite sheet (config + image) ──
+  function applyBlobConfig(cfg) {
+    COLS = cfg.grid.cols;
+    FRAME_W = cfg.frame.w;
+    FRAME_H = cfg.frame.h;
+    DISPLAY_W = DISPLAY_H * (FRAME_W / FRAME_H);
+    IDLE_START = cfg.clips.idle.from;   IDLE_END = cfg.clips.idle.to;
+    MELT_START = cfg.clips.enter.from;  MELT_END = cfg.clips.enter.to;
+    TRAVEL_START = cfg.clips.active.from; TRAVEL_END = cfg.clips.active.to;
+    REFORM_START = cfg.clips.exit.from; REFORM_END = cfg.clips.exit.to;
+    FPS = cfg.fps; FRAME_MS = 1000 / FPS;
+    IDLE_FPS = cfg.fps; IDLE_FRAME_MS = 1000 / IDLE_FPS;
+    REFORM_FPS = cfg.fps; REFORM_FRAME_MS = 1000 / REFORM_FPS;
+  }
+
   function loadSprite(onDone, onFail) {
-    var img = new Image();
-    img.onload = function () {
-      spriteSheet = img;
-      center.x = Math.round(W / 2);
-      center.y = Math.round(H / 2);
-      currentFrame = IDLE_START;
-      animState = 'idle';
-      var splash = document.getElementById('splash');
-      if (splash) splash.style.display = 'none';
-      onDone();
-    };
-    img.onerror = function () { if (onFail) onFail(); };
-    img.src = '/spritesheet.webp';
+    fetch(BLOB_CONFIG_URL)
+      .then(function (r) { if (!r.ok) throw new Error('blob config ' + r.status); return r.json(); })
+      .then(function (cfg) {
+        applyBlobConfig(cfg);
+        var img = new Image();
+        img.onload = function () {
+          spriteSheet = img;
+          center.x = Math.round(W / 2);
+          center.y = Math.round(H / 2);
+          currentFrame = IDLE_START;
+          animState = 'idle';
+          var splash = document.getElementById('splash');
+          if (splash) splash.style.display = 'none';
+          onDone();
+        };
+        img.onerror = function () { if (onFail) onFail(); };
+        img.src = BLOB_ASSETS_DIR + cfg.spritesheet;
+      })
+      .catch(function () { if (onFail) onFail(); });
+  }
+
+  // ── Load headphones sprite sheet (config + image) ──
+  function applyHpConfig(cfg) {
+    HP_COLS = cfg.grid.cols;
+    HP_FRAME_W = cfg.frame.w;
+    HP_FRAME_H = cfg.frame.h;
+    HP_BUBBLE_W = HP_BUBBLE_H * (HP_FRAME_W / HP_FRAME_H);
+    HP_IDLE_FRAME = cfg.clips.idle.from;
+    HP_ACTIVATE_START = cfg.clips.enter.from; HP_ACTIVATE_END = cfg.clips.enter.to;
+    HP_RECORD_START = cfg.clips.active.from;  HP_RECORD_END = cfg.clips.active.to;
+    HP_EXIT_START = cfg.clips.exit.from;      HP_EXIT_END = cfg.clips.exit.to;
+    HP_BASE_FPS = (cfg.clips.active.fps != null ? cfg.clips.active.fps : cfg.fps);
+    HP_ACTIVATE_FPS = (cfg.clips.enter.fps  != null ? cfg.clips.enter.fps  : cfg.fps);
+    HP_EXIT_FPS = (cfg.clips.exit.fps   != null ? cfg.clips.exit.fps   : cfg.fps);
   }
 
-  // ── Load headphones sprite sheet ──
   function loadHpSprite(cb) {
     if (hpSpriteSheet) { if (cb) cb(); return; }
-    var img = new Image();
-    img.onload = function () { hpSpriteSheet = img; if (cb) cb(); };
-    img.onerror = function () { console.error('[widget] headphones sprite failed'); };
-    img.src = '/headphones_spritesheet.webp';
+    fetch(HP_CONFIG_URL)
+      .then(function (r) { if (!r.ok) throw new Error('hp config ' + r.status); return r.json(); })
+      .then(function (cfg) {
+        applyHpConfig(cfg);
+        var img = new Image();
+        img.onload = function () { hpSpriteSheet = img; hpFrame = HP_IDLE_FRAME; if (cb) cb(); };
+        img.onerror = function () { console.error('[widget] headphones sprite failed'); };
+        img.src = BLOB_ASSETS_DIR + cfg.spritesheet;
+      })
+      .catch(function (err) { console.error('[widget] headphones config failed', err); });
   }
 
   // ── Trigger blob move (splash) ──
@@ -230,7 +288,8 @@
   // ══════════════════════════════════════════════════════════════════
 
   function hpFps() {
-    if (hpState === 'activating' || hpState === 'activating_then_deactivate' || hpState === 'deactivating') return HP_FAST_FPS;
+    if (hpState === 'activating' || hpState === 'activating_then_deactivate') return HP_ACTIVATE_FPS;
+    if (hpState === 'deactivating') return HP_EXIT_FPS;
     return HP_BASE_FPS;
   }
 
@@ -246,9 +305,8 @@
           hpFrame++;
           if (hpFrame > HP_ACTIVATE_END) {
             if (hpState === 'activating_then_deactivate') {
-              // Reverse back to idle
               hpState = 'deactivating';
-              hpFrame = HP_ACTIVATE_END;
+              hpFrame = HP_EXIT_START;
             } else {
               hpState = 'recording';
               hpFrame = HP_RECORD_START;
@@ -260,9 +318,8 @@
           if (hpFrame >= HP_RECORD_END) { hpFrame = HP_RECORD_END; hpPingPong = -1; }
           else if (hpFrame <= HP_RECORD_START) { hpFrame = HP_RECORD_START; hpPingPong = 1; }
         } else if (hpState === 'deactivating') {
-          // v2: reverse 40→11
-          hpFrame--;
-          if (hpFrame < HP_ACTIVATE_START) {
+          hpFrame++;
+          if (hpFrame > HP_EXIT_END) {
             hpState = 'idle';
             hpFrame = HP_IDLE_FRAME;
           }
@@ -300,10 +357,11 @@
       else if (currentFrame <= IDLE_START) { currentFrame = IDLE_START; idleDirection = 1; }
     } else if (animState === 'melting') {
       currentFrame++;
-      if (currentFrame > MELT_END) { animState = 'traveling'; currentFrame = TRAVEL_START; travelStartTime = now; }
+      if (currentFrame > MELT_END) { animState = 'traveling'; currentFrame = TRAVEL_START; travelStartTime = now; travelFrameDir = 1; }
     } else if (animState === 'traveling') {
-      currentFrame++;
-      if (currentFrame > TRAVEL_END) currentFrame = TRAVEL_START;
+      currentFrame += travelFrameDir;
+      if (currentFrame >= TRAVEL_END) { currentFrame = TRAVEL_END; travelFrameDir = -1; }
+      else if (currentFrame <= TRAVEL_START) { currentFrame = TRAVEL_START; travelFrameDir = 1; }
     } else if (animState === 'reforming') {
       currentFrame++;
       if (currentFrame > REFORM_END) {
@@ -540,12 +598,11 @@
     canvas.style.transition = 'transform 0.2s ease';
     canvas.style.transform = '';
 
-    // v2 deactivation: reverse 40→11 (activate played backwards)
     if (hpState === 'activating') {
       hpState = 'activating_then_deactivate';
     } else if (hpState === 'recording') {
       hpState = 'deactivating';
-      hpFrame = HP_ACTIVATE_END;
+      hpFrame = HP_EXIT_START;
       hpLastFrameTime = performance.now();
     }
   }

package/workspace/client/public/morphy/headphones.json

@@ -0,0 +1,40 @@
+{
+  "name": "headphones",
+  "spritesheet": "headphones.png",
+  "frame": {
+    "w": 174,
+    "h": 180
+  },
+  "grid": {
+    "cols": 16,
+    "rows": 8
+  },
+  "totalFrames": 121,
+  "fps": 24,
+  "clips": {
+    "idle": {
+      "from": 15,
+      "to": 15,
+      "mode": "hold",
+      "fps": 38
+    },
+    "enter": {
+      "from": 16,
+      "to": 25,
+      "mode": "forward",
+      "fps": 48,
+      "next": "active"
+    },
+    "active": {
+      "from": 26,
+      "to": 94,
+      "mode": "pingpong"
+    },
+    "exit": {
+      "from": 96,
+      "to": 105,
+      "mode": "forward",
+      "next": "idle"
+    }
+  }
+}

package/workspace/client/public/morphy/teleporting.json

@@ -0,0 +1,38 @@
+{
+  "name": "teleporting",
+  "spritesheet": "teleporting.png",
+  "frame": {
+    "w": 218,
+    "h": 180
+  },
+  "grid": {
+    "cols": 16,
+    "rows": 8
+  },
+  "totalFrames": 121,
+  "fps": 24,
+  "clips": {
+    "idle": {
+      "from": 19,
+      "to": 19,
+      "mode": "hold"
+    },
+    "enter": {
+      "from": 20,
+      "to": 45,
+      "mode": "forward",
+      "next": "active"
+    },
+    "active": {
+      "from": 46,
+      "to": 68,
+      "mode": "pingpong"
+    },
+    "exit": {
+      "from": 69,
+      "to": 121,
+      "mode": "forward",
+      "next": "idle"
+    }
+  }
+}

package/workspace/client/public/sw.js

@@ -6,7 +6,7 @@
 //   JS/CSS modules                      → stale-while-revalidate
 //   API, WebSocket, Vite internals      → network-only (no cache)
 
-const CACHE = 'bloby-v5';
+const CACHE = 'bloby-v7';
 
 // Precache the HTML shell on install so the cache is never empty.
 // Without this, the first navigation isn't intercepted (SW wasn't