craft-library 0.4.0 → 0.5.0

package/dist/craft.js

@@ -1,4 +1,4 @@
-/* Craft Library, by Sara Lobo · liquid glass nav bar, bursting heart, magnetic icon, iridescent card, glass piggy bank, magic sphere, sweep · <glass-nav>, <like-button>, <magnetic-icon>, <iridescent-card>, <piggy-bank>, <magic-sphere>, <sweep-sphere> */
+/* Sara Lobo Library · liquid glass nav bar, bursting heart, magnetic icon, iridescent card, glass piggy bank, magic sphere, sweep, panorama · <glass-nav>, <like-button>, <magnetic-icon>, <iridescent-card>, <piggy-bank>, <magic-sphere>, <sweep-sphere>, <panorama-reel> */
 (() => {
   // dist/style.js
   var done = /* @__PURE__ */ new Set();
@@ -13,7 +13,7 @@
   }
 
   // dist/like.js
-  var CSS = `/* Bursting heart \xB7 Craft Library, by Sara Lobo
+  var CSS = `/* Bursting heart \xB7 Sara Lobo Library
    The heart eases out of sight, a disc grows and hollows into a ring, 14 dots and 2 or 3 small hearts fly out,
    and the heart springs back full. Every motion runs on its own property with its own curve; where two curves
    meet, both are at rest there, so nothing hitches. Unliking only takes the colour away. Pairs with like.js. */
@@ -424,7 +424,7 @@
   }
 
   // dist/magnet.js
-  var CSS2 = "/* Magnetic icon \xB7 Craft Library, by Sara Lobo\n   A dark disc with a brushed-metal rim and a search glyph (Figma: 40\xD740). Near the cursor the rim acts like metal\n   near a strong magnet: the disc is drawn toward the pointer, the strained rim creases and trembles, its tip cracks\n   into shards, and small voxels break off and fly to the pointer. Pairs with magnet.js.\n   Everything is drawn in a 40-unit box, so --mag-size scales the whole piece, the pull included. */\n\n.mag {\n  all: unset;\n  position: relative;\n  display: inline-grid;\n  place-items: center;\n  width: var(--mag-size, 40px);\n  height: var(--mag-size, 40px);\n  border-radius: 50%;\n  color: #fff;\n  cursor: pointer;\n  -webkit-tap-highlight-color: transparent;\n  transition: transform .2s cubic-bezier(.2, .8, .2, 1);\n}\n.mag:active {\n  transform: scale(.94);\n}\n.mag:focus-visible {\n  outline: 2px solid #9DB8FF;\n  outline-offset: 4px;\n}\n/* the disc and its rim, redrawn by magnet.js; the stretch reaches past the button */\n.mag-ring {\n  position: absolute;\n  inset: 0;\n  width: 100%;\n  height: 100%;\n  overflow: visible;\n  pointer-events: none;\n}\n/* the shards and voxels: 46 units of room on every side of the 40-unit button (46 / 40 = 115%) */\n.mag-dust {\n  position: absolute;\n  left: -115%;\n  top: -115%;\n  width: 330%;\n  height: 330%;\n  pointer-events: none;\n}\n.mag-icon {\n  position: relative;\n  display: block;\n  width: 50%;\n  height: 50%;\n}\n";
+  var CSS2 = "/* Magnetic icon \xB7 Sara Lobo Library\n   A dark disc with a brushed-metal rim and a search glyph (Figma: 40\xD740). Near the cursor the rim acts like metal\n   near a strong magnet: the disc is drawn toward the pointer, the strained rim creases and trembles, its tip cracks\n   into shards, and small voxels break off and fly to the pointer. Pairs with magnet.js.\n   Everything is drawn in a 40-unit box, so --mag-size scales the whole piece, the pull included. */\n\n.mag {\n  all: unset;\n  position: relative;\n  display: inline-grid;\n  place-items: center;\n  width: var(--mag-size, 40px);\n  height: var(--mag-size, 40px);\n  border-radius: 50%;\n  color: #fff;\n  cursor: pointer;\n  -webkit-tap-highlight-color: transparent;\n  transition: transform .2s cubic-bezier(.2, .8, .2, 1);\n}\n.mag:active {\n  transform: scale(.94);\n}\n.mag:focus-visible {\n  outline: 2px solid #9DB8FF;\n  outline-offset: 4px;\n}\n/* the disc and its rim, redrawn by magnet.js; the stretch reaches past the button */\n.mag-ring {\n  position: absolute;\n  inset: 0;\n  width: 100%;\n  height: 100%;\n  overflow: visible;\n  pointer-events: none;\n}\n/* the shards and voxels: 46 units of room on every side of the 40-unit button (46 / 40 = 115%) */\n.mag-dust {\n  position: absolute;\n  left: -115%;\n  top: -115%;\n  width: 330%;\n  height: 330%;\n  pointer-events: none;\n}\n.mag-icon {\n  position: relative;\n  display: block;\n  width: 50%;\n  height: 50%;\n}\n";
   var MARKUP = '<svg class="mag-ring" viewBox="0 0 40 40" aria-hidden="true"><defs><linearGradient id="magMetal" x1="32" y1="3.5" x2="20" y2="40" gradientUnits="userSpaceOnUse"><stop stop-color="#999"></stop><stop offset=".452" stop-color="#fff"></stop><stop offset="1" stop-color="#A2A2A2"></stop></linearGradient><radialGradient id="magFade" cx="20" cy="20" r="40" gradientUnits="userSpaceOnUse"><stop offset=".506" stop-color="#fff"></stop><stop offset=".507" stop-color="#000"></stop></radialGradient><mask id="magMask" maskUnits="userSpaceOnUse" x="-30" y="-30" width="100" height="100"><rect x="-30" y="-30" width="100" height="100" fill="url(#magFade)"></rect></mask></defs><path class="mag-rim" mask="url(#magMask)" d="M39.25 20C39.25 30.6315 30.6315 39.25 20 39.25C9.36852 39.25 .75 30.6315 .75 20C.75 9.36852 9.36852 .75 20 .75C30.6315 .75 39.25 9.36852 39.25 20Z" fill="#fff" fill-opacity=".2" stroke="url(#magMetal)" stroke-width="1.5"></path></svg><svg class="mag-icon" viewBox="0 0 20 20" fill="none" aria-hidden="true"><path d="M17.5 17.5L13.8807 13.8807M13.8807 13.8807C15.0871 12.6743 15.8333 11.0076 15.8333 9.16667C15.8333 5.48477 12.8486 2.5 9.16667 2.5C5.48477 2.5 2.5 5.48477 2.5 9.16667C2.5 12.8486 5.48477 15.8333 9.16667 15.8333C11.0076 15.8333 12.6743 15.0871 13.8807 13.8807Z" stroke="currentColor" stroke-width="1.66667" stroke-linecap="round" stroke-linejoin="round"></path></svg>';
   var api2;
   function engine2() {
@@ -446,7 +446,7 @@
         };
         return;
       }
