@cliquify.me/animations 9.0.10 → 9.0.12

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 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})` }),
+  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 = [], c = t / 5;
+  for (let m = 0; m < 6; m += 1)
+    s.push(m * c + f);
+  return s;
+}, q = (t, f, s, c = !1) => {
+  const { from: m, to: a, ease: $ } = f, u = f.durationInFrames || 30, p = Number(m), o = Number(a), e = Math.max(1, Number(u));
+  if (isNaN(p) || isNaN(o))
     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 = c ? [
+    s - e - n,
+    s - e * 0.5 - n
+  ] : [
+    n + e * 0.5,
+    n + e
+  ] : f.property === "moveTranslateY" ? l = c ? [
+    s - e * 0.5 - n,
+    s - n
+  ] : [
+    n,
+    n + e * 0.5
+  ] : l = c ? [
+    s - e - n,
+    s - n
+  ] : [
+    n,
+    n + e
+  ], f.property.includes("shake")) {
+    const d = c ? Z(
       e,
-      o - e - s
-    ) : A(e, s);
-    return O(
+      s - e - n
+    ) : Z(e, n);
+    return B(
       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 B(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, c) => {
+  var u, p, o, e, n;
+  const { property: m } = t;
+  if (m === "move") {
+    const l = Number(((u = t.details) == null ? void 0 : u.fromX) ?? t.from ?? 0), d = Number(((p = t.details) == null ? void 0 : p.toX) ?? t.to ?? 0), S = Number(((o = t.details) == null ? void 0 : o.fromY) ?? 0), M = Number(((e = t.details) == null ? void 0 : e.toY) ?? 0), x = Number(((n = t.details) == null ? void 0 : n.scale) || 1) || 1, Y = t.delay || 0, V = t.durationInFrames || 30, y = c ? [s - V - Y, s - Y] : [Y, Y + V], F = B(f, y, [l, d], {
+      extrapolateLeft: "clamp",
+      extrapolateRight: "clamp",
+      easing: t.ease
+    }), i = B(f, y, [S, M], {
+      extrapolateLeft: "clamp",
+      extrapolateRight: "clamp",
+      easing: t.ease
+    }), X = F / x, g = i / x;
+    return {
+      transform: `translateX(${X}px) translateY(${g}px)`
+    };
+  }
+  const a = q(f, t, s, c), $ = z();
+  return ($[m] || $.default)(a);
+}, I = (t, f, s, c = !1, m = !1) => C.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, S = z(), M = e.property === "move" ? (() => {
+          var i, X, g;
+          const x = Number(((i = e.details) == null ? void 0 : i.toX) ?? e.to ?? 0), Y = Number(((X = e.details) == null ? void 0 : X.toY) ?? 0), V = Number(((g = e.details) == null ? void 0 : g.scale) || 1) || 1, y = x / V, F = Y / V;
+          return {
+            transform: `translateX(${y}px) translateY(${F}px)`
+          };
+        })() : (S[e.property] || S.default)(d);
+        Object.keys(M).forEach((x) => {
+          x === "transform" ? u[x] = u[x] ? {
+            [x]: `${u[x][x]} ${M[x]}`
+          } : M : u[x] = M;
         });
       }
-      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, 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, 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, c]), j = (t) => t ? Array.isArray(t) ? t : [t] : [], et = (...t) => {
+  const f = [];
+  return t.forEach((s) => {
+    Array.isArray(s) ? f.push(...s) : s && f.push(s);
+  }), f.filter((s) => s !== void 0).reduce((s, c) => s.find(
+    (a) => a.property === c.property
+  ) ? s.map(
+    (a) => a.property === c.property ? {
       ...a,
-      from: Math.min(a.from, f.from),
-      to: Math.max(a.to, f.to),
+      from: Math.min(a.from, c.from),
+      to: Math.max(a.to, c.to),
       durationInFrames: Math.max(
         a.durationInFrames,
-        f.durationInFrames
+        c.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, c.delay || 0),
+      ease: ($) => (a.ease($) + c.ease($)) / 2
       // Average the easing functions
     } : a
-  ) : [...o, f], []);
-}, G = ({
+  ) : [...s, c], []);
+}, rt = ({
   animationIn: t,
-  animationOut: l,
-  durationInFrames: o,
-  children: f,
-  style: r = {},
+  animationOut: f,
+  durationInFrames: s,
+  children: c,
+  style: m = {},
   frame: a,
-  isTransition: h = !1
+  isTransition: $ = !1,
+  basicCharAnimationsIn: u = [],
+  basicCharAnimationsOut: p = []
 }) => {
-  var j;
-  const n = V(
-    Y(t),
-    o,
+  var b;
+  const o = I(
+    j(t),
+    s,
     a,
     !1
-  ), c = V(
-    Y(l),
-    o,
+  ), e = I(
+    j(f),
+    s,
+    a,
+    !0
+  ), n = I(
+    j(u),
+    s,
+    a,
+    !0
+  ), l = I(
+    j(p),
+    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),
+  ), 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
-    ), 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);
+    ), w = a - (v || 0);
+    return h && w < 0 ? { visibility: $ ? "visible" : "hidden" } : o;
+  }, [o, a, t]), S = C.useMemo(() => {
+    if (a > s)
+      return { visibility: $ ? "visible" : "hidden" };
+    const h = j(f);
+    if (!h || h.length === 0) return {};
+    let v = 0;
+    h.forEach((O) => {
+      const R = (O.durationInFrames || 0) + (O.delay || 0);
+      R > v && (v = R);
     });
-    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 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(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(S).forEach(([v, w]) => {
+      v === "transform" ? h[v] = `${h[v] || ""} ${w || ""}`.trim() : v in h && typeof h[v] == "number" && typeof w == "number" ? h[v] = h[v] * w : h[v] = w;
+    }), h;
+  }, [d, S]);
+  if ((b = y.transform) != null && b.includes("rotate")) {
+    const h = y.transform;
+    y.transform = h.replace(
       /rotate\(([^)]+)deg\)/,
-      (g, b) => `rotate(${parseFloat(b) - v}deg)`
+      (v, w) => `rotate(${parseFloat(w) - 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 F = W(() => {
+    const h = y.transform || "", {
+      translateX: v,
+      translateY: w,
+      scale: O,
+      rotation: R,
+      rotateX: P,
+      rotateY: r,
+      rotateZ: E
+    } = G(h);
+    return `${v} ${w} ${O} ${R || `rotate(${Y}deg)`} ${P} ${r} ${E}`.trim();
+  }, [y, Y]);
+  let i = o;
+  Y > 0 && i.transform && i.transform.includes("translateX") && (i = {
+    ...i,
+    transform: i.transform.replace(
       /translateX\(([^)]+)\)/g,
-      (m, g) => `translateX(${parseFloat(g)}%)`
+      (h, v) => `translateX(${parseFloat(v)}%)`
     )
   });
   const {
-    top: E,
-    left: F,
-    position: P,
-    transform: z,
-    ...H
-  } = r || {};
-  return /* @__PURE__ */ y(
+    top: X,
+    left: g,
+    position: T,
+    transform: _,
+    ...L
+  } = m || {};
+  return /* @__PURE__ */ N(
     "div",
     {
       style: {
         width: "100%",
         height: "100%",
-        overflow: p.overflow || "visible",
+        overflow: y.overflow || n.overflow || l.overflow || "visible",
         pointerEvents: "none"
       },
-      children: /* @__PURE__ */ y(
+      children: /* @__PURE__ */ N(
         "div",
         {
           style: {
             width: "100%",
             height: "100%",
-            ...H,
-            ...p,
-            rotate: `${v}deg`,
+            ...L,
+            ...y,
+            rotate: `${V}deg`,
             overflow: "visible",
-            transform: $,
+            transform: F,
             pointerEvents: "none",
-            background: Object.keys(p).length === 0 ? "transparent" : p.backgroundColor
+            background: Object.keys(y).length === 0 ? "transparent" : y.backgroundColor
           },
-          children: f
+          children: c
         }
       )
     }
   );
-}, 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 = "", 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 && (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 && (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 && (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 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: l,
-  children: o,
-  style: f = {},
-  frame: r
+  durationInFrames: f,
+  children: s,
+  style: c = {},
+  frame: m
 }) => {
-  var u;
-  const a = V(
-    Y(t),
-    l,
-    r,
+  var l;
+  const a = I(
+    j(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 = ((c == null ? void 0 : c.transform) || "").match(/rotate\((-?[\d.]+)deg\)/), p = u ? parseFloat(u[1]) : 0, o = -p, e = C.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)`
+      (S, M) => `rotate(${parseFloat(M) - 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, S) => `translateX(${parseFloat(S)}%)`
     )
-  }), /* @__PURE__ */ y(
+  }), /* @__PURE__ */ N(
     "div",
     {
       style: {
         overflow: e.overflow || "visible",
         pointerEvents: "none",
-        height: f.height,
-        width: f.width,
-        ...s
+        height: c.height || "100%",
+        width: c.width || "100%",
+        ...n
       },
-      children: /* @__PURE__ */ y(
+      children: /* @__PURE__ */ N(
         "div",
         {
           style: {
-            ...e,
             overflow: "visible",
             pointerEvents: "none",
             height: "100%",
@@ -321,81 +411,183 @@ 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 A.in(A.cubic);
     case "ease-out":
-      return w.out(w.cubic);
+    case "smooth":
+    case "slowDown":
+      return A.out(A.cubic);
     case "ease-in-out":
-      return w.inOut(w.cubic);
+    case "natural":
+    case "swing":
+      return A.inOut(A.cubic);
+    case "bounce":
+      return A.bounce;
+    case "elastic":
+      return A.elastic(1);
+    case "overshoot":
+    case "impulse":
+      return A.out(A.back(1.7));
+    case "none":
     case "linear":
     default:
-      return w.linear;
+      return A.linear;
   }
 }, K = ({
   children: t,
-  frame: l,
-  item: o,
-  keyframeAnimations: f
+  currentWidth: f,
+  currentHeight: s,
+  frame: c,
+  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 R, P;
+  if (!a || !Array.isArray(a) || a.length === 0)
+    return /* @__PURE__ */ N(H, { children: t });
+  const u = (r) => {
+    var E, D;
+    return !!((E = r == null ? void 0 : r.property) != null && E.includes("maskReveal") || (D = r == null ? void 0 : r.id) != null && D.includes("maskReveal"));
+  }, p = (r) => {
+    var E, D;
+    return !!((r == null ? void 0 : r.type) === "exit" || (E = r == null ? void 0 : r.property) != null && E.includes("Out") || (D = r == null ? void 0 : r.id) != null && D.includes("Out"));
+  }, o = a.find(
+    (r) => u(r) && !p(r)
+  ), e = a.find(
+    (r) => u(r) && p(r)
+  );
+  if (!o && !e)
+    return /* @__PURE__ */ N(H, { children: t });
+  const n = Math.max(1, $ || 300);
+  let l = null, d = !1, S = 30, M = 0;
+  if (e) {
+    const r = Math.max(1, Number(e.durationInFrames || 30)), E = Math.max(0, Number(e.delay || 0)), D = Math.max(0, n - r - E);
+    c >= D && (l = e, d = !0, S = r, M = c - D);
+  }
+  if (!l && o) {
+    l = o, d = !1, S = Math.max(1, Number(o.durationInFrames || 30));
+    const r = Math.max(0, Number(o.delay || 0));
+    M = c - r;
+  }
+  if (!l)
+    return /* @__PURE__ */ N(H, { children: t });
+  const x = o ? Math.max(0, Number(o.delay || 0)) : 0, Y = o ? Math.max(1, Number(o.durationInFrames || 30)) : 30;
+  if (!d && o && c >= x + Y)
+    return /* @__PURE__ */ N(
+      "div",
+      {
+        style: {
+          width: "100%",
+          height: "100%",
+          position: "relative",
+          overflow: "visible"
+        },
+        children: t
+      }
+    );
+  if (!d && o && c < x)
+    return /* @__PURE__ */ N(
+      "div",
+      {
+        style: {
+          width: "100%",
+          height: "100%",
+          position: "relative",
+          visibility: "hidden"
+        },
+        children: t
+      }
+    );
+  const V = Math.max(0, M), y = Math.min(Math.max(0, V / S), 1), F = J(l), i = Math.max(0, Math.min(1, F(y))), X = String(l.property || l.id || ""), g = ((R = l.details) == null ? void 0 : R.direction) || "up", T = X.includes("ShrinkScale"), _ = X.includes("CenterScale"), L = X.includes("Slide") || X.includes("slide");
+  let b, h = "";
+  if (_) {
+    const r = d ? 50 * i : 50 * (1 - i);
+    b = `inset(
+      ${r}%
+      0%
+      ${r}%
+      0%
+    )`;
+  } else if (T) {
+    const r = d ? 25 * i : 25 * (1 - i);
+    b = `inset(
+      ${r}%
+      ${r}%
+      ${r}%
+      ${r}%
+    )`;
+  } 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 ? 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: X,
+    frame: c,
+    localFrame: M,
+    animDuration: S,
+    progress: y,
+    easedProgress: i,
+    isOut: d,
+    isShrinkScale: T,
+    isCenterScale: _,
+    isSlide: L,
+    direction: g,
+    clipPath: b,
+    translateTransform: h,
+    isScale: v,
+    scaleValue: w,
+    innerTransform: O
+  }), /* @__PURE__ */ N(
     "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: b,
+        WebkitClipPath: b,
+        overflow: "hidden"
       },
-      children: /* @__PURE__ */ y(
+      children: /* @__PURE__ */ N(
         "div",
         {
           style: {
-            position: "absolute",
-            left: e,
-            top: s,
-            width: u,
-            height: i,
-            overflow: c < 1 ? "hidden" : "visible",
-            clipPath: d
+            width: "100%",
+            height: "100%",
+            transform: O,
+            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,
+  j as combineAnimations,
+  G as extractTransformations,
+  I 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(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(_){const r=d?25*i:25*(1-i);b=`inset(
+      ${r}%
+      ${r}%
+      ${r}%
+      ${r}%
+    )`}else if(L)b="inset(0% 0% 0% 0%)",d?m==="down"?h=`translateY(${100*i}%)`:m==="left"?h=`translateX(${-100*i}%)`:m==="right"?h=`translateX(${100*i}%)`:h=`translateY(${-100*i}%)`:m==="down"?h=`translateY(${-100*(1-i)}%)`:m==="left"?h=`translateX(${100*(1-i)}%)`:m==="right"?h=`translateX(${-100*(1-i)}%)`:h=`translateY(${100*(1-i)}%)`;else if(N.includes("Center"))b=`circle(${d?150*(1-i):150*i}% at 50% 50%)`;else if(N.includes("Corner")){const r=d?i:1-i;m==="down"?b=`inset(0 ${100*r}% ${100*r}% 0)`:m==="up"?b=`inset(${100*r}% ${100*r}% 0 0)`:m==="left"?b=`inset(0 0 ${100*r}% ${100*r}%)`:m==="right"?b=`inset(${100*r}% 0 0 ${100*r}%)`:b=`inset(0 ${100*r}% ${100*r}% 0)`}else d?m==="down"?b=`inset(${100*i}% 0 0 0)`:m==="left"?b=`inset(0 ${100*i}% 0 0)`:m==="right"?b=`inset(0 0 0 ${100*i}%)`:b=`inset(0 0 ${100*i}% 0)`:m==="down"?b=`inset(0 0 ${100*(1-i)}% 0)`:m==="left"?b=`inset(0 0 0 ${100*(1-i)}%)`:m==="right"?b=`inset(0 ${100*(1-i)}% 0 0)`:b=`inset(${100*(1-i)}% 0 0 0)`;const v=!!((H=l==null?void 0:l.details)!=null&&H.scale||l!=null&&l.scale);let y=1;B||_?y=d?1+.5*i:1.5-.5*i:v&&(y=d?1-.2*i:.8+.2*i);const V=[h,`scale(${y})`].filter(Boolean).join(" ");return console.log("[MaskAnim] Rendering:",{propName:N,frame:c,localFrame:A,animDuration:S,progress:M,easedProgress:i,isOut:d,isShrinkScale:_,isCenterScale:B,isSlide:L,direction:m,clipPath:b,translateTransform:h,isScale:v,scaleValue:y,innerTransform:V}),w.jsx("div",{style:{width:f!==void 0?f:"100%",height:s!==void 0?s:"100%",position:"relative",clipPath:b,WebkitClipPath:b,overflow:"hidden"},children:w.jsx("div",{style:{width:"100%",height:"100%",transform:V,transformOrigin:"center"},children:t})})};Y.BoxAnim=J,Y.ContentAnim=K,Y.MaskAnim=R,Y.combine=G,Y.combineAnimations=T,Y.extractTransformations=W,Y.useAnimation=P,Object.defineProperty(Y,Symbol.toStringTag,{value:"Module"})});

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.10",
+  "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.9",
-    "@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.9"
+    "@cliquify.me/types": "8.0.11"
   },
   "scripts": {
     "dev": "vite",