thumbs

www/background.js

@@ -0,0 +1,259 @@
+// ═══════════════════════════════════════════════
+//  Bubble Background — wa2k.com
+//  Sparse frosted bubbles, slow drift, soft merge
+// ═══════════════════════════════════════════════
+
+(function () {
+  const canvas = document.createElement('canvas');
+  canvas.id = 'bubble-bg';
+  Object.assign(canvas.style, {
+    position: 'fixed',
+    top: '0',
+    left: '0',
+    width: '100%',
+    height: '100%',
+    zIndex: '-1',
+    pointerEvents: 'none',
+  });
+  document.body.prepend(canvas);
+
+  const ctx = canvas.getContext('2d');
+
+  // ── Config ──────────────────────────────────
+  const BG_COLOR       = '#0a0e1a';
+  const BUBBLE_COUNT   = 18;          // sparse
+  const MIN_R          = 28;
+  const MAX_R          = 110;
+  const SPEED          = 0.12;        // very slow drift
+  const MERGE_DIST     = 1.08;        // merge when centers within 1.08× sum of radii
+  const MERGE_DURATION = 2800;        // ms for merge animation
+  const SPLIT_DELAY    = [6000, 14000]; // ms before a merged bubble splits
+
+  // Colour palette — pulled from site's glass theme
+  const COLORS = [
+    { r: 196, g: 214, b: 226 }, // eww border blue-grey
+    { r: 137, g: 180, b: 250 }, // primary neon
+    { r: 166, g: 209, b: 255 }, // lighter blue
+    { r: 180, g: 200, b: 220 }, // muted steel
+  ];
+
+  // ── Resize ──────────────────────────────────
+  function resize() {
+    canvas.width  = window.innerWidth;
+    canvas.height = window.innerHeight;
+  }
+  window.addEventListener('resize', resize);
+  resize();
+
+  // ── Bubble factory ──────────────────────────
+  let idSeq = 0;
+
+  function randColor() {
+    return COLORS[Math.floor(Math.random() * COLORS.length)];
+  }
+
+  function makeBubble(x, y, r) {
+    const angle = Math.random() * Math.PI * 2;
+    const speed = SPEED * (0.5 + Math.random() * 0.8);
+    const c = randColor();
+    return {
+      id: idSeq++,
+      x: x ?? Math.random() * canvas.width,
+      y: y ?? Math.random() * canvas.height,
+      r: r ?? MIN_R + Math.random() * (MAX_R - MIN_R),
+      vx: Math.cos(angle) * speed,
+      vy: Math.sin(angle) * speed,
+      c,
+      alpha: 0.13 + Math.random() * 0.10,
+      // merge state
+      merging: false,
+      mergeProgress: 0,
+      mergeTarget: null,
+      dead: false,
+      // split state
+      splitAt: null,
+    };
+  }
+
+  // ── Init bubbles ─────────────────────────────
+  let bubbles = [];
+  for (let i = 0; i < BUBBLE_COUNT; i++) bubbles.push(makeBubble());
+
+  // ── Merge helpers ────────────────────────────
+  function startMerge(a, b) {
+    // b merges into a; b dies after animation
+    a.merging = true;
+    a.mergeTarget = b;
+    a.mergeProgress = 0;
+    b.dead = true; // hide b immediately, a absorbs it
+
+    // Destination: midpoint, combined area radius
+    const combinedR = Math.min(MAX_R * 1.4, Math.sqrt(a.r * a.r + b.r * b.r));
+    a._mergeFrom = { x: a.x, y: a.y, r: a.r };
+    a._mergeTo   = {
+      x: (a.x * a.r + b.x * b.r) / (a.r + b.r),
+      y: (a.y * a.r + b.y * b.r) / (a.r + b.r),
+      r: combinedR,
+    };
+    a._mergeDuration = MERGE_DURATION;
+    a._mergeStart    = performance.now();
+
+    // Schedule split
+    const delay = SPLIT_DELAY[0] + Math.random() * (SPLIT_DELAY[1] - SPLIT_DELAY[0]);
+    a.splitAt = performance.now() + MERGE_DURATION + delay;
+  }
+
+  function finishMerge(a) {
+    a.x = a._mergeTo.x;
+    a.y = a._mergeTo.y;
+    a.r = a._mergeTo.r;
+    a.merging = false;
+    a.mergeTarget = null;
+  }
+
+  function splitBubble(a) {
+    // Split into two bubbles roughly original size
+    const childR = a.r / Math.sqrt(2);
+    const angle  = Math.random() * Math.PI * 2;
+    const offset = childR * 0.6;
+
+    const b1 = makeBubble(a.x + Math.cos(angle) * offset, a.y + Math.sin(angle) * offset, childR);
+    const b2 = makeBubble(a.x - Math.cos(angle) * offset, a.y - Math.sin(angle) * offset, childR);
+
+    // Push apart
+    b1.vx = Math.cos(angle) * SPEED * 1.2;
+    b1.vy = Math.sin(angle) * SPEED * 1.2;
+    b2.vx = -b1.vx;
+    b2.vy = -b1.vy;
+
+    a.dead = true;
+    bubbles.push(b1, b2);
+  }
+
+  // ── Draw a single bubble ─────────────────────
+  function drawBubble(b, alpha) {
+    const { x, y, r, c } = b;
+    const a = (alpha ?? b.alpha);
+
+    // Outer glow
+    const glow = ctx.createRadialGradient(x, y, r * 0.5, x, y, r * 1.3);
+    glow.addColorStop(0,   `rgba(${c.r},${c.g},${c.b},0)`);
+    glow.addColorStop(1,   `rgba(${c.r},${c.g},${c.b},${(a * 0.18).toFixed(3)})`);
+    ctx.beginPath();
+    ctx.arc(x, y, r * 1.3, 0, Math.PI * 2);
+    ctx.fillStyle = glow;
+    ctx.fill();
+
+    // Body — frosted glass fill
+    const body = ctx.createRadialGradient(x - r * 0.3, y - r * 0.3, r * 0.05, x, y, r);
+    body.addColorStop(0,   `rgba(${c.r},${c.g},${c.b},${(a * 0.22).toFixed(3)})`);
+    body.addColorStop(0.6, `rgba(${c.r},${c.g},${c.b},${(a * 0.08).toFixed(3)})`);
+    body.addColorStop(1,   `rgba(${c.r},${c.g},${c.b},${(a * 0.03).toFixed(3)})`);
+    ctx.beginPath();
+    ctx.arc(x, y, r, 0, Math.PI * 2);
+    ctx.fillStyle = body;
+    ctx.fill();
+
+    // Rim
+    ctx.beginPath();
+    ctx.arc(x, y, r, 0, Math.PI * 2);
+    ctx.strokeStyle = `rgba(${c.r},${c.g},${c.b},${(a * 1.1).toFixed(3)})`;
+    ctx.lineWidth = 1.2;
+    ctx.stroke();
+
+    // Specular highlight — top-left catch
+    const spec = ctx.createRadialGradient(
+      x - r * 0.38, y - r * 0.38, 0,
+      x - r * 0.28, y - r * 0.28, r * 0.42
+    );
+    spec.addColorStop(0,   `rgba(255,255,255,${(a * 1.4).toFixed(3)})`);
+    spec.addColorStop(1,   'rgba(255,255,255,0)');
+    ctx.beginPath();
+    ctx.arc(x, y, r, 0, Math.PI * 2);
+    ctx.fillStyle = spec;
+    ctx.fill();
+  }
+
+  // ── Main loop ────────────────────────────────
+  let lastTime = performance.now();
+
+  function loop(now) {
+    const dt = Math.min(now - lastTime, 50); // cap dt
+    lastTime = now;
+
+    ctx.clearRect(0, 0, canvas.width, canvas.height);
+
+    // Background
+    ctx.fillStyle = BG_COLOR;
+    ctx.fillRect(0, 0, canvas.width, canvas.height);
+
+    // Remove dead bubbles
+    bubbles = bubbles.filter(b => !b.dead);
+
+    // Replenish if too few
+    while (bubbles.length < BUBBLE_COUNT) bubbles.push(makeBubble());
+
+    // Update & draw
+    for (let i = 0; i < bubbles.length; i++) {
+      const b = bubbles[i];
+      if (b.dead) continue;
+
+      // Split check
+      if (b.splitAt && now >= b.splitAt && !b.merging) {
+        splitBubble(b);
+        continue;
+      }
+
+      // Merge animation
+      if (b.merging) {
+        const t = Math.min(1, (now - b._mergeStart) / b._mergeDuration);
+        const ease = t < 0.5 ? 2 * t * t : -1 + (4 - 2 * t) * t; // ease in-out quad
+        b.x = b._mergeFrom.x + (b._mergeTo.x - b._mergeFrom.x) * ease;
+        b.y = b._mergeFrom.y + (b._mergeTo.y - b._mergeFrom.y) * ease;
+        b.r = b._mergeFrom.r + (b._mergeTo.r - b._mergeFrom.r) * ease;
+        if (t >= 1) finishMerge(b);
+      } else {
+        // Drift
+        b.x += b.vx * dt;
+        b.y += b.vy * dt;
+
+        // Soft wrap-around with margin
+        const m = b.r + 20;
+        if (b.x < -m)              b.x = canvas.width  + m;
+        if (b.x > canvas.width  + m) b.x = -m;
+        if (b.y < -m)              b.y = canvas.height + m;
+        if (b.y > canvas.height + m) b.y = -m;
+
+        // Very gentle direction wobble
+        b.vx += (Math.random() - 0.5) * 0.001;
+        b.vy += (Math.random() - 0.5) * 0.001;
+
+        // Clamp speed
+        const spd = Math.hypot(b.vx, b.vy);
+        const maxSpd = SPEED * 1.6;
+        if (spd > maxSpd) { b.vx *= maxSpd / spd; b.vy *= maxSpd / spd; }
+
+        // Check merge with other bubbles
+        for (let j = i + 1; j < bubbles.length; j++) {
+          const o = bubbles[j];
+          if (o.dead || o.merging || b.merging || b.splitAt || o.splitAt) continue;
+          const dx   = o.x - b.x;
+          const dy   = o.y - b.y;
+          const dist = Math.hypot(dx, dy);
+          if (dist < (b.r + o.r) * MERGE_DIST) {
+            // Larger absorbs smaller
+            if (b.r >= o.r) startMerge(b, o);
+            else             startMerge(o, b);
+            break;
+          }
+        }
+      }
+
+      drawBubble(b);
+    }
+
+    requestAnimationFrame(loop);
+  }
+
+  requestAnimationFrame(loop);
+})();

