@cliquify.me/animations 9.0.11 → 9.0.13

package/dist/index.es.js

@@ -1,7 +1,7 @@
-import { jsx as A, Fragment as H } from "react/jsx-runtime";
-import I, { useMemo as W } from "react";
-import { interpolate as P, Easing as X } from "remotion";
-const z = () => ({
+import { jsx as X, Fragment as U } from "react/jsx-runtime";
+import L, { useMemo as q } from "react";
+import { interpolate as H, Easing as y } from "remotion";
+const D = () => ({
   scale: (t) => ({ transform: `scale(${t})` }),
   growIn: (t) => ({ transform: `scale(${t})` }),
   shrinkIn: (t) => ({ transform: `scale(${t})` }),
@@ -81,329 +81,343 @@ const z = () => ({
     transform: `translateY(${t}px)`,
     overflow: "hidden"
   }),
-  moveTranslateY: (t) => ({ transform: `translateY(${t}%)` })
-}), Z = (t, f = 0) => {
-  const s = [], i = t / 5;
-  for (let m = 0; m < 6; m += 1)
-    s.push(m * i + f);
-  return s;
-}, q = (t, f, s, i = !1) => {
-  const { from: m, to: a, ease: $ } = f, u = f.durationInFrames || 30, p = Number(m), o = Number(a), e = Math.max(1, Number(u));
-  if (isNaN(p) || isNaN(o))
+  moveTranslateY: (t) => ({ transform: `translateY(${t}%)` }),
+  "hide-show": (t) => ({ opacity: t }),
+  hide: (t) => ({ opacity: t }),
+  show: (t) => ({ opacity: t }),
+  borderRadius: (t) => ({
+    borderRadius: `${t}px`,
+    overflow: "hidden"
+  }),
+  "corner-radius": (t) => ({
+    borderRadius: `${t}px`,
+    overflow: "hidden"
+  })
+}), z = (t, l = 0) => {
+  const e = [], r = t / 5;
+  for (let i = 0; i < 6; i += 1)
+    e.push(i * r + l);
+  return e;
+}, G = (t, l, e, r = !1) => {
+  const { from: i, to: s, ease: g } = l, p = l.durationInFrames || 30, d = Number(i), a = Number(s), n = Math.max(1, Number(p));
+  if (isNaN(d) || isNaN(a))
     return console.error("Invalid animation values:", {
-      from: m,
-      to: a,
-      animationDurationInFrames: u,
-      property: f.property
-    }), p;
-  u === void 0 && console.warn(
-    `durationInFrames is undefined for animation: ${f.property}. Using 1 frame as default.`
+      from: i,
+      to: s,
+      animationDurationInFrames: p,
+      property: l.property
+    }), d;
+  p === void 0 && console.warn(
+    `durationInFrames is undefined for animation: ${l.property}. Using 1 frame as default.`
   );
-  const n = f.delay || 0;
-  let l;
-  if (f.property === "moveScaleIn" ? l = i ? [
-    s - e - n,
-    s - e * 0.5 - n
+  const c = l.delay || 0;
+  if (l.property === "hide-show" || l.property === "hide" || l.property === "show")
+    return t < c ? d : a;
+  let $;
+  if (l.property === "moveScaleIn" ? $ = r ? [
+    e - n - c,
+    e - n * 0.5 - c
   ] : [
-    n + e * 0.5,
-    n + e
-  ] : f.property === "moveTranslateY" ? l = i ? [
-    s - e * 0.5 - n,
-    s - n
+    c + n * 0.5,
+    c + n
+  ] : l.property === "moveTranslateY" ? $ = r ? [
+    e - n * 0.5 - c,
+    e - c
   ] : [
-    n,
-    n + e * 0.5
-  ] : l = i ? [
-    s - e - n,
-    s - n
+    c,
+    c + n * 0.5
+  ] : $ = r ? [
+    e - n - c,
+    e - c
   ] : [
-    n,
-    n + e
-  ], f.property.includes("shake")) {
-    const d = i ? Z(
-      e,
-      s - e - n
-    ) : Z(e, n);
-    return P(
+    c,
+    c + n
+  ], l.property.includes("shake")) {
+    const b = r ? z(
+      n,
+      e - n - c
+    ) : z(n, c);
+    return H(
       t,
-      d,
-      [0, p, o, p, o, 0],
+      b,
+      [0, d, a, d, a, 0],
       {
         extrapolateLeft: "clamp",
         extrapolateRight: "clamp",
-        easing: $
+        easing: g
       }
     );
   }
-  return P(t, l, [p, o], {
+  return H(t, $, [d, a], {
     extrapolateLeft: "clamp",
     extrapolateRight: "clamp",
-    easing: $
+    easing: g
   });
-}, U = (t, f, s, i) => {
-  var u, p, o, e;
-  const { property: m } = t;
-  if (m === "move") {
-    const n = Number(((u = t.details) == null ? void 0 : u.fromX) ?? t.from ?? 0), l = Number(((p = t.details) == null ? void 0 : p.toX) ?? t.to ?? 0), d = Number(((o = t.details) == null ? void 0 : o.fromY) ?? 0), x = Number(((e = t.details) == null ? void 0 : e.toY) ?? 0), S = t.delay || 0, v = t.durationInFrames || 30, Y = i ? [s - v - S, s - S] : [S, S + v], V = P(f, Y, [n, l], {
+}, Z = (t) => {
+  if (t == null) return 0;
+  if (typeof t == "number")
+    return Number.isNaN(t) ? 0 : t;
+  if (typeof t == "object") {
+    if (t.rotate !== void 0 && t.rotate !== null) {
+      const i = parseFloat(String(t.rotate));
+      if (!Number.isNaN(i)) return i;
+    }
+    if (t.rotation !== void 0 && t.rotation !== null) {
+      const i = parseFloat(String(t.rotation));
+      if (!Number.isNaN(i)) return i;
+    }
+    return t.transform ? Z(t.transform) : 0;
+  }
+  const l = String(t), e = /rotate\((-?[\d.]+)deg\)/.exec(l);
+  if (e)
+    return parseFloat(e[1]) || 0;
+  const r = /matrix\(([^)]+)\)/.exec(l);
+  if (r) {
+    const i = r[1].split(",").map((s) => parseFloat(s.trim()));
+    if (i.length >= 4) {
+      const [s, g] = i;
+      return Math.atan2(g, s) * (180 / Math.PI);
+    }
+  }
+  return 0;
+}, W = (t, l, e, r, i) => {
+  var d, a, n, c, $;
+  const { property: s } = t;
+  if (s === "move") {
+    const b = Number(((d = t.details) == null ? void 0 : d.fromX) ?? t.from ?? 0), w = Number(((a = t.details) == null ? void 0 : a.toX) ?? t.to ?? 0), R = Number(((n = t.details) == null ? void 0 : n.fromY) ?? 0), N = Number(((c = t.details) == null ? void 0 : c.toY) ?? 0), j = Number((($ = t.details) == null ? void 0 : $.scale) || 1) || 1;
+    let A = i;
+    if (A == null || Number.isNaN(A)) {
+      const Y = t.details;
+      A = Z((Y == null ? void 0 : Y.rotate) ?? (Y == null ? void 0 : Y.rotation) ?? (Y == null ? void 0 : Y.transform));
+    }
+    const E = t.delay || 0, B = t.durationInFrames || 30, u = r ? [e - B - E, e - E] : [E, E + B], M = H(l, u, [b, w], {
       extrapolateLeft: "clamp",
       extrapolateRight: "clamp",
       easing: t.ease
-    }), M = P(f, Y, [d, x], {
+    }), f = H(l, u, [R, N], {
       extrapolateLeft: "clamp",
       extrapolateRight: "clamp",
       easing: t.ease
-    });
+    }), v = (A || 0) * Math.PI / 180, m = Math.cos(v), S = Math.sin(v), h = M * m + f * S, x = -M * S + f * m, F = h / j, I = x / j;
     return {
-      transform: `translateX(${V}%) translateY(${M}%)`
+      transform: `translateX(${F}px) translateY(${I}px)`
     };
   }
-  const a = q(f, t, s, i), $ = z();
-  return ($[m] || $.default)(a);
-}, j = (t, f, s, i = !1, m = !1) => I.useMemo(() => {
+  const g = G(l, t, e, r), p = D();
+  return (p[s] || p.default)(g);
+}, T = (t, l, e, r = !1, i = !1, s) => L.useMemo(() => {
   if (t.length === 0) return {};
-  const a = t.filter(
-    ($) => $.from !== void 0 && $.to !== void 0
+  const g = t.filter(
+    (p) => p.from !== void 0 && p.to !== void 0
   );
-  if (a.length !== t.length && console.error("Some animations are invalid and will be ignored"), m) {
-    const $ = [], u = {};
-    a.reverse().forEach((e) => {
-      const n = U(e, s, f, !1);
-      if (e.persist === !0 && s - (e.delay || 0) >= e.durationInFrames) {
-        const d = e.to, x = z(), S = e.property === "move" ? (() => {
-          var V, M;
-          const v = Number(((V = e.details) == null ? void 0 : V.toX) ?? e.to ?? 0), Y = Number(((M = e.details) == null ? void 0 : M.toY) ?? 0);
-          return {
-            transform: `translateX(${v}%) translateY(${Y}%)`
-          };
-        })() : (x[e.property] || x.default)(d);
-        Object.keys(S).forEach((v) => {
-          v === "transform" ? u[v] = u[v] ? {
-            [v]: `${u[v][v]} ${S[v]}`
-          } : S : u[v] = S;
-        });
-      }
-      $.push(n);
-    });
-    const o = { ...$.reduce(
-      (e, n) => (Object.keys(n).forEach((l) => {
-        l === "transform" || l === "filter" ? e[l] = e[l] ? `${e[l]} ${n[l]}` : n[l] : e[l] = n[l];
-      }), e),
+  if (g.length !== t.length && console.error("Some animations are invalid and will be ignored"), i) {
+    const p = [];
+    return g.reverse().forEach((a) => {
+      const n = W(
+        a,
+        e,
+        l,
+        !1,
+        s
+      );
+      p.push(n);
+    }), p.reduce(
+      (a, n) => (Object.keys(n).forEach((c) => {
+        c === "transform" || c === "filter" ? a[c] = a[c] ? `${a[c]} ${n[c]}` : n[c] : a[c] = n[c];
+      }), a),
       {}
-    ) };
-    return Object.keys(u).forEach((e) => {
-      const n = u[e];
-      (e === "transform" || e === "filter") && n[e] ? o[e] = o[e] ? `${o[e]} ${n[e]}` : String(n[e]) : n[e] !== void 0 && (o[e] = n[e]);
-    }), o;
+    );
   } else
-    return a.map((u) => U(u, s, f, i)).reduce(
-      (u, p) => (Object.keys(p).forEach((o) => {
-        o === "transform" || o === "filter" ? u[o] = u[o] ? `${u[o]} ${p[o]}` : p[o] : u[o] = p[o];
-      }), u),
+    return g.map((d) => W(d, e, l, r, s)).reduce(
+      (d, a) => (Object.keys(a).forEach((n) => {
+        n === "transform" || n === "filter" ? d[n] = d[n] ? `${d[n]} ${a[n]}` : a[n] : d[n] = a[n];
+      }), d),
       {}
     );
-}, [t, s, f, i]), F = (t) => t ? Array.isArray(t) ? t : [t] : [], et = (...t) => {
-  const f = [];
-  return t.forEach((s) => {
-    Array.isArray(s) ? f.push(...s) : s && f.push(s);
-  }), f.filter((s) => s !== void 0).reduce((s, i) => s.find(
-    (a) => a.property === i.property
-  ) ? s.map(
-    (a) => a.property === i.property ? {
-      ...a,
-      from: Math.min(a.from, i.from),
-      to: Math.max(a.to, i.to),
+}, [t, e, l, r, s]), P = (t) => t ? Array.isArray(t) ? t : [t] : [], rt = (...t) => {
+  const l = [];
+  return t.forEach((e) => {
+    Array.isArray(e) ? l.push(...e) : e && l.push(e);
+  }), l.filter((e) => e !== void 0).reduce((e, r) => e.find(
+    (s) => s.property === r.property
+  ) ? e.map(
+    (s) => s.property === r.property ? {
+      ...s,
+      from: Math.min(s.from, r.from),
+      to: Math.max(s.to, r.to),
       durationInFrames: Math.max(
-        a.durationInFrames,
-        i.durationInFrames
+        s.durationInFrames,
+        r.durationInFrames
       ),
-      delay: Math.min(a.delay || 0, i.delay || 0),
-      ease: ($) => (a.ease($) + i.ease($)) / 2
+      delay: Math.min(s.delay || 0, r.delay || 0),
+      ease: (g) => (s.ease(g) + r.ease(g)) / 2
       // Average the easing functions
-    } : a
-  ) : [...s, i], []);
-}, rt = ({
+    } : s
+  ) : [...e, r], []);
+}, ot = ({
   animationIn: t,
-  animationOut: f,
-  durationInFrames: s,
-  children: i,
-  style: m = {},
-  frame: a,
-  isTransition: $ = !1,
-  basicCharAnimationsIn: u = [],
-  basicCharAnimationsOut: p = []
+  animationOut: l,
+  durationInFrames: e,
+  children: r,
+  style: i = {},
+  frame: s,
+  isTransition: g = !1,
+  basicCharAnimationsIn: p = [],
+  basicCharAnimationsOut: d = []
 }) => {
-  var g;
-  const o = j(
-    F(t),
+  const a = Z(
+    (i == null ? void 0 : i.transform) || (i == null ? void 0 : i.rotate) || (i == null ? void 0 : i.rotation)
+  ), n = T(
+    P(t),
+    e,
     s,
-    a,
-    !1
-  ), e = j(
-    F(f),
+    !1,
+    !1,
+    a
+  ), c = T(
+    P(l),
+    e,
     s,
-    a,
-    !0
-  ), n = j(
-    F(u),
+    !0,
+    !1,
+    a
+  ), $ = T(
+    P(p),
+    e,
     s,
-    a,
-    !0
-  ), l = j(
-    F(p),
+    !0,
+    !1,
+    a
+  ), b = T(
+    P(d),
+    e,
     s,
-    a,
-    !0
-  ), d = I.useMemo(() => {
-    const h = Object.keys(o).length > 0, b = t == null ? void 0 : t.reduce(
-      (N, O) => Math.min(N, O.delay || 0),
+    !0,
+    !1,
+    a
+  ), w = L.useMemo(() => {
+    const f = Object.keys(n).length > 0, v = t == null ? void 0 : t.reduce(
+      (S, h) => Math.min(S, h.delay || 0),
       1 / 0
-    ), y = a - (b || 0);
-    return h && y < 0 ? { visibility: $ ? "visible" : "hidden" } : o;
-  }, [o, a, t]), x = I.useMemo(() => {
-    if (a > s)
-      return { visibility: $ ? "visible" : "hidden" };
-    const h = F(f);
-    if (!h || h.length === 0) return {};
-    let b = 0;
-    h.forEach((N) => {
-      const O = (N.durationInFrames || 0) + (N.delay || 0);
-      O > b && (b = O);
+    ), m = s - (v || 0);
+    return f && m < 0 ? { visibility: g ? "visible" : "hidden" } : n;
+  }, [n, s, t, g]), R = L.useMemo(() => {
+    if (s > e)
+      return { visibility: g ? "visible" : "hidden" };
+    const f = P(l);
+    if (!f || f.length === 0) return {};
+    let v = 0;
+    f.forEach((S) => {
+      const h = (S.durationInFrames || 0) + (S.delay || 0);
+      h > v && (v = h);
     });
-    const y = Math.max(0, s - b);
-    return a < y ? {} : e;
-  }, [e, a, f, s, $]), v = ((m == null ? void 0 : m.transform) || "").match(/rotate\((-?[\d.]+)deg\)/), Y = v ? parseFloat(v[1]) : 0, V = -Y, M = I.useMemo(() => {
-    const h = {
-      ...d
-      // , ...timedStyle
+    const m = Math.max(0, e - v);
+    return s < m ? {} : c;
+  }, [c, s, l, e, g]), N = L.useMemo(() => {
+    const f = {
+      ...w
     };
-    return Object.entries(x).forEach(([b, y]) => {
-      b === "transform" ? h[b] = `${h[b] || ""} ${y || ""}`.trim() : b in h && typeof h[b] == "number" && typeof y == "number" ? h[b] = h[b] * y : h[b] = y;
-    }), h;
-  }, [d, x]);
-  if ((g = M.transform) != null && g.includes("rotate")) {
-    const h = M.transform;
-    M.transform = h.replace(
-      /rotate\(([^)]+)deg\)/,
-      (b, y) => `rotate(${parseFloat(y) - V}deg)`
-    );
-  }
-  const B = W(() => {
-    const h = M.transform || "", {
-      translateX: b,
-      translateY: y,
-      scale: N,
-      rotation: O,
-      rotateX: L,
-      rotateY: r,
-      rotateZ: R
-    } = G(h);
-    return `${b} ${y} ${N} ${O || `rotate(${Y}deg)`} ${L} ${r} ${R}`.trim();
-  }, [M, Y]);
-  let c = o;
-  Y > 0 && c.transform && c.transform.includes("translateX") && (c = {
-    ...c,
-    transform: c.transform.replace(
-      /translateX\(([^)]+)\)/g,
-      (h, b) => `translateX(${parseFloat(b)}%)`
-    )
-  });
-  const {
-    top: E,
-    left: w,
-    position: C,
-    transform: T,
-    ..._
-  } = m || {};
-  return /* @__PURE__ */ A(
+    return Object.entries(R).forEach(([v, m]) => {
+      v === "transform" ? f[v] = `${f[v] || ""} ${m || ""}`.trim() : v in f && typeof f[v] == "number" && typeof m == "number" ? f[v] = f[v] * m : f[v] = m;
+    }), f;
+  }, [w, R]), j = q(() => {
+    const f = N.transform || "", {
+      translateX: v,
+      translateY: m,
+      scale: S,
+      rotation: h,
+      rotateX: x,
+      rotateY: F,
+      rotateZ: I
+    } = J(f);
+    return `${h} ${v} ${m} ${S} ${x} ${F} ${I}`.trim();
+  }, [N]), {
+    top: A,
+    left: E,
+    position: B,
+    transform: u,
+    ...M
+  } = i || {};
+  return /* @__PURE__ */ X(
     "div",
     {
       style: {
         width: "100%",
         height: "100%",
-        overflow: M.overflow || n.overflow || l.overflow || "visible",
+        overflow: N.overflow || $.overflow || b.overflow || "visible",
         pointerEvents: "none"
       },
-      children: /* @__PURE__ */ A(
+      children: /* @__PURE__ */ X(
         "div",
         {
           style: {
             width: "100%",
             height: "100%",
-            ..._,
             ...M,
-            rotate: `${V}deg`,
+            ...N,
             overflow: "visible",
-            transform: B,
+            transform: j,
             pointerEvents: "none",
-            background: Object.keys(M).length === 0 ? "transparent" : M.backgroundColor
+            background: Object.keys(N).length === 0 ? "transparent" : N.backgroundColor
           },
-          children: i
+          children: r
         }
       )
     }
   );
-}, G = (t) => {
-  let f = "", s = "", i = "scale(1)", m = "", a = "", $ = "", u = "";
-  const p = t.match(/translateX\([^)]+\)/g);
-  p && (f = p[p.length - 1]);
-  const o = t.match(/translateY\([^)]+\)/g);
-  o && (s = o[o.length - 1]);
-  const e = t.match(/scale\([^)]+\)/g);
-  e && (i = e[e.length - 1]);
-  const n = t.match(/rotate\([^)]+\)/g);
-  n && (m = n[n.length - 1]);
-  const l = t.match(/rotateX\([^)]+\)/g);
-  l && (a = l[l.length - 1]);
-  const d = t.match(/rotateY\([^)]+\)/g);
-  d && ($ = d[d.length - 1]);
-  const x = t.match(/rotateZ\([^)]+\)/g);
-  return x && (u = x[x.length - 1]), { translateX: f, translateY: s, scale: i, rotation: m, rotateX: a, rotateY: $, rotateZ: u };
+}, J = (t) => {
+  let l = "", e = "", r = "scale(1)", i = "", s = "", g = "", p = "";
+  const d = t.match(/translateX\([^)]+\)/g);
+  d && (l = d[d.length - 1]);
+  const a = t.match(/translateY\([^)]+\)/g);
+  a && (e = a[a.length - 1]);
+  const n = t.match(/scale\([^)]+\)/g);
+  n && (r = n[n.length - 1]);
+  const c = t.match(/rotate\([^)]+\)/g);
+  c && (i = c[c.length - 1]);
+  const $ = t.match(/rotateX\([^)]+\)/g);
+  $ && (s = $[$.length - 1]);
+  const b = t.match(/rotateY\([^)]+\)/g);
+  b && (g = b[b.length - 1]);
+  const w = t.match(/rotateZ\([^)]+\)/g);
+  return w && (p = w[w.length - 1]), { translateX: l, translateY: e, scale: r, rotation: i, rotateX: s, rotateY: g, rotateZ: p };
 }, st = ({
   animationTimed: t,
-  durationInFrames: f,
-  children: s,
-  style: i = {},
-  frame: m
+  durationInFrames: l,
+  children: e,
+  style: r = {},
+  frame: i
 }) => {
-  var l;
-  const a = j(
-    F(t),
-    f,
-    m,
+  const s = Z(
+    (r == null ? void 0 : r.transform) || (r == null ? void 0 : r.rotate) || (r == null ? void 0 : r.rotation)
+  ), g = T(
+    P(t),
+    l,
+    i,
     !1,
-    !0
-  ), u = ((i == null ? void 0 : i.transform) || "").match(/rotate\((-?[\d.]+)deg\)/), p = u ? parseFloat(u[1]) : 0, o = -p, e = I.useMemo(() => ({
-    ...a
-  }), [a]);
-  if ((l = e.transform) != null && l.includes("rotate")) {
-    const d = e.transform;
-    e.transform = d.replace(
-      /rotate\(([^)]+)deg\)/,
-      (x, S) => `rotate(${parseFloat(S) - o}deg)`
-    );
-  }
-  let n = e;
-  return p > 0 && n.transform && n.transform.includes("translateX") && (n = {
-    ...n,
-    transform: n.transform.replace(
-      /translateX\(([^)]+)\)/g,
-      (d, x) => `translateX(${parseFloat(x)}%)`
-    )
-  }), /* @__PURE__ */ A(
+    !0,
+    s
+  ), p = L.useMemo(() => ({
+    ...g
+  }), [g]), d = !!p.borderRadius;
+  return /* @__PURE__ */ X(
     "div",
     {
       style: {
-        overflow: e.overflow || "visible",
+        overflow: d ? "hidden" : p.overflow || "visible",
+        borderRadius: p.borderRadius,
         pointerEvents: "none",
-        height: i.height || "100%",
-        width: i.width || "100%",
-        ...n
+        height: r.height || "100%",
+        width: r.width || "100%",
+        ...p,
+        ...d ? { overflow: "hidden" } : {}
       },
-      children: /* @__PURE__ */ A(
+      children: /* @__PURE__ */ X(
         "div",
         {
           style: {
-            overflow: "visible",
+            overflow: d ? "hidden" : "visible",
+            borderRadius: p.borderRadius,
             pointerEvents: "none",
             height: "100%",
             width: "100%",
@@ -411,105 +425,79 @@ const z = () => ({
             alignItems: "center",
             justifyContent: "center"
           },
-          children: s
+          children: e
         }
       )
     }
   );
-}, J = (t) => {
+}, K = (t) => {
   if (typeof (t == null ? void 0 : t.ease) == "function")
     return t.ease;
   switch (t == null ? void 0 : t.easing) {
     case "ease-in":
     case "accelerate":
-      return X.in(X.cubic);
+      return y.in(y.cubic);
     case "ease-out":
     case "smooth":
     case "slowDown":
-      return X.out(X.cubic);
+      return y.out(y.cubic);
     case "ease-in-out":
     case "natural":
     case "swing":
-      return X.inOut(X.cubic);
+      return y.inOut(y.cubic);
     case "bounce":
-      return X.bounce;
+      return y.bounce;
     case "elastic":
-      return X.elastic(1);
+      return y.elastic(1);
     case "overshoot":
     case "impulse":
-      return X.out(X.back(1.7));
+      return y.out(y.back(1.7));
     case "none":
     case "linear":
     default:
-      return X.linear;
+      return y.linear;
   }
-}, K = ({
+}, O = ({
   children: t,
-  currentWidth: f,
-  currentHeight: s,
-  frame: i,
-  item: m,
-  keyframeAnimations: a,
-  durationInFrames: $
+  currentWidth: l,
+  currentHeight: e,
+  frame: r,
+  item: i,
+  keyframeAnimations: s,
+  durationInFrames: g
 }) => {
-  var O, L;
-  if (!a || !Array.isArray(a) || a.length === 0)
-    return /* @__PURE__ */ A(H, { children: t });
-  const u = (r) => {
-    var R, D;
-    return !!((R = r == null ? void 0 : r.property) != null && R.includes("maskReveal") || (D = r == null ? void 0 : r.id) != null && D.includes("maskReveal"));
-  }, p = (r) => {
-    var R, D;
-    return !!((r == null ? void 0 : r.type) === "exit" || (R = r == null ? void 0 : r.property) != null && R.includes("Out") || (D = r == null ? void 0 : r.id) != null && D.includes("Out"));
-  }, o = a.find(
-    (r) => u(r) && !p(r)
-  ), e = a.find(
-    (r) => u(r) && p(r)
+  var _, k;
+  if (!s || !Array.isArray(s) || s.length === 0)
+    return /* @__PURE__ */ X(U, { children: t });
+  const p = (o) => {
+    var V, C;
+    return !!((V = o == null ? void 0 : o.property) != null && V.includes("maskReveal") || (C = o == null ? void 0 : o.id) != null && C.includes("maskReveal"));
+  }, d = (o) => {
+    var V, C;
+    return !!((o == null ? void 0 : o.type) === "exit" || (V = o == null ? void 0 : o.property) != null && V.includes("Out") || (C = o == null ? void 0 : o.id) != null && C.includes("Out"));
+  }, a = s.find(
+    (o) => p(o) && !d(o)
+  ), n = s.find(
+    (o) => p(o) && d(o)
   );
-  if (!o && !e)
-    return /* @__PURE__ */ A(H, { children: t });
-  const n = Math.max(
-    1,
-    $ || 300
-  );
-  let l = null, d = !1, x = 30, S = 0;
-  if (e) {
-    const r = Math.max(
-      1,
-      Number(e.durationInFrames || 30)
-    ), R = Math.max(
-      0,
-      Number(e.delay || 0)
-    ), D = Math.max(
-      0,
-      n - r - R
-    );
-    i >= D && (l = e, d = !0, x = r, S = i - D);
+  if (!a && !n)
+    return /* @__PURE__ */ X(U, { children: t });
+  const c = Math.max(1, g || 300);
+  let $ = null, b = !1, w = 30, R = 0;
+  if (n) {
+    const o = Math.max(1, Number(n.durationInFrames || 30)), V = Math.max(0, Number(n.delay || 0)), C = Math.max(0, c - o - V);
+    r >= C && ($ = n, b = !0, w = o, R = r - C);
   }
-  if (!l && o) {
-    l = o, d = !1, x = Math.max(
-      1,
-      Number(o.durationInFrames || 30)
-    );
-    const r = Math.max(
-      0,
-      Number(o.delay || 0)
-    );
-    S = i - r;
+  if (!$ && a) {
+    $ = a, b = !1, w = Math.max(1, Number(a.durationInFrames || 30));
+    const o = Math.max(0, Number(a.delay || 0));
+    R = r - o;
   }
-  if (!l)
-    return /* @__PURE__ */ A(H, { children: t });
-  const v = o ? Math.max(
-    0,
-    Number(o.delay || 0)
-  ) : 0, Y = o ? Math.max(
-    1,
-    Number(
-      o.durationInFrames || 30
-    )
-  ) : 30;
-  if (!d && o && i >= v + Y)
-    return /* @__PURE__ */ A(
+  if (!$)
+    return /* @__PURE__ */ X(U, { children: t });
+  const N = a ? Math.max(0, Number(a.delay || 0)) : 0, j = a ? Math.max(1, Number(a.durationInFrames || 30)) : 30;
+  if (!b && a && r >= N + j)
+    return /* @__PURE__ */ X(
       "div",
       {
         style: {
@@ -521,8 +509,8 @@ const z = () => ({
         children: t
       }
     );
-  if (!d && o && i < v)
-    return /* @__PURE__ */ A(
+  if (!b && a && r < N)
+    return /* @__PURE__ */ X(
       "div",
       {
         style: {
@@ -534,92 +522,72 @@ const z = () => ({
         children: t
       }
     );
-  const V = Math.max(
-    0,
-    S
-  ), M = Math.min(
-    Math.max(
-      0,
-      V / x
-    ),
-    1
-  ), B = J(l), c = Math.max(
-    0,
-    Math.min(
-      1,
-      B(M)
-    )
-  ), E = String(
-    l.property || l.id || ""
-  ), w = ((O = l.details) == null ? void 0 : O.direction) || "up", C = E.includes("ShrinkScale"), T = E.includes("CenterScale"), _ = E.includes("Slide") || E.includes("slide");
-  let g, h = "";
-  if (T) {
-    const r = d ? 50 * c : 50 * (1 - c);
-    g = `inset(
-      ${r}%
+  const A = Math.max(0, R), E = Math.min(Math.max(0, A / w), 1), B = K($), u = Math.max(0, Math.min(1, B(E))), M = String($.property || $.id || ""), f = ((_ = $.details) == null ? void 0 : _.direction) || "up", v = M.includes("ShrinkScale"), m = M.includes("CenterScale"), S = M.includes("Slide") || M.includes("slide");
+  let h, x = "";
+  if (m) {
+    const o = b ? 50 * u : 50 * (1 - u);
+    h = `inset(
+      ${o}%
       0%
-      ${r}%
+      ${o}%
       0%
     )`;
-  } else if (C) {
-    const r = d ? 25 * c : 25 * (1 - c);
-    g = `inset(
-      ${r}%
-      ${r}%
-      ${r}%
-      ${r}%
+  } else if (v) {
+    const o = b ? 25 * u : 25 * (1 - u);
+    h = `inset(
+      ${o}%
+      ${o}%
+      ${o}%
+      ${o}%
     )`;
-  } else if (_)
-    g = "inset(0% 0% 0% 0%)", d ? w === "down" ? h = `translateY(${100 * c}%)` : w === "left" ? h = `translateX(${-100 * c}%)` : w === "right" ? h = `translateX(${100 * c}%)` : h = `translateY(${-100 * c}%)` : w === "down" ? h = `translateY(${-100 * (1 - c)}%)` : w === "left" ? h = `translateX(${100 * (1 - c)}%)` : w === "right" ? h = `translateX(${-100 * (1 - c)}%)` : h = `translateY(${100 * (1 - c)}%)`;
-  else if (E.includes("Center"))
-    g = `circle(${d ? 150 * (1 - c) : 150 * c}% at 50% 50%)`;
-  else if (E.includes("Corner")) {
-    const r = d ? c : 1 - c;
-    w === "down" ? g = `inset(0 ${100 * r}% ${100 * r}% 0)` : w === "up" ? g = `inset(${100 * r}% ${100 * r}% 0 0)` : w === "left" ? g = `inset(0 0 ${100 * r}% ${100 * r}%)` : w === "right" ? g = `inset(${100 * r}% 0 0 ${100 * r}%)` : g = `inset(0 ${100 * r}% ${100 * r}% 0)`;
+  } else if (S)
+    h = "inset(0% 0% 0% 0%)", b ? f === "down" ? x = `translateY(${100 * u}%)` : f === "left" ? x = `translateX(${-100 * u}%)` : f === "right" ? x = `translateX(${100 * u}%)` : x = `translateY(${-100 * u}%)` : f === "down" ? x = `translateY(${-100 * (1 - u)}%)` : f === "left" ? x = `translateX(${100 * (1 - u)}%)` : f === "right" ? x = `translateX(${-100 * (1 - u)}%)` : x = `translateY(${100 * (1 - u)}%)`;
+  else if (M.includes("Center"))
+    h = `circle(${b ? 150 * (1 - u) : 150 * u}% at 50% 50%)`;
+  else if (M.includes("Corner")) {
+    const o = b ? u : 1 - u;
+    f === "down" ? h = `inset(0 ${100 * o}% ${100 * o}% 0)` : f === "up" ? h = `inset(${100 * o}% ${100 * o}% 0 0)` : f === "left" ? h = `inset(0 0 ${100 * o}% ${100 * o}%)` : f === "right" ? h = `inset(${100 * o}% 0 0 ${100 * o}%)` : h = `inset(0 ${100 * o}% ${100 * o}% 0)`;
   } else
-    d ? w === "down" ? g = `inset(${100 * c}% 0 0 0)` : w === "left" ? g = `inset(0 ${100 * c}% 0 0)` : w === "right" ? g = `inset(0 0 0 ${100 * c}%)` : g = `inset(0 0 ${100 * c}% 0)` : w === "down" ? g = `inset(0 0 ${100 * (1 - c)}% 0)` : w === "left" ? g = `inset(0 0 0 ${100 * (1 - c)}%)` : w === "right" ? g = `inset(0 ${100 * (1 - c)}% 0 0)` : g = `inset(${100 * (1 - c)}% 0 0 0)`;
-  const b = !!((L = l == null ? void 0 : l.details) != null && L.scale || l != null && l.scale);
-  let y = 1;
-  T || C ? y = d ? 1 + 0.5 * c : 1.5 - 0.5 * c : b && (y = d ? 1 - 0.2 * c : 0.8 + 0.2 * c);
-  const N = [
-    h,
-    `scale(${y})`
-  ].filter(Boolean).join(" ");
+    b ? f === "down" ? h = `inset(${100 * u}% 0 0 0)` : f === "left" ? h = `inset(0 ${100 * u}% 0 0)` : f === "right" ? h = `inset(0 0 0 ${100 * u}%)` : h = `inset(0 0 ${100 * u}% 0)` : f === "down" ? h = `inset(0 0 ${100 * (1 - u)}% 0)` : f === "left" ? h = `inset(0 0 0 ${100 * (1 - u)}%)` : f === "right" ? h = `inset(0 ${100 * (1 - u)}% 0 0)` : h = `inset(${100 * (1 - u)}% 0 0 0)`;
+  const F = !!((k = $ == null ? void 0 : $.details) != null && k.scale || $ != null && $.scale);
+  let I = 1;
+  m || v ? I = b ? 1 + 0.5 * u : 1.5 - 0.5 * u : F && (I = b ? 1 - 0.2 * u : 0.8 + 0.2 * u);
+  const Y = [x, `scale(${I})`].filter(Boolean).join(" ");
   return console.log("[MaskAnim] Rendering:", {
-    propName: E,
-    frame: i,
-    localFrame: S,
-    animDuration: x,
-    progress: M,
-    easedProgress: c,
-    isOut: d,
-    isShrinkScale: C,
-    isCenterScale: T,
-    isSlide: _,
-    direction: w,
-    clipPath: g,
-    translateTransform: h,
-    isScale: b,
-    scaleValue: y,
-    innerTransform: N
-  }), /* @__PURE__ */ A(
+    propName: M,
+    frame: r,
+    localFrame: R,
+    animDuration: w,
+    progress: E,
+    easedProgress: u,
+    isOut: b,
+    isShrinkScale: v,
+    isCenterScale: m,
+    isSlide: S,
+    direction: f,
+    clipPath: h,
+    translateTransform: x,
+    isScale: F,
+    scaleValue: I,
+    innerTransform: Y
+  }), /* @__PURE__ */ X(
     "div",
     {
       style: {
-        width: f !== void 0 ? f : "100%",
-        height: s !== void 0 ? s : "100%",
+        width: l !== void 0 ? l : "100%",
+        height: e !== void 0 ? e : "100%",
         position: "relative",
-        clipPath: g,
-        WebkitClipPath: g,
+        clipPath: h,
+        WebkitClipPath: h,
         overflow: "hidden"
       },
-      children: /* @__PURE__ */ A(
+      children: /* @__PURE__ */ X(
         "div",
         {
           style: {
             width: "100%",
             height: "100%",
-            transform: N,
+            transform: Y,
             transformOrigin: "center"
           },
           children: t
@@ -627,13 +595,13 @@ const z = () => ({
       )
     }
   );
-}, ot = K;
+}, nt = O;
 export {
-  rt as BoxAnim,
+  ot as BoxAnim,
   st as ContentAnim,
-  ot as MaskAnim,
-  et as combine,
-  F as combineAnimations,
-  G as extractTransformations,
-  j as useAnimation
+  nt as MaskAnim,
+  rt as combine,
+  P as combineAnimations,
+  J as extractTransformations,
+  T as useAnimation
 };

package/dist/index.umd.js

@@ -1,11 +1,11 @@
-(function(X,S){typeof exports=="object"&&typeof module<"u"?S(exports,require("react/jsx-runtime"),require("react"),require("remotion")):typeof define=="function"&&define.amd?define(["exports","react/jsx-runtime","react","remotion"],S):(X=typeof globalThis<"u"?globalThis:X||self,S(X.animations={},X.jsxRuntime,X.React,X.remotion))})(this,function(X,S,C,A){"use strict";const Z=()=>({scale:t=>({transform:`scale(${t})`}),growIn:t=>({transform:`scale(${t})`}),shrinkIn:t=>({transform:`scale(${t})`}),shrinkOut:t=>({transform:`scale(${t})`}),opacity:t=>({opacity:t}),translateX:t=>({transform:`translateX(${t}%)`}),translateY:t=>({transform:`translateY(${t}%)`}),rotate:t=>({transform:`rotate(${t}deg)`}),spin:t=>({transform:`rotate(${t}deg)`}),spinIn:t=>({transform:`rotate(${t}deg)`}),twistIn:t=>({transform:`rotate(${t}deg)`}),twistOut:t=>({transform:`rotate(${t}deg)`}),moveScaleIn:t=>({transform:`scale(${t})`}),spinOut:t=>({transform:`rotate(${t}deg)`}),default:()=>({}),rotateY:t=>({transform:`rotateY(${t}deg)`}),rotateX:t=>({transform:`rotateX(${t}deg)`}),blur:t=>({filter:`blur(${t}px)`}),blurIn:t=>({filter:`blur(${t}px)`}),blurOut:t=>({filter:`blur(${t}px)`}),blurV2In:t=>({filter:`blur(${t}px)`}),blurSlide:t=>({filter:`blur(${t}px)`,transform:`translateY(${t*5}%)`}),blurSlideV2In:t=>({filter:`blur(${t}px)`}),brightness:t=>({filter:`brightness(${t}%)`}),contrast:t=>({filter:`contrast(${t}%)`}),grayscale:t=>({filter:`grayscale(${t}%)`}),hue:t=>({filter:`hue-rotate(${t}deg)`}),saturation:t=>({filter:`saturate(${t}%)`}),vignette:t=>({filter:`contrast(${100+t*20}%) brightness(${100-t*20}%)`}),noise:t=>({filter:`contrast(${100+t*40}%) brightness(${100+t*20}%)`}),pixelate:t=>({filter:`contrast(${100+t*2}%)`}),chromaticAberration:t=>({filter:`hue-rotate(${t*10}deg) contrast(110%)`}),lightLeak:t=>({filter:`brightness(${100+t*50}%) saturate(${100+t*30}%)`}),duotone:t=>({filter:`sepia(${t*100}%) hue-rotate(${t*180}deg)`}),shakeHorizontalIn:t=>({transform:`translateX(${t}px)`}),shakeVerticalIn:t=>({transform:`translateY(${t}px)`}),shakeHorizontalOut:t=>({transform:`translateX(${t}px)`}),shakeVerticalOut:t=>({transform:`translateY(${t}px)`}),maskUpIn:t=>({transform:`translateY(${t}px)`,overflow:"hidden"}),maskUpOut:t=>({transform:`translateY(${t}px)`,overflow:"hidden"}),maskDownIn:t=>({transform:`translateY(${t}px)`,overflow:"hidden"}),maskDownOut:t=>({transform:`translateY(${t}px)`,overflow:"hidden"}),moveTranslateY:t=>({transform:`translateY(${t}%)`})}),q=(t,f=0)=>{const s=[],i=t/5;for(let $=0;$<6;$+=1)s.push($*i+f);return s},z=(t,f,s,i=!1)=>{const{from:$,to:a,ease:g}=f,u=f.durationInFrames||30,p=Number($),n=Number(a),e=Math.max(1,Number(u));if(isNaN(p)||isNaN(n))return console.error("Invalid animation values:",{from:$,to:a,animationDurationInFrames:u,property:f.property}),p;u===void 0&&console.warn(`durationInFrames is undefined for animation: ${f.property}. Using 1 frame as default.`);const o=f.delay||0;let l;if(f.property==="moveScaleIn"?l=i?[s-e-o,s-e*.5-o]:[o+e*.5,o+e]:f.property==="moveTranslateY"?l=i?[s-e*.5-o,s-o]:[o,o+e*.5]:l=i?[s-e-o,s-o]:[o,o+e],f.property.includes("shake")){const d=i?q(e,s-e-o):q(e,o);return A.interpolate(t,d,[0,p,n,p,n,0],{extrapolateLeft:"clamp",extrapolateRight:"clamp",easing:g})}return A.interpolate(t,l,[p,n],{extrapolateLeft:"clamp",extrapolateRight:"clamp",easing:g})},U=(t,f,s,i)=>{var u,p,n,e;const{property:$}=t;if($==="move"){const o=Number(((u=t.details)==null?void 0:u.fromX)??t.from??0),l=Number(((p=t.details)==null?void 0:p.toX)??t.to??0),d=Number(((n=t.details)==null?void 0:n.fromY)??0),x=Number(((e=t.details)==null?void 0:e.toY)??0),w=t.delay||0,v=t.durationInFrames||30,E=i?[s-v-w,s-w]:[w,w+v],O=A.interpolate(f,E,[o,l],{extrapolateLeft:"clamp",extrapolateRight:"clamp",easing:t.ease}),Y=A.interpolate(f,E,[d,x],{extrapolateLeft:"clamp",extrapolateRight:"clamp",easing:t.ease});return{transform:`translateX(${O}%) translateY(${Y}%)`}}const a=z(f,t,s,i),g=Z();return(g[$]||g.default)(a)},I=(t,f,s,i=!1,$=!1)=>C.useMemo(()=>{if(t.length===0)return{};const a=t.filter(g=>g.from!==void 0&&g.to!==void 0);if(a.length!==t.length&&console.error("Some animations are invalid and will be ignored"),$){const g=[],u={};a.reverse().forEach(e=>{const o=U(e,s,f,!1);if(e.persist===!0&&s-(e.delay||0)>=e.durationInFrames){const d=e.to,x=Z(),w=e.property==="move"?(()=>{var O,Y;const v=Number(((O=e.details)==null?void 0:O.toX)??e.to??0),E=Number(((Y=e.details)==null?void 0:Y.toY)??0);return{transform:`translateX(${v}%) translateY(${E}%)`}})():(x[e.property]||x.default)(d);Object.keys(w).forEach(v=>{v==="transform"?u[v]=u[v]?{[v]:`${u[v][v]} ${w[v]}`}:w:u[v]=w})}g.push(o)});const n={...g.reduce((e,o)=>(Object.keys(o).forEach(l=>{l==="transform"||l==="filter"?e[l]=e[l]?`${e[l]} ${o[l]}`:o[l]:e[l]=o[l]}),e),{})};return Object.keys(u).forEach(e=>{const o=u[e];(e==="transform"||e==="filter")&&o[e]?n[e]=n[e]?`${n[e]} ${o[e]}`:String(o[e]):o[e]!==void 0&&(n[e]=o[e])}),n}else return a.map(u=>U(u,s,f,i)).reduce((u,p)=>(Object.keys(p).forEach(n=>{n==="transform"||n==="filter"?u[n]=u[n]?`${u[n]} ${p[n]}`:p[n]:u[n]=p[n]}),u),{})},[t,s,f,i]),T=t=>t?Array.isArray(t)?t:[t]:[],G=(...t)=>{const f=[];return t.forEach(s=>{Array.isArray(s)?f.push(...s):s&&f.push(s)}),f.filter(s=>s!==void 0).reduce((s,i)=>s.find(a=>a.property===i.property)?s.map(a=>a.property===i.property?{...a,from:Math.min(a.from,i.from),to:Math.max(a.to,i.to),durationInFrames:Math.max(a.durationInFrames,i.durationInFrames),delay:Math.min(a.delay||0,i.delay||0),ease:g=>(a.ease(g)+i.ease(g))/2}:a):[...s,i],[])},J=({animationIn:t,animationOut:f,durationInFrames:s,children:i,style:$={},frame:a,isTransition:g=!1,basicCharAnimationsIn:u=[],basicCharAnimationsOut:p=[]})=>{var m;const n=I(T(t),s,a,!1),e=I(T(f),s,a,!0),o=I(T(u),s,a,!0),l=I(T(p),s,a,!0),d=C.useMemo(()=>{const h=Object.keys(n).length>0,b=t==null?void 0:t.reduce((N,V)=>Math.min(N,V.delay||0),1/0),M=a-(b||0);return h&&M<0?{visibility:g?"visible":"hidden"}:n},[n,a,t]),x=C.useMemo(()=>{if(a>s)return{visibility:g?"visible":"hidden"};const h=T(f);if(!h||h.length===0)return{};let b=0;h.forEach(N=>{const V=(N.durationInFrames||0)+(N.delay||0);V>b&&(b=V)});const M=Math.max(0,s-b);return a<M?{}:e},[e,a,f,s,g]),v=(($==null?void 0:$.transform)||"").match(/rotate\((-?[\d.]+)deg\)/),E=v?parseFloat(v[1]):0,O=-E,Y=C.useMemo(()=>{const h={...d};return Object.entries(x).forEach(([b,M])=>{b==="transform"?h[b]=`${h[b]||""} ${M||""}`.trim():b in h&&typeof h[b]=="number"&&typeof M=="number"?h[b]=h[b]*M:h[b]=M}),h},[d,x]);if((m=Y.transform)!=null&&m.includes("rotate")){const h=Y.transform;Y.transform=h.replace(/rotate\(([^)]+)deg\)/,(b,M)=>`rotate(${parseFloat(M)-O}deg)`)}const H=C.useMemo(()=>{const h=Y.transform||"",{translateX:b,translateY:M,scale:N,rotation:V,rotateX:L,rotateY:r,rotateZ:F}=W(h);return`${b} ${M} ${N} ${V||`rotate(${E}deg)`} ${L} ${r} ${F}`.trim()},[Y,E]);let c=n;E>0&&c.transform&&c.transform.includes("translateX")&&(c={...c,transform:c.transform.replace(/translateX\(([^)]+)\)/g,(h,b)=>`translateX(${parseFloat(b)}%)`)});const{top:j,left:y,position:P,transform:_,...B}=$||{};return S.jsx("div",{style:{width:"100%",height:"100%",overflow:Y.overflow||o.overflow||l.overflow||"visible",pointerEvents:"none"},children:S.jsx("div",{style:{width:"100%",height:"100%",...B,...Y,rotate:`${O}deg`,overflow:"visible",transform:H,pointerEvents:"none",background:Object.keys(Y).length===0?"transparent":Y.backgroundColor},children:i})})},W=t=>{let f="",s="",i="scale(1)",$="",a="",g="",u="";const p=t.match(/translateX\([^)]+\)/g);p&&(f=p[p.length-1]);const n=t.match(/translateY\([^)]+\)/g);n&&(s=n[n.length-1]);const e=t.match(/scale\([^)]+\)/g);e&&(i=e[e.length-1]);const o=t.match(/rotate\([^)]+\)/g);o&&($=o[o.length-1]);const l=t.match(/rotateX\([^)]+\)/g);l&&(a=l[l.length-1]);const d=t.match(/rotateY\([^)]+\)/g);d&&(g=d[d.length-1]);const x=t.match(/rotateZ\([^)]+\)/g);return x&&(u=x[x.length-1]),{translateX:f,translateY:s,scale:i,rotation:$,rotateX:a,rotateY:g,rotateZ:u}},K=({animationTimed:t,durationInFrames:f,children:s,style:i={},frame:$})=>{var l;const a=I(T(t),f,$,!1,!0),u=((i==null?void 0:i.transform)||"").match(/rotate\((-?[\d.]+)deg\)/),p=u?parseFloat(u[1]):0,n=-p,e=C.useMemo(()=>({...a}),[a]);if((l=e.transform)!=null&&l.includes("rotate")){const d=e.transform;e.transform=d.replace(/rotate\(([^)]+)deg\)/,(x,w)=>`rotate(${parseFloat(w)-n}deg)`)}let o=e;return p>0&&o.transform&&o.transform.includes("translateX")&&(o={...o,transform:o.transform.replace(/translateX\(([^)]+)\)/g,(d,x)=>`translateX(${parseFloat(x)}%)`)}),S.jsx("div",{style:{overflow:e.overflow||"visible",pointerEvents:"none",height:i.height||"100%",width:i.width||"100%",...o},children:S.jsx("div",{style:{overflow:"visible",pointerEvents:"none",height:"100%",width:"100%",display:"flex",alignItems:"center",justifyContent:"center"},children:s})})},Q=t=>{if(typeof(t==null?void 0:t.ease)=="function")return t.ease;switch(t==null?void 0:t.easing){case"ease-in":case"accelerate":return A.Easing.in(A.Easing.cubic);case"ease-out":case"smooth":case"slowDown":return A.Easing.out(A.Easing.cubic);case"ease-in-out":case"natural":case"swing":return A.Easing.inOut(A.Easing.cubic);case"bounce":return A.Easing.bounce;case"elastic":return A.Easing.elastic(1);case"overshoot":case"impulse":return A.Easing.out(A.Easing.back(1.7));case"none":case"linear":default:return A.Easing.linear}},R=({children:t,currentWidth:f,currentHeight:s,frame:i,item:$,keyframeAnimations:a,durationInFrames:g})=>{var V,L;if(!a||!Array.isArray(a)||a.length===0)return S.jsx(S.Fragment,{children:t});const u=r=>{var F,D;return!!((F=r==null?void 0:r.property)!=null&&F.includes("maskReveal")||(D=r==null?void 0:r.id)!=null&&D.includes("maskReveal"))},p=r=>{var F,D;return!!((r==null?void 0:r.type)==="exit"||(F=r==null?void 0:r.property)!=null&&F.includes("Out")||(D=r==null?void 0:r.id)!=null&&D.includes("Out"))},n=a.find(r=>u(r)&&!p(r)),e=a.find(r=>u(r)&&p(r));if(!n&&!e)return S.jsx(S.Fragment,{children:t});const o=Math.max(1,g||300);let l=null,d=!1,x=30,w=0;if(e){const r=Math.max(1,Number(e.durationInFrames||30)),F=Math.max(0,Number(e.delay||0)),D=Math.max(0,o-r-F);i>=D&&(l=e,d=!0,x=r,w=i-D)}if(!l&&n){l=n,d=!1,x=Math.max(1,Number(n.durationInFrames||30));const r=Math.max(0,Number(n.delay||0));w=i-r}if(!l)return S.jsx(S.Fragment,{children:t});const v=n?Math.max(0,Number(n.delay||0)):0,E=n?Math.max(1,Number(n.durationInFrames||30)):30;if(!d&&n&&i>=v+E)return S.jsx("div",{style:{width:"100%",height:"100%",position:"relative",overflow:"visible"},children:t});if(!d&&n&&i<v)return S.jsx("div",{style:{width:"100%",height:"100%",position:"relative",visibility:"hidden"},children:t});const O=Math.max(0,w),Y=Math.min(Math.max(0,O/x),1),H=Q(l),c=Math.max(0,Math.min(1,H(Y))),j=String(l.property||l.id||""),y=((V=l.details)==null?void 0:V.direction)||"up",P=j.includes("ShrinkScale"),_=j.includes("CenterScale"),B=j.includes("Slide")||j.includes("slide");let m,h="";if(_){const r=d?50*c:50*(1-c);m=`inset(
-      ${r}%
+(function(M,x){typeof exports=="object"&&typeof module<"u"?x(exports,require("react/jsx-runtime"),require("react"),require("remotion")):typeof define=="function"&&define.amd?define(["exports","react/jsx-runtime","react","remotion"],x):(M=typeof globalThis<"u"?globalThis:M||self,x(M.animations={},M.jsxRuntime,M.React,M.remotion))})(this,function(M,x,P,w){"use strict";const z=()=>({scale:t=>({transform:`scale(${t})`}),growIn:t=>({transform:`scale(${t})`}),shrinkIn:t=>({transform:`scale(${t})`}),shrinkOut:t=>({transform:`scale(${t})`}),opacity:t=>({opacity:t}),translateX:t=>({transform:`translateX(${t}%)`}),translateY:t=>({transform:`translateY(${t}%)`}),rotate:t=>({transform:`rotate(${t}deg)`}),spin:t=>({transform:`rotate(${t}deg)`}),spinIn:t=>({transform:`rotate(${t}deg)`}),twistIn:t=>({transform:`rotate(${t}deg)`}),twistOut:t=>({transform:`rotate(${t}deg)`}),moveScaleIn:t=>({transform:`scale(${t})`}),spinOut:t=>({transform:`rotate(${t}deg)`}),default:()=>({}),rotateY:t=>({transform:`rotateY(${t}deg)`}),rotateX:t=>({transform:`rotateX(${t}deg)`}),blur:t=>({filter:`blur(${t}px)`}),blurIn:t=>({filter:`blur(${t}px)`}),blurOut:t=>({filter:`blur(${t}px)`}),blurV2In:t=>({filter:`blur(${t}px)`}),blurSlide:t=>({filter:`blur(${t}px)`,transform:`translateY(${t*5}%)`}),blurSlideV2In:t=>({filter:`blur(${t}px)`}),brightness:t=>({filter:`brightness(${t}%)`}),contrast:t=>({filter:`contrast(${t}%)`}),grayscale:t=>({filter:`grayscale(${t}%)`}),hue:t=>({filter:`hue-rotate(${t}deg)`}),saturation:t=>({filter:`saturate(${t}%)`}),vignette:t=>({filter:`contrast(${100+t*20}%) brightness(${100-t*20}%)`}),noise:t=>({filter:`contrast(${100+t*40}%) brightness(${100+t*20}%)`}),pixelate:t=>({filter:`contrast(${100+t*2}%)`}),chromaticAberration:t=>({filter:`hue-rotate(${t*10}deg) contrast(110%)`}),lightLeak:t=>({filter:`brightness(${100+t*50}%) saturate(${100+t*30}%)`}),duotone:t=>({filter:`sepia(${t*100}%) hue-rotate(${t*180}deg)`}),shakeHorizontalIn:t=>({transform:`translateX(${t}px)`}),shakeVerticalIn:t=>({transform:`translateY(${t}px)`}),shakeHorizontalOut:t=>({transform:`translateX(${t}px)`}),shakeVerticalOut:t=>({transform:`translateY(${t}px)`}),maskUpIn:t=>({transform:`translateY(${t}px)`,overflow:"hidden"}),maskUpOut:t=>({transform:`translateY(${t}px)`,overflow:"hidden"}),maskDownIn:t=>({transform:`translateY(${t}px)`,overflow:"hidden"}),maskDownOut:t=>({transform:`translateY(${t}px)`,overflow:"hidden"}),moveTranslateY:t=>({transform:`translateY(${t}%)`}),"hide-show":t=>({opacity:t}),hide:t=>({opacity:t}),show:t=>({opacity:t}),borderRadius:t=>({borderRadius:`${t}px`,overflow:"hidden"}),"corner-radius":t=>({borderRadius:`${t}px`,overflow:"hidden"})}),Z=(t,i=0)=>{const e=[],r=t/5;for(let l=0;l<6;l+=1)e.push(l*r+i);return e},O=(t,i,e,r=!1)=>{const{from:l,to:o,ease:$}=i,p=i.durationInFrames||30,d=Number(l),a=Number(o),n=Math.max(1,Number(p));if(isNaN(d)||isNaN(a))return console.error("Invalid animation values:",{from:l,to:o,animationDurationInFrames:p,property:i.property}),d;p===void 0&&console.warn(`durationInFrames is undefined for animation: ${i.property}. Using 1 frame as default.`);const c=i.delay||0;if(i.property==="hide-show"||i.property==="hide"||i.property==="show")return t<c?d:a;let g;if(i.property==="moveScaleIn"?g=r?[e-n-c,e-n*.5-c]:[c+n*.5,c+n]:i.property==="moveTranslateY"?g=r?[e-n*.5-c,e-c]:[c,c+n*.5]:g=r?[e-n-c,e-c]:[c,c+n],i.property.includes("shake")){const b=r?Z(n,e-n-c):Z(n,c);return w.interpolate(t,b,[0,d,a,d,a,0],{extrapolateLeft:"clamp",extrapolateRight:"clamp",easing:$})}return w.interpolate(t,g,[d,a],{extrapolateLeft:"clamp",extrapolateRight:"clamp",easing:$})},H=t=>{if(t==null)return 0;if(typeof t=="number")return Number.isNaN(t)?0:t;if(typeof t=="object"){if(t.rotate!==void 0&&t.rotate!==null){const l=parseFloat(String(t.rotate));if(!Number.isNaN(l))return l}if(t.rotation!==void 0&&t.rotation!==null){const l=parseFloat(String(t.rotation));if(!Number.isNaN(l))return l}return t.transform?H(t.transform):0}const i=String(t),e=/rotate\((-?[\d.]+)deg\)/.exec(i);if(e)return parseFloat(e[1])||0;const r=/matrix\(([^)]+)\)/.exec(i);if(r){const l=r[1].split(",").map(o=>parseFloat(o.trim()));if(l.length>=4){const[o,$]=l;return Math.atan2($,o)*(180/Math.PI)}}return 0},q=(t,i,e,r,l)=>{var d,a,n,c,g;const{property:o}=t;if(o==="move"){const b=Number(((d=t.details)==null?void 0:d.fromX)??t.from??0),Y=Number(((a=t.details)==null?void 0:a.toX)??t.to??0),E=Number(((n=t.details)==null?void 0:n.fromY)??0),X=Number(((c=t.details)==null?void 0:c.toY)??0),L=Number(((g=t.details)==null?void 0:g.scale)||1)||1;let I=l;if(I==null||Number.isNaN(I)){const A=t.details;I=H((A==null?void 0:A.rotate)??(A==null?void 0:A.rotation)??(A==null?void 0:A.transform))}const j=t.delay||0,k=t.durationInFrames||30,u=r?[e-k-j,e-j]:[j,j+k],y=w.interpolate(i,u,[b,Y],{extrapolateLeft:"clamp",extrapolateRight:"clamp",easing:t.ease}),f=w.interpolate(i,u,[E,X],{extrapolateLeft:"clamp",extrapolateRight:"clamp",easing:t.ease}),v=(I||0)*Math.PI/180,m=Math.cos(v),N=Math.sin(v),h=y*m+f*N,S=-y*N+f*m,R=h/L,C=S/L;return{transform:`translateX(${R}px) translateY(${C}px)`}}const $=O(i,t,e,r),p=z();return(p[o]||p.default)($)},B=(t,i,e,r=!1,l=!1,o)=>P.useMemo(()=>{if(t.length===0)return{};const $=t.filter(p=>p.from!==void 0&&p.to!==void 0);if($.length!==t.length&&console.error("Some animations are invalid and will be ignored"),l){const p=[];return $.reverse().forEach(a=>{const n=q(a,e,i,!1,o);p.push(n)}),p.reduce((a,n)=>(Object.keys(n).forEach(c=>{c==="transform"||c==="filter"?a[c]=a[c]?`${a[c]} ${n[c]}`:n[c]:a[c]=n[c]}),a),{})}else return $.map(d=>q(d,e,i,r,o)).reduce((d,a)=>(Object.keys(a).forEach(n=>{n==="transform"||n==="filter"?d[n]=d[n]?`${d[n]} ${a[n]}`:a[n]:d[n]=a[n]}),d),{})},[t,e,i,r,o]),F=t=>t?Array.isArray(t)?t:[t]:[],D=(...t)=>{const i=[];return t.forEach(e=>{Array.isArray(e)?i.push(...e):e&&i.push(e)}),i.filter(e=>e!==void 0).reduce((e,r)=>e.find(o=>o.property===r.property)?e.map(o=>o.property===r.property?{...o,from:Math.min(o.from,r.from),to:Math.max(o.to,r.to),durationInFrames:Math.max(o.durationInFrames,r.durationInFrames),delay:Math.min(o.delay||0,r.delay||0),ease:$=>(o.ease($)+r.ease($))/2}:o):[...e,r],[])},G=({animationIn:t,animationOut:i,durationInFrames:e,children:r,style:l={},frame:o,isTransition:$=!1,basicCharAnimationsIn:p=[],basicCharAnimationsOut:d=[]})=>{const a=H((l==null?void 0:l.transform)||(l==null?void 0:l.rotate)||(l==null?void 0:l.rotation)),n=B(F(t),e,o,!1,!1,a),c=B(F(i),e,o,!0,!1,a),g=B(F(p),e,o,!0,!1,a),b=B(F(d),e,o,!0,!1,a),Y=P.useMemo(()=>{const f=Object.keys(n).length>0,v=t==null?void 0:t.reduce((N,h)=>Math.min(N,h.delay||0),1/0),m=o-(v||0);return f&&m<0?{visibility:$?"visible":"hidden"}:n},[n,o,t,$]),E=P.useMemo(()=>{if(o>e)return{visibility:$?"visible":"hidden"};const f=F(i);if(!f||f.length===0)return{};let v=0;f.forEach(N=>{const h=(N.durationInFrames||0)+(N.delay||0);h>v&&(v=h)});const m=Math.max(0,e-v);return o<m?{}:c},[c,o,i,e,$]),X=P.useMemo(()=>{const f={...Y};return Object.entries(E).forEach(([v,m])=>{v==="transform"?f[v]=`${f[v]||""} ${m||""}`.trim():v in f&&typeof f[v]=="number"&&typeof m=="number"?f[v]=f[v]*m:f[v]=m}),f},[Y,E]),L=P.useMemo(()=>{const f=X.transform||"",{translateX:v,translateY:m,scale:N,rotation:h,rotateX:S,rotateY:R,rotateZ:C}=U(f);return`${h} ${v} ${m} ${N} ${S} ${R} ${C}`.trim()},[X]),{top:I,left:j,position:k,transform:u,...y}=l||{};return x.jsx("div",{style:{width:"100%",height:"100%",overflow:X.overflow||g.overflow||b.overflow||"visible",pointerEvents:"none"},children:x.jsx("div",{style:{width:"100%",height:"100%",...y,...X,overflow:"visible",transform:L,pointerEvents:"none",background:Object.keys(X).length===0?"transparent":X.backgroundColor},children:r})})},U=t=>{let i="",e="",r="scale(1)",l="",o="",$="",p="";const d=t.match(/translateX\([^)]+\)/g);d&&(i=d[d.length-1]);const a=t.match(/translateY\([^)]+\)/g);a&&(e=a[a.length-1]);const n=t.match(/scale\([^)]+\)/g);n&&(r=n[n.length-1]);const c=t.match(/rotate\([^)]+\)/g);c&&(l=c[c.length-1]);const g=t.match(/rotateX\([^)]+\)/g);g&&(o=g[g.length-1]);const b=t.match(/rotateY\([^)]+\)/g);b&&($=b[b.length-1]);const Y=t.match(/rotateZ\([^)]+\)/g);return Y&&(p=Y[Y.length-1]),{translateX:i,translateY:e,scale:r,rotation:l,rotateX:o,rotateY:$,rotateZ:p}},J=({animationTimed:t,durationInFrames:i,children:e,style:r={},frame:l})=>{const o=H((r==null?void 0:r.transform)||(r==null?void 0:r.rotate)||(r==null?void 0:r.rotation)),$=B(F(t),i,l,!1,!0,o),p=P.useMemo(()=>({...$}),[$]),d=!!p.borderRadius;return x.jsx("div",{style:{overflow:d?"hidden":p.overflow||"visible",borderRadius:p.borderRadius,pointerEvents:"none",height:r.height||"100%",width:r.width||"100%",...p,...d?{overflow:"hidden"}:{}},children:x.jsx("div",{style:{overflow:d?"hidden":"visible",borderRadius:p.borderRadius,pointerEvents:"none",height:"100%",width:"100%",display:"flex",alignItems:"center",justifyContent:"center"},children:e})})},K=t=>{if(typeof(t==null?void 0:t.ease)=="function")return t.ease;switch(t==null?void 0:t.easing){case"ease-in":case"accelerate":return w.Easing.in(w.Easing.cubic);case"ease-out":case"smooth":case"slowDown":return w.Easing.out(w.Easing.cubic);case"ease-in-out":case"natural":case"swing":return w.Easing.inOut(w.Easing.cubic);case"bounce":return w.Easing.bounce;case"elastic":return w.Easing.elastic(1);case"overshoot":case"impulse":return w.Easing.out(w.Easing.back(1.7));case"none":case"linear":default:return w.Easing.linear}},Q=({children:t,currentWidth:i,currentHeight:e,frame:r,item:l,keyframeAnimations:o,durationInFrames:$})=>{var W,_;if(!o||!Array.isArray(o)||o.length===0)return x.jsx(x.Fragment,{children:t});const p=s=>{var V,T;return!!((V=s==null?void 0:s.property)!=null&&V.includes("maskReveal")||(T=s==null?void 0:s.id)!=null&&T.includes("maskReveal"))},d=s=>{var V,T;return!!((s==null?void 0:s.type)==="exit"||(V=s==null?void 0:s.property)!=null&&V.includes("Out")||(T=s==null?void 0:s.id)!=null&&T.includes("Out"))},a=o.find(s=>p(s)&&!d(s)),n=o.find(s=>p(s)&&d(s));if(!a&&!n)return x.jsx(x.Fragment,{children:t});const c=Math.max(1,$||300);let g=null,b=!1,Y=30,E=0;if(n){const s=Math.max(1,Number(n.durationInFrames||30)),V=Math.max(0,Number(n.delay||0)),T=Math.max(0,c-s-V);r>=T&&(g=n,b=!0,Y=s,E=r-T)}if(!g&&a){g=a,b=!1,Y=Math.max(1,Number(a.durationInFrames||30));const s=Math.max(0,Number(a.delay||0));E=r-s}if(!g)return x.jsx(x.Fragment,{children:t});const X=a?Math.max(0,Number(a.delay||0)):0,L=a?Math.max(1,Number(a.durationInFrames||30)):30;if(!b&&a&&r>=X+L)return x.jsx("div",{style:{width:"100%",height:"100%",position:"relative",overflow:"visible"},children:t});if(!b&&a&&r<X)return x.jsx("div",{style:{width:"100%",height:"100%",position:"relative",visibility:"hidden"},children:t});const I=Math.max(0,E),j=Math.min(Math.max(0,I/Y),1),k=K(g),u=Math.max(0,Math.min(1,k(j))),y=String(g.property||g.id||""),f=((W=g.details)==null?void 0:W.direction)||"up",v=y.includes("ShrinkScale"),m=y.includes("CenterScale"),N=y.includes("Slide")||y.includes("slide");let h,S="";if(m){const s=b?50*u:50*(1-u);h=`inset(
+      ${s}%
       0%
-      ${r}%
+      ${s}%
       0%
-    )`}else if(P){const r=d?25*c:25*(1-c);m=`inset(
-      ${r}%
-      ${r}%
-      ${r}%
-      ${r}%
-    )`}else if(B)m="inset(0% 0% 0% 0%)",d?y==="down"?h=`translateY(${100*c}%)`:y==="left"?h=`translateX(${-100*c}%)`:y==="right"?h=`translateX(${100*c}%)`:h=`translateY(${-100*c}%)`:y==="down"?h=`translateY(${-100*(1-c)}%)`:y==="left"?h=`translateX(${100*(1-c)}%)`:y==="right"?h=`translateX(${-100*(1-c)}%)`:h=`translateY(${100*(1-c)}%)`;else if(j.includes("Center"))m=`circle(${d?150*(1-c):150*c}% at 50% 50%)`;else if(j.includes("Corner")){const r=d?c:1-c;y==="down"?m=`inset(0 ${100*r}% ${100*r}% 0)`:y==="up"?m=`inset(${100*r}% ${100*r}% 0 0)`:y==="left"?m=`inset(0 0 ${100*r}% ${100*r}%)`:y==="right"?m=`inset(${100*r}% 0 0 ${100*r}%)`:m=`inset(0 ${100*r}% ${100*r}% 0)`}else d?y==="down"?m=`inset(${100*c}% 0 0 0)`:y==="left"?m=`inset(0 ${100*c}% 0 0)`:y==="right"?m=`inset(0 0 0 ${100*c}%)`:m=`inset(0 0 ${100*c}% 0)`:y==="down"?m=`inset(0 0 ${100*(1-c)}% 0)`:y==="left"?m=`inset(0 0 0 ${100*(1-c)}%)`:y==="right"?m=`inset(0 ${100*(1-c)}% 0 0)`:m=`inset(${100*(1-c)}% 0 0 0)`;const b=!!((L=l==null?void 0:l.details)!=null&&L.scale||l!=null&&l.scale);let M=1;_||P?M=d?1+.5*c:1.5-.5*c:b&&(M=d?1-.2*c:.8+.2*c);const N=[h,`scale(${M})`].filter(Boolean).join(" ");return console.log("[MaskAnim] Rendering:",{propName:j,frame:i,localFrame:w,animDuration:x,progress:Y,easedProgress:c,isOut:d,isShrinkScale:P,isCenterScale:_,isSlide:B,direction:y,clipPath:m,translateTransform:h,isScale:b,scaleValue:M,innerTransform:N}),S.jsx("div",{style:{width:f!==void 0?f:"100%",height:s!==void 0?s:"100%",position:"relative",clipPath:m,WebkitClipPath:m,overflow:"hidden"},children:S.jsx("div",{style:{width:"100%",height:"100%",transform:N,transformOrigin:"center"},children:t})})};X.BoxAnim=J,X.ContentAnim=K,X.MaskAnim=R,X.combine=G,X.combineAnimations=T,X.extractTransformations=W,X.useAnimation=I,Object.defineProperty(X,Symbol.toStringTag,{value:"Module"})});
+    )`}else if(v){const s=b?25*u:25*(1-u);h=`inset(
+      ${s}%
+      ${s}%
+      ${s}%
+      ${s}%
+    )`}else if(N)h="inset(0% 0% 0% 0%)",b?f==="down"?S=`translateY(${100*u}%)`:f==="left"?S=`translateX(${-100*u}%)`:f==="right"?S=`translateX(${100*u}%)`:S=`translateY(${-100*u}%)`:f==="down"?S=`translateY(${-100*(1-u)}%)`:f==="left"?S=`translateX(${100*(1-u)}%)`:f==="right"?S=`translateX(${-100*(1-u)}%)`:S=`translateY(${100*(1-u)}%)`;else if(y.includes("Center"))h=`circle(${b?150*(1-u):150*u}% at 50% 50%)`;else if(y.includes("Corner")){const s=b?u:1-u;f==="down"?h=`inset(0 ${100*s}% ${100*s}% 0)`:f==="up"?h=`inset(${100*s}% ${100*s}% 0 0)`:f==="left"?h=`inset(0 0 ${100*s}% ${100*s}%)`:f==="right"?h=`inset(${100*s}% 0 0 ${100*s}%)`:h=`inset(0 ${100*s}% ${100*s}% 0)`}else b?f==="down"?h=`inset(${100*u}% 0 0 0)`:f==="left"?h=`inset(0 ${100*u}% 0 0)`:f==="right"?h=`inset(0 0 0 ${100*u}%)`:h=`inset(0 0 ${100*u}% 0)`:f==="down"?h=`inset(0 0 ${100*(1-u)}% 0)`:f==="left"?h=`inset(0 0 0 ${100*(1-u)}%)`:f==="right"?h=`inset(0 ${100*(1-u)}% 0 0)`:h=`inset(${100*(1-u)}% 0 0 0)`;const R=!!((_=g==null?void 0:g.details)!=null&&_.scale||g!=null&&g.scale);let C=1;m||v?C=b?1+.5*u:1.5-.5*u:R&&(C=b?1-.2*u:.8+.2*u);const A=[S,`scale(${C})`].filter(Boolean).join(" ");return console.log("[MaskAnim] Rendering:",{propName:y,frame:r,localFrame:E,animDuration:Y,progress:j,easedProgress:u,isOut:b,isShrinkScale:v,isCenterScale:m,isSlide:N,direction:f,clipPath:h,translateTransform:S,isScale:R,scaleValue:C,innerTransform:A}),x.jsx("div",{style:{width:i!==void 0?i:"100%",height:e!==void 0?e:"100%",position:"relative",clipPath:h,WebkitClipPath:h,overflow:"hidden"},children:x.jsx("div",{style:{width:"100%",height:"100%",transform:A,transformOrigin:"center"},children:t})})};M.BoxAnim=G,M.ContentAnim=J,M.MaskAnim=Q,M.combine=D,M.combineAnimations=F,M.extractTransformations=U,M.useAnimation=B,Object.defineProperty(M,Symbol.toStringTag,{value:"Module"})});

package/dist/mask.d.ts

@@ -1,6 +1,6 @@
 import { default as React } from 'react';
 
-export declare const MaskWrapper: ({ children, currentWidth: _currentWidth, currentHeight: _currentHeight, frame, item: _item, keyframeAnimations, durationInFrames: itemDurationInFrames, }: {
+export declare const MaskWrapper: ({ children, currentWidth: _currentWidth, currentHeight: _currentHeight, frame, item: _item, keyframeAnimations, durationInFrames: itemDurationInFrames }: {
     children: React.ReactNode;
     currentWidth?: number;
     currentHeight?: number;
@@ -9,7 +9,7 @@ export declare const MaskWrapper: ({ children, currentWidth: _currentWidth, curr
     keyframeAnimations: any;
     durationInFrames?: number;
 }) => React.JSX.Element;
-export declare const MaskAnim: ({ children, currentWidth: _currentWidth, currentHeight: _currentHeight, frame, item: _item, keyframeAnimations, durationInFrames: itemDurationInFrames, }: {
+export declare const MaskAnim: ({ children, currentWidth: _currentWidth, currentHeight: _currentHeight, frame, item: _item, keyframeAnimations, durationInFrames: itemDurationInFrames }: {
     children: React.ReactNode;
     currentWidth?: number;
     currentHeight?: number;

package/dist/use-animation.d.ts

@@ -9,6 +9,11 @@ export interface Animation {
     delay?: number;
     persist?: boolean;
 }
-export declare const useAnimation: (animations: Animation[], durationInFrames: number, frame: number, isOut?: boolean, isTimed?: boolean) => React.CSSProperties;
+export declare const extractRotationAngle: (transformOrDetails?: string | number | {
+    rotate?: any;
+    rotation?: any;
+    transform?: string;
+}) => number;
+export declare const useAnimation: (animations: Animation[], durationInFrames: number, frame: number, isOut?: boolean, isTimed?: boolean, rotationAngle?: number) => React.CSSProperties;
 export declare const combineAnimations: (animations: Animation | Animation[] | undefined) => Animation[];
 export declare const combine: (...animations: (Animation | Animation[] | undefined)[]) => Animation[];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cliquify.me/animations",
-  "version": "9.0.11",
+  "version": "9.0.13",
   "private": false,
   "publishConfig": {
     "access": "public"
@@ -26,7 +26,7 @@
     "typescript": "^5.3.3",
     "vite": "^5.2.0",
     "vite-plugin-dts": "^3.9.1",
-    "@cliquify.me/types": "8.0.10",
+    "@cliquify.me/types": "8.0.12",
     "@cliquify.me/typescript-config": "0.0.2"
   },
   "dependencies": {
@@ -38,7 +38,7 @@
     "@designcombo/events": "^1.0.2",
     "react": "^18.2.0 || ^19.0.0",
     "remotion": "4.0.506",
-    "@cliquify.me/types": "8.0.10"
+    "@cliquify.me/types": "8.0.12"
   },
   "scripts": {
     "dev": "vite",