@cliquify.me/animations 9.0.11 → 9.0.12

package/dist/index.es.js

@@ -1,6 +1,6 @@
-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";
+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 = () => ({
   scale: (t) => ({ transform: `scale(${t})` }),
   growIn: (t) => ({ transform: `scale(${t})` }),
@@ -83,11 +83,11 @@ const z = () => ({
   }),
   moveTranslateY: (t) => ({ transform: `translateY(${t}%)` })
 }), Z = (t, f = 0) => {
-  const s = [], i = t / 5;
+  const s = [], c = t / 5;
   for (let m = 0; m < 6; m += 1)
-    s.push(m * i + f);
+    s.push(m * c + f);
   return s;
-}, q = (t, f, s, i = !1) => {
+}, 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))
     return console.error("Invalid animation values:", {
@@ -101,30 +101,30 @@ const z = () => ({
   );
   const n = f.delay || 0;
   let l;
-  if (f.property === "moveScaleIn" ? l = i ? [
+  if (f.property === "moveScaleIn" ? l = c ? [
     s - e - n,
     s - e * 0.5 - n
   ] : [
     n + e * 0.5,
     n + e
-  ] : f.property === "moveTranslateY" ? l = i ? [
+  ] : f.property === "moveTranslateY" ? l = c ? [
     s - e * 0.5 - n,
     s - n
   ] : [
     n,
     n + e * 0.5
-  ] : l = i ? [
+  ] : l = c ? [
     s - e - n,
     s - n
   ] : [
     n,
     n + e
   ], f.property.includes("shake")) {
-    const d = i ? Z(
+    const d = c ? Z(
       e,
       s - e - n
     ) : Z(e, n);
-    return P(
+    return B(
       t,
       d,
       [0, p, o, p, o, 0],
@@ -135,31 +135,31 @@ const z = () => ({
       }
     );
   }
-  return P(t, l, [p, o], {
+  return B(t, l, [p, o], {
     extrapolateLeft: "clamp",
     extrapolateRight: "clamp",
     easing: $
   });
-}, U = (t, f, s, i) => {
-  var u, p, o, e;
+}, U = (t, f, s, c) => {
+  var u, p, o, e, n;
   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], {
+    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], {
       extrapolateLeft: "clamp",
       extrapolateRight: "clamp",
       easing: t.ease
-    }), M = P(f, Y, [d, x], {
+    }), i = B(f, y, [S, M], {
       extrapolateLeft: "clamp",
       extrapolateRight: "clamp",
       easing: t.ease
-    });
+    }), X = F / x, g = i / x;
     return {
-      transform: `translateX(${V}%) translateY(${M}%)`
+      transform: `translateX(${X}px) translateY(${g}px)`
     };
   }
-  const a = q(f, t, s, i), $ = z();
+  const a = q(f, t, s, c), $ = z();
   return ($[m] || $.default)(a);
-}, j = (t, f, s, i = !1, m = !1) => I.useMemo(() => {
+}, I = (t, f, s, c = !1, m = !1) => C.useMemo(() => {
   if (t.length === 0) return {};
   const a = t.filter(
     ($) => $.from !== void 0 && $.to !== void 0
@@ -169,17 +169,17 @@ const z = () => ({
     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);
+        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(${v}%) translateY(${Y}%)`
+            transform: `translateX(${y}px) translateY(${F}px)`
           };
-        })() : (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;
+        })() : (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);
@@ -195,191 +195,191 @@ const z = () => ({
       (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(
+    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),
       {}
     );
-}, [t, s, f, i]), F = (t) => t ? Array.isArray(t) ? t : [t] : [], et = (...t) => {
+}, [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, i) => s.find(
-    (a) => a.property === i.property
+  }), f.filter((s) => s !== void 0).reduce((s, c) => s.find(
+    (a) => a.property === c.property
   ) ? s.map(
-    (a) => a.property === i.property ? {
+    (a) => a.property === c.property ? {
       ...a,
-      from: Math.min(a.from, i.from),
-      to: Math.max(a.to, i.to),
+      from: Math.min(a.from, c.from),
+      to: Math.max(a.to, c.to),
       durationInFrames: Math.max(
         a.durationInFrames,
-        i.durationInFrames
+        c.durationInFrames
       ),
-      delay: Math.min(a.delay || 0, i.delay || 0),
-      ease: ($) => (a.ease($) + i.ease($)) / 2
+      delay: Math.min(a.delay || 0, c.delay || 0),
+      ease: ($) => (a.ease($) + c.ease($)) / 2
       // Average the easing functions
     } : a
-  ) : [...s, i], []);
+  ) : [...s, c], []);
 }, rt = ({
   animationIn: t,
   animationOut: f,
   durationInFrames: s,
-  children: i,
+  children: c,
   style: m = {},
   frame: a,
   isTransition: $ = !1,
   basicCharAnimationsIn: u = [],
   basicCharAnimationsOut: p = []
 }) => {
-  var g;
-  const o = j(
-    F(t),
+  var b;
+  const o = I(
+    j(t),
     s,
     a,
     !1
-  ), e = j(
-    F(f),
+  ), e = I(
+    j(f),
     s,
     a,
     !0
-  ), n = j(
-    F(u),
+  ), n = I(
+    j(u),
     s,
     a,
     !0
-  ), l = j(
-    F(p),
+  ), l = I(
+    j(p),
     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),
+  ), 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),
       1 / 0
-    ), y = a - (b || 0);
-    return h && y < 0 ? { visibility: $ ? "visible" : "hidden" } : o;
-  }, [o, a, t]), x = I.useMemo(() => {
+    ), 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 = F(f);
+    const h = j(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);
+    let v = 0;
+    h.forEach((O) => {
+      const R = (O.durationInFrames || 0) + (O.delay || 0);
+      R > v && (v = R);
     });
-    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 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
     };
-    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;
+    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, x]);
-  if ((g = M.transform) != null && g.includes("rotate")) {
-    const h = M.transform;
-    M.transform = h.replace(
+  }, [d, S]);
+  if ((b = y.transform) != null && b.includes("rotate")) {
+    const h = y.transform;
+    y.transform = h.replace(
       /rotate\(([^)]+)deg\)/,
-      (b, y) => `rotate(${parseFloat(y) - V}deg)`
+      (v, w) => `rotate(${parseFloat(w) - V}deg)`
     );
   }
-  const B = W(() => {
-    const h = M.transform || "", {
-      translateX: b,
-      translateY: y,
-      scale: N,
-      rotation: O,
-      rotateX: L,
+  const F = W(() => {
+    const h = y.transform || "", {
+      translateX: v,
+      translateY: w,
+      scale: O,
+      rotation: R,
+      rotateX: P,
       rotateY: r,
-      rotateZ: R
+      rotateZ: E
     } = 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(
+    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, b) => `translateX(${parseFloat(b)}%)`
+      (h, v) => `translateX(${parseFloat(v)}%)`
     )
   });
   const {
-    top: E,
-    left: w,
-    position: C,
-    transform: T,
-    ..._
+    top: X,
+    left: g,
+    position: T,
+    transform: _,
+    ...L
   } = m || {};
-  return /* @__PURE__ */ A(
+  return /* @__PURE__ */ N(
     "div",
     {
       style: {
         width: "100%",
         height: "100%",
-        overflow: M.overflow || n.overflow || l.overflow || "visible",
+        overflow: y.overflow || n.overflow || l.overflow || "visible",
         pointerEvents: "none"
       },
-      children: /* @__PURE__ */ A(
+      children: /* @__PURE__ */ N(
         "div",
         {
           style: {
             width: "100%",
             height: "100%",
-            ..._,
-            ...M,
+            ...L,
+            ...y,
             rotate: `${V}deg`,
             overflow: "visible",
-            transform: B,
+            transform: F,
             pointerEvents: "none",
-            background: Object.keys(M).length === 0 ? "transparent" : M.backgroundColor
+            background: Object.keys(y).length === 0 ? "transparent" : y.backgroundColor
           },
-          children: i
+          children: c
         }
       )
     }
   );
 }, G = (t) => {
-  let f = "", s = "", i = "scale(1)", m = "", a = "", $ = "", u = "";
+  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 && (i = e[e.length - 1]);
+  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 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 };
+  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 };
 }, st = ({
   animationTimed: t,
   durationInFrames: f,
   children: s,
-  style: i = {},
+  style: c = {},
   frame: m
 }) => {
   var l;
-  const a = j(
-    F(t),
+  const a = I(
+    j(t),
     f,
     m,
     !1,
     !0
-  ), u = ((i == null ? void 0 : i.transform) || "").match(/rotate\((-?[\d.]+)deg\)/), p = u ? parseFloat(u[1]) : 0, o = -p, e = I.useMemo(() => ({
+  ), 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\)/,
-      (x, S) => `rotate(${parseFloat(S) - o}deg)`
+      (S, M) => `rotate(${parseFloat(M) - o}deg)`
     );
   }
   let n = e;
@@ -387,19 +387,19 @@ const z = () => ({
     ...n,
     transform: n.transform.replace(
       /translateX\(([^)]+)\)/g,
-      (d, x) => `translateX(${parseFloat(x)}%)`
+      (d, S) => `translateX(${parseFloat(S)}%)`
     )
-  }), /* @__PURE__ */ A(
+  }), /* @__PURE__ */ N(
     "div",
     {
       style: {
         overflow: e.overflow || "visible",
         pointerEvents: "none",
-        height: i.height || "100%",
-        width: i.width || "100%",
+        height: c.height || "100%",
+        width: c.width || "100%",
         ...n
       },
-      children: /* @__PURE__ */ A(
+      children: /* @__PURE__ */ N(
         "div",
         {
           style: {
@@ -422,94 +422,68 @@ const z = () => ({
   switch (t == null ? void 0 : t.easing) {
     case "ease-in":
     case "accelerate":
-      return X.in(X.cubic);
+      return A.in(A.cubic);
     case "ease-out":
     case "smooth":
     case "slowDown":
-      return X.out(X.cubic);
+      return A.out(A.cubic);
     case "ease-in-out":
     case "natural":
     case "swing":
-      return X.inOut(X.cubic);
+      return A.inOut(A.cubic);
     case "bounce":
-      return X.bounce;
+      return A.bounce;
     case "elastic":
-      return X.elastic(1);
+      return A.elastic(1);
     case "overshoot":
     case "impulse":
-      return X.out(X.back(1.7));
+      return A.out(A.back(1.7));
     case "none":
     case "linear":
     default:
-      return X.linear;
+      return A.linear;
   }
 }, K = ({
   children: t,
   currentWidth: f,
   currentHeight: s,
-  frame: i,
+  frame: c,
   item: m,
   keyframeAnimations: a,
   durationInFrames: $
 }) => {
-  var O, L;
+  var R, P;
   if (!a || !Array.isArray(a) || a.length === 0)
-    return /* @__PURE__ */ A(H, { children: t });
+    return /* @__PURE__ */ N(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"));
+    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 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"));
+    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)
   );
   if (!o && !e)
-    return /* @__PURE__ */ A(H, { children: t });
-  const n = Math.max(
-    1,
-    $ || 300
-  );
-  let l = null, d = !1, x = 30, S = 0;
+    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)
-    ), 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);
+    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 (!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;
+    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 (!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(
+    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(
       "div",
       {
         style: {
@@ -521,8 +495,8 @@ const z = () => ({
         children: t
       }
     );
-  if (!d && o && i < v)
-    return /* @__PURE__ */ A(
+  if (!d && o && c < x)
+    return /* @__PURE__ */ N(
       "div",
       {
         style: {
@@ -534,92 +508,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(
+  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}%
       0%
       ${r}%
       0%
     )`;
-  } else if (C) {
-    const r = d ? 25 * c : 25 * (1 - c);
-    g = `inset(
+  } else if (T) {
+    const r = d ? 25 * i : 25 * (1 - i);
+    b = `inset(
       ${r}%
       ${r}%
       ${r}%
       ${r}%
     )`;
-  } 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 (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
-    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(" ");
+    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(" ");
   return console.log("[MaskAnim] Rendering:", {
-    propName: E,
-    frame: i,
-    localFrame: S,
-    animDuration: x,
-    progress: M,
-    easedProgress: c,
+    propName: X,
+    frame: c,
+    localFrame: M,
+    animDuration: S,
+    progress: y,
+    easedProgress: i,
     isOut: d,
-    isShrinkScale: C,
-    isCenterScale: T,
-    isSlide: _,
-    direction: w,
-    clipPath: g,
+    isShrinkScale: T,
+    isCenterScale: _,
+    isSlide: L,
+    direction: g,
+    clipPath: b,
     translateTransform: h,
-    isScale: b,
-    scaleValue: y,
-    innerTransform: N
-  }), /* @__PURE__ */ A(
+    isScale: v,
+    scaleValue: w,
+    innerTransform: O
+  }), /* @__PURE__ */ N(
     "div",
     {
       style: {
         width: f !== void 0 ? f : "100%",
         height: s !== void 0 ? s : "100%",
         position: "relative",
-        clipPath: g,
-        WebkitClipPath: g,
+        clipPath: b,
+        WebkitClipPath: b,
         overflow: "hidden"
       },
-      children: /* @__PURE__ */ A(
+      children: /* @__PURE__ */ N(
         "div",
         {
           style: {
             width: "100%",
             height: "100%",
-            transform: N,
+            transform: O,
             transformOrigin: "center"
           },
           children: t
@@ -633,7 +587,7 @@ export {
   st as ContentAnim,
   ot as MaskAnim,
   et as combine,
-  F as combineAnimations,
+  j as combineAnimations,
   G as extractTransformations,
-  j as useAnimation
+  I 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(
+(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}%
       0%
       ${r}%
       0%
-    )`}else if(P){const r=d?25*c:25*(1-c);m=`inset(
+    )`}else if(_){const r=d?25*i:25*(1-i);b=`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(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"})});

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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cliquify.me/animations",
-  "version": "9.0.11",
+  "version": "9.0.12",
   "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/types": "8.0.10",
-    "@cliquify.me/typescript-config": "0.0.2"
+    "@cliquify.me/typescript-config": "0.0.2",
+    "@cliquify.me/types": "8.0.11"
   },
   "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.10"
+    "@cliquify.me/types": "8.0.11"
   },
   "scripts": {
     "dev": "vite",