@cliquify.me/animations 9.0.12 → 9.0.13

package/dist/index.es.js

@@ -1,7 +1,7 @@
-import { jsx as N, Fragment as H } from "react/jsx-runtime";
-import C, { useMemo as W } from "react";
-import { interpolate as B, Easing as A } 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 = [], c = t / 5;
-  for (let m = 0; m < 6; m += 1)
-    s.push(m * c + f);
-  return s;
-}, q = (t, f, s, c = !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 = c ? [
-    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 = c ? [
-    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 = c ? [
-    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 = c ? Z(
-      e,
-      s - e - n
-    ) : Z(e, n);
-    return B(
+    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 B(t, l, [p, o], {
+  return H(t, $, [d, a], {
     extrapolateLeft: "clamp",
     extrapolateRight: "clamp",
-    easing: $
+    easing: g
   });
-}, U = (t, f, s, c) => {
-  var u, p, o, e, n;
-  const { property: m } = t;
-  if (m === "move") {
-    const l = Number(((u = t.details) == null ? void 0 : u.fromX) ?? t.from ?? 0), d = Number(((p = t.details) == null ? void 0 : p.toX) ?? t.to ?? 0), S = Number(((o = t.details) == null ? void 0 : o.fromY) ?? 0), M = Number(((e = t.details) == null ? void 0 : e.toY) ?? 0), x = Number(((n = t.details) == null ? void 0 : n.scale) || 1) || 1, Y = t.delay || 0, V = t.durationInFrames || 30, y = c ? [s - V - Y, s - Y] : [Y, Y + V], F = B(f, y, [l, d], {
+}, 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
-    }), i = B(f, y, [S, M], {
+    }), f = H(l, u, [R, N], {
       extrapolateLeft: "clamp",
       extrapolateRight: "clamp",
       easing: t.ease
-    }), X = F / x, g = i / x;
+    }), 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(${X}px) translateY(${g}px)`
+      transform: `translateX(${F}px) translateY(${I}px)`
     };
   }
-  const a = q(f, t, s, c), $ = z();
-  return ($[m] || $.default)(a);
-}, I = (t, f, s, c = !1, m = !1) => C.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, S = z(), M = e.property === "move" ? (() => {
-          var i, X, g;
-          const x = Number(((i = e.details) == null ? void 0 : i.toX) ?? e.to ?? 0), Y = Number(((X = e.details) == null ? void 0 : X.toY) ?? 0), V = Number(((g = e.details) == null ? void 0 : g.scale) || 1) || 1, y = x / V, F = Y / V;
-          return {
-            transform: `translateX(${y}px) translateY(${F}px)`
-          };
-        })() : (S[e.property] || S.default)(d);
-        Object.keys(M).forEach((x) => {
-          x === "transform" ? u[x] = u[x] ? {
-            [x]: `${u[x][x]} ${M[x]}`
-          } : M : u[x] = M;
-        });
-      }
-      $.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, c)).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, c]), j = (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, c) => s.find(
-    (a) => a.property === c.property
-  ) ? s.map(
-    (a) => a.property === c.property ? {
-      ...a,
-      from: Math.min(a.from, c.from),
-      to: Math.max(a.to, c.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,
-        c.durationInFrames
+        s.durationInFrames,
+        r.durationInFrames
       ),
-      delay: Math.min(a.delay || 0, c.delay || 0),
-      ease: ($) => (a.ease($) + c.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, c], []);
-}, rt = ({
+    } : s
+  ) : [...e, r], []);
+}, ot = ({
   animationIn: t,
-  animationOut: f,
-  durationInFrames: s,
-  children: c,
-  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 b;
-  const o = I(
-    j(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 = I(
-    j(f),
+    !1,
+    !1,
+    a
+  ), c = T(
+    P(l),
+    e,
     s,
-    a,
-    !0
-  ), n = I(
-    j(u),
+    !0,
+    !1,
+    a
+  ), $ = T(
+    P(p),
+    e,
     s,
-    a,
-    !0
-  ), l = I(
-    j(p),
+    !0,
+    !1,
+    a
+  ), b = T(
+    P(d),
+    e,
     s,
-    a,
-    !0
-  ), d = C.useMemo(() => {
-    const h = Object.keys(o).length > 0, v = t == null ? void 0 : t.reduce(
-      (O, R) => Math.min(O, R.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
-    ), w = a - (v || 0);
-    return h && w < 0 ? { visibility: $ ? "visible" : "hidden" } : o;
-  }, [o, a, t]), S = C.useMemo(() => {
-    if (a > s)
-      return { visibility: $ ? "visible" : "hidden" };
-    const h = j(f);
-    if (!h || h.length === 0) return {};
+    ), 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;
-    h.forEach((O) => {
-      const R = (O.durationInFrames || 0) + (O.delay || 0);
-      R > v && (v = R);
+    f.forEach((S) => {
+      const h = (S.durationInFrames || 0) + (S.delay || 0);
+      h > v && (v = h);
     });
-    const w = Math.max(0, s - v);
-    return a < w ? {} : e;
-  }, [e, a, f, s, $]), x = ((m == null ? void 0 : m.transform) || "").match(/rotate\((-?[\d.]+)deg\)/), Y = x ? parseFloat(x[1]) : 0, V = -Y, y = C.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(S).forEach(([v, w]) => {
-      v === "transform" ? h[v] = `${h[v] || ""} ${w || ""}`.trim() : v in h && typeof h[v] == "number" && typeof w == "number" ? h[v] = h[v] * w : h[v] = w;
-    }), h;
-  }, [d, S]);
-  if ((b = y.transform) != null && b.includes("rotate")) {
-    const h = y.transform;
-    y.transform = h.replace(
-      /rotate\(([^)]+)deg\)/,
-      (v, w) => `rotate(${parseFloat(w) - V}deg)`
-    );
-  }
-  const F = W(() => {
-    const h = y.transform || "", {
+    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: w,
-      scale: O,
-      rotation: R,
-      rotateX: P,
-      rotateY: r,
-      rotateZ: E
-    } = G(h);
-    return `${v} ${w} ${O} ${R || `rotate(${Y}deg)`} ${P} ${r} ${E}`.trim();
-  }, [y, Y]);
-  let i = o;
-  Y > 0 && i.transform && i.transform.includes("translateX") && (i = {
-    ...i,
-    transform: i.transform.replace(
-      /translateX\(([^)]+)\)/g,
-      (h, v) => `translateX(${parseFloat(v)}%)`
-    )
-  });
-  const {
-    top: X,
-    left: g,
-    position: T,
-    transform: _,
-    ...L
-  } = m || {};
-  return /* @__PURE__ */ N(
+      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: y.overflow || n.overflow || l.overflow || "visible",
+        overflow: N.overflow || $.overflow || b.overflow || "visible",
         pointerEvents: "none"
       },
-      children: /* @__PURE__ */ N(
+      children: /* @__PURE__ */ X(
         "div",
         {
           style: {
             width: "100%",
             height: "100%",
-            ...L,
-            ...y,
-            rotate: `${V}deg`,
+            ...M,
+            ...N,
             overflow: "visible",
-            transform: F,
+            transform: j,
             pointerEvents: "none",
-            background: Object.keys(y).length === 0 ? "transparent" : y.backgroundColor
+            background: Object.keys(N).length === 0 ? "transparent" : N.backgroundColor
           },
-          children: c
+          children: r
         }
       )
     }
   );
-}, G = (t) => {
-  let f = "", s = "", c = "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 && (c = 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 S = t.match(/rotateZ\([^)]+\)/g);
-  return S && (u = S[S.length - 1]), { translateX: f, translateY: s, scale: c, 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: c = {},
-  frame: m
+  durationInFrames: l,
+  children: e,
+  style: r = {},
+  frame: i
 }) => {
-  var l;
-  const a = I(
-    j(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 = ((c == null ? void 0 : c.transform) || "").match(/rotate\((-?[\d.]+)deg\)/), p = u ? parseFloat(u[1]) : 0, o = -p, e = C.useMemo(() => ({
-    ...a
-  }), [a]);
-  if ((l = e.transform) != null && l.includes("rotate")) {
-    const d = e.transform;
-    e.transform = d.replace(
-      /rotate\(([^)]+)deg\)/,
-      (S, M) => `rotate(${parseFloat(M) - o}deg)`
-    );
-  }
-  let n = e;
-  return p > 0 && n.transform && n.transform.includes("translateX") && (n = {
-    ...n,
-    transform: n.transform.replace(
-      /translateX\(([^)]+)\)/g,
-      (d, S) => `translateX(${parseFloat(S)}%)`
-    )
-  }), /* @__PURE__ */ N(
+    !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: c.height || "100%",
-        width: c.width || "100%",
-        ...n
+        height: r.height || "100%",
+        width: r.width || "100%",
+        ...p,
+        ...d ? { overflow: "hidden" } : {}
       },
-      children: /* @__PURE__ */ N(
+      children: /* @__PURE__ */ X(
         "div",
         {
           style: {
-            overflow: "visible",
+            overflow: d ? "hidden" : "visible",
+            borderRadius: p.borderRadius,
             pointerEvents: "none",
             height: "100%",
             width: "100%",
@@ -411,79 +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 A.in(A.cubic);
+      return y.in(y.cubic);
     case "ease-out":
     case "smooth":
     case "slowDown":
-      return A.out(A.cubic);
+      return y.out(y.cubic);
     case "ease-in-out":
     case "natural":
     case "swing":
-      return A.inOut(A.cubic);
+      return y.inOut(y.cubic);
     case "bounce":
-      return A.bounce;
+      return y.bounce;
     case "elastic":
-      return A.elastic(1);
+      return y.elastic(1);
     case "overshoot":
     case "impulse":
-      return A.out(A.back(1.7));
+      return y.out(y.back(1.7));
     case "none":
     case "linear":
     default:
-      return A.linear;
+      return y.linear;
   }
-}, K = ({
+}, O = ({
   children: t,
-  currentWidth: f,
-  currentHeight: s,
-  frame: c,
-  item: m,
-  keyframeAnimations: a,
-  durationInFrames: $
+  currentWidth: l,
+  currentHeight: e,
+  frame: r,
+  item: i,
+  keyframeAnimations: s,
+  durationInFrames: g
 }) => {
-  var R, P;
-  if (!a || !Array.isArray(a) || a.length === 0)
-    return /* @__PURE__ */ N(H, { children: t });
-  const u = (r) => {
-    var E, D;
-    return !!((E = r == null ? void 0 : r.property) != null && E.includes("maskReveal") || (D = r == null ? void 0 : r.id) != null && D.includes("maskReveal"));
-  }, p = (r) => {
-    var E, D;
-    return !!((r == null ? void 0 : r.type) === "exit" || (E = r == null ? void 0 : r.property) != null && E.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__ */ N(H, { children: t });
-  const n = Math.max(1, $ || 300);
-  let l = null, d = !1, S = 30, M = 0;
-  if (e) {
-    const r = Math.max(1, Number(e.durationInFrames || 30)), E = Math.max(0, Number(e.delay || 0)), D = Math.max(0, n - r - E);
-    c >= D && (l = e, d = !0, S = r, M = c - 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, S = Math.max(1, Number(o.durationInFrames || 30));
-    const r = Math.max(0, Number(o.delay || 0));
-    M = c - 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__ */ N(H, { children: t });
-  const x = o ? Math.max(0, Number(o.delay || 0)) : 0, Y = o ? Math.max(1, Number(o.durationInFrames || 30)) : 30;
-  if (!d && o && c >= x + Y)
-    return /* @__PURE__ */ N(
+  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: {
@@ -495,8 +509,8 @@ const z = () => ({
         children: t
       }
     );
-  if (!d && o && c < x)
-    return /* @__PURE__ */ N(
+  if (!b && a && r < N)
+    return /* @__PURE__ */ X(
       "div",
       {
         style: {
@@ -508,72 +522,72 @@ const z = () => ({
         children: t
       }
     );
-  const V = Math.max(0, M), y = Math.min(Math.max(0, V / S), 1), F = J(l), i = Math.max(0, Math.min(1, F(y))), X = String(l.property || l.id || ""), g = ((R = l.details) == null ? void 0 : R.direction) || "up", T = X.includes("ShrinkScale"), _ = X.includes("CenterScale"), L = X.includes("Slide") || X.includes("slide");
-  let b, h = "";
-  if (_) {
-    const r = d ? 50 * i : 50 * (1 - i);
-    b = `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 (T) {
-    const r = d ? 25 * i : 25 * (1 - i);
-    b = `inset(
-      ${r}%
-      ${r}%
-      ${r}%
-      ${r}%
+  } else if (v) {
+    const o = b ? 25 * u : 25 * (1 - u);
+    h = `inset(
+      ${o}%
+      ${o}%
+      ${o}%
+      ${o}%
     )`;
-  } else if (L)
-    b = "inset(0% 0% 0% 0%)", d ? g === "down" ? h = `translateY(${100 * i}%)` : g === "left" ? h = `translateX(${-100 * i}%)` : g === "right" ? h = `translateX(${100 * i}%)` : h = `translateY(${-100 * i}%)` : g === "down" ? h = `translateY(${-100 * (1 - i)}%)` : g === "left" ? h = `translateX(${100 * (1 - i)}%)` : g === "right" ? h = `translateX(${-100 * (1 - i)}%)` : h = `translateY(${100 * (1 - i)}%)`;
-  else if (X.includes("Center"))
-    b = `circle(${d ? 150 * (1 - i) : 150 * i}% at 50% 50%)`;
-  else if (X.includes("Corner")) {
-    const r = d ? i : 1 - i;
-    g === "down" ? b = `inset(0 ${100 * r}% ${100 * r}% 0)` : g === "up" ? b = `inset(${100 * r}% ${100 * r}% 0 0)` : g === "left" ? b = `inset(0 0 ${100 * r}% ${100 * r}%)` : g === "right" ? b = `inset(${100 * r}% 0 0 ${100 * r}%)` : b = `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 ? g === "down" ? b = `inset(${100 * i}% 0 0 0)` : g === "left" ? b = `inset(0 ${100 * i}% 0 0)` : g === "right" ? b = `inset(0 0 0 ${100 * i}%)` : b = `inset(0 0 ${100 * i}% 0)` : g === "down" ? b = `inset(0 0 ${100 * (1 - i)}% 0)` : g === "left" ? b = `inset(0 0 0 ${100 * (1 - i)}%)` : g === "right" ? b = `inset(0 ${100 * (1 - i)}% 0 0)` : b = `inset(${100 * (1 - i)}% 0 0 0)`;
-  const v = !!((P = l == null ? void 0 : l.details) != null && P.scale || l != null && l.scale);
-  let w = 1;
-  _ || T ? w = d ? 1 + 0.5 * i : 1.5 - 0.5 * i : v && (w = d ? 1 - 0.2 * i : 0.8 + 0.2 * i);
-  const O = [h, `scale(${w})`].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: X,
-    frame: c,
-    localFrame: M,
-    animDuration: S,
-    progress: y,
-    easedProgress: i,
-    isOut: d,
-    isShrinkScale: T,
-    isCenterScale: _,
-    isSlide: L,
-    direction: g,
-    clipPath: b,
-    translateTransform: h,
-    isScale: v,
-    scaleValue: w,
-    innerTransform: O
-  }), /* @__PURE__ */ N(
+    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: b,
-        WebkitClipPath: b,
+        clipPath: h,
+        WebkitClipPath: h,
         overflow: "hidden"
       },
-      children: /* @__PURE__ */ N(
+      children: /* @__PURE__ */ X(
         "div",
         {
           style: {
             width: "100%",
             height: "100%",
-            transform: O,
+            transform: Y,
             transformOrigin: "center"
           },
           children: t
@@ -581,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,
-  j as combineAnimations,
-  G as extractTransformations,
-  I 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(Y,w){typeof exports=="object"&&typeof module<"u"?w(exports,require("react/jsx-runtime"),require("react"),require("remotion")):typeof define=="function"&&define.amd?define(["exports","react/jsx-runtime","react","remotion"],w):(Y=typeof globalThis<"u"?globalThis:Y||self,w(Y.animations={},Y.jsxRuntime,Y.React,Y.remotion))})(this,function(Y,w,I,X){"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=[],c=t/5;for(let $=0;$<6;$+=1)s.push($*c+f);return s},z=(t,f,s,c=!1)=>{const{from:$,to:o,ease:g}=f,u=f.durationInFrames||30,p=Number($),n=Number(o),e=Math.max(1,Number(u));if(isNaN(p)||isNaN(n))return console.error("Invalid animation values:",{from:$,to:o,animationDurationInFrames:u,property:f.property}),p;u===void 0&&console.warn(`durationInFrames is undefined for animation: ${f.property}. Using 1 frame as default.`);const a=f.delay||0;let l;if(f.property==="moveScaleIn"?l=c?[s-e-a,s-e*.5-a]:[a+e*.5,a+e]:f.property==="moveTranslateY"?l=c?[s-e*.5-a,s-a]:[a,a+e*.5]:l=c?[s-e-a,s-a]:[a,a+e],f.property.includes("shake")){const d=c?q(e,s-e-a):q(e,a);return X.interpolate(t,d,[0,p,n,p,n,0],{extrapolateLeft:"clamp",extrapolateRight:"clamp",easing:g})}return X.interpolate(t,l,[p,n],{extrapolateLeft:"clamp",extrapolateRight:"clamp",easing:g})},U=(t,f,s,c)=>{var u,p,n,e,a;const{property:$}=t;if($==="move"){const l=Number(((u=t.details)==null?void 0:u.fromX)??t.from??0),d=Number(((p=t.details)==null?void 0:p.toX)??t.to??0),S=Number(((n=t.details)==null?void 0:n.fromY)??0),A=Number(((e=t.details)==null?void 0:e.toY)??0),x=Number(((a=t.details)==null?void 0:a.scale)||1)||1,E=t.delay||0,O=t.durationInFrames||30,M=c?[s-O-E,s-E]:[E,E+O],C=X.interpolate(f,M,[l,d],{extrapolateLeft:"clamp",extrapolateRight:"clamp",easing:t.ease}),i=X.interpolate(f,M,[S,A],{extrapolateLeft:"clamp",extrapolateRight:"clamp",easing:t.ease}),N=C/x,m=i/x;return{transform:`translateX(${N}px) translateY(${m}px)`}}const o=z(f,t,s,c),g=Z();return(g[$]||g.default)(o)},P=(t,f,s,c=!1,$=!1)=>I.useMemo(()=>{if(t.length===0)return{};const o=t.filter(g=>g.from!==void 0&&g.to!==void 0);if(o.length!==t.length&&console.error("Some animations are invalid and will be ignored"),$){const g=[],u={};o.reverse().forEach(e=>{const a=U(e,s,f,!1);if(e.persist===!0&&s-(e.delay||0)>=e.durationInFrames){const d=e.to,S=Z(),A=e.property==="move"?(()=>{var i,N,m;const x=Number(((i=e.details)==null?void 0:i.toX)??e.to??0),E=Number(((N=e.details)==null?void 0:N.toY)??0),O=Number(((m=e.details)==null?void 0:m.scale)||1)||1,M=x/O,C=E/O;return{transform:`translateX(${M}px) translateY(${C}px)`}})():(S[e.property]||S.default)(d);Object.keys(A).forEach(x=>{x==="transform"?u[x]=u[x]?{[x]:`${u[x][x]} ${A[x]}`}:A:u[x]=A})}g.push(a)});const n={...g.reduce((e,a)=>(Object.keys(a).forEach(l=>{l==="transform"||l==="filter"?e[l]=e[l]?`${e[l]} ${a[l]}`:a[l]:e[l]=a[l]}),e),{})};return Object.keys(u).forEach(e=>{const a=u[e];(e==="transform"||e==="filter")&&a[e]?n[e]=n[e]?`${n[e]} ${a[e]}`:String(a[e]):a[e]!==void 0&&(n[e]=a[e])}),n}else return o.map(u=>U(u,s,f,c)).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,c]),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,c)=>s.find(o=>o.property===c.property)?s.map(o=>o.property===c.property?{...o,from:Math.min(o.from,c.from),to:Math.max(o.to,c.to),durationInFrames:Math.max(o.durationInFrames,c.durationInFrames),delay:Math.min(o.delay||0,c.delay||0),ease:g=>(o.ease(g)+c.ease(g))/2}:o):[...s,c],[])},J=({animationIn:t,animationOut:f,durationInFrames:s,children:c,style:$={},frame:o,isTransition:g=!1,basicCharAnimationsIn:u=[],basicCharAnimationsOut:p=[]})=>{var b;const n=P(T(t),s,o,!1),e=P(T(f),s,o,!0),a=P(T(u),s,o,!0),l=P(T(p),s,o,!0),d=I.useMemo(()=>{const h=Object.keys(n).length>0,v=t==null?void 0:t.reduce((V,F)=>Math.min(V,F.delay||0),1/0),y=o-(v||0);return h&&y<0?{visibility:g?"visible":"hidden"}:n},[n,o,t]),S=I.useMemo(()=>{if(o>s)return{visibility:g?"visible":"hidden"};const h=T(f);if(!h||h.length===0)return{};let v=0;h.forEach(V=>{const F=(V.durationInFrames||0)+(V.delay||0);F>v&&(v=F)});const y=Math.max(0,s-v);return o<y?{}:e},[e,o,f,s,g]),x=(($==null?void 0:$.transform)||"").match(/rotate\((-?[\d.]+)deg\)/),E=x?parseFloat(x[1]):0,O=-E,M=I.useMemo(()=>{const h={...d};return Object.entries(S).forEach(([v,y])=>{v==="transform"?h[v]=`${h[v]||""} ${y||""}`.trim():v in h&&typeof h[v]=="number"&&typeof y=="number"?h[v]=h[v]*y:h[v]=y}),h},[d,S]);if((b=M.transform)!=null&&b.includes("rotate")){const h=M.transform;M.transform=h.replace(/rotate\(([^)]+)deg\)/,(v,y)=>`rotate(${parseFloat(y)-O}deg)`)}const C=I.useMemo(()=>{const h=M.transform||"",{translateX:v,translateY:y,scale:V,rotation:F,rotateX:H,rotateY:r,rotateZ:j}=W(h);return`${v} ${y} ${V} ${F||`rotate(${E}deg)`} ${H} ${r} ${j}`.trim()},[M,E]);let i=n;E>0&&i.transform&&i.transform.includes("translateX")&&(i={...i,transform:i.transform.replace(/translateX\(([^)]+)\)/g,(h,v)=>`translateX(${parseFloat(v)}%)`)});const{top:N,left:m,position:_,transform:B,...L}=$||{};return w.jsx("div",{style:{width:"100%",height:"100%",overflow:M.overflow||a.overflow||l.overflow||"visible",pointerEvents:"none"},children:w.jsx("div",{style:{width:"100%",height:"100%",...L,...M,rotate:`${O}deg`,overflow:"visible",transform:C,pointerEvents:"none",background:Object.keys(M).length===0?"transparent":M.backgroundColor},children:c})})},W=t=>{let f="",s="",c="scale(1)",$="",o="",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&&(c=e[e.length-1]);const a=t.match(/rotate\([^)]+\)/g);a&&($=a[a.length-1]);const l=t.match(/rotateX\([^)]+\)/g);l&&(o=l[l.length-1]);const d=t.match(/rotateY\([^)]+\)/g);d&&(g=d[d.length-1]);const S=t.match(/rotateZ\([^)]+\)/g);return S&&(u=S[S.length-1]),{translateX:f,translateY:s,scale:c,rotation:$,rotateX:o,rotateY:g,rotateZ:u}},K=({animationTimed:t,durationInFrames:f,children:s,style:c={},frame:$})=>{var l;const o=P(T(t),f,$,!1,!0),u=((c==null?void 0:c.transform)||"").match(/rotate\((-?[\d.]+)deg\)/),p=u?parseFloat(u[1]):0,n=-p,e=I.useMemo(()=>({...o}),[o]);if((l=e.transform)!=null&&l.includes("rotate")){const d=e.transform;e.transform=d.replace(/rotate\(([^)]+)deg\)/,(S,A)=>`rotate(${parseFloat(A)-n}deg)`)}let a=e;return p>0&&a.transform&&a.transform.includes("translateX")&&(a={...a,transform:a.transform.replace(/translateX\(([^)]+)\)/g,(d,S)=>`translateX(${parseFloat(S)}%)`)}),w.jsx("div",{style:{overflow:e.overflow||"visible",pointerEvents:"none",height:c.height||"100%",width:c.width||"100%",...a},children:w.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 X.Easing.in(X.Easing.cubic);case"ease-out":case"smooth":case"slowDown":return X.Easing.out(X.Easing.cubic);case"ease-in-out":case"natural":case"swing":return X.Easing.inOut(X.Easing.cubic);case"bounce":return X.Easing.bounce;case"elastic":return X.Easing.elastic(1);case"overshoot":case"impulse":return X.Easing.out(X.Easing.back(1.7));case"none":case"linear":default:return X.Easing.linear}},R=({children:t,currentWidth:f,currentHeight:s,frame:c,item:$,keyframeAnimations:o,durationInFrames:g})=>{var F,H;if(!o||!Array.isArray(o)||o.length===0)return w.jsx(w.Fragment,{children:t});const u=r=>{var j,D;return!!((j=r==null?void 0:r.property)!=null&&j.includes("maskReveal")||(D=r==null?void 0:r.id)!=null&&D.includes("maskReveal"))},p=r=>{var j,D;return!!((r==null?void 0:r.type)==="exit"||(j=r==null?void 0:r.property)!=null&&j.includes("Out")||(D=r==null?void 0:r.id)!=null&&D.includes("Out"))},n=o.find(r=>u(r)&&!p(r)),e=o.find(r=>u(r)&&p(r));if(!n&&!e)return w.jsx(w.Fragment,{children:t});const a=Math.max(1,g||300);let l=null,d=!1,S=30,A=0;if(e){const r=Math.max(1,Number(e.durationInFrames||30)),j=Math.max(0,Number(e.delay||0)),D=Math.max(0,a-r-j);c>=D&&(l=e,d=!0,S=r,A=c-D)}if(!l&&n){l=n,d=!1,S=Math.max(1,Number(n.durationInFrames||30));const r=Math.max(0,Number(n.delay||0));A=c-r}if(!l)return w.jsx(w.Fragment,{children:t});const x=n?Math.max(0,Number(n.delay||0)):0,E=n?Math.max(1,Number(n.durationInFrames||30)):30;if(!d&&n&&c>=x+E)return w.jsx("div",{style:{width:"100%",height:"100%",position:"relative",overflow:"visible"},children:t});if(!d&&n&&c<x)return w.jsx("div",{style:{width:"100%",height:"100%",position:"relative",visibility:"hidden"},children:t});const O=Math.max(0,A),M=Math.min(Math.max(0,O/S),1),C=Q(l),i=Math.max(0,Math.min(1,C(M))),N=String(l.property||l.id||""),m=((F=l.details)==null?void 0:F.direction)||"up",_=N.includes("ShrinkScale"),B=N.includes("CenterScale"),L=N.includes("Slide")||N.includes("slide");let b,h="";if(B){const r=d?50*i:50*(1-i);b=`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(_){const r=d?25*i:25*(1-i);b=`inset(
-      ${r}%
-      ${r}%
-      ${r}%
-      ${r}%
-    )`}else if(L)b="inset(0% 0% 0% 0%)",d?m==="down"?h=`translateY(${100*i}%)`:m==="left"?h=`translateX(${-100*i}%)`:m==="right"?h=`translateX(${100*i}%)`:h=`translateY(${-100*i}%)`:m==="down"?h=`translateY(${-100*(1-i)}%)`:m==="left"?h=`translateX(${100*(1-i)}%)`:m==="right"?h=`translateX(${-100*(1-i)}%)`:h=`translateY(${100*(1-i)}%)`;else if(N.includes("Center"))b=`circle(${d?150*(1-i):150*i}% at 50% 50%)`;else if(N.includes("Corner")){const r=d?i:1-i;m==="down"?b=`inset(0 ${100*r}% ${100*r}% 0)`:m==="up"?b=`inset(${100*r}% ${100*r}% 0 0)`:m==="left"?b=`inset(0 0 ${100*r}% ${100*r}%)`:m==="right"?b=`inset(${100*r}% 0 0 ${100*r}%)`:b=`inset(0 ${100*r}% ${100*r}% 0)`}else d?m==="down"?b=`inset(${100*i}% 0 0 0)`:m==="left"?b=`inset(0 ${100*i}% 0 0)`:m==="right"?b=`inset(0 0 0 ${100*i}%)`:b=`inset(0 0 ${100*i}% 0)`:m==="down"?b=`inset(0 0 ${100*(1-i)}% 0)`:m==="left"?b=`inset(0 0 0 ${100*(1-i)}%)`:m==="right"?b=`inset(0 ${100*(1-i)}% 0 0)`:b=`inset(${100*(1-i)}% 0 0 0)`;const v=!!((H=l==null?void 0:l.details)!=null&&H.scale||l!=null&&l.scale);let y=1;B||_?y=d?1+.5*i:1.5-.5*i:v&&(y=d?1-.2*i:.8+.2*i);const V=[h,`scale(${y})`].filter(Boolean).join(" ");return console.log("[MaskAnim] Rendering:",{propName:N,frame:c,localFrame:A,animDuration:S,progress:M,easedProgress:i,isOut:d,isShrinkScale:_,isCenterScale:B,isSlide:L,direction:m,clipPath:b,translateTransform:h,isScale:v,scaleValue:y,innerTransform:V}),w.jsx("div",{style:{width:f!==void 0?f:"100%",height:s!==void 0?s:"100%",position:"relative",clipPath:b,WebkitClipPath:b,overflow:"hidden"},children:w.jsx("div",{style:{width:"100%",height:"100%",transform:V,transformOrigin:"center"},children:t})})};Y.BoxAnim=J,Y.ContentAnim=K,Y.MaskAnim=R,Y.combine=G,Y.combineAnimations=T,Y.extractTransformations=W,Y.useAnimation=P,Object.defineProperty(Y,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/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.12",
+  "version": "9.0.13",
   "private": false,
   "publishConfig": {
     "access": "public"
@@ -26,8 +26,8 @@
     "typescript": "^5.3.3",
     "vite": "^5.2.0",
     "vite-plugin-dts": "^3.9.1",
-    "@cliquify.me/typescript-config": "0.0.2",
-    "@cliquify.me/types": "8.0.11"
+    "@cliquify.me/types": "8.0.12",
+    "@cliquify.me/typescript-config": "0.0.2"
   },
   "dependencies": {
     "remotion": "4.0.506",
@@ -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.11"
+    "@cliquify.me/types": "8.0.12"
   },
   "scripts": {
     "dev": "vite",