@cliquify.me/animations 9.0.9 → 9.0.11

package/dist/Animated.d.ts

@@ -1,4 +1,5 @@
 import { default as React } from 'react';
+import { ICompositionAnimation } from '@cliquify.me/types';
 
 export interface Animation {
     property: keyof React.CSSProperties | string;
@@ -18,6 +19,8 @@ export interface AnimatedProps {
     style?: React.CSSProperties;
     frame: number;
     isTransition?: boolean;
+    basicCharAnimationsIn?: ICompositionAnimation[];
+    basicCharAnimationsOut?: ICompositionAnimation[];
 }
 export declare const BoxAnim: React.FC<AnimatedProps>;
 export declare const combine: (...animations: (Animation | Animation[] | undefined)[]) => Animation[];

package/dist/index.es.js

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

package/dist/index.umd.js

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

package/dist/mask.d.ts

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

package/package.json

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