From 63a3fda67c81cc4816a855b8c550ed2c459a12fd Mon Sep 17 00:00:00 2001
From: UniverseBow <lorkandavidson@gmail.com>
Date: Sun, 15 Mar 2026 12:13:01 -0700
Subject: [PATCH] animation test

---
 www/index.html | 387 ++++++++++++++++++++++++-------------------------
 www/style.css  |   3 +-
 2 files changed, 195 insertions(+), 195 deletions(-)

diff --git a/www/index.html b/www/index.html
index c38292d..7dc1016 100644
--- a/www/index.html
+++ b/www/index.html
@@ -24,9 +24,7 @@
 </filter>
 
     <filter id="liquid-glass" x="0" y="0" width="100%" height="100%" color-interpolation-filters="sRGB">
-      <!-- Load the displacement map image -->
       <feImage id="displacement-map-img" result="disp_map" />
-      <!-- Apply displacement to the backdrop (SourceGraphic here = the backdrop) -->
       <feDisplacementMap
         in="SourceGraphic"
         in2="disp_map"
@@ -35,17 +33,13 @@
         yChannelSelector="G"
         result="refracted"
       />
-      <!-- Load the specular highlight image -->
       <feImage id="specular-map-img" result="spec_map" />
-      <!-- Blend specular on top of the refracted backdrop using screen mode -->
       <feBlend in="refracted" in2="spec_map" mode="screen" result="with_specular" />
-      <!-- Clip result to the original element shape -->
       <feComposite in="with_specular" in2="SourceGraphic" operator="atop" />
     </filter>
   </defs>
 </svg>
 
-<!-- Liquid glass searchbar — sits above the card, expands on click -->
 <div class="nav-wrap">
   <div class="nav-pill" id="nav-pill">
     <div class="nav-pill-bar" id="nav-pill-bar">
@@ -74,278 +68,249 @@
 <script>
 // ─── Configuration ────────────────────────────────────────────────────────────
 const CONFIG = {
-  bezelWidth: 0.18,      // Fraction of the smaller dimension used for the curved rim — wider = bigger refraction band
-  glassThickness: 3.5,   // Optical depth multiplier — higher = rays bend further at the edges
-  ior: 1.65,             // Index of refraction — real glass is ~1.5; slightly above for a more dramatic bend
-  scaleRatio: 2.5,       // Final multiplier on pixel displacement — scales the whole effect up or down
-  specularAngle: -55,    // Degrees of the light source direction — negative = upper-left
-  specularOpacity: 0.9,  // Peak alpha of the specular highlight — higher = brighter rim
-  specularSaturation: 6, // Unused in painting but kept for future colour-shift use
-  borderRadius: 50,      // Must match CSS border-radius in pixels — curves the refraction band at corners
+  bezelWidth: 0.18,
+  glassThickness: 2.0,
+  ior: 1.65,
+  scaleRatio: 1.6,
+  specularAngle: -55,
+  specularOpacity: 0.9,
+  specularSaturation: 6,
+  borderRadius: 50,
 };
- 
+
 // ─── Maths helpers ────────────────────────────────────────────────────────────
- 
-/** Convex squircle surface — Apple-style soft bezel profile */
+
 function surfaceHeight(t) {
-  // t: 0 = outer edge of bezel, 1 = where the flat interior begins
-  // Squircle formula: softer than a circle arc, keeps refraction gradients smooth when stretched to a rectangle
   return Math.pow(1 - Math.pow(1 - t, 4), 0.25);
 }
- 
-/** Numerical derivative of the surface function at t — gives the surface slope */
+
 function surfaceNormal(t) {
-  const d = 0.001; // Tiny step for finite-difference approximation
-  const y1 = surfaceHeight(Math.max(0, t - d)); // Sample just before t
-  const y2 = surfaceHeight(Math.min(1, t + d)); // Sample just after t
-  const derivative = (y2 - y1) / (2 * d); // Central difference = slope at t
-  return { x: -derivative, y: 1 }; // Rotate 90°: tangent → normal pointing inward
+  const d = 0.001;
+  const y1 = surfaceHeight(Math.max(0, t - d));
+  const y2 = surfaceHeight(Math.min(1, t + d));
+  const derivative = (y2 - y1) / (2 * d);
+  return { x: -derivative, y: 1 };
 }
