@ssgoi/core 2.2.0 → 2.3.1

package/dist/view-transitions/index.js

@@ -1,21 +1,21 @@
-const E = (t) => {
+const D = (t) => {
   t.style.position = "absolute", t.style.width = "100%", t.style.top = "0", t.style.left = "0";
-}, X = (t) => new Promise((i) => setTimeout(i, t)), z = { stiffness: 80, damping: 25 }, F = { stiffness: 75, damping: 25 }, U = 300, Y = 10, O = "horizontal", v = "#000000", J = (t = {}) => {
+}, N = (t) => new Promise((n) => setTimeout(n, t)), C = { stiffness: 80, damping: 25 }, v = { stiffness: 75, damping: 25 }, G = 300, q = 10, B = "horizontal", M = "#000000", st = (t = {}) => {
   const {
-    inSpring: i = F,
-    outSpring: l = z,
-    transitionDelay: e = U,
-    blindCount: s = Y,
-    direction: o = O,
+    inSpring: n = v,
+    outSpring: e = C,
+    transitionDelay: i = G,
+    blindCount: l = q,
+    direction: a = B,
     staggerDelay: r = 100,
-    blindColor: n = v
+    blindColor: s = M
   } = t;
-  let c, d = null;
-  const p = (h, a, f, u = !1) => {
-    const y = Math.min(0.5, r * f / 1e3), g = 1 - y, x = (u ? f - 1 - a : a) / f * y, k = x + g;
-    return h <= x ? 0 : h >= k ? 1 : (h - x) / g;
-  }, $ = (h, a, f = "left") => {
-    window.getComputedStyle(h).position === "static" && (h.style.position = "relative");
+  let o, h = null;
+  const d = (p, c, f, u = !1) => {
+    const y = Math.min(0.5, r * f / 1e3), g = 1 - y, x = (u ? f - 1 - c : c) / f * y, S = x + g;
+    return p <= x ? 0 : p >= S ? 1 : (p - x) / g;
+  }, $ = (p, c, f = "left") => {
+    window.getComputedStyle(p).position === "static" && (p.style.position = "relative");
     const y = document.createElement("div");
     y.className = "blind-container", y.style.cssText = `
       position: absolute;
@@ -28,122 +28,122 @@ const E = (t) => {
       overflow: hidden;
     `;
     const g = [];
-    for (let w = 0; w < s; w++) {
+    for (let w = 0; w < l; w++) {
       const x = document.createElement("div");
-      if (o === "horizontal") {
-        const k = 100 / s, T = `calc(${k}% + 1px)`;
+      if (a === "horizontal") {
+        const S = 100 / l, A = `calc(${S}% + 1px)`;
         x.style.cssText = `
           position: absolute;
-          top: ${k * w}%;
+          top: ${S * w}%;
           left: 0;
           width: 100%;
-          height: ${T};
-          background: ${n};
-          transform: scaleX(${a === "hidden" ? 0 : 1});
+          height: ${A};
+          background: ${s};
+          transform: scaleX(${c === "hidden" ? 0 : 1});
           transform-origin: ${f} center;
           will-change: transform;
         `;
       } else {
-        const k = 100 / s, T = `calc(${k}% + 1px)`;
+        const S = 100 / l, A = `calc(${S}% + 1px)`;
         x.style.cssText = `
           position: absolute;
           top: 0;
-          left: ${k * w}%;
-          width: ${T};
+          left: ${S * w}%;
+          width: ${A};
           height: 100%;
-          background: ${n};
-          transform: scaleY(${a === "hidden" ? 0 : 1});
+          background: ${s};
+          transform: scaleY(${c === "hidden" ? 0 : 1});
           transform-origin: ${f === "left" ? "top" : "bottom"} center;
           will-change: transform;
         `;
       }
       g.push(x), y.appendChild(x);
     }
-    return h.appendChild(y), { container: y, blinds: g };
+    return p.appendChild(y), { container: y, blinds: g };
   };
   return {
     out: () => {
-      let h = null;
-      return c = new Promise((a) => {
-        d = a;
+      let p = null;
+      return o = new Promise((c) => {
+        h = c;
       }), {
-        spring: l,
-        prepare: (a) => {
-          E(a), a.style.zIndex = "1000", h = $(a, "hidden", "left");
+        spring: e,
+        prepare: (c) => {
+          D(c), c.style.zIndex = "1000", p = $(c, "hidden", "left");
         },
         onStart: () => {
         },
-        tick: (a) => {
-          if (!h) return;
-          const f = 1 - a;
-          h.blinds.forEach((u, y) => {
-            const g = p(
+        tick: (c) => {
+          if (!p) return;
+          const f = 1 - c;
+          p.blinds.forEach((u, y) => {
+            const g = d(
               f,
               y,
-              s,
+              l,
               !1
               // not reversed - left to right
             );
-            o === "horizontal" ? u.style.transform = `scaleX(${g})` : u.style.transform = `scaleY(${g})`;
+            a === "horizontal" ? u.style.transform = `scaleX(${g})` : u.style.transform = `scaleY(${g})`;
           });
         },
         onEnd: () => {
-          d && d();
+          h && h();
         }
       };
     },
     in: () => {
-      let h = null;
+      let p = null;
       return {
-        spring: i,
-        prepare: (a) => {
-          a.style.position = "relative", a.style.zIndex = "0", h = $(a, "closed", "right");
+        spring: n,
+        prepare: (c) => {
+          c.style.position = "relative", c.style.zIndex = "0", p = $(c, "closed", "right");
         },
         onStart: () => {
         },
         wait: async () => {
-          c && await c, await X(e);
+          o && await o, await N(i);
         },
-        tick: (a) => {
-          h && h.blinds.forEach((f, u) => {
-            const y = p(
-              a,
+        tick: (c) => {
+          p && p.blinds.forEach((f, u) => {
+            const y = d(
+              c,
               u,
-              s,
+              l,
               !1
               // same direction as OUT - left to right
             );
-            o === "horizontal" ? f.style.transform = `scaleX(${1 - y})` : f.style.transform = `scaleY(${1 - y})`;
+            a === "horizontal" ? f.style.transform = `scaleX(${1 - y})` : f.style.transform = `scaleY(${1 - y})`;
           });
         },
         onEnd: () => {
-          h && h.container && h.container.remove();
+          p && p.container && p.container.remove();
         }
       };
     }
   };
-}, A = (t) => {
+}, k = (t) => {
   t.style.position = "absolute", t.style.width = "100%", t.style.top = "0", t.style.left = "0";
-}, K = (t = {}) => {
-  var s, o;
-  const { opacity: i = !1, direction: l = "enter" } = t, e = {
-    stiffness: ((s = t.spring) == null ? void 0 : s.stiffness) ?? 150,
-    damping: ((o = t.spring) == null ? void 0 : o.damping) ?? 20
+}, it = (t = {}) => {
+  var l, a;
+  const { opacity: n = !1, direction: e = "enter" } = t, i = {
+    stiffness: ((l = t.spring) == null ? void 0 : l.stiffness) ?? 150,
+    damping: ((a = t.spring) == null ? void 0 : a.damping) ?? 20
   };
-  return l === "enter" ? {
+  return e === "enter" ? {
     in: (r) => ({
-      spring: e,
-      tick: (n) => {
-        r.style.transform = `translateX(${(1 - n) * 100}%)`, i && (r.style.opacity = n.toString());
+      spring: i,
+      tick: (s) => {
+        r.style.transform = `translateX(${(1 - s) * 100}%)`, n && (r.style.opacity = s.toString());
       }
     }),
     out: (r) => ({
-      spring: e,
-      prepare: (n) => {
-        A(n), n.style.zIndex = "-1";
+      spring: i,
+      prepare: (s) => {
+        k(s), s.style.zIndex = "-1";
       },
-      tick: (n) => {
-        r.style.transform = `translateX(${-(1 - n) * 20}%)`, i && (r.style.opacity = n.toString());
+      tick: (s) => {
+        r.style.transform = `translateX(${-(1 - s) * 20}%)`, n && (r.style.opacity = s.toString());
       }
     })
   } : {
@@ -152,8 +152,8 @@ const E = (t) => {
         stiffness: 100,
         damping: 20
       },
-      tick: (n) => {
-        r.style.transform = `translateX(${-(1 - n) * 20}%)`, i && (r.style.opacity = n.toString());
+      tick: (s) => {
+        r.style.transform = `translateX(${-(1 - s) * 20}%)`, n && (r.style.opacity = s.toString());
       }
     }),
     out: (r) => ({
@@ -161,355 +161,447 @@ const E = (t) => {
         stiffness: 100,
         damping: 20
       },
-      prepare: (n) => {
-        A(n), n.style.zIndex = "100";
+      prepare: (s) => {
+        k(s), s.style.zIndex = "100";
       },
-      tick: (n) => {
-        r.style.transform = `translateX(${(1 - n) * 100}%)`, i && (r.style.opacity = n.toString());
+      tick: (s) => {
+        r.style.transform = `translateX(${(1 - s) * 100}%)`, n && (r.style.opacity = s.toString());
       }
     })
   };
-}, C = (t) => new Promise((i) => setTimeout(i, t)), N = { stiffness: 400, damping: 20 }, q = { stiffness: 40, damping: 8 }, B = 100, Q = (t = {}) => {
+}, H = (t) => new Promise((n) => setTimeout(n, t)), W = { stiffness: 400, damping: 20 }, Z = { stiffness: 40, damping: 8 }, j = 100, et = (t = {}) => {
   const {
-    inSpring: i = q,
-    outSpring: l = N,
-    transitionDelay: e = B
+    inSpring: n = Z,
+    outSpring: e = W,
+    transitionDelay: i = j
   } = t;
-  let s, o = null;
+  let l, a = null;
   return {
     in: (r) => ({
-      spring: i,
-      prepare: (n) => {
-        n.style.opacity = "0";
+      spring: n,
+      prepare: (s) => {
+        s.style.opacity = "0";
       },
       wait: async () => {
-        s && (await s, await C(e));
+        l && (await l, await H(i));
       },
-      tick: (n) => {
-        r.style.opacity = n.toString();
+      tick: (s) => {
+        r.style.opacity = s.toString();
       }
     }),
-    out: (r) => (s = new Promise((n) => {
-      o = n;
+    out: (r) => (l = new Promise((s) => {
+      a = s;
     }), {
-      spring: l,
-      tick: (n) => {
-        r.style.opacity = n.toString();
+      spring: e,
+      tick: (s) => {
+        r.style.opacity = s.toString();
       },
-      prepare: A,
+      prepare: k,
       onEnd: () => {
-        o && o();
+        a && a();
       }
     })
   };
 };
-function m(t, i) {
-  function l(o) {
-    let r = 0, n = 0;
-    const c = o.offsetWidth, d = o.offsetHeight;
-    let p = o;
-    for (; p; )
-      r += p.offsetTop, n += p.offsetLeft, p = p.offsetParent;
-    return r -= window.scrollY, n -= window.scrollX, { top: r, left: n, width: c, height: d };
+function P(t, n) {
+  function e(a) {
+    let r = 0, s = 0;
+    const o = a.offsetWidth, h = a.offsetHeight;
+    let d = a;
+    for (; d; )
+      r += d.offsetTop, s += d.offsetLeft, d = d.offsetParent;
+    return r -= window.scrollY, s -= window.scrollX, { top: r, left: s, width: o, height: h };
   }
-  const e = l(t), s = l(i);
+  const i = e(t), l = e(n);
   return new DOMRect(
-    s.left - e.left,
-    s.top - e.top,
-    s.width,
-    s.height
+    l.left - i.left,
+    l.top - i.top,
+    l.width,
+    l.height
   );
 }
-function G(t, i) {
-  return t.querySelector(`[data-hero-key="${i}"]`);
+const J = {
+  stiffness: 10,
+  // Lower stiffness for smoother motion
+  damping: 5
+  // Lower damping for more fluid movement
+}, m = 0.2, T = 0.82;
+function I(t) {
+  const n = P(document.body, t.positionedParent);
+  return {
+    top: t.scroll.y,
+    left: 0,
+    width: n.width,
+    height: window.innerHeight - n.top
+  };
+}
+function b(t, n) {
+  const e = n.left + n.width / 2, i = n.top + n.height / 2;
+  t.style.transformOrigin = `${e}px ${i}px`;
+}
+function Y(t, n) {
+  t.style.clipPath = `polygon(
+    ${n.left}px ${n.top}px,
+    ${n.left + n.width}px ${n.top}px,
+    ${n.left + n.width}px ${n.top + n.height}px,
+    ${n.left}px ${n.top + n.height}px
+  )`;
 }
-const V = (t = {}) => {
-  var o, r;
-  const i = {
-    stiffness: ((o = t.spring) == null ? void 0 : o.stiffness) ?? 300,
+function E(t, n, e) {
+  return t <= n ? 0 : t >= e ? 1 : (t - n) / (e - n);
+}
+const rt = (t) => {
+  const n = (t == null ? void 0 : t.spring) ?? J, e = (t == null ? void 0 : t.scale) ?? 0.9;
+  return {
+    out: async (i, l) => {
+      const a = I(l);
+      return {
+        spring: n,
+        prepare: () => {
+          D(i), b(i, a), Y(i, a);
+        },
+        onEnd: () => {
+          i.style.clipPath = "", i.style.transformOrigin = "";
+        },
+        tick: (r) => {
+          const s = 1 - r;
+          if (s < m) {
+            const o = E(s, 0, m), h = 1 - (1 - e) * o;
+            i.style.transform = `scale(${h})`;
+          } else if (s < T) {
+            const o = E(
+              s,
+              m,
+              T
+            ), h = -a.height * o;
+            i.style.transform = `translateY(${h}px) scale(${e})`;
+          } else {
+            const o = E(s, T, 1), h = e + (1 - e) * o;
+            i.style.transform = `translateY(${-a.height}px) scale(${h})`;
+          }
+        }
+      };
+    },
+    in: async (i, l) => {
+      const a = I(l);
+      return {
+        spring: n,
+        prepare: () => {
+          b(i, a), Y(i, a), i.style.transform = `translateY(${a.height}px) scale(${e})`;
+        },
+        onEnd: () => {
+          i.style.clipPath = "", i.style.transformOrigin = "";
+        },
+        tick: (r) => {
+          if (r < m)
+            i.style.transform = `translateY(${a.height}px) scale(${e})`, i.style.opacity = "0";
+          else if (r < T) {
+            const s = E(
+              r,
+              m,
+              T
+            ), o = a.height * (1 - s);
+            i.style.transform = `translateY(${o}px) scale(${e})`, i.style.opacity = "1";
+          } else {
+            const s = E(r, T, 1), o = e + (1 - e) * s;
+            i.style.transform = `scale(${o})`, i.style.opacity = "1";
+          }
+        }
+      };
+    }
+  };
+};
+function K(t, n) {
+  return t.querySelector(`[data-hero-key="${n}"]`);
+}
+const at = (t = {}) => {
+  var a, r;
+  const n = {
+    stiffness: ((a = t.spring) == null ? void 0 : a.stiffness) ?? 300,
     damping: ((r = t.spring) == null ? void 0 : r.damping) ?? 30
-  }, l = t.timeout ?? 300;
-  let e = null, s = null;
+  }, e = t.timeout ?? 300;
+  let i = null, l = null;
   return {
-    in: async (n, c) => {
-      const d = n, p = Array.from(d.querySelectorAll("[data-hero-key]"));
-      if (p.length === 0)
+    in: async (s, o) => {
+      const h = s, d = Array.from(h.querySelectorAll("[data-hero-key]"));
+      if (d.length === 0)
         return {
-          spring: i,
+          spring: n,
           tick: () => {
           }
           // No hero elements, skip animation
         };
-      if (!await new Promise((a) => {
-        e ? a(!0) : (s = a, setTimeout(() => {
-          s = null, a(!1);
-        }, l));
-      }) || !e)
-        return e = null, {
-          spring: i,
+      if (!await new Promise((c) => {
+        i ? c(!0) : (l = c, setTimeout(() => {
+          l = null, c(!1);
+        }, e));
+      }) || !i)
+        return i = null, {
+          spring: n,
           tick: () => {
           }
           // No fromNode, skip animation
         };
-      const h = p.map((a) => {
-        const f = a.getAttribute("data-hero-key");
+      const p = d.map((c) => {
+        const f = c.getAttribute("data-hero-key");
         if (!f) return null;
-        const u = G(e, f);
+        const u = K(i, f);
         if (!u) return null;
-        const y = a, g = m(e, u), w = m(d, y), x = g.left - w.left - c.scrollOffset.x, k = g.top - w.top - c.scrollOffset.y, T = g.width / w.width, D = g.height / w.height, b = y.style.transform, L = y.style.position, P = y.style.transformOrigin, _ = y.style.zIndex;
+        const y = c, g = P(i, u), w = P(h, y), x = g.left - w.left - o.scrollOffset.x, S = g.top - w.top - o.scrollOffset.y, A = g.width / w.width, F = g.height / w.height, O = y.style.transform, X = y.style.position, U = y.style.transformOrigin, z = y.style.zIndex;
         return {
           toEl: y,
           dx: x,
-          dy: k,
-          dw: T,
-          dh: D,
-          originalTransform: b,
-          originalPosition: L,
-          originalTransformOrigin: P,
-          originalZIndex: _
+          dy: S,
+          dw: A,
+          dh: F,
+          originalTransform: O,
+          originalPosition: X,
+          originalTransformOrigin: U,
+          originalZIndex: z
         };
       }).filter(Boolean);
-      return e = null, h.length === 0 ? {
-        spring: i,
+      return i = null, p.length === 0 ? {
+        spring: n,
         tick: () => {
         }
         // No matching hero elements
       } : {
-        spring: i,
+        spring: n,
         prepare: () => {
-          h.forEach(({ toEl: a }) => {
-            a.style.position = "relative", a.style.transformOrigin = "top left", a.style.zIndex = "1000";
+          p.forEach(({ toEl: c }) => {
+            c.style.position = "relative", c.style.transformOrigin = "top left", c.style.zIndex = "1000";
           });
         },
-        tick: (a) => {
-          h.forEach(({ toEl: f, dx: u, dy: y, dw: g, dh: w }) => {
-            f.style.transform = `translate(${(1 - a) * u}px,${(1 - a) * y}px) scale(${a + (1 - a) * g}, ${a + (1 - a) * w})`;
+        tick: (c) => {
+          p.forEach(({ toEl: f, dx: u, dy: y, dw: g, dh: w }) => {
+            f.style.transform = `translate(${(1 - c) * u}px,${(1 - c) * y}px) scale(${c + (1 - c) * g}, ${c + (1 - c) * w})`;
           });
         },
         onEnd: () => {
-          h.forEach(
+          p.forEach(
             ({
-              toEl: a,
+              toEl: c,
               originalTransform: f,
               originalPosition: u,
               originalTransformOrigin: y,
               originalZIndex: g
             }) => {
-              a.style.transform = f, a.style.position = u, a.style.transformOrigin = y, a.style.zIndex = g;
+              c.style.transform = f, c.style.position = u, c.style.transformOrigin = y, c.style.zIndex = g;
             }
           );
         }
       };
     },
-    out: async (n) => ({
+    out: async (s) => ({
       onStart: () => {
-        e = n, s && (s(!0), s = null);
+        i = s, l && (l(!0), l = null);
       },
-      prepare: (c) => {
-        A(c), c.style.opacity = "0";
+      prepare: (o) => {
+        k(o), o.style.opacity = "0";
       }
     })
   };
 };
-function M({
+function Q({
   detailRect: t,
-  galleryRect: i,
-  pageRect: l,
-  scrollOffset: e
-}, s) {
-  const o = i.left - t.left + (i.width - t.width) / 2 - e.x, r = i.top - t.top + (i.height - t.height) / 2 - e.y, n = i.width / t.width, c = i.height / t.height, d = Math.max(n, c), p = t.top / l.height * 100, $ = (l.width - (t.left + t.width)) / l.width * 100, h = (l.height - (t.top + t.height)) / l.height * 100, a = t.left / l.width * 100;
-  return s.style.transformOrigin = `${t.left + t.width / 2}px ${t.top + t.height / 2}px`, (f) => {
-    const u = 1 - f, y = p * u, g = $ * u, w = h * u, x = a * u;
-    s.style.clipPath = `inset(${y}% ${g}% ${w}% ${x}%)`, s.style.transform = `translate(${o * u}px, ${r * u}px) scale(${1 + (d - 1) * u})`;
+  galleryRect: n,
+  pageRect: e,
+  scrollOffset: i
+}, l) {
+  const a = n.left - t.left + (n.width - t.width) / 2 - i.x, r = n.top - t.top + (n.height - t.height) / 2 - i.y, s = n.width / t.width, o = n.height / t.height, h = Math.max(s, o), d = t.top / e.height * 100, $ = (e.width - (t.left + t.width)) / e.width * 100, p = (e.height - (t.top + t.height)) / e.height * 100, c = t.left / e.width * 100;
+  return l.style.transformOrigin = `${t.left + t.width / 2}px ${t.top + t.height / 2}px`, (f) => {
+    const u = 1 - f, y = d * u, g = $ * u, w = p * u, x = c * u;
+    l.style.clipPath = `inset(${y}% ${g}% ${w}% ${x}%)`, l.style.transform = `translate(${a * u}px, ${r * u}px) scale(${1 + (h - 1) * u})`;
   };
 }
-function H({
+function V({
   galleryRect: t,
-  detailRect: i,
-  scrollOffset: l
-}, e) {
-  const s = i.left - t.left + (i.width - t.width) / 2 + l.x, o = i.top - t.top + (i.height - t.height) / 2 + l.y, r = i.width / t.width, n = i.height / t.height, c = Math.max(r, n);
-  return (d) => {
-    e.style.transformOrigin = `${t.left + t.width / 2}px ${t.top + t.height / 2}px`;
-    const p = 1 - d;
-    e.style.transform = `translate(${s * p - l.x}px, ${o * p - l.y}px) scale(${1 + (c - 1) * p})`, e.style.opacity = `${1 - p}`;
+  detailRect: n,
+  scrollOffset: e
+}, i) {
+  const l = n.left - t.left + (n.width - t.width) / 2 + e.x, a = n.top - t.top + (n.height - t.height) / 2 + e.y, r = n.width / t.width, s = n.height / t.height, o = Math.max(r, s);
+  return (h) => {
+    i.style.transformOrigin = `${t.left + t.width / 2}px ${t.top + t.height / 2}px`;
+    const d = 1 - h;
+    i.style.transform = `translate(${l * d - e.x}px, ${a * d - e.y}px) scale(${1 + (o - 1) * d})`, i.style.opacity = `${1 - d}`;
   };
 }
-function W({
+function R({
   galleryRect: t,
-  detailRect: i,
-  scrollOffset: l
-}, e) {
-  const s = i.left - t.left + (i.width - t.width) / 2 - l.x, o = i.top - t.top + (i.height - t.height) / 2 - l.y, r = i.width / t.width, n = i.height / t.height, c = Math.max(r, n);
-  return (d) => {
-    const p = 1 - d, $ = d;
-    e.style.transformOrigin = `${t.left + t.width / 2}px ${t.top + t.height / 2}px`, e.style.transform = `translate(${s * p}px, ${o * p}px) scale(${1 + (c - 1) * p})`, e.style.opacity = `${$}`;
+  detailRect: n,
+  scrollOffset: e
+}, i) {
+  const l = n.left - t.left + (n.width - t.width) / 2 - e.x, a = n.top - t.top + (n.height - t.height) / 2 - e.y, r = n.width / t.width, s = n.height / t.height, o = Math.max(r, s);
+  return (h) => {
+    const d = 1 - h, $ = h;
+    i.style.transformOrigin = `${t.left + t.width / 2}px ${t.top + t.height / 2}px`, i.style.transform = `translate(${l * d}px, ${a * d}px) scale(${1 + (o - 1) * d})`, i.style.opacity = `${$}`;
   };
 }
-function Z({
+function tt({
   detailRect: t,
-  galleryRect: i,
-  pageRect: l,
-  scrollOffset: e
-}, s) {
-  const o = i.left - t.left + (i.width - t.width) / 2 + e.x, r = i.top - t.top + (i.height - t.height) / 2 + e.y, n = i.width / t.width, c = i.height / t.height, d = Math.min(n, c), p = t.top / l.height * 100, $ = (l.width - (t.left + t.width)) / l.width * 100, h = (l.height - (t.top + t.height)) / l.height * 100, a = t.left / l.width * 100;
-  return s.style.transformOrigin = `${t.left + t.width / 2}px ${t.top + t.height / 2}px`, (f) => {
-    const u = 1 - f, y = p * u, g = $ * u, w = h * u, x = a * u;
-    s.style.clipPath = `inset(${y}% ${g}% ${w}% ${x}%)`, s.style.transform = `translate(${o * u - e.x}px, ${r * u - e.y}px) scale(${1 + (d - 1) * u})`;
+  galleryRect: n,
+  pageRect: e,
+  scrollOffset: i
+}, l) {
+  const a = n.left - t.left + (n.width - t.width) / 2 + i.x, r = n.top - t.top + (n.height - t.height) / 2 + i.y, s = n.width / t.width, o = n.height / t.height, h = Math.min(s, o), d = t.top / e.height * 100, $ = (e.width - (t.left + t.width)) / e.width * 100, p = (e.height - (t.top + t.height)) / e.height * 100, c = t.left / e.width * 100;
+  return l.style.transformOrigin = `${t.left + t.width / 2}px ${t.top + t.height / 2}px`, (f) => {
+    const u = 1 - f, y = d * u, g = $ * u, w = p * u, x = c * u;
+    l.style.clipPath = `inset(${y}% ${g}% ${w}% ${x}%)`, l.style.transform = `translate(${a * u - i.x}px, ${r * u - i.y}px) scale(${1 + (h - 1) * u})`;
   };
 }
-function j(t, i, l) {
-  const e = t.querySelector(
+function nt(t, n, e) {
+  const i = t.querySelector(
     "[data-pinterest-detail-key]"
-  ), s = i.querySelector(
+  ), l = n.querySelector(
     "[data-pinterest-detail-key]"
   );
-  if (t.querySelectorAll("[data-pinterest-detail-key]").length > 1 || i.querySelectorAll("[data-pinterest-detail-key]").length > 1)
+  if (t.querySelectorAll("[data-pinterest-detail-key]").length > 1 || n.querySelectorAll("[data-pinterest-detail-key]").length > 1)
     return null;
-  let o = null, r = null, n = !1;
-  if (!e && s) {
-    r = s;
+  let a = null, r = null, s = !1;
+  if (!i && l) {
+    r = l;
     const $ = r.getAttribute("data-pinterest-detail-key");
     if (!$) return null;
-    o = t.querySelector(
+    a = t.querySelector(
       `[data-pinterest-gallery-key="${$}"]`
-    ), o && (n = !0);
-  } else if (e && !s) {
-    r = e;
+    ), a && (s = !0);
+  } else if (i && !l) {
+    r = i;
     const $ = r.getAttribute("data-pinterest-detail-key");
     if (!$) return null;
-    o = i.querySelector(
+    a = n.querySelector(
       `[data-pinterest-gallery-key="${$}"]`
-    ), o && (n = !1);
+    ), a && (s = !1);
   }
-  if (!o || !r)
+  if (!a || !r)
     return null;
-  const c = m(n ? t : i, o), d = m(n ? i : t, r), p = i.getBoundingClientRect();
-  return n ? {
-    inAnimation: M(
-      { detailRect: d, galleryRect: c, pageRect: p, scrollOffset: l },
-      i
+  const o = P(s ? t : n, a), h = P(s ? n : t, r), d = n.getBoundingClientRect();
+  return s ? {
+    inAnimation: Q(
+      { detailRect: h, galleryRect: o, pageRect: d, scrollOffset: e },
+      n
     ),
-    outAnimation: H(
-      { galleryRect: c, detailRect: d, scrollOffset: l },
+    outAnimation: V(
+      { galleryRect: o, detailRect: h, scrollOffset: e },
       t
     )
   } : {
-    inAnimation: W(
-      { galleryRect: c, detailRect: d, scrollOffset: l },
-      i
+    inAnimation: R(
+      { galleryRect: o, detailRect: h, scrollOffset: e },
+      n
     ),
-    outAnimation: Z(
-      { detailRect: d, galleryRect: c, pageRect: p, scrollOffset: l },
+    outAnimation: tt(
+      { detailRect: h, galleryRect: o, pageRect: d, scrollOffset: e },
       t
     )
   };
 }
-const R = (t = {}) => {
-  var r, n;
-  const i = {
+const lt = (t = {}) => {
+  var r, s;
+  const n = {
     stiffness: ((r = t.spring) == null ? void 0 : r.stiffness) ?? 50,
-    damping: ((n = t.spring) == null ? void 0 : n.damping) ?? 10
-  }, l = t.timeout ?? 300;
-  let e = null, s = null, o = null;
+    damping: ((s = t.spring) == null ? void 0 : s.damping) ?? 10
+  }, e = t.timeout ?? 300;
+  let i = null, l = null, a = null;
   return {
-    in: async (c, { scrollOffset: d }) => {
-      const p = c;
-      return !await new Promise((h) => {
-        e ? h(!0) : (s = h, setTimeout(() => {
-          s = null, h(!1);
-        }, l));
-      }) || !e ? (e = null, {
-        spring: i,
+    in: async (o, { scrollOffset: h }) => {
+      const d = o;
+      return !await new Promise((p) => {
+        i ? p(!0) : (l = p, setTimeout(() => {
+          l = null, p(!1);
+        }, e));
+      }) || !i ? (i = null, {
+        spring: n,
         tick: () => {
         }
-      }) : (o = j(e, p, d), o ? (e = null, {
-        spring: i,
-        tick: (h) => {
-          o && o.inAnimation(h);
+      }) : (a = nt(i, d, h), a ? (i = null, {
+        spring: n,
+        tick: (p) => {
+          a && a.inAnimation(p);
         }
       }) : {
-        spring: i,
+        spring: n,
         tick: () => {
         }
       });
     },
-    out: async (c) => ({
-      spring: i,
+    out: async (o) => ({
+      spring: n,
       onStart: () => {
-        e = c, s && (s(!0), s = null);
+        i = o, l && (l(!0), l = null);
       },
-      prepare: (d) => {
-        A(d), d.style.zIndex = "-1";
+      prepare: (h) => {
+        k(h), h.style.zIndex = "-1";
       },
-      tick: (d) => {
-        o && o.outAnimation(d);
+      tick: (h) => {
+        a && a.outAnimation(h);
       }
     })
   };
-}, S = {
+}, _ = {
   stiffness: 30,
   damping: 7
-}, tt = (t = {}) => {
-  var s, o;
-  const i = t.direction ?? "up", l = {
-    stiffness: ((s = t.spring) == null ? void 0 : s.stiffness) ?? S.stiffness,
-    damping: ((o = t.spring) == null ? void 0 : o.damping) ?? S.damping
-  }, e = i === "up";
+}, ot = (t = {}) => {
+  var l, a;
+  const n = t.direction ?? "up", e = {
+    stiffness: ((l = t.spring) == null ? void 0 : l.stiffness) ?? _.stiffness,
+    damping: ((a = t.spring) == null ? void 0 : a.damping) ?? _.damping
+  }, i = n === "up";
   return {
     in: (r) => ({
-      spring: l,
-      tick: (n) => {
-        const c = e ? (1 - n) * 100 : (1 - n) * -100;
-        r.style.transform = `translateY(${c}vh)`;
+      spring: e,
+      tick: (s) => {
+        const o = i ? (1 - s) * 100 : (1 - s) * -100;
+        r.style.transform = `translateY(${o}vh)`;
       }
     }),
     out: (r) => ({
-      spring: l,
-      tick: (n) => {
-        const c = e ? (1 - n) * -100 : (1 - n) * 100;
-        r.style.transform = `translateY(${c}vh)`;
+      spring: e,
+      tick: (s) => {
+        const o = i ? (1 - s) * -100 : (1 - s) * 100;
+        r.style.transform = `translateY(${o}vh)`;
       },
-      prepare: (n) => {
-        A(n), n.style.zIndex = e ? "-1" : "1";
+      prepare: (s) => {
+        k(s), s.style.zIndex = i ? "-1" : "1";
       }
     })
   };
-}, I = {
+}, L = {
   stiffness: 30,
   damping: 7
-}, nt = (t = {}) => {
-  var s, o;
-  const i = t.direction ?? "left", l = {
-    stiffness: ((s = t.spring) == null ? void 0 : s.stiffness) ?? I.stiffness,
-    damping: ((o = t.spring) == null ? void 0 : o.damping) ?? I.damping
-  }, e = i === "left";
+}, ct = (t = {}) => {
+  var l, a;
+  const n = t.direction ?? "left", e = {
+    stiffness: ((l = t.spring) == null ? void 0 : l.stiffness) ?? L.stiffness,
+    damping: ((a = t.spring) == null ? void 0 : a.damping) ?? L.damping
+  }, i = n === "left";
   return {
     in: (r) => ({
-      spring: l,
-      tick: (n) => {
-        const c = e ? (1 - n) * 100 : (1 - n) * -100;
-        r.style.transform = `translateX(${c}%)`;
+      spring: e,
+      tick: (s) => {
+        const o = i ? (1 - s) * 100 : (1 - s) * -100;
+        r.style.transform = `translateX(${o}%)`;
       }
     }),
     out: (r) => ({
-      spring: l,
-      tick: (n) => {
-        const c = e ? (1 - n) * -100 : (1 - n) * 100;
-        r.style.transform = `translateX(${c}%)`;
+      spring: e,
+      tick: (s) => {
+        const o = i ? (1 - s) * -100 : (1 - s) * 100;
+        r.style.transform = `translateX(${o}%)`;
       },
-      prepare: (n) => {
-        E(n), n.style.zIndex = e ? "-1" : "1";
+      prepare: (s) => {
+        D(s), s.style.zIndex = i ? "-1" : "1";
       }
     })
   };
 };
 export {
-  J as blind,
-  K as drill,
-  Q as fade,
-  V as hero,
-  R as pinterest,
-  tt as scroll,
-  nt as slide
+  st as blind,
+  it as drill,
+  et as fade,
+  rt as film,
+  at as hero,
+  lt as pinterest,
+  ot as scroll,
+  ct as slide
 };