@ssgoi/core 2.3.0 → 2.4.0

package/dist/view-transitions/index.js

@@ -1,23 +1,23 @@
-const D = (t) => {
-  t.style.position = "absolute", t.style.width = "100%", t.style.top = "0", t.style.left = "0";
-}, 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 W = (t) => new Promise((n) => setTimeout(n, t)), m = (t, n) => {
+  t.style.position = "absolute", t.style.width = "100%", t.style.top = `${-1 * ((n == null ? void 0 : n.scroll.y) ?? 0)}px`, t.style.left = "0";
+}, H = { stiffness: 80, damping: 25 }, X = { stiffness: 75, damping: 25 }, U = 300, N = 10, M = "horizontal", B = "#000000", rt = (t = {}) => {
   const {
-    inSpring: n = v,
-    outSpring: e = C,
-    transitionDelay: i = G,
-    blindCount: l = q,
-    direction: a = B,
-    staggerDelay: r = 100,
-    blindColor: s = M
+    inSpring: n = X,
+    outSpring: l = H,
+    transitionDelay: h = U,
+    blindCount: o = N,
+    direction: i = M,
+    staggerDelay: s = 100,
+    blindColor: e = B
   } = t;
-  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") => {
+  let r, d = null;
+  const c = (p, a, g, y = !1) => {
+    const f = Math.min(0.5, s * g / 1e3), $ = 1 - f, x = (y ? g - 1 - a : a) / g * f, w = x + $;
+    return p <= x ? 0 : p >= w ? 1 : (p - x) / $;
+  }, u = (p, a, g = "left") => {
     window.getComputedStyle(p).position === "static" && (p.style.position = "relative");
-    const y = document.createElement("div");
-    y.className = "blind-container", y.style.cssText = `
+    const f = document.createElement("div");
+    f.className = "blind-container", f.style.cssText = `
       position: absolute;
       top: 0;
       left: 0;
@@ -27,68 +27,68 @@ const D = (t) => {
       z-index: 9999;
       overflow: hidden;
     `;
-    const g = [];
-    for (let w = 0; w < l; w++) {
+    const $ = [];
+    for (let b = 0; b < o; b++) {
       const x = document.createElement("div");
-      if (a === "horizontal") {
-        const S = 100 / l, A = `calc(${S}% + 1px)`;
+      if (i === "horizontal") {
+        const w = 100 / o, L = `calc(${w}% + 1px)`;
         x.style.cssText = `
           position: absolute;
-          top: ${S * w}%;
+          top: ${w * b}%;
           left: 0;
           width: 100%;
-          height: ${A};
-          background: ${s};
-          transform: scaleX(${c === "hidden" ? 0 : 1});
-          transform-origin: ${f} center;
+          height: ${L};
+          background: ${e};
+          transform: scaleX(${a === "hidden" ? 0 : 1});
+          transform-origin: ${g} center;
           will-change: transform;
         `;
       } else {
-        const S = 100 / l, A = `calc(${S}% + 1px)`;
+        const w = 100 / o, L = `calc(${w}% + 1px)`;
         x.style.cssText = `
           position: absolute;
           top: 0;
-          left: ${S * w}%;
-          width: ${A};
+          left: ${w * b}%;
+          width: ${L};
           height: 100%;
-          background: ${s};
-          transform: scaleY(${c === "hidden" ? 0 : 1});
-          transform-origin: ${f === "left" ? "top" : "bottom"} center;
+          background: ${e};
+          transform: scaleY(${a === "hidden" ? 0 : 1});
+          transform-origin: ${g === "left" ? "top" : "bottom"} center;
           will-change: transform;
         `;
       }
-      g.push(x), y.appendChild(x);
+      $.push(x), f.appendChild(x);
     }
-    return p.appendChild(y), { container: y, blinds: g };
+    return p.appendChild(f), { container: f, blinds: $ };
   };
   return {
     out: () => {
       let p = null;
-      return o = new Promise((c) => {
-        h = c;
+      return r = new Promise((a) => {
+        d = a;
       }), {
-        spring: e,
-        prepare: (c) => {
-          D(c), c.style.zIndex = "1000", p = $(c, "hidden", "left");
+        spring: l,
+        prepare: (a) => {
+          m(a), a.style.zIndex = "1000", p = u(a, "hidden", "left");
         },
         onStart: () => {
         },
-        tick: (c) => {
+        tick: (a) => {
           if (!p) return;
-          const f = 1 - c;
-          p.blinds.forEach((u, y) => {
-            const g = d(
+          const g = 1 - a;
+          p.blinds.forEach((y, f) => {
+            const $ = c(
+              g,
               f,
-              y,
-              l,
+              o,
               !1
               // not reversed - left to right
             );
-            a === "horizontal" ? u.style.transform = `scaleX(${g})` : u.style.transform = `scaleY(${g})`;
+            i === "horizontal" ? y.style.transform = `scaleX(${$})` : y.style.transform = `scaleY(${$})`;
           });
         },
         onEnd: () => {
-          h && h();
+          d && d();
         }
       };
     },
@@ -96,24 +96,24 @@ const D = (t) => {
       let p = null;
       return {
         spring: n,
-        prepare: (c) => {
-          c.style.position = "relative", c.style.zIndex = "0", p = $(c, "closed", "right");
+        prepare: (a) => {
+          a.style.position = "relative", a.style.zIndex = "0", p = u(a, "closed", "right");
         },
         onStart: () => {
         },
         wait: async () => {
-          o && await o, await N(i);
+          r && await r, await W(h);
         },
-        tick: (c) => {
-          p && p.blinds.forEach((f, u) => {
-            const y = d(
-              c,
-              u,
-              l,
+        tick: (a) => {
+          p && p.blinds.forEach((g, y) => {
+            const f = c(
+              a,
+              y,
+              o,
               !1
               // same direction as OUT - left to right
             );
-            a === "horizontal" ? f.style.transform = `scaleX(${1 - y})` : f.style.transform = `scaleY(${1 - y})`;
+            i === "horizontal" ? g.style.transform = `scaleX(${1 - f})` : g.style.transform = `scaleY(${1 - f})`;
           });
         },
         onEnd: () => {
@@ -122,111 +122,109 @@ const D = (t) => {
       };
     }
   };
-}, k = (t) => {
-  t.style.position = "absolute", t.style.width = "100%", t.style.top = "0", t.style.left = "0";
-}, 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
+}, ot = (t = {}) => {
+  var o, i;
+  const { opacity: n = !1, direction: l = "enter" } = t, h = {
+    stiffness: ((o = t.spring) == null ? void 0 : o.stiffness) ?? 150,
+    damping: ((i = t.spring) == null ? void 0 : i.damping) ?? 20
   };
-  return e === "enter" ? {
-    in: (r) => ({
-      spring: i,
-      tick: (s) => {
-        r.style.transform = `translateX(${(1 - s) * 100}%)`, n && (r.style.opacity = s.toString());
+  return l === "enter" ? {
+    in: (s) => ({
+      spring: h,
+      tick: (e) => {
+        s.style.transform = `translateX(${(1 - e) * 100}%)`, n && (s.style.opacity = e.toString());
       }
     }),
-    out: (r) => ({
-      spring: i,
-      prepare: (s) => {
-        k(s), s.style.zIndex = "-1";
+    out: (s, e) => ({
+      spring: h,
+      prepare: (r) => {
+        m(r, e), r.style.zIndex = "-1";
       },
-      tick: (s) => {
-        r.style.transform = `translateX(${-(1 - s) * 20}%)`, n && (r.style.opacity = s.toString());
+      tick: (r) => {
+        s.style.transform = `translateX(${-(1 - r) * 20}%)`, n && (s.style.opacity = r.toString());
       }
     })
   } : {
-    in: (r) => ({
+    in: (s) => ({
       spring: {
         stiffness: 100,
         damping: 20
       },
-      tick: (s) => {
-        r.style.transform = `translateX(${-(1 - s) * 20}%)`, n && (r.style.opacity = s.toString());
+      tick: (e) => {
+        s.style.transform = `translateX(${-(1 - e) * 20}%)`, n && (s.style.opacity = e.toString());
       }
     }),
-    out: (r) => ({
+    out: (s, e) => ({
       spring: {
         stiffness: 100,
         damping: 20
       },
-      prepare: (s) => {
-        k(s), s.style.zIndex = "100";
+      prepare: (r) => {
+        m(r, e), r.style.zIndex = "100";
       },
-      tick: (s) => {
-        r.style.transform = `translateX(${(1 - s) * 100}%)`, n && (r.style.opacity = s.toString());
+      tick: (r) => {
+        s.style.transform = `translateX(${(1 - r) * 100}%)`, n && (s.style.opacity = r.toString());
       }
     })
   };
-}, H = (t) => new Promise((n) => setTimeout(n, t)), W = { stiffness: 400, damping: 20 }, Z = { stiffness: 40, damping: 8 }, j = 100, et = (t = {}) => {
+}, G = (t) => new Promise((n) => setTimeout(n, t)), q = { stiffness: 400, damping: 20 }, V = { stiffness: 40, damping: 8 }, Z = 100, lt = (t = {}) => {
   const {
-    inSpring: n = Z,
-    outSpring: e = W,
-    transitionDelay: i = j
+    inSpring: n = V,
+    outSpring: l = q,
+    transitionDelay: h = Z
   } = t;
-  let l, a = null;
+  let o, i = null;
   return {
-    in: (r) => ({
+    in: (s) => ({
       spring: n,
-      prepare: (s) => {
-        s.style.opacity = "0";
+      prepare: (e) => {
+        e.style.opacity = "0";
       },
       wait: async () => {
-        l && (await l, await H(i));
+        o && (await o, await G(h));
       },
-      tick: (s) => {
-        r.style.opacity = s.toString();
+      tick: (e) => {
+        s.style.opacity = e.toString();
       }
     }),
-    out: (r) => (l = new Promise((s) => {
-      a = s;
+    out: (s, e) => (o = new Promise((r) => {
+      i = r;
     }), {
-      spring: e,
-      tick: (s) => {
-        r.style.opacity = s.toString();
+      spring: l,
+      tick: (r) => {
+        s.style.opacity = r.toString();
       },
-      prepare: k,
+      prepare: (r) => m(r, e),
       onEnd: () => {
-        a && a();
+        i && i();
       }
     })
   };
 };
 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 };
+  function l(i) {
+    let s = 0, e = 0;
+    const r = i.offsetWidth, d = i.offsetHeight;
+    let c = i;
+    for (; c; )
+      s += c.offsetTop, e += c.offsetLeft, c = c.offsetParent;
+    return s -= window.scrollY, e -= window.scrollX, { top: s, left: e, width: r, height: d };
   }
-  const i = e(t), l = e(n);
+  const h = l(t), o = l(n);
   return new DOMRect(
-    l.left - i.left,
-    l.top - i.top,
-    l.width,
-    l.height
+    o.left - h.left,
+    o.top - h.top,
+    o.width,
+    o.height
   );
 }
-const J = {
+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) {
+}, k = 0.2, E = 0.82;
+function T(t) {
   const n = P(document.body, t.positionedParent);
   return {
     top: t.scroll.y,
@@ -235,11 +233,11 @@ function I(t) {
     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 A(t, n) {
+  const l = n.left + n.width / 2, h = n.top + n.height / 2;
+  t.style.transformOrigin = `${l}px ${h}px`;
 }
-function Y(t, n) {
+function I(t, n) {
   t.style.clipPath = `polygon(
     ${n.left}px ${n.top}px,
     ${n.left + n.width}px ${n.top}px,
@@ -247,120 +245,173 @@ function Y(t, n) {
     ${n.left}px ${n.top + n.height}px
   )`;
 }
-function E(t, n, e) {
-  return t <= n ? 0 : t >= e ? 1 : (t - n) / (e - n);
+function J(t, n) {
+  t.style.transform = `translateY(${-n.top}px)`;
+}
+function S(t, n, l) {
+  return t <= n ? 0 : t >= l ? 1 : (t - n) / (l - n);
+}
+function C(t, n, l) {
+  t.topLeft.style.transform = `translate(${n}px, ${l}px)`, t.topRight.style.transform = `translate(${-n}px, ${l}px)`, t.bottomLeft.style.transform = `translate(${n}px, ${-l}px)`, t.bottomRight.style.transform = `translate(${-n}px, ${-l}px)`;
 }
-const rt = (t) => {
-  const n = (t == null ? void 0 : t.spring) ?? J, e = (t == null ? void 0 : t.scale) ?? 0.9;
+function K(t = "white", n) {
+  const o = document.createElement("div");
+  o.style.position = "fixed", o.style.pointerEvents = "none", o.style.zIndex = "9999", o.style.top = `${n.top - 2}px`, o.style.left = `${n.left - 2}px`, o.style.width = "10px", o.style.height = "10px";
+  const i = document.createElement("div");
+  i.style.position = "absolute", i.style.width = "10px", i.style.height = "2px", i.style.backgroundColor = t, i.style.top = "0", i.style.left = "0";
+  const s = document.createElement("div");
+  s.style.position = "absolute", s.style.width = "2px", s.style.height = "10px", s.style.backgroundColor = t, s.style.top = "0", s.style.left = "0", o.appendChild(i), o.appendChild(s);
+  const e = document.createElement("div");
+  e.style.position = "fixed", e.style.pointerEvents = "none", e.style.zIndex = "9999", e.style.top = `${n.top - 2}px`, e.style.left = `${n.left + n.width - 10 + 2}px`, e.style.width = "10px", e.style.height = "10px";
+  const r = document.createElement("div");
+  r.style.position = "absolute", r.style.width = "10px", r.style.height = "2px", r.style.backgroundColor = t, r.style.top = "0", r.style.right = "0";
+  const d = document.createElement("div");
+  d.style.position = "absolute", d.style.width = "2px", d.style.height = "10px", d.style.backgroundColor = t, d.style.top = "0", d.style.right = "0", e.appendChild(r), e.appendChild(d);
+  const c = document.createElement("div");
+  c.style.position = "fixed", c.style.pointerEvents = "none", c.style.zIndex = "9999", c.style.top = `${n.top + n.height - 10 + 2}px`, c.style.left = `${n.left - 2}px`, c.style.width = "10px", c.style.height = "10px";
+  const u = document.createElement("div");
+  u.style.position = "absolute", u.style.width = "10px", u.style.height = "2px", u.style.backgroundColor = t, u.style.bottom = "0", u.style.left = "0";
+  const p = document.createElement("div");
+  p.style.position = "absolute", p.style.width = "2px", p.style.height = "10px", p.style.backgroundColor = t, p.style.bottom = "0", p.style.left = "0", c.appendChild(u), c.appendChild(p);
+  const a = document.createElement("div");
+  a.style.position = "fixed", a.style.pointerEvents = "none", a.style.zIndex = "9999", a.style.top = `${n.top + n.height - 10 + 2}px`, a.style.left = `${n.left + n.width - 10 + 2}px`, a.style.width = "10px", a.style.height = "10px";
+  const g = document.createElement("div");
+  g.style.position = "absolute", g.style.width = "10px", g.style.height = "2px", g.style.backgroundColor = t, g.style.bottom = "0", g.style.right = "0";
+  const y = document.createElement("div");
+  return y.style.position = "absolute", y.style.width = "2px", y.style.height = "10px", y.style.backgroundColor = t, y.style.bottom = "0", y.style.right = "0", a.appendChild(g), a.appendChild(y), {
+    topLeft: o,
+    topRight: e,
+    bottomLeft: c,
+    bottomRight: a,
+    *[Symbol.iterator]() {
+      yield o, yield e, yield c, yield a;
+    }
+  };
+}
+const at = (t) => {
+  var o;
+  const n = (t == null ? void 0 : t.spring) ?? j, l = (t == null ? void 0 : t.scale) ?? 0.92, h = ((o = t == null ? void 0 : t.border) == null ? void 0 : o.color) ?? "white";
   return {
-    out: async (i, l) => {
-      const a = I(l);
+    out: async (i, s) => {
+      const e = T(s), r = P(document.body, s.positionedParent), d = K(h, {
+        ...e,
+        top: r.top
+      });
       return {
         spring: n,
         prepare: () => {
-          D(i), b(i, a), Y(i, a);
+          m(i), A(i, e), I(i, e), J(i, e);
+          for (const c of d)
+            s.positionedParent.appendChild(c), c.style.transition = "transform 0.1s ease-out";
         },
         onEnd: () => {
-          i.style.clipPath = "", i.style.transformOrigin = "";
+          i.style.clipPath = "", i.style.transformOrigin = "", setTimeout(() => {
+            for (const c of d)
+              s.positionedParent.removeChild(c);
+          }, 1e3);
         },
-        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})`;
+        tick: (c) => {
+          const u = 1 - c;
+          if (u < k) {
+            const p = S(u, 0, k), a = 1 - (1 - l) * p;
+            i.style.transform = `translateY(${-e.top}px) scale(${a})`;
+            const g = (e.width - e.width * a) / 2, y = (e.height - e.height * a) / 2;
+            C(d, g, y);
+          } else if (u < E) {
+            const p = S(
+              u,
+              k,
+              E
+            ), a = -e.top - e.height * p;
+            i.style.transform = `translateY(${a}px) scale(${l})`;
           } else {
-            const o = E(s, T, 1), h = e + (1 - e) * o;
-            i.style.transform = `translateY(${-a.height}px) scale(${h})`;
+            const p = S(u, E, 1), a = l + (1 - l) * p;
+            i.style.transform = `translateY(${-e.top - e.height}px) scale(${a})`;
+            const g = (e.width - e.width * a) / 2, y = (e.height - e.height * a) / 2;
+            C(d, g, y);
           }
         }
       };
     },
-    in: async (i, l) => {
-      const a = I(l);
+    in: async (i, s) => {
+      const e = T(s);
       return {
         spring: n,
         prepare: () => {
-          b(i, a), Y(i, a), i.style.transform = `translateY(${a.height}px) scale(${e})`;
+          A(i, e), I(i, e), i.style.transform = `translateY(${-e.top + e.height}px) scale(${l})`;
         },
         onEnd: () => {
-          i.style.clipPath = "", i.style.transformOrigin = "";
+          i.style.clipPath = "", i.style.transformOrigin = "", i.style.transform = "";
         },
         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(
+          if (r < k)
+            i.style.transform = `translateY(${-e.top + e.height}px) scale(${l})`, i.style.opacity = "0";
+          else if (r < E) {
+            const d = S(
               r,
-              m,
-              T
-            ), o = a.height * (1 - s);
-            i.style.transform = `translateY(${o}px) scale(${e})`, i.style.opacity = "1";
+              k,
+              E
+            ), c = -e.top + e.height * (1 - d);
+            i.style.transform = `translateY(${c}px) scale(${l})`, 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";
+            const d = S(r, E, 1), c = l + (1 - l) * d;
+            i.style.transform = `translateY(${-e.top}px) scale(${c})`, i.style.opacity = "1";
           }
         }
       };
     }
   };
 };