-      function clamp(x, a, b) {
+      function clamp2(x, a, b) {
         return Math.max(a, Math.min(b, x));
       }
       function wrap(a) {
@@ -471,17 +471,17 @@
         return hash(i, k) * (1 - u) + hash(i, k + 1) * u - 0.5;
       }
       function width(m) {
-        return 0.55 - 0.25 * clamp(m.d / PULL, 0, 1);
+        return 0.55 - 0.25 * clamp2(m.d / PULL, 0, 1);
       }
       function radius(m, t) {
         var dt = wrap(t - m.a), d = m.d;
         return R + (d > 0 ? d * (spike(dt, width(m)) + BODY * bell(dt, 1)) : d * bell(dt, 0.7)) - 0.12 * d * bell(wrap(dt - Math.PI), 1.3);
       }
       function strainOf(m) {
-        return clamp((Math.abs(m.d) + 3 * m.heat) / PULL, 0, 1);
+        return clamp2((Math.abs(m.d) + 3 * m.heat) / PULL, 0, 1);
       }
       function damage(m, t) {
-        return clamp((Math.abs(m.d) + 3 * m.heat) / 9, 0, 1) * bell(wrap(t - m.a), 0.7);
+        return clamp2((Math.abs(m.d) + 3 * m.heat) / 9, 0, 1) * bell(wrap(t - m.a), 0.7);
       }
       function rimPath(m, now) {
         var pts = [], strain = strainOf(m), i, t, r, env, sharp, fray, n, p, a, b, c, e;
@@ -490,7 +490,7 @@
           r = radius(m, t);
           env = bell(wrap(t - m.a), 0.6) * strain;
           sharp = env > 0.12;
-          fray = sharp ? 0 : clamp((damage(m, t) - 0.15) / 0.85, 0, 1);
+          fray = sharp ? 0 : clamp2((damage(m, t) - 0.15) / 0.85, 0, 1);
           if (sharp && i % 3 || fray > 0 && i % 2) continue;
           if (sharp) r += 2 * JAG * PULL * env * tremble(i, now);
           else if (fray > 0) r += FRAY * fray * (hash(i, 21) - 0.62 + 0.3 * tremble(i + 500, now));
@@ -514,8 +514,8 @@
         var x = (p.x - m.box.left) * k - C, y = (p.y - m.box.top) * k - C;
         var dist = Math.hypot(x, y), edge = dist - R, near = 1 - Math.max(edge, 0) / REACH;
         if (edge > REACH) return null;
-        var d = edge >= 0 ? Math.min(edge * 0.9 / (1 + BODY), PULL * Math.pow(1 - edge / REACH, FALL)) : -Math.min(-edge * 0.85, DENT * clamp(dist / R, 0, 1));
-        return { d, a: Math.atan2(y, x), x, y, dist, near, heat: edge >= 0 ? near * near : clamp(dist / R, 0, 1) };
+        var d = edge >= 0 ? Math.min(edge * 0.9 / (1 + BODY), PULL * Math.pow(1 - edge / REACH, FALL)) : -Math.min(-edge * 0.85, DENT * clamp2(dist / R, 0, 1));
+        return { d, a: Math.atan2(y, x), x, y, dist, near, heat: edge >= 0 ? near * near : clamp2(dist / R, 0, 1) };
       }
       function step(m, dt) {
         var t = m.t = aim(m), to = t ? t.d : 0, heat = t ? t.heat : 0, turn = 0, k, c, ix = 0, iy = 0, e;
@@ -531,7 +531,7 @@
         m.heat += (heat - m.heat) * (1 - Math.exp(-dt * 6));
         if (t) {
           turn = wrap(t.a - m.a);
-          m.a += turn * (1 - Math.exp(-dt * 22 * clamp(t.dist / 8, 0, 1)));
+          m.a += turn * (1 - Math.exp(-dt * 22 * clamp2(t.dist / 8, 0, 1)));
           e = 1.4 * t.near * t.near / Math.max(t.dist, 1);
           ix = t.x * e;
           iy = t.y * e;
@@ -550,13 +550,13 @@
           m.acc = 0;
           return;
         }
-        pull = m.d > 0 ? clamp(m.d / PULL, 0, 1) : 0.5 * clamp(-m.d / DENT, 0, 1);
-        m.acc += dt * RATE * Math.pow(pull, 1.4) * (0.35 + 0.65 * clamp(m.pace / 160, 0, 1));
+        pull = m.d > 0 ? clamp2(m.d / PULL, 0, 1) : 0.5 * clamp2(-m.d / DENT, 0, 1);
+        m.acc += dt * RATE * Math.pow(pull, 1.4) * (0.35 + 0.65 * clamp2(m.pace / 160, 0, 1));
         for (; m.acc >= 1; m.acc--) {
           if (m.dust.length >= MAXDUST) continue;
           th = m.a + (Math.random() + Math.random() - 1) * width(m) * 1.4;
           r = radius(m, th) - Math.random() * 1.2;
-          if (m.d > 0) r += 0.35 * m.d * clamp((r - R) / (m.d * (1 + BODY)), 0, 1);
+          if (m.d > 0) r += 0.35 * m.d * clamp2((r - R) / (m.d * (1 + BODY)), 0, 1);
           x = m.cx + r * Math.cos(th);
           y = m.cy + r * Math.sin(th);
           dx = C + t.x - x;
@@ -595,12 +595,12 @@
           dy = ty - p.y;
           dist = Math.hypot(dx, dy) || 1e-3;
           sp = (home ? 18 : 30) + 420 / (dist + 6);
-          sw = p.spin * sp * 0.4 * clamp(dist / 20, 0, 1);
+          sw = p.spin * sp * 0.4 * clamp2(dist / 20, 0, 1);
           p.vx += (dx / dist * sp - dy / dist * sw - p.vx) * e;
           p.vy += (dy / dist * sp + dx / dist * sw - p.vy) * e;
           p.x += p.vx * dt;
           p.y += p.vy * dt;
-          p.k = 0.45 + 0.55 * clamp(dist / 12, 0, 1);
+          p.k = 0.45 + 0.55 * clamp2(dist / 12, 0, 1);
           if (dist < (home ? 1 : 2)) p.age = Math.max(p.age, p.life - 0.1);
           if (p.age >= p.life) m.dust.splice(k, 1);
         }
@@ -631,7 +631,7 @@
           r0 = radius(m, m.a + t0);
           r1 = radius(m, m.a + t1);
           ro = radius(m, m.a + tc);
-          q = clamp((ro - f) / top, 0, 1);
+          q = clamp2((ro - f) / top, 0, 1);
           if (ro - f > 6) {
             rm = f + (ro - f) * (0.4 + 0.2 * hash(i, 7));
             shard(m, g, i * 2, q * 0.5, [at(t0, f), at(tc, f), at(t1, f), at(t1, Math.min(rm, r1)), at(t0, Math.min(rm, r0))], 0);
@@ -684,7 +684,7 @@
       function chips(m, now) {
         var t = m.t, f = crack(m)[0];
         m.chips.forEach(function(c, k) {
-          var o = clamp((damage(m, c.a) + 0.08 * tremble(300 + k, now) - c.at) / 0.12, 0, 1), z, r, x, y, dx, dy, l;
+          var o = clamp2((damage(m, c.a) + 0.08 * tremble(300 + k, now) - c.at) / 0.12, 0, 1), z, r, x, y, dx, dy, l;
           if (o < 0.02) o = 0;
           if (!o && !c.open) return;
           c.open = o;
@@ -888,7 +888,7 @@
   }
 
   // dist/glassnav.js
-  var CSS3 = `/* Liquid glass nav bar \xB7 Craft Library, by Sara Lobo
+  var CSS3 = `/* Liquid glass nav bar \xB7 Sara Lobo Library
    Figma "Liquid Glass Button - Dark", 291\xD760, for a dark app. Paint order follows the Figma layer: background blur \u2192
    fills \u2192 lenses \u2192 capsule and icons \u2192 inner shadows \u2192 strokes. The bar stays out of any stacking context (no transform,
    opacity or isolation on it), so every blend mode mixes with what is behind it: keep it on a solid background. */
@@ -1010,7 +1010,7 @@
       function still(s) {
         return Math.abs(s.x - s.t) < 0.02 && Math.abs(s.v) < 0.05;
       }
-      function clamp(v, a, b) {
+      function clamp2(v, a, b) {
         return Math.max(a, Math.min(b, v));
       }
       var running = /* @__PURE__ */ new Set(), raf = 0, last = 0, uid = 0;
@@ -1072,7 +1072,7 @@
           pill.style.left = l + "px";
           pill.style.width = r - l + "px";
           dark.style.clipPath = "inset(3px " + (291 - r) + "px 3px " + l + "px round 27px)";
-          var fl = clamp((43 - l) / 40, 0, 1), fr = clamp((r - 248) / 40, 0, 1);
+          var fl = clamp2((43 - l) / 40, 0, 1), fr = clamp2((r - 248) / 40, 0, 1);
           rim.classList.toggle("lgn-fade", fl + fr > 1e-3);
           rim.style.setProperty("--fl", fl.toFixed(3));
           rim.style.setProperty("--fr", fr.toFixed(3));
@@ -1270,7 +1270,7 @@
             if (to === void 0) return;
             e.preventDefault();
             user();
-            to = clamp(to, 0, 4);
+            to = clamp2(to, 0, 4);
             select(to);
             hits[to].focus();
           });
@@ -1393,7 +1393,7 @@
   }
 
   // dist/thinking.js
-  var CSS4 = `/* Thinking orbs \xB7 Craft Library, by Sara Lobo
+  var CSS4 = `/* Thinking orbs \xB7 Sara Lobo Library
    A ball of dots and the word beside it, for the wait while an answer is being written. thinking.js draws the ball
    and, for the Sweep, carries the ball's wave on through the word. Made for dark backgrounds: on a light one, set
    --thinking-ink (the dots and the light in the word) and --thinking-dim (the word at rest). */
@@ -1472,7 +1472,7 @@
         var t = clamp01((x - a) / (b - a));
         return t * t * (3 - 2 * t);
       }
-      function ease(t) {
+      function ease2(t) {
         return t < 0.5 ? 4 * t * t * t : 1 - Math.pow(-2 * t + 2, 3) / 2;
       }
       function painter() {
@@ -1536,7 +1536,7 @@
         q[c] = qb * sn + qc * cs;
       }
       function sphere(small) {
-        var per = small ? 2 : 4, COUNT = 5, SLOT = 0.5, DUR = 0.42, HOLD = 1.1, R0 = 0.8, D = [], v = [0, 0, 0], o = [0, 0, 0, 0, 0, 0];
+        var per = small ? 2 : 4, COUNT = 5, SLOT = 0.5, DUR = 0.42, HOLD2 = 1.1, R0 = 0.8, D = [], v = [0, 0, 0], o = [0, 0, 0, 0, 0, 0];
         for (var a = 0; a < 3; a++) for (var sg = 1; sg >= -1; sg -= 2) {
           var s = TONES[a * 2 + (sg > 0 ? 0 : 1)], b = (a + 1) % 3, c = (a + 2) % 3;
           for (var su = -1; su <= 1; su++) for (var sv = -1; sv <= 1; sv++) for (var j = 0; j < per; j++) for (var k = 0; k < per; k++) {
@@ -1583,17 +1583,17 @@
                 mi++;
                 mt -= SLOT;
               }
-            } else if (mt >= HOLD) {
+            } else if (mt >= HOLD2) {
               plan();
               mi = 0;
-              mt -= HOLD;
+              mt -= HOLD2;
             }
           },
           draw: function(p, u) {
             var V = view(0.72 + 0.2 * Math.sin(t * TAU / 15), 0.5 + 0.07 * Math.sin(t * TAU / 21));
             var m = mi < seq.length ? seq[mi] : null;
-            var th = m ? m.dir * Math.PI / 2 * ease(clamp01(mt / DUR)) : 0, cs = Math.cos(th), sn = Math.sin(th);
-            var glow = m ? 0 : Math.sin(Math.PI * clamp01(mt / HOLD)), rb = R0 * (1 + 0.03 * glow);
+            var th = m ? m.dir * Math.PI / 2 * ease2(clamp01(mt / DUR)) : 0, cs = Math.cos(th), sn = Math.sin(th);
+            var glow = m ? 0 : Math.sin(Math.PI * clamp01(mt / HOLD2)), rb = R0 * (1 + 0.03 * glow);
             for (var i = 0; i < D.length; i++) {
               var d = D[i];
               v[0] = d.pos[0];
@@ -1775,6 +1775,700 @@
     } };
   }
 
+  // dist/panorama.js
+  var DEFAULTS = {
+    title: "Lorem ipsum",
+    text: "Dolor sit amet,",
+    textItalic: "consectetur adipiscing.",
+    // set in the display face, after text
+    video: null,
+    // { src, poster, title, year }: the opening clip, then the screen in the middle of the dome
+    stills: [],
+    // [{ src, title, year }]: the other screens, repeated around the dome
+    labels: true,
+    // "CAM 07" on each screen
+    intro: true,
+    // the opening plays the first time the dome comes on screen; false starts it settled
+    cursor: true,
+    // the dot-and-ring pointer (only for a mouse or trackpad)
+    fonts: true
+    // load Cormorant Garamond, Geist and Geist Mono from Google Fonts
+  };
+  var FONTS = "https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;1,300&family=Geist:wght@400;500&family=Geist+Mono:wght@400;500&display=swap";
+  var HOLD = 3.3;
+  var MORPH_V = 1.7;
+  var MORPH = 1.45;
+  var AR = 1.6;
+  var D2R = Math.PI / 180;
+  var R2D = 180 / Math.PI;
+  var CSS5 = `
+.cup { --cup-ink: #0b0a09; --cup-paper: #ece7de; --cup-soft: cubic-bezier(.22, .61, .21, 1);
+  --cup-display: "Cormorant Garamond", "Cormorant", Garamond, "Times New Roman", serif;
+  --cup-ui: "Geist", -apple-system, "Helvetica Neue", Arial, sans-serif; --cup-mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, monospace;
+  position: relative; overflow: hidden; background: var(--cup-ink); color: var(--cup-paper); container-type: size; touch-action: pan-y;
+  -webkit-font-smoothing: antialiased; -webkit-user-select: none; user-select: none; }
+.cup.cup-cur, .cup.cup-cur * { cursor: none; }
+.cup-gl { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
+.cup-src { position: absolute; left: 0; top: 0; width: 2px; height: 2px; opacity: 0; pointer-events: none; }
+.cup-scrim { position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity 1.2s var(--cup-soft);
+  background: radial-gradient(34% 28% at 50% 50%, rgba(11, 10, 9, .9), rgba(11, 10, 9, .45) 60%, rgba(11, 10, 9, 0) 100%); }
+.cup.is-settled .cup-scrim { opacity: 1; }
+
+/* the title tracks in like an opening credit: the letters drift together from a wide spacing and out of a blur, centre
+   first; then a thin anamorphic streak crosses it and each letter catches the light as it passes */
+.cup-title { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); text-align: center; white-space: nowrap; pointer-events: none; will-change: transform; }
+/* padding-bottom keeps the descenders (the p of "ipsum") clear of the line below */
+.cup-name { position: relative; margin: 0; padding-bottom: .15em; font-family: var(--cup-display); font-weight: 300; font-size: clamp(44px, 10.5cqw, 168px); line-height: .9; letter-spacing: -.01em; }
+.cup-name span { display: inline-block; opacity: 0; transform: translateX(calc(var(--o) * .42em)); filter: blur(14px);
+  transition: opacity 1.6s var(--cup-soft) var(--d), transform 2.8s cubic-bezier(.16, 1, .3, 1) var(--d), filter 2.2s var(--cup-soft) var(--d); }
+.cup-title.is-in .cup-name span { opacity: 1; transform: none; filter: blur(0); animation: cup-glint 1.5s ease-in-out var(--g) both; }
+@keyframes cup-glint { 0%, 100% { text-shadow: 0 0 0 rgba(255, 238, 210, 0); } 45% { text-shadow: 0 0 22px rgba(255, 238, 210, .6), 0 0 2px rgba(255, 250, 240, .85); } }
+.cup-flare { position: absolute; left: -20%; right: -20%; top: 54%; height: 1px; pointer-events: none; opacity: 0;
+  background: linear-gradient(90deg, transparent, rgba(255, 240, 215, .9) 50%, transparent); box-shadow: 0 0 14px 2px rgba(255, 226, 180, .3); }
+.cup-title.is-in .cup-flare { animation: cup-flare 2.4s cubic-bezier(.45, 0, .2, 1) 1.5s both; }
+@keyframes cup-flare { 0% { opacity: 0; transform: translateX(-55%) scaleX(.35); } 25% { opacity: 1; } 75% { opacity: .85; } 100% { opacity: 0; transform: translateX(55%) scaleX(.35); } }
+.cup-text { margin: 18px 0 0; font: 400 clamp(13px, 1.15cqw, 16px)/1.4 var(--cup-ui); letter-spacing: .01em; opacity: .82; }
+.cup-text em { font-family: var(--cup-display); font-size: 1.32em; }
+/* each word rises from its own mask: a clip-path, not overflow, so every word keeps its own baseline (both faces sit on
+   one line), and wider than the word so the italic's leaning strokes stay whole */
+.cup-text .w { display: inline-block; clip-path: inset(0 -.25em); }
+.cup-text .w > span { display: inline-block; transform: translateY(110%); transition: transform 1.4s cubic-bezier(.16, 1, .3, 1) var(--d); }
+.cup-title.is-in .cup-text .w > span { transform: none; }
+.cup-title.is-reset, .cup-title.is-reset * { transition: none !important; animation: none !important; }
+
+.cup-bars i { position: absolute; left: 0; right: 0; height: var(--cup-bar, 0px); background: #000; transition: transform 1.3s var(--cup-soft); }
+.cup-bars i:first-child { top: 0; } .cup-bars i:last-child { bottom: 0; }
+.cup.is-morph .cup-bars i:first-child { transform: translateY(-101%); } .cup.is-morph .cup-bars i:last-child { transform: translateY(101%); }
+
+/* focus brackets on the screen under the pointer, and its name */
+.cup-aim { position: absolute; left: 0; top: 0; pointer-events: none; opacity: 0; will-change: transform, width, height; }
+.cup-aim > i { position: absolute; width: 16px; height: 16px; border: 0 solid var(--cup-paper); }
+.cup-aim > i:nth-child(1) { left: -7px; top: -7px; border-width: 1px 0 0 1px; }
+.cup-aim > i:nth-child(2) { right: -7px; top: -7px; border-width: 1px 1px 0 0; }
+.cup-aim > i:nth-child(3) { left: -7px; bottom: -7px; border-width: 0 0 1px 1px; }
+.cup-aim > i:nth-child(4) { right: -7px; bottom: -7px; border-width: 0 1px 1px 0; }
+.cup-tag { position: absolute; left: -7px; top: calc(100% + 18px); white-space: nowrap; }
+.cup-tag em { display: block; font: italic 300 28px/1 var(--cup-display); text-shadow: 0 1px 12px rgba(0, 0, 0, .6); }
+.cup-tag small { display: block; margin-top: 8px; font: 10.5px/1 var(--cup-mono); letter-spacing: .1em; opacity: .6; }
+.cup-tag.is-new em, .cup-tag.is-new small { animation: cup-tag .8s var(--cup-soft) both; }
+.cup-tag.is-new small { animation-delay: .1s; }
+@keyframes cup-tag { from { opacity: 0; transform: translateY(8px); filter: blur(5px); } }
+
+/* the pointer: a dot, and a ring that trails it and stretches with speed */
+.cup-cursor { position: absolute; left: 0; top: 0; pointer-events: none; opacity: 0; transition: opacity .35s var(--cup-soft); }
+.cup-cursor.is-on { opacity: 1; }
+.cup-cursor i { position: absolute; left: 0; top: 0; border-radius: 50%; will-change: transform; }
+.cup-dot { width: 6px; height: 6px; margin: -3px 0 0 -3px; background: var(--cup-paper); }
+.cup-ring { width: 38px; height: 38px; margin: -19px 0 0 -19px; border: 1px solid rgba(236, 231, 222, .5); }
+
+@media (prefers-reduced-motion: reduce) {
+  .cup-name span, .cup-text .w > span, .cup-bars i, .cup-scrim { transition: none; }
+  .cup-title.is-in .cup-name span, .cup-title.is-in .cup-flare { animation: none; }
+}`;
+  var VS = `
+attribute vec3 aPos; attribute vec2 aUv; attribute vec4 aRect; attribute vec4 aMisc; attribute vec2 aPan; attribute vec2 aLab; attribute float aGlow;
+uniform vec2 uHalf; uniform float uP;
+varying vec2 vUv; varying vec4 vRect; varying vec4 vMisc; varying vec2 vPan; varying vec2 vLab; varying float vGlow;
+void main() {
+  vUv = aUv; vRect = aRect; vMisc = aMisc; vPan = aPan; vLab = aLab; vGlow = aGlow;
+  gl_Position = vec4(aPos.x / uHalf.x, -aPos.y / uHalf.y, 0.0, (uP - aPos.z) / uP);   // CSS-style perspective, divided on the GPU
+}`;
+  var FS = `
+#extension GL_OES_standard_derivatives : enable
+precision mediump float;
+varying vec2 vUv; varying vec4 vRect; varying vec4 vMisc; varying vec2 vPan; varying vec2 vLab; varying float vGlow;
+uniform sampler2D uAtlas; uniform sampler2D uVideo; uniform sampler2D uLabels; uniform float uLab;
+uniform highp vec2 uView; uniform highp float uDpr; uniform highp vec4 uColor;
+vec3 grade(vec3 c) {                                            // black and white, colour in a soft circle at the pointer
+  if (uColor.w <= 0.0) return c;
+  highp vec2 sp = vec2(gl_FragCoord.x / uDpr - uView.x, uView.y - gl_FragCoord.y / uDpr);
+  float k = 1.0 - smoothstep(uColor.z * 0.4, uColor.z, length(sp - uColor.xy));
+  vec3 g = vec3(dot(c, vec3(0.299, 0.587, 0.114))) * vec3(1.02, 1.0, 0.96);
+  return mix(c, mix(g * 0.92, c * (1.0 + 0.08 * k), k), uColor.w);
+}
+void main() {
+  vec2 uv = clamp((vUv - 0.5) / 1.16 + 0.5 + vPan, 0.002, 0.998);              // the picture a little larger, panned
+  vec2 t = vRect.xy + uv * vRect.zw;
+  vec3 col = vMisc.z > 0.5 ? texture2D(uVideo, t).rgb : texture2D(uAtlas, t).rgb;
+  vec2 p = (vUv - 0.5) * vec2(1.6, 1.0);
+  float kb = vMisc.w, r = 0.035 * kb;
+  vec2 q = abs(p) - vec2(0.8, 0.5) + r;
+  float d = length(max(q, 0.0)) + min(max(q.x, q.y), 0.0) - r;                 // a rounded screen
+  col *= mix(0.5, 1.0, smoothstep(0.0, 0.14 * kb, -d));                         // its dark inner edge
+  vec2 lp = (vUv - vec2(0.07, 0.836)) / vec2(0.42, 0.084);
+  if (uLab > 0.0 && lp.x > 0.0 && lp.x < 1.0 && lp.y > 0.0 && lp.y < 1.0) {
+    float a = texture2D(uLabels, vLab + lp * vec2(0.25, 0.03125)).a;
+    col = mix(col, vec3(0.925, 0.906, 0.871), a * 0.8 * uLab);
+  }
+  col *= 1.0 - vMisc.y;
+  col = grade(col);
+  float aa = fwidth(d);
+  float alpha = (1.0 - smoothstep(-aa, aa, d)) * vMisc.x;
+  vec4 outc = vec4(col * alpha, alpha);
+  if (vGlow > 0.001) {                                                         // the screen's own light on the dark around it
+    vec2 cu = clamp(vUv, 0.0, 1.0) * 0.86 + 0.07;
+    vec3 gc = vMisc.z > 0.5 ? texture2D(uVideo, vRect.xy + cu * vRect.zw).rgb : texture2D(uAtlas, vRect.xy + cu * vRect.zw, 5.0).rgb;
+    float ga = vGlow * 0.85 * exp(-max(d, 0.0) / (0.28 * kb)) * vMisc.x * (1.0 - alpha);
+    outc += vec4(grade(gc) * 1.6 * ga, ga);
+  }
+  gl_FragColor = outc;
+}`;
+  var clamp = (v, a = 0, b = 1) => Math.min(b, Math.max(a, v));
+  var lerp = (a, b, u) => a + (b - a) * u;
+  var ease = (u) => u < 0.5 ? 4 * u * u * u : 1 - Math.pow(-2 * u + 2, 3) / 2;
+  var sstep = (a, b, v) => {
+    const u = clamp((v - a) / (b - a));
+    return u * u * (3 - 2 * u);
+  };
+  var damp = (cur, to, rate, dt) => cur + (to - cur) * (1 - Math.exp(-rate * dt));
+  var esc = (s) => String(s ?? "").replace(/[&<>"]/g, (c) => ({ "&": "&amp;", "<": "&lt;", ">": "&gt;", '"': "&quot;" })[c]);
+  function rot(x, y, z, a, b) {
+    const y1 = y * Math.cos(b) - z * Math.sin(b), z1 = y * Math.sin(b) + z * Math.cos(b);
+    return [x * Math.cos(a) + z1 * Math.sin(a), y1, -x * Math.sin(a) + z1 * Math.cos(a)];
+  }
+  var styled = false;
+  function injectStyle(fonts) {
+    if (styled) return;
+    styled = true;
+    if (fonts && !document.querySelector(`link[href="${FONTS}"]`)) {
+      const l = document.createElement("link");
+      l.rel = "stylesheet";
+      l.href = FONTS;
+      document.head.append(l);
+    }
+    const s = document.createElement("style");
+    s.textContent = CSS5;
+    document.head.append(s);
+  }
+  function markup(o) {
+    const ch = [...String(o.title)], mid = (ch.length - 1) / 2;
+    const letters = ch.map((c, i) => `<span aria-hidden="true" style="--o:${(i - mid).toFixed(1)};--d:${(Math.abs(i - mid) * 0.07).toFixed(2)}s;--g:${(1.5 + i / Math.max(1, ch.length - 1) * 1.2).toFixed(2)}s">${c === " " ? "&nbsp;" : esc(c)}</span>`).join("");
+    let k = 0;
+    const words = (s) => String(s || "").split(/\s+/).filter(Boolean).map((w) => `<span class="w"><span style="--d:${(1.7 + k++ * 0.07).toFixed(2)}s">${esc(w)}</span></span>`).join(" ");
+    const text = words(o.text) + (o.textItalic ? ` <em>${words(o.textItalic)}</em>` : "");
+    return `<canvas class="cup-gl" aria-hidden="true"></canvas>
+<div class="cup-scrim"></div>
+<div class="cup-title"><div class="cup-name" role="heading" aria-level="1" aria-label="${esc(o.title)}">${letters}<i class="cup-flare" aria-hidden="true"></i></div><p class="cup-text">${text}</p></div>
+<div class="cup-bars" aria-hidden="true"><i></i><i></i></div>
+<div class="cup-aim" aria-hidden="true"><i></i><i></i><i></i><i></i><div class="cup-tag"></div></div>
+<div class="cup-cursor" aria-hidden="true"><i class="cup-ring"></i><i class="cup-dot"></i></div>`;
+  }
+  function mountPanorama(root, options = {}) {
+    const o = { ...DEFAULTS, ...options };
+    injectStyle(o.fonts);
+    const reduce = matchMedia("(prefers-reduced-motion: reduce)").matches;
+    const fine = matchMedia("(pointer: fine)").matches;
+    root.classList.add("cup");
+    if (o.cursor && fine) root.classList.add("cup-cur");
+    root.innerHTML = markup(o);
+    const $ = (s) => root.querySelector(s);
+    const canvas = $(".cup-gl"), titleEl = $(".cup-title"), aim = $(".cup-aim"), tag = $(".cup-tag");
+    const cursor = $(".cup-cursor"), dot = $(".cup-dot"), ring = $(".cup-ring");
+    const stills = (o.stills || []).slice(0, 16);
+    let video = null;
+    if (o.video && o.video.src) {
+      video = document.createElement("video");
+      video.className = "cup-src";
+      video.crossOrigin = "anonymous";
+      Object.assign(video, { src: o.video.src, muted: true, loop: true, playsInline: true, preload: "auto" });
+      if (o.video.poster) video.poster = o.video.poster;
+      video.setAttribute("muted", "");
+      video.setAttribute("playsinline", "");
+      video.setAttribute("aria-hidden", "true");
+      root.append(video);
+    }
+    const S = Math.max(1, stills.length);
+    const filmFor = (i) => i === 0 && video ? o.video : stills[(i * 7 + Math.floor(i / S) * 4) % S] || {};
+    const stillIndex = (i) => i === 0 && video ? -1 : (i * 7 + Math.floor(i / S) * 4) % S;
+    const gl = canvas.getContext("webgl", { alpha: true, premultipliedAlpha: true, antialias: true });
+    if (!gl || !gl.getExtension("OES_standard_derivatives")) {
+      const pic = o.video && o.video.poster || stills[0] && stills[0].src;
+      if (pic) Object.assign(root.style, { backgroundImage: `url("${pic}")`, backgroundSize: "cover", backgroundPosition: "center" });
+      titleEl.classList.add("is-in");
+      return { replay() {
+      }, destroy() {
+        root.innerHTML = "";
+        root.classList.remove("cup", "cup-cur");
+      } };
+    }
+    const compile = (type, src) => {
+      const s = gl.createShader(type);
+      gl.shaderSource(s, src);
+      gl.compileShader(s);
+      if (!gl.getShaderParameter(s, gl.COMPILE_STATUS)) throw new Error(gl.getShaderInfoLog(s));
+      return s;
+    };
+    const prog = gl.createProgram();
+    gl.attachShader(prog, compile(gl.VERTEX_SHADER, VS));
+    gl.attachShader(prog, compile(gl.FRAGMENT_SHADER, FS));
+    gl.linkProgram(prog);
+    gl.useProgram(prog);
+    const MAX = 100, F = 18;
+    const data = new Float32Array(MAX * 4 * F);
+    gl.bindBuffer(gl.ARRAY_BUFFER, gl.createBuffer());
+    const idx = new Uint16Array(MAX * 6);
+    for (let i = 0; i < MAX; i++) idx.set([i * 4, i * 4 + 1, i * 4 + 2, i * 4, i * 4 + 2, i * 4 + 3], i * 6);
+    gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, gl.createBuffer());
+    gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, idx, gl.STATIC_DRAW);
+    [["aPos", 3, 0], ["aUv", 2, 3], ["aRect", 4, 5], ["aMisc", 4, 9], ["aPan", 2, 13], ["aLab", 2, 15], ["aGlow", 1, 17]].forEach(([name, size, off]) => {
+      const loc = gl.getAttribLocation(prog, name);
+      gl.enableVertexAttribArray(loc);
+      gl.vertexAttribPointer(loc, size, gl.FLOAT, false, F * 4, off * 4);
+    });
+    const U = (n2) => gl.getUniformLocation(prog, n2);
+    const uHalf = U("uHalf"), uP = U("uP"), uLab = U("uLab"), uView = U("uView"), uDpr = U("uDpr"), uColor = U("uColor");
+    gl.uniform1i(U("uAtlas"), 0);
+    gl.uniform1i(U("uVideo"), 1);
+    gl.uniform1i(U("uLabels"), 2);
+    gl.enable(gl.BLEND);
+    gl.blendFunc(gl.ONE, gl.ONE_MINUS_SRC_ALPHA);
+    const texture = (unit, mip) => {
+      const t = gl.createTexture();
+      gl.activeTexture(gl.TEXTURE0 + unit);
+      gl.bindTexture(gl.TEXTURE_2D, t);
+      gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
+      gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
+      gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, mip ? gl.LINEAR_MIPMAP_LINEAR : gl.LINEAR);
+      gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
+      gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, 1, 1, 0, gl.RGBA, gl.UNSIGNED_BYTE, new Uint8Array([21, 19, 17, 255]));
+      return { t, unit, mip };
+    };
+    const upload = (tx, src) => {
+      try {
+        gl.activeTexture(gl.TEXTURE0 + tx.unit);
+        gl.bindTexture(gl.TEXTURE_2D, tx.t);
+        gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, src);
+        if (tx.mip) gl.generateMipmap(gl.TEXTURE_2D);
+      } catch (e) {
+        console.warn("Panorama: a picture could not be read (another site without CORS?)", e);
+      }
+    };
+    const tAtlas = texture(0, true), tVideo = texture(1, false), tLab = texture(2, true);
+    const sheet = document.createElement("canvas");
+    sheet.width = 2048;
+    sheet.height = 1024;
+    const sctx = sheet.getContext("2d");
+    sctx.fillStyle = "#151311";
+    sctx.fillRect(0, 0, 2048, 1024);
+    let pending = stills.length;
+    stills.forEach((f, j) => {
+      const im = new Image();
+      im.crossOrigin = "anonymous";
+      im.decoding = "async";
+      im.onload = im.onerror = () => {
+        if (im.naturalWidth) {
+          const iw = im.naturalWidth, ih = im.naturalHeight, sw = Math.min(iw, ih * AR), sh = sw / AR;
+          sctx.drawImage(im, (iw - sw) / 2, (ih - sh) / 2, sw, sh, j % 4 * 512, Math.floor(j / 4) * 256, 400, 250);
+        }
+        if (--pending === 0) upload(tAtlas, sheet);
+      };
+      im.src = f.src;
+    });
+    const cellRect = (j) => [j % 4 * 0.25, Math.floor(j / 4) * 0.25, 400 / 2048, 250 / 1024];
+    let videoRect = [0.05, 0, 0.9, 1], lastVT = -1;
+    if (video) {
+      if (o.video.poster) {
+        const p = new Image();
+        p.crossOrigin = "anonymous";
+        p.onload = () => upload(tVideo, p);
+        p.src = o.video.poster;
+      }
+      video.addEventListener("loadedmetadata", () => {
+        const a = video.videoWidth / video.videoHeight;
+        videoRect = a > AR ? [(1 - AR / a) / 2, 0, AR / a, 1] : [0, (1 - a / AR) / 2, 1, a / AR];
+      });
+    }
+    let labelsReady = false;
+    function makeLabels() {
+      const c = document.createElement("canvas");
+      c.width = c.height = 1024;
+      const x = c.getContext("2d");
+      x.fillStyle = "#fff";
+      x.font = '500 19px "Geist Mono", ui-monospace, Menlo, monospace';
+      x.textBaseline = "middle";
+      try {
+        x.letterSpacing = "1.5px";
+      } catch (e) {
+      }
+      for (let i = 0; i < 128; i++) {
+        const ox = i % 4 * 256, oy = Math.floor(i / 4) * 32;
+        x.globalAlpha = 0.7;
+        x.beginPath();
+        x.arc(ox + 9, oy + 16, 4, 0, 7);
+        x.fill();
+        x.globalAlpha = 1;
+        x.fillText("CAM " + String(i + 1).padStart(2, "0"), ox + 22, oy + 17);
+      }
+      upload(tLab, c);
+      labelsReady = true;
+    }
+    let W = 0, H = 0, P = 600, R = 0, tw = 0, cells = [], n = 0;
+    let g = new Float32Array(MAX), hv = new Float32Array(MAX);
+    function layout() {
+      W = root.clientWidth;
+      H = root.clientHeight;
+      if (!W || !H) return;
+      P = Math.max(W * 0.42, 340);
+      R = Math.max(W, H * 1.3) * 0.95;
+      const C = W < 720 ? 7 : 11, Rw = 7, da = (W < 720 ? 18 : 15) * D2R, db = 13 * D2R;
+      cells = [];
+      for (let r = 0; r < Rw; r++) for (let c = 0; c < C; c++) cells.push([(c - (C - 1) / 2) * da, (r - (Rw - 1) / 2) * db]);
+      cells.sort((p, q) => Math.hypot(p[0], p[1]) - Math.hypot(q[0], q[1]));
+      n = Math.min(MAX, cells.length);
+      tw = R * da * 0.84;
+      const dpr = Math.min(devicePixelRatio || 1, 2);
+      canvas.width = Math.round(W * dpr);
+      canvas.height = Math.round(H * dpr);
+      root.style.setProperty("--cup-bar", (W > H ? Math.max(0, (H - W / 2.39) / 2) : 0) + "px");
+    }
+    let px = 0, py = 0, inside = false, mx = 0, my = 0;
+    const onMove = (e) => {
+      const b = root.getBoundingClientRect();
+      px = e.clientX - b.left;
+      py = e.clientY - b.top;
+      inside = true;
+      mx = clamp(px / W * 2 - 1, -1, 1);
+      my = clamp(py / H * 2 - 1, -1, 1);
+    };
+    const onLeave = () => {
+      inside = false;
+      mx = my = 0;
+    };
+    root.addEventListener("pointermove", onMove);
+    root.addEventListener("pointerdown", onMove);
+    root.addEventListener("pointerleave", onLeave);
+    root.addEventListener("pointercancel", onLeave);
+    let t0 = 0, last = 0, raf = 0, visible = false, started = false, ready = false, settledAt = 0;
+    let headH = 0, headP = 0, clock = 0, fx = 0, fy = 0, on = 0, mono = 0, labOn = 0, hover = -1;
+    const AIM = { x: 0, y: 0, w: 0, h: 0, o: 0, idx: -1 }, CUR = { x: 0, y: 0, s: 1, d: 1, seen: false };
+    function begin() {
+      started = true;
+      titleEl.classList.add("is-reset");
+      titleEl.classList.remove("is-in");
+      void titleEl.offsetWidth;
+      titleEl.classList.remove("is-reset");
+      root.classList.remove("is-morph", "is-settled");
+      settledAt = 0;
+      mono = 0;
+      labOn = 0;
+      hover = -1;
+      g.fill(0);
+      hv.fill(0);
+      if (video) {
+        try {
+          video.currentTime = 0;
+          video.play().catch(() => {
+          });
+        } catch (e) {
+        }
+      }
+      const skip = reduce || !o.intro;
+      t0 = performance.now() / 1e3 - (skip ? HOLD + 4 : 0);
+      if (skip) {
+        titleEl.classList.add("is-in");
+        root.classList.add("is-morph", "is-settled");
+        settledAt = 1;
+      } else setTimeout(() => titleEl.classList.add("is-in"), 450);
+    }
+    function pose(i, dt) {
+      const [a, b] = cells[i];
+      let x = Math.sin(a) * Math.cos(b), y = Math.sin(b), z = -Math.cos(a) * Math.cos(b);
+      [x, y, z] = rot(x, y, z, headH, 0);
+      [x, y, z] = rot(x, y, z, 0, -headP);
+      const fwd = -z, Xs = x / Math.max(0.05, fwd) * P, Ys = y / Math.max(0.05, fwd) * P;
+      const h = hv[i] = damp(hv[i], hover === i ? 1 : 0, 6, dt);
+      const near = g[i] = damp(g[i], Math.exp(-((Math.hypot(Xs - fx, Ys - fy) / 240) ** 2)) * on, 4, dt);
+      const r = R * (1 - 0.07 * near - 0.12 * h);
+      return {
+        x: x * r,
+        y: y * r,
+        z: P + z * r,
+        rx: Math.asin(clamp(y, -1, 1)) * R2D,
+        ry: Math.atan2(-x, -z) * R2D,
+        w: tw * (1 + 0.08 * h),
+        o: sstep(0.3, 0.52, fwd),
+        sh: clamp((1 - fwd) * 1.6) * 0.55 * (1 - 0.6 * near) * (1 - h),
+        ix: -Xs / W * 6,
+        iy: -Ys / H * 6,
+        glow: h
+      };
+    }
+    const mix = (a, b, u) => {
+      const r = {};
+      for (const k in b) r[k] = lerp(a[k] ?? b[k], b[k], u);
+      return r;
+    };
+    const CORNERS = [[-0.5, -0.5, 0, 0], [0.5, -0.5, 1, 0], [0.5, 0.5, 1, 1], [-0.5, 0.5, 0, 1]];
+    function item(i, q, kb) {
+      const w = q.w, h = w / AR, cx = Math.cos(q.rx * D2R), sx = Math.sin(q.rx * D2R), cy = Math.cos(q.ry * D2R), sy = Math.sin(q.ry * D2R);
+      const pts = [];
+      for (const [lx, ly] of CORNERS) {
+        const X = lx * w, Y = ly * h * cx, Z = ly * h * sx;
+        pts.push(X * cy + Z * sy + q.x, Y + q.y, -X * sy + Z * cy + q.z);
+      }
+      const m = q.glow > 1e-3 ? 0.75 : 0, hp = pts.slice();
+      if (m) for (let k = 0; k < 3; k++) {
+        const c = (pts[k] + pts[3 + k] + pts[6 + k] + pts[9 + k]) / 4;
+        for (let v = 0; v < 4; v++) pts[v * 3 + k] = c + (pts[v * 3 + k] - c) * (1 + 2 * m);
+      }
+      const si = stillIndex(i);
+      return { i, z: q.z, pts, hp, m, rect: si < 0 ? videoRect : cellRect(si), misc: [q.o, q.sh, si < 0 ? 1 : 0, kb], pan: [-q.ix / 116, -q.iy / 116], lab: [i % 4 * 0.25, Math.floor(i / 4) / 32], glow: q.glow };
+    }
+    function draw(list2) {
+      gl.viewport(0, 0, canvas.width, canvas.height);
+      gl.clearColor(0, 0, 0, 0);
+      gl.clear(gl.COLOR_BUFFER_BIT);
+      if (!labelsReady && o.labels) makeLabels();
+      if (video && video.readyState >= 2 && video.currentTime !== lastVT) {
+        lastVT = video.currentTime;
+        upload(tVideo, video);
+      }
+      list2.sort((a, b) => a.z - b.z);
+      let k = 0;
+      for (const it of list2) for (let v = 0; v < 4; v++) {
+        const e = 1 + 2 * it.m;
+        data.set([
+          it.pts[v * 3],
+          it.pts[v * 3 + 1],
+          it.pts[v * 3 + 2],
+          0.5 + (CORNERS[v][2] - 0.5) * e,
+          0.5 + (CORNERS[v][3] - 0.5) * e,
+          ...it.rect,
+          ...it.misc,
+          ...it.pan,
+          ...it.lab,
+          it.glow
+        ], k);
+        k += F;
+      }
+      gl.bufferData(gl.ARRAY_BUFFER, data.subarray(0, k), gl.DYNAMIC_DRAW);
+      gl.uniform2f(uHalf, W / 2, H / 2);
+      gl.uniform1f(uP, P);
+      gl.uniform1f(uLab, o.labels ? labOn : 0);
+      gl.uniform2f(uView, W / 2, H / 2);
+      gl.uniform1f(uDpr, canvas.width / W);
+      gl.uniform4f(uColor, fx, fy, Math.min(W, H) * 0.3 * (0.35 + 0.65 * on), mono);
+      [tAtlas, tVideo, tLab].forEach((tx) => {
+        gl.activeTexture(gl.TEXTURE0 + tx.unit);
+        gl.bindTexture(gl.TEXTURE_2D, tx.t);
+      });
+      gl.drawElements(gl.TRIANGLES, list2.length * 6, gl.UNSIGNED_SHORT, 0);
+    }
+    const project = (it) => {
+      const s = [];
+      for (let v = 0; v < 4; v++) {
+        const d = P - it.hp[v * 3 + 2];
+        if (d <= 1) return null;
+        s.push(it.hp[v * 3] * P / d, it.hp[v * 3 + 1] * P / d);
+      }
+      return s;
+    };
+    function hit(list2, x, y) {
+      for (let j = list2.length - 1; j >= 0; j--) {
+        const it = list2[j];
+        if (it.misc[0] < 0.3) continue;
+        const s = project(it);
+        if (!s) continue;
+        let pos = 0, neg = 0;
+        for (let v = 0; v < 4; v++) {
+          const ax = s[v * 2], ay = s[v * 2 + 1], bx = s[(v + 1) % 4 * 2], by = s[(v + 1) % 4 * 2 + 1];
+          if ((bx - ax) * (y - ay) - (by - ay) * (x - ax) > 0) pos++;
+          else neg++;
+        }
+        if (!pos || !neg) return it;
+      }
+      return null;
+    }
+    function aimAt(it, dt) {
+      let r = null;
+      if (it) {
+        const s = project(it);
+        if (s) {
+          const xs = [s[0], s[2], s[4], s[6]].map((v) => v + W / 2), ys = [s[1], s[3], s[5], s[7]].map((v) => v + H / 2);
+          r = { x: Math.min(...xs), y: Math.min(...ys), w: Math.max(...xs) - Math.min(...xs), h: Math.max(...ys) - Math.min(...ys) };
+        }
+      }
+      const i = it && r ? it.i : -1;
+      if (i !== AIM.idx) {
+        if (i >= 0) {
+          const f = filmFor(i);
+          tag.innerHTML = `<em>${esc(f.title || "")}</em><small>${o.labels ? `CAM ${String(i + 1).padStart(2, "0")}` : ""}${o.labels && f.year ? " \xB7 " : ""}${esc(f.year || "")}</small>`;
+          tag.classList.remove("is-new");
+          void tag.offsetWidth;
+          tag.classList.add("is-new");
+          if (AIM.o < 0.05) Object.assign(AIM, { x: r.x - r.w * 0.1, y: r.y - r.h * 0.1, w: r.w * 1.2, h: r.h * 1.2 });
+        }
+        AIM.idx = i;
+      }
+      if (r) {
+        AIM.x = damp(AIM.x, r.x, 11, dt);
+        AIM.y = damp(AIM.y, r.y, 11, dt);
+        AIM.w = damp(AIM.w, r.w, 11, dt);
+        AIM.h = damp(AIM.h, r.h, 11, dt);
+      }
+      AIM.o = damp(AIM.o, r ? 1 : 0, r ? 9 : 5, dt);
+      aim.style.opacity = AIM.o.toFixed(3);
+      aim.style.transform = `translate(${AIM.x.toFixed(1)}px,${AIM.y.toFixed(1)}px)`;
+      aim.style.width = AIM.w.toFixed(1) + "px";
+      aim.style.height = AIM.h.toFixed(1) + "px";
+    }
+    function cursorStep(dt) {
+      const show = o.cursor && fine && inside;
+      cursor.classList.toggle("is-on", show);
+      if (!show) {
+        CUR.seen = false;
+        return;
+      }
+      if (!CUR.seen) {
+        CUR.x = px;
+        CUR.y = py;
+        CUR.seen = true;
+      }
+      CUR.x = damp(CUR.x, px, 15, dt);
+      CUR.y = damp(CUR.y, py, 15, dt);
+      const vx = px - CUR.x, vy = py - CUR.y, sp = Math.min(0.4, Math.hypot(vx, vy) / 110);
+      CUR.s = damp(CUR.s, hover >= 0 ? 0.42 : 1, 10, dt);
+      CUR.d = damp(CUR.d, hover >= 0 ? 1.35 : 1, 10, dt);
+      dot.style.transform = `translate(${px.toFixed(1)}px,${py.toFixed(1)}px) scale(${CUR.d.toFixed(3)})`;
+      ring.style.transform = `translate(${CUR.x.toFixed(1)}px,${CUR.y.toFixed(1)}px) rotate(${Math.atan2(vy, vx).toFixed(3)}rad) scale(${(CUR.s * (1 + sp)).toFixed(3)},${(CUR.s * (1 - sp * 0.45)).toFixed(3)})`;
+    }
+    const list = [];
+    function frame(nowMs) {
+      raf = 0;
+      if (!visible) return;
+      const now = nowMs / 1e3, dt = Math.min(0.05, now - (last || now));
+      last = now;
+      if (!started && ready) begin();
+      if (!started || !n) {
+        raf = requestAnimationFrame(frame);
+        return;
+      }
+      const t = now - t0;
+      clock += dt;
+      headH = damp(headH, mx * 0.42 + (reduce ? 0 : Math.sin(clock * 0.13) * 0.05), 3.2, dt);
+      headP = damp(headP, my * 0.26, 3.2, dt);
+      const live = inside && settledAt;
+      if (live) {
+        fx = damp(fx, px - W / 2, 9, dt);
+        fy = damp(fy, py - H / 2, 9, dt);
+      }
+      on = damp(on, live ? 1 : 0, 2.4, dt);
+      mono = damp(mono, settledAt ? 1 : 0, 1.4, dt);
+      labOn = damp(labOn, settledAt ? 1 : 0, 2.5, dt);
+      if (t > HOLD - 0.05) root.classList.add("is-morph");
+      if (t > HOLD + MORPH_V + 0.4 && !settledAt) {
+        settledAt = now;
+        root.classList.add("is-settled");
+      }
+      list.length = 0;
+      const diag = Math.hypot(W, H);
+      let p0 = null, u0 = 1;
+      for (let i = 0; i < n; i++) {
+        const p = pose(i, dt);
+        let q;
+        if (i === 0) {
+          p0 = p;
+          u0 = ease(clamp((t - HOLD) / MORPH_V));
+          q = mix({ x: 0, y: 0, z: 0, rx: 0, ry: 0, w: Math.max(W, H * AR), o: 1, sh: 0, ix: 0, iy: 0, glow: 0 }, p, u0);
+        } else {
+          const u = ease(clamp((t - HOLD - 0.3 - Math.hypot(p.x - p0.x, p.y - p0.y) / diag * 1.1) / MORPH));
+          q = u >= 1 ? p : mix({ ...p, z: p.z - 700, o: 0 }, p, u);
+        }
+        if (q.o > 2e-3) list.push(item(i, q, i === 0 ? lerp(200 / (Math.max(W, H * AR) / AR), 1, u0) : 1));
+      }
+      draw(list);
+      const it = inside && settledAt ? hit(list, px - W / 2, py - H / 2) : null;
+      hover = it ? it.i : -1;
+      aimAt(it, dt);
+      cursorStep(dt);
+      titleEl.style.transform = `translate(-50%, -50%) scale(${lerp(1, 0.9, ease(clamp((t - HOLD - 0.15) / 1.7))).toFixed(4)})`;
+      raf = requestAnimationFrame(frame);
+    }
+    const wake = () => {
+      if (!raf && visible) {
+        last = 0;
+        raf = requestAnimationFrame(frame);
+      }
+    };
+    const io = new IntersectionObserver((es) => {
+      visible = es[0].isIntersecting;
+      wake();
+    });
+    io.observe(root);
+    const ro = new ResizeObserver(() => {
+      layout();
+      wake();
+    });
+    ro.observe(root);
+    layout();
+    Promise.all([document.fonts ? document.fonts.ready : null, video ? new Promise((r) => {
+      video.addEventListener("canplay", r, { once: true });
+      setTimeout(r, 2200);
+    }) : null]).then(() => {
+      ready = true;
+      wake();
+    });
+    return {
+      replay() {
+        if (ready) {
+          begin();
+          wake();
+        }
+      },
+      destroy() {
+        cancelAnimationFrame(raf);
+        raf = 0;
+        visible = false;
+        io.disconnect();
+        ro.disconnect();
+        root.removeEventListener("pointermove", onMove);
+        root.removeEventListener("pointerdown", onMove);
+        root.removeEventListener("pointerleave", onLeave);
+        root.removeEventListener("pointercancel", onLeave);
+        if (video) {
+          video.pause();
+          video.removeAttribute("src");
+          video.load();
+        }
+        const lose = gl.getExtension("WEBGL_lose_context");
+        if (lose) lose.loseContext();
+        root.innerHTML = "";
+        root.classList.remove("cup", "cup-cur", "is-morph", "is-settled");
+        root.style.removeProperty("--cup-bar");
+      }
+    };
+  }
+
+  // src/panorama-assets-cdn.js
+  var me3 = typeof document !== "undefined" && document.currentScript ? document.currentScript.src : "";
+  var ASSETS = (me3 ? me3.slice(0, me3.lastIndexOf("/") + 1) : "https://cdn.jsdelivr.net/npm/craft-library@0/dist/") + "panorama/";
+
+  // dist/panorama-mount.js
+  var FILMS = [
+    ["s01", "The Coast Road", 2025],
+    ["s02", "Small Hours", 2024],
+    ["s03", "Vacancy", 2025],
+    ["s13", "Blue Room", 2024],
+    ["s05", "Two Bodies", 2024],
+    ["s06", "Salt", 2025],
+    ["s07", "After Rain", 2023],
+    ["s14", "Keeper", 2025],
+    ["s08", "High Country", 2025],
+    ["s09", "Last Picture House", 2024],
+    ["s10", "Mr. Albescu", 2023],
+    ["s15", "Summer, Ohio", 2023],
+    ["s11", "Pinewood", 2025],
+    ["s12", "Riviera", 2026],
+    ["s16", "Room 414", 2026]
+  ];
+  function mountPanoramaReel(host, o = {}) {
+    const opts = {};
+    for (const k in o) if (o[k] !== void 0) opts[k] = o[k];
+    if (opts.video === void 0) opts.video = { src: ASSETS + "reel.mp4", poster: ASSETS + "poster.webp", title: "Wild Grass", year: 2026 };
+    if (opts.stills === void 0) opts.stills = FILMS.map(([n, title, year]) => ({ src: ASSETS + "t/" + n + ".webp", title, year }));
+    return mountPanorama(host, opts);
+  }
+
   // dist/elements.js
   function define(name, mount, options) {
     if (typeof customElements === "undefined" || customElements.get(name)) return;
@@ -1841,7 +2535,32 @@
   });
   define("magic-sphere", thinkingTag("sphere"), thinkingOptions);
   define("sweep-sphere", thinkingTag("sweep"), thinkingOptions);
