Ship gallery assets as LFS tar (fix broken images)

static/index.html

@@ -277,28 +277,64 @@
   }
   .look-card.film .ov .can-btn2:hover { transform: scale(1.15); }
 
-  /* shutter effect on the process button */
-  #processBtn { position: relative; overflow: hidden; }
-  #processBtn.snap { animation: pressScale .55s cubic-bezier(.2,.7,.2,1); }
-  #processBtn.snap::after {
-    content: ""; position: absolute; inset: -2px;
-    background: #0c0c0f;
-    transform: translateX(-103%);
-    animation: curtain .55s cubic-bezier(.65,0,.35,1);
-  }
-  @keyframes curtain {
-    0% { transform: translateX(-103%); }
-    42% { transform: translateX(0); }
-    58% { transform: translateX(0); }
-    100% { transform: translateX(103%); }
-  }
-  @keyframes pressScale { 0% { transform: scale(1); } 35% { transform: scale(.955); } 100% { transform: scale(1); } }
-  #flashFx {
-    position: fixed; inset: 0; background: #fff;
-    opacity: 0; pointer-events: none; z-index: 2000;
-  }
-  #flashFx.on { animation: flashfx .4s ease-out; }
-  @keyframes flashfx { 0% { opacity: 0; } 18% { opacity: .45; } 100% { opacity: 0; } }
+  /* full-viewport leaf shutter: blades close, flash fires, blades open */
+  #processBtn.snap { animation: pressScale .6s cubic-bezier(.2,.7,.2,1); }
+  @keyframes pressScale { 0% { transform: scale(1); } 30% { transform: scale(.95); } 100% { transform: scale(1); } }
+  #shutterFx { position: fixed; inset: 0; pointer-events: none; z-index: 2000; }
+  #shutterFx .sc {
+    position: absolute; left: 0; right: 0; height: 51%;
+    background: #030304; transform: scaleY(0);
+  }
+  #shutterFx .sc.t { top: 0; transform-origin: top;
+    box-shadow: 0 3px 30px rgba(0,0,0,.9); }
+  #shutterFx .sc.b { bottom: 0; transform-origin: bottom;
+    box-shadow: 0 -3px 30px rgba(0,0,0,.9); }
+  #shutterFx .sflash { position: absolute; inset: 0; background: #fff; opacity: 0; }
+  #shutterFx .sring {
+    position: absolute; top: 50%; left: 50%;
+    width: 70px; height: 70px; margin: -35px 0 0 -35px;
+    border: 2.5px solid var(--accent); border-radius: 50%;
+    opacity: 0; transform: scale(.4);
+  }
+  #shutterFx.go .sc.t { animation: scClose .62s cubic-bezier(.75,0,.25,1); }
+  #shutterFx.go .sc.b { animation: scClose .62s cubic-bezier(.75,0,.25,1); }
+  #shutterFx.go .sflash { animation: sflash .62s ease-out; }
+  #shutterFx.go .sring { animation: sring .62s cubic-bezier(.2,.8,.3,1); }
+  @keyframes scClose {
+    0% { transform: scaleY(0); }
+    30% { transform: scaleY(1); }
+    58% { transform: scaleY(1); }
+    100% { transform: scaleY(0); }
+  }
+  @keyframes sflash {
+    0%, 26% { opacity: 0; }
+    40% { opacity: .85; }
+    62% { opacity: .12; }
+    100% { opacity: 0; }
+  }
+  @keyframes sring {
+    0%, 30% { opacity: 0; transform: scale(.4); }
+    45% { opacity: 1; }
+    100% { opacity: 0; transform: scale(1.6); }
+  }
+
+  /* extracted parameters panel (anatomy, under the 3D LUT) */
+  .param-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; margin-top: 14px; }
+  .pchip {
+    background: var(--bg-3); border: 1px solid var(--line); border-radius: 9px;
+    padding: 8px 11px;
+  }
+  .pchip .k { font-size: 9.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--text-dim); }
+  .pchip .v { font-family: ui-monospace, Menlo, monospace; font-size: 12px; color: var(--text); margin-top: 3px; display: flex; align-items: center; gap: 6px; }
+  .pchip .sw { width: 13px; height: 13px; border-radius: 4px; border: 1px solid rgba(255,255,255,.15); display: inline-block; }
+
+  /* per-reference look downloads (playground result column) */
+  .look-dl { margin-top: 18px; border-top: 1px dashed var(--line); padding-top: 14px; }
+  .look-dl .t { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--text-dim); margin-bottom: 10px; }
+  .look-dl .t b { color: var(--accent); text-transform: none; letter-spacing: 0; }
+  .look-dl-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
+  .dl-btn.mini { padding: 8px 11px; font-size: 12px; gap: 7px; justify-content: flex-start; }
+  .dl-btn.mini .kind { font-size: 10px; }
 
   /* look anatomy: recipe + 3D LUT in one module */
   .anatomy {
@@ -438,7 +474,7 @@
   .lab-box .ref-group-label { color: var(--accent); margin: 0 0 8px; display: flex; justify-content: space-between; align-items: baseline; }
   .lab-box .ref-group-label .sub { font-size: 10px; letter-spacing: .04em; text-transform: none; color: var(--text-dim); }
   .ref-list { display: flex; flex-direction: column; gap: 6px; }
-  .ref-list.scroll { max-height: 252px; overflow-y: auto; padding-right: 4px; }
+  .ref-list.scroll { max-height: 580px; overflow-y: auto; padding-right: 4px; }
   .ref-list.tall { max-height: 560px; overflow-y: auto; padding-right: 4px; }
   .pick-row {
     display: flex; align-items: center; gap: 10px;
@@ -881,6 +917,15 @@
             </div>
             <button class="try-btn" id="runPairBtn" style="margin-top:14px;width:100%">
               Run this pair in the app →</button>
+            <div class="look-dl">
+              <div class="t">Download the <b id="lookDlName"></b> look</div>
+              <div class="look-dl-grid">
+                <a class="dl-btn mini" id="lkCube"><span>LUT</span><span class="kind">.CUBE</span></a>
+                <a class="dl-btn mini" id="lkXmp"><span>Adobe</span><span class="kind">.XMP</span></a>
+                <a class="dl-btn mini" id="lkCo"><span>Capture One</span><span class="kind">.COSTYLE</span></a>
+                <a class="dl-btn mini" id="lkJson"><span>Parameters</span><span class="kind">.JSON</span></a>
+              </div>
+            </div>
           </div>
         </div>
 
@@ -1043,18 +1088,25 @@
   });
 
   // ------------------------------------------------ process
