@ssgoi/core/dist/transitions/index.js

Core animation engine for SSGOI - Native app-like page transitions with spring physics

import { D as v, b as T, I as j, a as q } from "../provider-Cu4NSF1Q.js";
function m(e, t) {
  return e != null && e.spring || e != null && e.inertia || e != null && e.integrator ? e : { spring: t.spring };
}
const k = (e = {}) => {
  const { from: t = 0, to: n = 1, key: c } = e, r = m(e.physics, {
    spring: { stiffness: 300, damping: 30 }
  });
  return {
    in: () => ({
      physics: r,
      css: (s) => ({
        opacity: t + (n - t) * s
      })
    }),
    out: () => ({
      physics: r,
      css: (s) => ({
        opacity: t + (n - t) * s
      })
    }),
    ...c && { key: c }
  };
}, S = (e = {}) => {
  const { start: t = 0, opacity: n = 0, axis: c = "both", key: r } = e, s = m(e.physics, {
    spring: { stiffness: 300, damping: 30 }
  }), $ = (a) => {
    switch (c) {
      case "x":
        return `scaleX(${a})`;
      case "y":
        return `scaleY(${a})`;
      case "both":
      default:
        return `scale(${a})`;
    }
  }, u = (a) => {
    const o = t + (1 - t) * a;
    return {
      transform: $(o),
      opacity: n + (1 - n) * a
    };
  };
  return {
    in: () => ({ physics: s, css: u }),
    out: () => ({ physics: s, css: u }),
    ...r && { key: r }
  };
}, w = (e = {}) => {
  const {
    direction: t,
    distance: n = 100,
    opacity: c = 0,
    fade: r = !0,
    axis: s,
    key: $
  } = e, u = m(e.physics, {
    spring: { stiffness: 400, damping: 35 }
  }), o = t || (s === "x" ? "left" : s === "y" ? "up" : "left"), l = (g) => {
    const i = 1 - g;
    if (typeof n == "number") {
      const d = i * n;
      switch (o) {
        case "left":
          return `translate3d(${-d}px, 0, 0)`;
        case "right":
          return `translate3d(${d}px, 0, 0)`;
        case "up":
          return `translate3d(0, ${-d}px, 0)`;
        case "down":
          return `translate3d(0, ${d}px, 0)`;
      }
    } else
      switch (o) {
        case "left":
          return `translate3d(calc(-1 * ${n} * ${i}), 0, 0)`;
        case "right":
          return `translate3d(calc(${n} * ${i}), 0, 0)`;
        case "up":
          return `translate3d(0, calc(-1 * ${n} * ${i}), 0)`;
        case "down":
          return `translate3d(0, calc(${n} * ${i}), 0)`;
      }
  }, f = (g) => {
    const i = {
      transform: l(g)
    };
    return r && (i.opacity = c + (1 - c) * g), i;
  };
  return {
    in: () => ({ physics: u, css: f }),
    out: () => ({ physics: u, css: f }),
    ...$ && { key: $ }
  };
}, C = (e = {}) => {
  const {
    degrees: t = 360,
    clockwise: n = !0,
    scale: c = !1,
    fade: r = !0,
    origin: s = "center",
    axis: $ = "2d",
    perspective: u = 800,
    key: a
  } = e, o = m(e.physics, {
    spring: { stiffness: 500, damping: 25 }
  }), l = n ? t : -t, f = (i) => {
    const d = (1 - i) * l;
    switch ($) {
      case "x":
        return `perspective(${u}px) rotateX(${d}deg)`;
      case "y":
        return `perspective(${u}px) rotateY(${d}deg)`;
      case "z":
        return `rotateZ(${d}deg)`;
      case "2d":
      default:
        return `rotate(${d}deg)`;
    }
  }, g = (i) => {
    const d = {}, y = [f(i)];
    return c && y.push(`scale(${i})`), d.transform = y.join(" "), d.transformOrigin = s, r && (d.opacity = i), d;
  };
  return {
    in: () => ({ physics: o, css: g }),
    out: () => ({ physics: o, css: g }),
    ...a && { key: a }
  };
}, I = (e = {}) => {
  const {
    height: t = 20,
    intensity: n = 1,
    scale: c = !0,
    fade: r = !0,
    direction: s = "up",
    key: $
  } = e, u = m(e.physics, {
    spring: { stiffness: 800, damping: 15 }
  }), a = (o) => {
    const l = {}, f = [], g = Math.sin(o * Math.PI * (1 + n)), i = 1 - o, d = g * t * i;
    if (s === "up" ? f.push(`translateY(${-Math.abs(d)}px)`) : f.push(`translateY(${Math.abs(d)}px)`), c) {
      const y = 0.8 + o * 0.2 + g * 0.05 * i;
      f.push(`scale(${y})`);
    }
    return l.transform = f.join(" "), r && (l.opacity = o), l;
  };
  return {
    in: () => ({ physics: u, css: a }),
    out: () => ({ physics: u, css: a }),
    ...$ && { key: $ }
  };
}, P = (e = {}) => {
  const { amount: t = 10, opacity: n = 0, scale: c = !1, fade: r = !0, key: s } = e, $ = m(e.physics, {
    spring: { stiffness: 300, damping: 30 }
  }), u = (a) => {
    const o = 1 - a, l = {};
    return typeof t == "number" ? l.filter = `blur(${o * t}px)` : l.filter = `blur(calc(${t} * ${o}))`, c && (l.transform = `scale(${0.8 + a * 0.2})`), r && (l.opacity = n + (1 - n) * a), l;
  };
  return {
    in: () => ({ physics: $, css: u }),
    out: () => ({ physics: $, css: u }),
    ...s && { key: s }
  };
}, D = (e = {}) => {
  const { x: t = 0, y: n = -100, opacity: c = 0, spring: r, key: s } = e, $ = {
    stiffness: (r == null ? void 0 : r.stiffness) ?? 400,
    damping: (r == null ? void 0 : r.damping) ?? 35,
    doubleSpring: (r == null ? void 0 : r.doubleSpring) ?? !1
  }, u = (a) => {
    const o = 1 - a;
    let l, f;
    return typeof t == "number" ? l = `${o * t}px` : l = `calc(${t} * ${o})`, typeof n == "number" ? f = `${o * n}px` : f = `calc(${n} * ${o})`, {
      transform: `translate3d(${l}, ${f}, 0)`,
      opacity: c + (1 - c) * a
    };
  };
  return {
    in: () => ({
      spring: $,
      css: u
    }),
    out: () => ({
      spring: $,
      css: u
    }),
    ...s && { key: s }
  };
}, M = (e = {}) => {
  const {
    shape: t = "circle",
    origin: n = "center",
    scale: c = 1.5,
    fade: r = !1,
    spring: s,
    key: $
  } = e, u = {
    stiffness: (s == null ? void 0 : s.stiffness) ?? 300,
    damping: (s == null ? void 0 : s.damping) ?? 30,
    doubleSpring: (s == null ? void 0 : s.doubleSpring) ?? !1
  }, a = () => {
    switch (n) {
      case "top":
        return "50% 0%";
      case "bottom":
        return "50% 100%";
      case "left":
        return "0% 50%";
      case "right":
        return "100% 50%";
      case "top-left":
        return "0% 0%";
      case "top-right":
        return "100% 0%";
      case "bottom-left":
        return "0% 100%";
      case "bottom-right":
        return "100% 100%";
      case "center":
      default:
        return "50% 50%";
    }
  }, o = (f) => {
    const g = f * c * 100, i = a();
    switch (t) {
      case "ellipse":
        return `ellipse(${g}% ${g * 0.75}% at ${i})`;
      case "square": {
        const d = f * c * 100, [y, x] = i.split(" "), b = parseFloat(y), h = parseFloat(x), p = d / 2;
        return `polygon(${b - p}% ${h - p}%, ${b + p}% ${h - p}%, ${b + p}% ${h + p}%, ${b - p}% ${h + p}%)`;
      }
      case "circle":
      default:
        return `circle(${g}% at ${i})`;
    }
  }, l = (f) => {
    const g = {
      clipPath: o(f)
    };
    return r && (g.opacity = f), g;
  };
  return {
    in: () => ({
      spring: u,
      css: l
    }),
    out: () => ({
      spring: u,
      css: l
    }),
    ...$ && { key: $ }
  };
}, z = (e = {}) => {
  const { spring: t, key: n } = e, c = {
    stiffness: (t == null ? void 0 : t.stiffness) ?? 1e3,
    damping: (t == null ? void 0 : t.damping) ?? 100,
    doubleSpring: (t == null ? void 0 : t.doubleSpring) ?? !1
  };
  return {
    in: () => ({
      spring: c,
      css: () => ({})
    }),
    out: () => ({
      spring: c,
      css: () => ({})
    }),
    ...n && { key: n }
  };
};
export {
  v as DoubleSpringIntegrator,
  T as InertiaIntegrator,
  j as IntegratorProvider,
  q as SpringIntegrator,
  P as blur,
  I as bounce,
  k as fade,
  D as fly,
  M as mask,
  z as none,
  C as rotate,
  S as scale,
  w as slide
};