-function K(t, n) {
+function Q(t, n) {
   return t.querySelector(`[data-hero-key="${n}"]`);
 }
-const at = (t = {}) => {
-  var a, r;
+const dt = (t = {}) => {
+  var i, s;
   const n = {
-    stiffness: ((a = t.spring) == null ? void 0 : a.stiffness) ?? 300,
-    damping: ((r = t.spring) == null ? void 0 : r.damping) ?? 30
-  }, e = t.timeout ?? 300;
-  let i = null, l = null;
+    stiffness: ((i = t.spring) == null ? void 0 : i.stiffness) ?? 300,
+    damping: ((s = t.spring) == null ? void 0 : s.damping) ?? 30
+  }, l = t.timeout ?? 300;
+  let h = null, o = null;
   return {
-    in: async (s, o) => {
-      const h = s, d = Array.from(h.querySelectorAll("[data-hero-key]"));
-      if (d.length === 0)
+    in: async (e, r) => {
+      const d = e, c = Array.from(d.querySelectorAll("[data-hero-key]"));
+      if (c.length === 0)
         return {
           spring: n,
           tick: () => {
           }
           // No hero elements, skip animation
         };
-      if (!await new Promise((c) => {
-        i ? c(!0) : (l = c, setTimeout(() => {
-          l = null, c(!1);
-        }, e));
-      }) || !i)
-        return i = null, {
+      if (!await new Promise((a) => {
+        h ? a(!0) : (o = a, setTimeout(() => {
+          o = null, a(!1);
+        }, l));
+      }) || !h)
+        return h = null, {
           spring: n,
           tick: () => {
           }
           // No fromNode, skip animation
         };
-      const p = d.map((c) => {
-        const f = c.getAttribute("data-hero-key");
-        if (!f) return null;
-        const u = K(i, f);
-        if (!u) return null;
-        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;
+      const p = c.map((a) => {
+        const g = a.getAttribute("data-hero-key");
+        if (!g) return null;
+        const y = Q(h, g);
+        if (!y) return null;
+        const f = a, $ = P(h, y), b = P(d, f), x = $.left - b.left - r.scrollOffset.x, w = $.top - b.top - r.scrollOffset.y, L = $.width / b.width, F = $.height / b.height, Y = f.style.transform, _ = f.style.position, z = f.style.transformOrigin, O = f.style.zIndex;
         return {
-          toEl: y,
+          toEl: f,
           dx: x,
-          dy: S,
-          dw: A,
+          dy: w,
+          dw: L,
           dh: F,
-          originalTransform: O,
-          originalPosition: X,
-          originalTransformOrigin: U,
-          originalZIndex: z
+          originalTransform: Y,
+          originalPosition: _,
+          originalTransformOrigin: z,
+          originalZIndex: O
         };
       }).filter(Boolean);
-      return i = null, p.length === 0 ? {
+      return h = null, p.length === 0 ? {
         spring: n,
         tick: () => {
         }
@@ -368,156 +419,246 @@ const at = (t = {}) => {
       } : {
         spring: n,
         prepare: () => {
-          p.forEach(({ toEl: c }) => {
-            c.style.position = "relative", c.style.transformOrigin = "top left", c.style.zIndex = "1000";
+          p.forEach(({ toEl: a }) => {
+            a.style.position = "relative", a.style.transformOrigin = "top left", a.style.zIndex = "1000";
           });
         },
-        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})`;
+        tick: (a) => {
+          p.forEach(({ toEl: g, dx: y, dy: f, dw: $, dh: b }) => {
+            g.style.transform = `translate(${(1 - a) * y}px,${(1 - a) * f}px) scale(${a + (1 - a) * $}, ${a + (1 - a) * b})`;
           });
         },
         onEnd: () => {
           p.forEach(
             ({
-              toEl: c,
-              originalTransform: f,
-              originalPosition: u,
-              originalTransformOrigin: y,
-              originalZIndex: g
+              toEl: a,
+              originalTransform: g,
+              originalPosition: y,
+              originalTransformOrigin: f,
+              originalZIndex: $
             }) => {
-              c.style.transform = f, c.style.position = u, c.style.transformOrigin = y, c.style.zIndex = g;
+              a.style.transform = g, a.style.position = y, a.style.transformOrigin = f, a.style.zIndex = $;
             }
           );
         }
       };
     },
-    out: async (s) => ({
+    out: async (e) => ({
       onStart: () => {
-        i = s, l && (l(!0), l = null);
+        h = e, o && (o(!0), o = null);
       },
-      prepare: (o) => {
-        k(o), o.style.opacity = "0";
+      prepare: (r) => {
+        m(r), r.style.opacity = "0";
       }
     })
   };
 };
-function Q({
+function R(t) {
+  const n = P(document.body, t.positionedParent);
+  return {
+    top: t.scroll.y,
+    left: 0,
+    width: n.width,
+    height: window.innerHeight - n.top
+  };
+}
+const ct = (t = {}) => {
+  var i, s;
+  const n = {
+    // Much slower animation - 4x duration by reducing stiffness further
+    stiffness: ((i = t.spring) == null ? void 0 : i.stiffness) ?? 50,
+    damping: ((s = t.spring) == null ? void 0 : s.damping) ?? 30
+  }, l = t.initialRotation ?? 45, h = t.initialScale ?? 0.01, o = t.rotationTriggerPoint ?? 0.8;
+  return {
+    out: async (e, r) => {
+      const d = e.style.opacity;
+      return {
+        spring: {
+          stiffness: 80,
+          damping: 25
+        },
+        from: 1,
+        to: 0,
+        prepare: () => {
+          m(e, r), e.style.opacity = "1";
+        },
+        tick: (c) => {
+          e.style.opacity = String(c);
+        },
+        onEnd: () => {
+          e.style.opacity = d;
+        }
+      };
+    },
+    in: async (e, r) => {
+      const d = R(r), c = e.style.transform, u = e.style.transformOrigin, p = e.style.position, a = e.style.zIndex;
+      return {
+        spring: n,
+        from: 0,
+        to: 1,
+        prepare: () => {
+          const g = Math.min(d.width, d.height) * 0.4;
+          e.style.setProperty(
+            "--max-border-radius",
+            `${g}px`
+          ), e.style.setProperty("--border-radius-scale", "1"), e.style.willChange = "transform", e.style.backfaceVisibility = "hidden";
+          const y = d.left + d.width / 2, f = d.top + d.height / 2;
+          e.style.transformOrigin = `${y}px ${f}px`, e.style.position = "fixed", e.style.top = `${d.top}px`, e.style.left = `${d.left}px`, e.style.width = `${d.width}px`, e.style.height = `${d.height}px`, e.style.zIndex = "1000", e.style.overflow = "hidden", e.style.transform = `rotate(${l}deg) scale(${h}) translateZ(0)`, e.style.borderRadius = "calc(var(--max-border-radius) * var(--border-radius-scale))", e.style.opacity = "1";
+        },
+        tick: (g) => {
+          let y;
+          if (g <= 0.05)
+            y = h;
+          else if (g <= o) {
+            const x = (g - 0.05) / (o - 0.05), w = Math.pow(x, 9);
+            y = h + (0.8 - h) * w;
+          } else {
+            const x = (g - o) / (1 - o);
+            y = 0.8 + 0.2 * (1 - Math.pow(1 - x, 3));
+          }
+          let f;
+          const $ = 0.7;
+          if (g <= $)
+            f = l;
+          else {
+            const x = (g - $) / (1 - $), w = 1 - Math.pow(1 - x, 2);
+            f = l * (1 - w);
+          }
+          let b;
+          if (g <= $)
+            b = 1;
+          else {
+            const x = (g - $) / (1 - $);
+            b = 1 - Math.pow(x, 0.5);
+          }
+          e.style.transform = `rotate(${f.toFixed(2)}deg) scale(${y.toFixed(4)}) translateZ(0)`, e.style.setProperty(
+            "--border-radius-scale",
+            b.toFixed(4)
+          );
+        },
+        onEnd: () => {
+          e.style.willChange = "", e.style.backfaceVisibility = "", e.style.removeProperty("--max-border-radius"), e.style.removeProperty("--border-radius-scale"), e.style.transform = c, e.style.transformOrigin = u, e.style.position = p, e.style.zIndex = a, e.style.top = "", e.style.left = "", e.style.width = "", e.style.height = "", e.style.overflow = "", e.style.borderRadius = "";
+        }
+      };
+    }
+  };
+};
+function tt({
   detailRect: t,
   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})`;
+  pageRect: l,
+  scrollOffset: h
+}, o) {
+  const i = n.left - t.left + (n.width - t.width) / 2 - h.x, s = n.top - t.top + (n.height - t.height) / 2 - h.y, e = n.width / t.width, r = n.height / t.height, d = Math.max(e, r), c = t.top / l.height * 100, u = (l.width - (t.left + t.width)) / l.width * 100, p = (l.height - (t.top + t.height)) / l.height * 100, a = t.left / l.width * 100;
+  return o.style.transformOrigin = `${t.left + t.width / 2}px ${t.top + t.height / 2}px`, (g) => {
+    const y = 1 - g, f = c * y, $ = u * y, b = p * y, x = a * y;
+    o.style.clipPath = `inset(${f}% ${$}% ${b}% ${x}%)`, o.style.transform = `translate(${i * y}px, ${s * y}px) scale(${1 + (d - 1) * y})`;
   };
 }
-function V({
+function et({
   galleryRect: t,
   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}`;
+  scrollOffset: l
+}, h) {
+  const o = n.left - t.left + (n.width - t.width) / 2 + l.x, i = n.top - t.top + (n.height - t.height) / 2 + l.y, s = n.width / t.width, e = n.height / t.height, r = Math.max(s, e);
+  return (d) => {
+    h.style.transformOrigin = `${t.left + t.width / 2}px ${t.top + t.height / 2}px`;
+    const c = 1 - d;
+    h.style.transform = `translate(${o * c - l.x}px, ${i * c - l.y}px) scale(${1 + (r - 1) * c})`, h.style.opacity = `${1 - c}`;
   };
 }
-function R({
+function nt({
   galleryRect: t,
   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 = `${$}`;
+  scrollOffset: l
+}, h) {
+  const o = n.left - t.left + (n.width - t.width) / 2 - l.x, i = n.top - t.top + (n.height - t.height) / 2 - l.y, s = n.width / t.width, e = n.height / t.height, r = Math.max(s, e);
+  return (d) => {
+    const c = 1 - d, u = d;
+    h.style.transformOrigin = `${t.left + t.width / 2}px ${t.top + t.height / 2}px`, h.style.transform = `translate(${o * c}px, ${i * c}px) scale(${1 + (r - 1) * c})`, h.style.opacity = `${u}`;
   };
 }
-function tt({
+function it({
   detailRect: t,
   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})`;
+  pageRect: l,
+  scrollOffset: h
+}, o) {
+  const i = n.left - t.left + (n.width - t.width) / 2 + h.x, s = n.top - t.top + (n.height - t.height) / 2 + h.y, e = n.width / t.width, r = n.height / t.height, d = Math.min(e, r), c = t.top / l.height * 100, u = (l.width - (t.left + t.width)) / l.width * 100, p = (l.height - (t.top + t.height)) / l.height * 100, a = t.left / l.width * 100;
+  return o.style.transformOrigin = `${t.left + t.width / 2}px ${t.top + t.height / 2}px`, (g) => {
+    const y = 1 - g, f = c * y, $ = u * y, b = p * y, x = a * y;
+    o.style.clipPath = `inset(${f}% ${$}% ${b}% ${x}%)`, o.style.transform = `translate(${i * y - h.x}px, ${s * y - h.y}px) scale(${1 + (d - 1) * y})`;
   };
 }
-function nt(t, n, e) {
-  const i = t.querySelector(
+function st(t, n, l) {
+  const h = t.querySelector(
     "[data-pinterest-detail-key]"
-  ), l = n.querySelector(
+  ), o = n.querySelector(
     "[data-pinterest-detail-key]"
   );
   if (t.querySelectorAll("[data-pinterest-detail-key]").length > 1 || n.querySelectorAll("[data-pinterest-detail-key]").length > 1)
     return null;
-  let a = null, r = null, s = !1;
-  if (!i && l) {
-    r = l;
-    const $ = r.getAttribute("data-pinterest-detail-key");
-    if (!$) return null;
-    a = t.querySelector(
-      `[data-pinterest-gallery-key="${$}"]`
-    ), a && (s = !0);
-  } else if (i && !l) {
-    r = i;
-    const $ = r.getAttribute("data-pinterest-detail-key");
-    if (!$) return null;
-    a = n.querySelector(
-      `[data-pinterest-gallery-key="${$}"]`
-    ), a && (s = !1);
+  let i = null, s = null, e = !1;
+  if (!h && o) {
+    s = o;
+    const u = s.getAttribute("data-pinterest-detail-key");
+    if (!u) return null;
+    i = t.querySelector(
+      `[data-pinterest-gallery-key="${u}"]`
+    ), i && (e = !0);
+  } else if (h && !o) {
+    s = h;
+    const u = s.getAttribute("data-pinterest-detail-key");
+    if (!u) return null;
+    i = n.querySelector(
+      `[data-pinterest-gallery-key="${u}"]`
+    ), i && (e = !1);
   }
-  if (!a || !r)
+  if (!i || !s)
     return null;
-  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 },
+  const r = P(e ? t : n, i), d = P(e ? n : t, s), c = n.getBoundingClientRect();
+  return e ? {
+    inAnimation: tt(
+      { detailRect: d, galleryRect: r, pageRect: c, scrollOffset: l },
       n
     ),
-    outAnimation: V(
-      { galleryRect: o, detailRect: h, scrollOffset: e },
+    outAnimation: et(
+      { galleryRect: r, detailRect: d, scrollOffset: l },
       t
     )
   } : {
-    inAnimation: R(
-      { galleryRect: o, detailRect: h, scrollOffset: e },
+    inAnimation: nt(
+      { galleryRect: r, detailRect: d, scrollOffset: l },
       n
     ),
-    outAnimation: tt(
-      { detailRect: h, galleryRect: o, pageRect: d, scrollOffset: e },
+    outAnimation: it(
+      { detailRect: d, galleryRect: r, pageRect: c, scrollOffset: l },
       t
     )
   };
 }
-const lt = (t = {}) => {
-  var r, s;
+const ht = (t = {}) => {
+  var s, e;
   const n = {
-    stiffness: ((r = t.spring) == null ? void 0 : r.stiffness) ?? 50,
-    damping: ((s = t.spring) == null ? void 0 : s.damping) ?? 10
-  }, e = t.timeout ?? 300;
-  let i = null, l = null, a = null;
+    stiffness: ((s = t.spring) == null ? void 0 : s.stiffness) ?? 50,
+    damping: ((e = t.spring) == null ? void 0 : e.damping) ?? 10
+  }, l = t.timeout ?? 300;
+  let h = null, o = null, i = null;
   return {
-    in: async (o, { scrollOffset: h }) => {
-      const d = o;
+    in: async (r, { scrollOffset: d }) => {
+      const c = r;
       return !await new Promise((p) => {
-        i ? p(!0) : (l = p, setTimeout(() => {
-          l = null, p(!1);
-        }, e));
-      }) || !i ? (i = null, {
+        h ? p(!0) : (o = p, setTimeout(() => {
+          o = null, p(!1);
+        }, l));
+      }) || !h ? (h = null, {
         spring: n,
         tick: () => {
         }
-      }) : (a = nt(i, d, h), a ? (i = null, {
+      }) : (i = st(h, c, d), i ? (h = null, {
         spring: n,
         tick: (p) => {
-          a && a.inAnimation(p);
+          i && i.inAnimation(p);
         }
       }) : {
         spring: n,
@@ -525,83 +666,98 @@ const lt = (t = {}) => {
         }
       });
     },
-    out: async (o) => ({
+    out: async (r) => ({
       spring: n,
       onStart: () => {
-        i = o, l && (l(!0), l = null);
+        h = r, o && (o(!0), o = null);
       },
-      prepare: (h) => {
-        k(h), h.style.zIndex = "-1";
+      prepare: (d) => {
+        m(d), d.style.zIndex = "-1";
       },
-      tick: (h) => {
-        a && a.outAnimation(h);
+      tick: (d) => {
+        i && i.outAnimation(d);
       }
     })
   };
-}, _ = {
+}, v = {
   stiffness: 30,
   damping: 7
-}, 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";
+}, pt = (t = {}) => {
+  var r, d;
+  const n = t.direction ?? "up", l = {
+    stiffness: ((r = t.spring) == null ? void 0 : r.stiffness) ?? v.stiffness,
+    damping: ((d = t.spring) == null ? void 0 : d.damping) ?? v.damping
+  }, h = n === "up";
+  let o = null, i = null, s = null;
+  const e = () => {
+    if (o === null || i === null)
+      return null;
+    const c = Math.min(o, i), u = window.innerHeight;
+    return Math.max(c, u);
+  };
   return {
-    in: (r) => ({
-      spring: e,
-      tick: (s) => {
-        const o = i ? (1 - s) * 100 : (1 - s) * -100;
-        r.style.transform = `translateY(${o}vh)`;
+    in: (c) => (i = c.offsetHeight, o !== null && (s = e()), {
+      spring: l,
+      tick: (u) => {
+        if (s === null && (s = e(), s === null))
+          return;
+        const p = h ? (1 - u) * s : (1 - u) * -s;
+        c.style.transform = `translateY(${p}px)`;
       }
     }),
-    out: (r) => ({
-      spring: e,
-      tick: (s) => {
-        const o = i ? (1 - s) * -100 : (1 - s) * 100;
-        r.style.transform = `translateY(${o}vh)`;
+    out: (c) => ({
+      spring: l,
+      onStart: () => {
+        o = c.offsetHeight, i !== null && (s = e());
+      },
+      tick: (u) => {
+        if (s === null && (s = e(), s === null))
+          return;
+        const p = h ? (1 - u) * -s : (1 - u) * s;
+        c.style.transform = `translateY(${p}px)`;
       },
-      prepare: (s) => {
-        k(s), s.style.zIndex = i ? "-1" : "1";
+      prepare: (u) => {
+        m(u), u.style.zIndex = h ? "-1" : "1";
       }
     })
   };
-}, L = {
+}, D = {
   stiffness: 30,
   damping: 7
-}, 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";
+}, yt = (t = {}) => {
+  var o, i;
+  const n = t.direction ?? "left", l = {
+    stiffness: ((o = t.spring) == null ? void 0 : o.stiffness) ?? D.stiffness,
+    damping: ((i = t.spring) == null ? void 0 : i.damping) ?? D.damping
+  }, h = n === "left";
   return {
-    in: (r) => ({
-      spring: e,
-      tick: (s) => {
-        const o = i ? (1 - s) * 100 : (1 - s) * -100;
-        r.style.transform = `translateX(${o}%)`;
+    in: (s) => ({
+      spring: l,
+      tick: (e) => {
+        const r = h ? (1 - e) * 100 : (1 - e) * -100;
+        s.style.transform = `translateX(${r}%)`;
       }
     }),
-    out: (r) => ({
-      spring: e,
-      tick: (s) => {
-        const o = i ? (1 - s) * -100 : (1 - s) * 100;
-        r.style.transform = `translateX(${o}%)`;
+    out: (s, e) => ({
+      spring: l,
+      tick: (r) => {
+        const d = h ? (1 - r) * -100 : (1 - r) * 100;
+        s.style.transform = `translateX(${d}%)`;
       },
-      prepare: (s) => {
-        D(s), s.style.zIndex = i ? "-1" : "1";
+      prepare: (r) => {
+        m(r, e), r.style.zIndex = h ? "-1" : "1";
       }
     })
   };
 };
 export {
-  st as blind,
-  it as drill,
-  et as fade,
-  rt as film,
-  at as hero,
-  lt as pinterest,
-  ot as scroll,
-  ct as slide
+  rt as blind,
+  ot as drill,
+  lt as fade,
+  at as film,
+  dt as hero,
+  ct as jaemin,
+  ht as pinterest,
+  pt as scroll,
+  yt as slide
 };