-  const flashFx = document.createElement('div');
-  flashFx.id = 'flashFx';
-  document.body.appendChild(flashFx);
+  const shutterFx = document.createElement('div');
+  shutterFx.id = 'shutterFx';
+  shutterFx.setAttribute('aria-hidden', 'true');
+  shutterFx.innerHTML =
+    '<div class="sc t"></div><div class="sc b"></div>' +
+    '<div class="sflash"></div><div class="sring"></div>';
+  document.body.appendChild(shutterFx);
 
   function shutterSnap() {
     const btn = $('processBtn');
     btn.classList.remove('snap');
-    flashFx.classList.remove('on');
-    void btn.offsetWidth;
+    shutterFx.classList.remove('go');
+    void shutterFx.offsetWidth;
     btn.classList.add('snap');
-    flashFx.classList.add('on');
-    setTimeout(() => { btn.classList.remove('snap'); flashFx.classList.remove('on'); }, 650);
+    shutterFx.classList.add('go');
+    setTimeout(() => {
+      btn.classList.remove('snap');
+      shutterFx.classList.remove('go');
+    }, 700);
   }
 
   $('processBtn').addEventListener('click', () => {
@@ -1211,12 +1263,55 @@
     catch (e) { /* canvas unavailable — skip silently */ }
     try { aR.appendChild(makeVizCard(data.cube_lut)); }
     catch (e) { /* WebGL unavailable — skip viz silently */ }
+    try { aR.appendChild(makeParamsPanel(data.params)); }
+    catch (e) { /* skip silently */ }
     if (aL.children.length || aR.children.length) body.appendChild(anatomy);
 
     $('results').style.display = 'block';
     $('results').scrollIntoView({ behavior: 'smooth', block: 'start' });
   }
 
+  function makeParamsPanel(p) {
+    const el = document.createElement('div');
+    el.innerHTML =
+      '<div class="viz-head" style="margin-top:16px"><span class="t">Extracted parameters' +
+      '<span class="help">?<span class="tip">The measured film characteristics driving ' +
+      'this render — grain statistics, halation geometry, and the tonal fingerprint of ' +
+      'the reference. The full set is in the Film parameters JSON.</span></span></span></div>' +
+      '<div class="param-grid"></div>';
+    const grid = el.querySelector('.param-grid');
+
+    function hex(c) {
+      return '#' + c.map(v => Math.round(Math.min(Math.max(v, 0), 1) * 255)
+        .toString(16).padStart(2, '0')).join('').toUpperCase();
+    }
+    function chip(k, v, swatch) {
+      const d = document.createElement('div');
+      d.className = 'pchip';
+      d.innerHTML = '<div class="k"></div><div class="v"></div>';
+      d.querySelector('.k').textContent = k;
+      const vv = d.querySelector('.v');
+      if (swatch) {
+        const s = document.createElement('span');
+        s.className = 'sw';
+        s.style.background = swatch;
+        vv.appendChild(s);
+      }
+      vv.appendChild(document.createTextNode(v));
+      grid.appendChild(d);
+    }
+
+    chip('Grain', 'σ ' + p.grain_sigma + ' · size ' + p.grain_size);
+    chip('Halation', 'thr ' + p.h_threshold + ' · r ' + p.h_radius + ' · i ' + p.h_intensity);
+    chip('Black point', String(p.ref_black_point));
+    chip('White point', String(p.ref_white_point));
+    chip('Shadow tint', hex(p.ref_shadow_color), hex(p.ref_shadow_color));
+    chip('Highlight tint', hex(p.ref_highlight_color), hex(p.ref_highlight_color));
+    chip('Contrast range', String(p.ref_contrast_range));
+    chip('LUT residual', '×' + p.residual_scale);
+    return el;
+  }
+
   function b64ToBlob(b64, type) {
     const bin = atob(b64);
     const arr = new Uint8Array(bin.length);
@@ -1819,6 +1914,16 @@
       $('pairInput').src = input.src;
       $('pairInfo').innerHTML = '<b>' + refName() + '</b> &nbsp;→&nbsp; <b>' + input.name + '</b>';
 
+      // per-reference look downloads (pre-generated on the server)
+      const slug = refName().replace(/[^A-Za-z0-9]+/g, '-').replace(/^-|-$/g, '');
+      $('lookDlName').textContent = refName();
+      [['lkCube', 'cube'], ['lkXmp', 'xmp'], ['lkCo', 'costyle'], ['lkJson', 'json']]
+        .forEach(([id, ext]) => {
+          const a = $(id);
+          a.href = 'static/looks/' + refId() + '.' + ext;
+          a.download = 'DeepAnalog-' + slug + '.' + ext;
+        });
+
       // every pair has a pre-render; onerror falls back to the live hint
       $('instantWrap').style.display = 'block';
       $('liveHint').style.display = 'none';

static_assets.tar

@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:7d1f5ef93d84a0a62bc47686d8bd4971bdd2120a3bc497b2f1f6359f56a45ba7
-size 70051840
+oid sha256:d7dc9e23f3b49c962e15d0c47701d6dd0e93560c32ca19149aa3f066d728b201
+size 83742720