- 
-/** Snell–Descartes refraction — returns the direction a ray travels after entering the glass */
+
 function refract(incidentDir, normal, n1, n2) {
-  const nLen = Math.hypot(normal.x, normal.y); // Length of normal vector
-  const nx = normal.x / nLen; // Normalise X component
-  const ny = normal.y / nLen; // Normalise Y component
- 
-  const ratio = n1 / n2; // Ratio of refractive indices (air/glass)
-  const cosI = -(incidentDir.x * nx + incidentDir.y * ny); // Cosine of angle of incidence
-  const sinT2 = ratio * ratio * (1 - cosI * cosI); // sin²(refraction angle) via Snell's law
- 
-  if (sinT2 > 1) return null; // Total internal reflection — ray can't exit, skip this sample
- 
-  const cosT = Math.sqrt(1 - sinT2); // Cosine of refraction angle
+  const nLen = Math.hypot(normal.x, normal.y);
+  const nx = normal.x / nLen;
+  const ny = normal.y / nLen;
+  const ratio = n1 / n2;
+  const cosI = -(incidentDir.x * nx + incidentDir.y * ny);
+  const sinT2 = ratio * ratio * (1 - cosI * cosI);
+  if (sinT2 > 1) return null;
+  const cosT = Math.sqrt(1 - sinT2);
   return {
-    x: ratio * incidentDir.x + (ratio * cosI - cosT) * nx, // Refracted ray X direction
-    y: ratio * incidentDir.y + (ratio * cosI - cosT) * ny, // Refracted ray Y direction
+    x: ratio * incidentDir.x + (ratio * cosI - cosT) * nx,
+    y: ratio * incidentDir.y + (ratio * cosI - cosT) * ny,
   };
 }