+  var json = (s) => {
+    if (!s) return void 0;
+    try {
+      return JSON.parse(s);
+    } catch (e) {
+      console.warn("panorama-reel: not JSON", s);
+      return void 0;
+    }
+  };
+  define("panorama-reel", (el, o) => {
+    css("craft-panorama-host", ":where(panorama-reel){display:block;position:relative;width:100%;height:640px}");
+    const m = mountPanoramaReel(el, o);
+    el.replay = m.replay;
+    return m;
+  }, (el) => ({
+    title: el.getAttribute("heading") ?? void 0,
+    text: el.getAttribute("text") ?? void 0,
+    textItalic: el.getAttribute("text-italic") ?? void 0,
+    video: json(el.getAttribute("video")),
+    stills: json(el.getAttribute("stills")),
+    labels: el.getAttribute("labels") === "false" ? false : void 0,
+    intro: el.getAttribute("intro") === "false" ? false : void 0,
+    cursor: el.getAttribute("cursor") === "false" ? false : void 0,
+    fonts: el.getAttribute("fonts") === "false" ? false : void 0
+  }));
 
   // dist/cdn.js
-  window.CraftLibrary = { mountLike, mountMagnet, mountGlassNav, mountIridescentCard, mountPiggyBank, mountThinking };
+  window.CraftLibrary = { mountLike, mountMagnet, mountGlassNav, mountIridescentCard, mountPiggyBank, mountThinking, mountPanoramaReel };
 })();