www/gallery.html

@@ -170,6 +170,7 @@
     box-shadow: 0 8px 40px rgba(0,0,0,0.6);
     animation: vImgIn 0.2s cubic-bezier(0.4,0,0.2,1);
     cursor: default;
+    transition: filter 0.3s ease;
   }
 
   @keyframes vImgIn {
@@ -1453,7 +1454,7 @@ function buildPhotoItem(photo, pageIndex) {
   img.alt = photo.file;
   img.loading = 'lazy';
   img.decoding = 'async';
-  img.src = `./photos/${photo.file}`;
+  img.src = `./photos/thumbs/${photo.file}`;
 
   item.appendChild(img);
 
@@ -1546,8 +1547,16 @@ function updateViewer() {
   const photo  = photos[viewerIndex];
   if (!photo) return;
 
-  viewerImg.src = `./photos/${photo.file}`;
+  // Show thumbnail instantly, then load full res on top
-  viewerImg.alt = photo.file;
+  viewerImg.src = `./photos/thumbs/${photo.file}`;
+  viewerImg.style.filter = 'blur(0px)';
+
+  const full = new Image();
+  full.onload = () => {
+    viewerImg.src = full.src;
+    viewerImg.style.filter = 'blur(0px)';
+  };
+  full.src = `./photos/${photo.file}`;
 
   // Populate toolbar with metadata
   const fields = [