- 
-// ─── Rounded rect helpers ─────────────────────────────────────────────────────
- 
-/**
- * Given a pixel (px, py) inside a rounded rectangle of size (width x height)
- * with corner radius r, returns:
- *   dist  — how far the pixel is from the nearest border edge (positive = inside)
- *   nx,ny — the inward-pointing unit normal at that nearest border point
- *
- * This is the single source of truth for both the displacement and specular maps.
- */
+
+// ─── Rounded rect helper ──────────────────────────────────────────────────────
+
 function roundedRectInfo(px, py, width, height, r) {
-  // Clamp radius so it can't exceed half the shortest side
   const radius = Math.min(r, width / 2, height / 2);
- 
-  // Corner arc centres (one per corner, in absolute pixel coords)
-  const corners = [
-    { cx: radius,         cy: radius          }, // top-left
-    { cx: width - radius, cy: radius          }, // top-right
-    { cx: radius,         cy: height - radius }, // bottom-left
-    { cx: width - radius, cy: height - radius }, // bottom-right
-  ];
- 
-  // Which corner zone is this pixel in?
-  const inCorner =
-    (px < radius         || px > width  - radius) &&
-    (py < radius         || py > height - radius);
- 
+
+  const inCornerZone =
+    (px < radius || px > width  - radius) &&
+    (py < radius || py > height - radius);
+
   let dist, nx, ny;
- 
-  if (inCorner) {
-    // Find the nearest corner arc centre
-    let best = null;
-    let bestDist = Infinity;
-    for (const c of corners) {
-      const d = Math.hypot(px - c.cx, py - c.cy);
-      if (d < bestDist) { bestDist = d; best = c; }
+
+  if (inCornerZone) {
+    const corners = [
+      { cx: radius,         cy: radius          },
+      { cx: width - radius, cy: radius          },
+      { cx: radius,         cy: height - radius },
+      { cx: width - radius, cy: height - radius },
+    ];
+    let best = corners[0], bestD = Math.hypot(px - corners[0].cx, py - corners[0].cy);
+    for (let i = 1; i < corners.length; i++) {
+      const d = Math.hypot(px - corners[i].cx, py - corners[i].cy);
+      if (d < bestD) { bestD = d; best = corners[i]; }
     }
-    // Distance from the arc = radius - distance from arc centre
-    dist = radius - bestDist;
-    // Inward normal points from pixel toward the arc centre
-    const len = bestDist || 1;
+    dist = radius - bestD;
+    const len = bestD || 1;
     nx = (best.cx - px) / len;
     ny = (best.cy - py) / len;
   } else {
-    // Flat side — nearest edge is whichever straight side is closest
     const dLeft   = px;
     const dRight  = width  - 1 - px;
     const dTop    = py;
     const dBottom = height - 1 - py;
     const minD    = Math.min(dLeft, dRight, dTop, dBottom);
     dist = minD;
-    if      (minD === dLeft)   { nx =  1; ny = 0; }
-    else if (minD === dRight)  { nx = -1; ny = 0; }
-    else if (minD === dTop)    { nx = 0;  ny =  1; }
-    else                       { nx = 0;  ny = -1; }
+    if      (minD === dLeft)   { nx =  1; ny =  0; }
+    else if (minD === dRight)  { nx = -1; ny =  0; }
+    else if (minD === dTop)    { nx =  0; ny =  1; }
+    else                       { nx =  0; ny = -1; }
   }
- 
+
   return { dist, nx, ny };
 }
- 
+
 // ─── Displacement map generation ─────────────────────────────────────────────
- 
+
 function buildDisplacementMap(width, height) {
   const bezel   = CONFIG.bezelWidth * Math.min(width, height);
   const samples = 128;
- 
-  // ── Step 1: Pre-calculate displacement magnitudes along one radius ──
+
   const magnitudes = new Float32Array(samples);
   const incident   = { x: 0, y: 1 };
- 
+
   for (let i = 0; i < samples; i++) {
-    const t        = i / (samples - 1);
-    const normal   = surfaceNormal(t);
+    const t         = i / (samples - 1);
+    const normal    = surfaceNormal(t);
     const refracted = refract(incident, normal, 1.0, CONFIG.ior);
-    magnitudes[i]  = refracted
+    magnitudes[i]   = refracted
       ? (refracted.x - incident.x) * CONFIG.glassThickness * bezel
       : 0;
   }
- 
+
   const maxDisp = Math.max(...magnitudes) || 1;
- 
-  // ── Step 2: Paint every pixel ──
-  const data = new Uint8ClampedArray(width * height * 4);
- 
+  const data    = new Uint8ClampedArray(width * height * 4);
+
   for (let py = 0; py < height; py++) {
     for (let px = 0; px < width; px++) {
       const idx = (py * width + px) * 4;
- 
       const { dist, nx, ny } = roundedRectInfo(px, py, width, height, CONFIG.borderRadius);
- 
+
       let dispX = 0, dispY = 0;
- 
+
       if (dist >= 0 && dist < bezel) {
         const t         = dist / bezel;
         const sampleIdx = Math.min(samples - 1, Math.floor(t * (samples - 1)));
-        const mag       = magnitudes[sampleIdx] / maxDisp;
+        const rawMag    = magnitudes[sampleIdx] / maxDisp;
+        const smooth    = t * t * (3 - 2 * t);
+        const mag       = rawMag * (1 - smooth);
         dispX = nx * mag;
         dispY = ny * mag;
       }
- 
+
       data[idx]     = Math.round(128 + dispX * 127);
       data[idx + 1] = Math.round(128 + dispY * 127);
       data[idx + 2] = 128;
       data[idx + 3] = 255;
     }
   }
- 
+
   return {
     imageData: new ImageData(data, width, height),
     maxDisplacement: maxDisp * CONFIG.scaleRatio,
   };
 }
- 
+
 // ─── Specular highlight map generation ───────────────────────────────────────
- 
+
 function buildSpecularMap(width, height) {
   const canvas  = document.createElement('canvas');
   canvas.width  = width;
   canvas.height = height;
   const ctx     = canvas.getContext('2d');
- 
-  const bezel        = CONFIG.bezelWidth * Math.min(width, height);
+
+  const bezel         = CONFIG.bezelWidth * Math.min(width, height);
   const lightAngleRad = (CONFIG.specularAngle * Math.PI) / 180;
-  const lightDir     = { x: Math.cos(lightAngleRad), y: Math.sin(lightAngleRad) };
- 
+  const lightDir      = { x: Math.cos(lightAngleRad), y: Math.sin(lightAngleRad) };
+
   const imageData = ctx.createImageData(width, height);
   const data      = imageData.data;
- 
+
   for (let py = 0; py < height; py++) {
     for (let px = 0; px < width; px++) {
       const idx = (py * width + px) * 4;
- 
       const { dist, nx, ny } = roundedRectInfo(px, py, width, height, CONFIG.borderRadius);
- 
+
       let intensity = 0;
- 
+
       if (dist >= 0 && dist < bezel) {
-        const t     = dist / bezel;
-        const dot   = nx * lightDir.x + ny * lightDir.y;
-        const rim   = Math.max(0, dot);
-        const slope = Math.abs(surfaceNormal(t).x);
-        const raw   = rim * slope * (1 - t);
-        intensity   = Math.pow(raw, 0.5);
+        const t      = dist / bezel;
+        const dot    = nx * lightDir.x + ny * lightDir.y;
+        const rim    = Math.max(0, dot);
+        const slope  = Math.abs(surfaceNormal(t).x);
+        const smooth = t * t * (3 - 2 * t);
+        const raw    = rim * slope * (1 - smooth);
+        intensity    = Math.pow(raw, 0.5);
       }
- 
+
       data[idx]     = Math.round(235 * intensity);
       data[idx + 1] = Math.round(245 * intensity);
       data[idx + 2] = Math.round(255 * intensity);
       data[idx + 3] = Math.round(CONFIG.specularOpacity * 255 * intensity);
     }
   }
- 
+
   ctx.putImageData(imageData, 0, 0);
   return canvas.toDataURL();
 }
- 
+
 // ─── ImageData → data URL ─────────────────────────────────────────────────────
- 
+
 function imageDataToDataURL(imageData) {
-  const canvas = document.createElement('canvas'); // Temporary offscreen canvas
+  const canvas = document.createElement('canvas');
   canvas.width  = imageData.width;
   canvas.height = imageData.height;
-  canvas.getContext('2d').putImageData(imageData, 0, 0); // Write pixel data into canvas
-  return canvas.toDataURL(); // Export as PNG data URL for SVG feImage
+  canvas.getContext('2d').putImageData(imageData, 0, 0);
+  return canvas.toDataURL();
 }
- 
+
 // ─── Apply filter to card ─────────────────────────────────────────────────────
- 
+
 function applyLiquidGlass() {
   const card = document.getElementById('card');
-  const rect = card.getBoundingClientRect(); // Get the card's actual rendered size in pixels
-  const w = Math.round(rect.width);
-  const h = Math.round(rect.height);
- 
-  if (w === 0 || h === 0) return; // Guard: don't run before layout is ready
- 
-  const { imageData, maxDisplacement } = buildDisplacementMap(w, h); // Generate refraction map
-  const dispDataURL     = imageDataToDataURL(imageData); // Convert to data URL for feImage
-  const specularDataURL = buildSpecularMap(w, h);        // Generate specular highlight map
- 
-  const dispImg    = document.getElementById('displacement-map-img');    // feImage for displacement
-  const specImg    = document.getElementById('specular-map-img');        // feImage for specular
-  const dispFilter = document.getElementById('displacement-map-filter'); // feDisplacementMap element
- 
-  dispImg.setAttribute('href', dispDataURL); // Load displacement map into SVG filter
-  dispImg.setAttribute('width',  w);         // Match filter image size to card width
-  dispImg.setAttribute('height', h);         // Match filter image size to card height
- 
-  specImg.setAttribute('href', specularDataURL); // Load specular map into SVG filter
-  specImg.setAttribute('width',  w);
-  specImg.setAttribute('height', h);
- 
-  dispFilter.setAttribute('scale', maxDisplacement); // Tell feDisplacementMap the real-pixel scale of the map
- 
-  // Only overwrite backdrop-filter in Chrome — Firefox ignores SVG filters here
-  // and would lose its CSS fallback blur if we overwrote card.style.backdropFilter
-  const isChrome = /Chrome/.test(navigator.userAgent) && !/Edg|Firefox/.test(navigator.userAgent);
-  if (isChrome) {
-    card.style.backdropFilter       = 'url(#liquid-glass) blur(3px) saturate(1.8) brightness(1.05)'; // Full chain: refraction + blur + colour boost
-    card.style.webkitBackdropFilter = 'url(#liquid-glass) blur(3px) saturate(1.8) brightness(1.05)'; // Webkit prefix for older Chrome builds
-  }
-}
- 
-window.addEventListener('load', applyLiquidGlass);   // Run once the page has fully laid out
-window.addEventListener('resize', applyLiquidGlass); // Re-run if the card size changes (e.g. window resize)
- 
-function applyNavGlass() {
-  const pill = document.getElementById('nav-pill');
-  const rect = pill.getBoundingClientRect();
-  const w = Math.round(rect.width);
-  const h = Math.round(rect.height);
+  const w = card.offsetWidth;
+  const h = card.offsetHeight;
   if (w === 0 || h === 0) return;
- 
-  const savedBezel = CONFIG.bezelWidth;
-  const savedScale = CONFIG.scaleRatio;
-  CONFIG.bezelWidth = 0.12;
-  CONFIG.scaleRatio = 1.8;
- 
+
   const { imageData, maxDisplacement } = buildDisplacementMap(w, h);
   const dispDataURL     = imageDataToDataURL(imageData);
   const specularDataURL = buildSpecularMap(w, h);
- 
-  CONFIG.bezelWidth = savedBezel;
-  CONFIG.scaleRatio = savedScale;
- 
+
+  const dispImg    = document.getElementById('displacement-map-img');
+  const specImg    = document.getElementById('specular-map-img');
+  const dispFilter = document.getElementById('displacement-map-filter');
+
+  dispImg.setAttribute('href', dispDataURL);
+  dispImg.setAttribute('width',  w);
+  dispImg.setAttribute('height', h);
+  specImg.setAttribute('href', specularDataURL);
+  specImg.setAttribute('width',  w);
+  specImg.setAttribute('height', h);
+  dispFilter.setAttribute('scale', maxDisplacement);
+
+  const isChrome = /Chrome/.test(navigator.userAgent) && !/Edg|Firefox/.test(navigator.userAgent);
+  if (isChrome) {
+    card.style.backdropFilter       = 'url(#liquid-glass) blur(3px) saturate(1.8) brightness(1.05)';
+    card.style.webkitBackdropFilter = 'url(#liquid-glass) blur(3px) saturate(1.8) brightness(1.05)';
+  }
+}
+
+// ─── Nav glass ────────────────────────────────────────────────────────────────
+
+const NAV_TRANSITION_MS = 300; // Must match CSS transition duration
+
+// Build and apply nav glass maps at a specific border-radius value
+function applyNavGlassAt(radius) {
+  const pill = document.getElementById('nav-pill');
+  const w    = pill.offsetWidth;
+  const h    = pill.offsetHeight;
+  if (w === 0 || h === 0) return;
+
+  const savedBezel  = CONFIG.bezelWidth;
+  const savedScale  = CONFIG.scaleRatio;
+  const savedRadius = CONFIG.borderRadius;
+  CONFIG.bezelWidth   = 0.35;
+  CONFIG.scaleRatio   = 1.6;
+  CONFIG.borderRadius = Math.min(radius, w / 2, h / 2);
+
+  const { imageData, maxDisplacement } = buildDisplacementMap(w, h);
+  const dispDataURL     = imageDataToDataURL(imageData);
+  const specularDataURL = buildSpecularMap(w, h);
+
+  CONFIG.bezelWidth   = savedBezel;
+  CONFIG.scaleRatio   = savedScale;
+  CONFIG.borderRadius = savedRadius;
+
   document.getElementById('nav-disp-img').setAttribute('href', dispDataURL);
   document.getElementById('nav-disp-img').setAttribute('width',  w);
   document.getElementById('nav-disp-img').setAttribute('height', h);
@@ -353,34 +318,68 @@ function applyNavGlass() {
   document.getElementById('nav-spec-img').setAttribute('width',  w);
   document.getElementById('nav-spec-img').setAttribute('height', h);
   document.getElementById('nav-disp-filter').setAttribute('scale', maxDisplacement);
- 
+
   const isChrome = /Chrome/.test(navigator.userAgent) && !/Edg|Firefox/.test(navigator.userAgent);
   if (isChrome) {
     pill.style.backdropFilter       = 'url(#liquid-glass-nav) blur(3px) saturate(1.8) brightness(1.05)';
     pill.style.webkitBackdropFilter = 'url(#liquid-glass-nav) blur(3px) saturate(1.8) brightness(1.05)';
   }
 }
- 
+
+// Rebuild maps across the transition so refraction tracks the shape live
+function animateNavGlass(startRadius, targetRadius) {
+  const steps    = 12;
+  const interval = NAV_TRANSITION_MS / steps;
+
+  for (let i = 1; i <= steps; i++) {
+    setTimeout(() => {
+      const progress = i / steps;
+      const eased    = 1 - Math.pow(1 - progress, 3); // ease-out cubic
+      const radius   = startRadius + (targetRadius - startRadius) * eased;
+      applyNavGlassAt(radius);
+    }, i * interval);
+  }
+}
+
+function applyNavGlass() {
+  const pill   = document.getElementById('nav-pill');
+  const radius = parseFloat(getComputedStyle(pill).borderRadius) || 999;
+  applyNavGlassAt(radius);
+}
+
+// ─── Event listeners ──────────────────────────────────────────────────────────
+
+window.addEventListener('load', () => { applyLiquidGlass(); applyNavGlass(); });
+window.addEventListener('resize', () => { applyLiquidGlass(); applyNavGlass(); });
+
+let lastDPR = window.devicePixelRatio;
+setInterval(() => {
+  if (window.devicePixelRatio !== lastDPR) {
+    lastDPR = window.devicePixelRatio;
+    applyLiquidGlass();
+    applyNavGlass();
+  }
+}, 250);
+
+// ─── Nav pill interactions ────────────────────────────────────────────────────
+
 const navPill = document.getElementById('nav-pill');
 const navBar  = document.getElementById('nav-pill-bar');
- 
+
 navBar.addEventListener('click', () => {
-  const isOpen = navPill.classList.contains('open');
-  navPill.classList.toggle('open', !isOpen);
-  setTimeout(applyNavGlass, 320);
+  const opening = !navPill.classList.contains('open');
+  navPill.classList.toggle('open');
+  // 999 = collapsed pill, 22 = expanded rounded rect (must match CSS)
+  animateNavGlass(opening ? 999 : 22, opening ? 22 : 999);
 });
- 
+
 document.addEventListener('click', (e) => {
-  if (!navPill.contains(e.target)) {
+  if (!navPill.contains(e.target) && navPill.classList.contains('open')) {
     navPill.classList.remove('open');
-    setTimeout(applyNavGlass, 320);
+    animateNavGlass(22, 999);
   }
 });
- 
-window.addEventListener('load', applyNavGlass);
-window.addEventListener('resize', applyNavGlass);
- 
- 
 </script>
+
 </body>
 </html>
\ No newline at end of file
diff --git a/www/style.css b/www/style.css
index bd664e2..b5eab51 100644
--- a/www/style.css
+++ b/www/style.css
@@ -193,7 +193,8 @@ p {
     padding: 11px 18px;
     font-size: 14px;
     font-weight: 300;
-    color: rgba(255, 255, 255, 0.70);
+    text-align: center;
+    color: rgba(2, 2, 5, 1);
     text-decoration: none;
     transition: color 0.15s ease,
                 background 0.15s ease;