@cliquify.me/animations 6.0.0

package/LICENSE

@@ -0,0 +1,46 @@
+DESIGNCOMBO COMMERCIAL LICENSE
+Copyright (c) 2024 Layerhub LLC
+
+This is a commercial license agreement between Layerhub LLC ("Licensor") and the purchaser ("Licensee") of the DesignCombo software package.
+
+1. GRANT OF LICENSE
+   Subject to the terms and conditions of this Agreement, Licensor grants Licensee a non-exclusive, non-transferable license to:
+   a) Use the DesignCombo software package for commercial and non-commercial purposes
+   b) Modify the source code to suit Licensee's specific needs
+   c) Deploy the modified version in production environments
+
+2. SUBSCRIPTION TERMS
+   a) The license is granted for a specified subscription period (e.g., 12 months)
+   b) During the subscription period, Licensee will receive:
+      - Access to the source code
+      - Regular updates and improvements
+      - Technical support
+   c) After the subscription period ends:
+      - Licensee may continue using the last version received during the subscription
+      - Licensee may continue using any modifications made to that version
+      - Licensee will no longer receive updates or technical support
+      - Licensee may renew the subscription to receive updates and support
+
+3. RESTRICTIONS
+   Licensee may not:
+   a) Redistribute, resell, or sublicense the original or modified software
+   b) Remove or alter any copyright notices or proprietary markings
+   c) Use the software to create a competing product
+   d) Transfer the license to another party
+
+4. INTELLECTUAL PROPERTY
+   The original DesignCombo software and all its components remain the exclusive property of Layerhub.
+   Licensee retains rights to their specific modifications, but not to the underlying software.
+
+5. WARRANTY
+   The software is provided "as is" without warranty of any kind. Layerhub is not liable for any damages arising from the use of the software.
+
+6. TERMINATION
+   This license is effective until terminated. Layerhub may terminate this license if Licensee fails to comply with any of its terms and conditions.
+
+7. GOVERNING LAW
+   This Agreement shall be governed by and construed in accordance with the laws of the jurisdiction in which Layerhub LLC is established.
+
+For licensing inquiries, please contact Layerhub LLC at [contact information].
+
+Version 1.1 - Effective Date: March 19, 2024 

package/README.md

@@ -0,0 +1,197 @@
+# @designcombo/animations
+
+A powerful animation library for managing complex animation sequences and transitions in React applications, with specialized components for different animation scenarios.
+
+## Installation
+
+```bash
+npm install @designcombo/animations
+# or
+yarn add @designcombo/animations
+# or
+pnpm add @designcombo/animations
+```
+
+## Usage
+
+### BoxAnim Component
+
+The main animation wrapper for standard in/out animations with rotation handling:
+
+```tsx
+import { BoxAnim } from "@designcombo/animations";
+
+<BoxAnim
+  animationIn={[
+    {
+      property: "opacity",
+      from: 0,
+      to: 1,
+      durationInFrames: 30,
+      ease: (t) => t,
+      delay: 0
+    },
+    {
+      property: "translateX",
+      from: -100,
+      to: 0,
+      durationInFrames: 30,
+      ease: (t) => t
+    }
+  ]}
+  animationOut={[
+    {
+      property: "opacity",
+      from: 1,
+      to: 0,
+      durationInFrames: 15,
+      ease: (t) => t
+    }
+  ]}
+  durationInFrames={60}
+  frame={currentFrame}
+  style={{ transform: "rotate(45deg)" }}
+>
+  <div>Your BoxAnim content here</div>
+</BoxAnim>;
+```
+
+### ContentAnim Component
+
+For timed animations that are affected by rotation transformations:
+
+```tsx
+import { ContentAnim } from "@designcombo/animations";
+
+<ContentAnim
+  animationTimed={[
+    {
+      property: "scale",
+      from: 0.8,
+      to: 1.2,
+      durationInFrames: 45,
+      ease: (t) => t,
+      persist: true
+    }
+  ]}
+  durationInFrames={60}
+  frame={currentFrame}
+  style={{ width: 200, height: 200 }}
+>
+  <div>Content with timed animations</div>
+</ContentAnim>;
+```
+
+### MaskAnim Component
+
+For creating mask reveal animations with different patterns:
+
+```tsx
+import { MaskAnim } from "@designcombo/animations";
+
+<MaskAnim
+  frame={currentFrame}
+  item={itemData}
+  keyframeAnimations={[
+    {
+      property: "maskRevealIn", // or "maskRevealCenterIn", "maskRevealCornerIn"
+      durationInFrames: 30
+    }
+  ]}
+>
+  <div>Content that will be revealed with mask animation</div>
+</MaskAnim>;
+```
+
+### Animation Hook
+
+Direct access to animation calculations:
+
+```tsx
+import {
+  useAnimation,
+  combineAnimations,
+  combine
+} from "@designcombo/animations";
+
+// Basic usage
+const style = useAnimation(
+  combineAnimations(animations),
+  durationInFrames,
+  frame,
+  false // isOut
+);
+
+// Advanced usage with timed animations
+const timedStyle = useAnimation(
+  combineAnimations(animations),
+  durationInFrames,
+  frame,
+  false, // isOut
+  true // isTimed
+);
+
+// Combining multiple animation sources
+const combinedAnimations = combine(
+  animationIn,
+  animationOut,
+  additionalAnimations
+);
+```
+
+## Animation Properties
+
+The library supports various animation properties:
+
+- **Transform Properties**: `scale`, `translateX`, `translateY`, `rotate`
+- **Visual Properties**: `opacity`
+- **Special Properties**: `shake` (with automatic intervals)
+- **Mask Properties**: `maskRevealIn`, `maskRevealCenterIn`, `maskRevealCornerIn`
+
+## Animation Interface
+
+```tsx
+interface Animation {
+  property: keyof React.CSSProperties | string;
+  from: number;
+  to: number;
+  durationInFrames: number;
+  ease: (t: number) => number;
+  delay?: number;
+  persist?: boolean; // For timed animations
+}
+```
+
+## Features
+
+- **Animated Component**: Main wrapper for in/out animations with rotation compensation
+- **ContentAnimations Component**: Specialized for timed animations affected by rotation
+- **MaskWrapper Component**: Creates mask reveal effects with multiple patterns
+- **Animation Hook**: Direct access to animation calculations
+- **Rotation Handling**: Automatic compensation for rotated elements
+- **Persistent Animations**: Support for animations that persist after completion
+- **Shake Effects**: Built-in shake animation with automatic intervals
+- **Transform Extraction**: Utilities for parsing and combining transform properties
+- **Performance Optimized**: Efficient animation rendering with memoization
+- **TypeScript Support**: Full type safety with comprehensive interfaces
+- **Remotion Integration**: Built for Remotion video framework
+
+## Development
+
+```bash
+# Install dependencies
+pnpm install
+
+# Start development server
+pnpm dev
+
+# Build package
+pnpm build
+
+# Format code
+pnpm format
+```
+
+## License
+
+MIT

package/dist/Animated.d.ts

@@ -0,0 +1,28 @@
+import { default as React } from 'react';
+
+export interface Animation {
+    property: keyof React.CSSProperties | string;
+    from: number;
+    to: number;
+    durationInFrames: number;
+    ease: (t: number) => number;
+    delay?: number;
+}
+export interface AnimatedProps {
+    animationIn?: Animation | Animation[] | null;
+    animationOut?: Animation | Animation[] | null;
+    durationInFrames: number;
+    children: React.ReactNode;
+    className?: string;
+    style?: React.CSSProperties;
+    frame: number;
+}
+export declare const BoxAnim: React.FC<AnimatedProps>;
+export declare const combine: (...animations: (Animation | Animation[] | undefined)[]) => Animation[];
+export declare const extractTransformations: (transform: string) => {
+    translateX: string;
+    translateY: string;
+    scale: string;
+    rotation: string;
+    rotateY: string;
+};

package/dist/content.d.ts

@@ -0,0 +1,11 @@
+import { default as React } from 'react';
+import { Animation } from './Animated';
+
+export interface ContentAnimationsProps {
+    animationTimed?: Animation | Animation[] | null;
+    durationInFrames: number;
+    children: React.ReactNode;
+    style?: React.CSSProperties;
+    frame: number;
+}
+export declare const ContentAnim: React.FC<ContentAnimationsProps>;

package/dist/index.d.ts

@@ -0,0 +1,7 @@
+export { BoxAnim } from './Animated';
+export { useAnimation, combineAnimations, combine } from './use-animation';
+export type { Animation, AnimatedProps } from './Animated';
+export { extractTransformations } from './Animated';
+export { ContentAnim } from './content';
+export type { ContentAnimationsProps } from './content';
+export { MaskAnim } from './mask';

package/dist/index.es.js

@@ -0,0 +1,343 @@
+import { jsx as w } from "react/jsx-runtime";
+import x, { useMemo as V } from "react";
+import { interpolate as Y } from "remotion";
+const j = () => ({
+  scale: (t) => ({ transform: `scale(${t})` }),
+  opacity: (t) => ({ opacity: t }),
+  translateX: (t) => ({ transform: `translateX(${t}px)` }),
+  translateY: (t) => ({ transform: `translateY(${t}px)` }),
+  rotate: (t) => ({ transform: `rotate(${t}deg)` }),
+  default: () => ({}),
+  rotateY: (t) => ({ transform: `rotateY(${t}deg)` }),
+  shakeHorizontalIn: (t) => ({
+    transform: `translateX(${t}px)`,
+    overflow: "hidden"
+  }),
+  shakeVerticalIn: (t) => ({
+    transform: `translateY(${t}px)`,
+    overflow: "hidden"
+  }),
+  shakeHorizontalOut: (t) => ({
+    transform: `translateX(${t}px)`,
+    overflow: "hidden"
+  }),
+  shakeVerticalOut: (t) => ({
+    transform: `translateY(${t}px)`,
+    overflow: "hidden"
+  })
+}), R = (t, n = 0) => {
+  const e = [], s = t / 5;
+  for (let l = 0; l < 6; l += 1)
+    e.push(l * s + n);
+  return e;
+}, I = (t, n, e, s = !1) => {
+  const { from: l, to: r, ease: i } = n, o = n.durationInFrames || 30, f = Number(l), c = Number(r), a = Math.max(1, Number(o));
+  if (isNaN(f) || isNaN(c))
+    return console.error("Invalid animation values:", {
+      from: l,
+      to: r,
+      animationDurationInFrames: o,
+      property: n.property
+    }), f;
+  o === void 0 && console.warn(
+    `durationInFrames is undefined for animation: ${n.property}. Using 1 frame as default.`
+  );
+  const d = s ? [e - o, e] : [0, a];
+  if (n.property.includes("shake")) {
+    const p = s ? R(
+      a,
+      e - o
+    ) : R(a);
+    return Y(
+      t,
+      p,
+      [0, f, c, f, c, 0],
+      {
+        extrapolateLeft: "clamp",
+        extrapolateRight: "clamp",
+        easing: i
+      }
+    );
+  }
+  return Y(t, d, [f, c], {
+    extrapolateLeft: "clamp",
+    extrapolateRight: "clamp",
+    easing: i
+  });
+}, E = (t, n, e, s) => {
+  const l = n - (t.delay || 0) * (s ? -1 : 1), { property: r, durationInFrames: i } = t;
+  if (!s && l > i) return {};
+  const o = I(
+    l,
+    t,
+    e,
+    s
+  ), f = j();
+  return (f[r] || f.default)(o);
+}, M = (t, n, e, s = !1, l = !1) => x.useMemo(() => {
+  if (t.length === 0) return {};
+  const r = t.filter(
+    (i) => i.from !== void 0 && i.to !== void 0
+  );
+  if (r.length !== t.length && console.error("Some animations are invalid and will be ignored"), l) {
+    const i = [], o = {};
+    r.reverse().forEach((a) => {
+      const d = E(a, e, n, !1);
+      if (a.persist === !0 && e - (a.delay || 0) >= a.durationInFrames) {
+        const $ = a.to, u = j(), b = (u[a.property] || u.default)($);
+        Object.keys(b).forEach((h) => {
+          h === "transform" ? o[h] = o[h] ? {
+            [h]: `${o[h][h]} ${b[h]}`
+          } : b : o[h] = b;
+        });
+      }
+      i.push(d);
+    });
+    const c = { ...i.reduce(
+      (a, d) => (Object.keys(d).forEach((p) => {
+        p === "transform" ? a[p] = a[p] ? `${a[p]} ${d[p]}` : d[p] : a[p] = d[p];
+      }), a),
+      {}
+    ) };
+    return Object.keys(o).forEach((a) => {
+      const d = o[a];
+      a === "transform" && d.transform ? c.transform = c.transform ? `${c.transform} ${d.transform}` : d.transform : d[a] !== void 0 && (c[a] = d[a]);
+    }), c;
+  } else
+    return r.map((o) => E(o, e, n, s)).reduce(
+      (o, f) => (Object.keys(f).forEach((c) => {
+        c === "transform" ? o[c] = o[c] ? `${o[c]} ${f[c]}` : f[c] : o[c] = f[c];
+      }), o),
+      {}
+    );
+}, [t, e, n, s]), F = (t) => t ? Array.isArray(t) ? t : [t] : [], D = (...t) => {
+  const n = [];
+  return t.forEach((e) => {
+    Array.isArray(e) ? n.push(...e) : e && n.push(e);
+  }), n.filter((e) => e !== void 0).reduce((e, s) => e.find(
+    (r) => r.property === s.property
+  ) ? e.map(
+    (r) => r.property === s.property ? {
+      ...r,
+      from: Math.min(r.from, s.from),
+      to: Math.max(r.to, s.to),
+      durationInFrames: Math.max(
+        r.durationInFrames,
+        s.durationInFrames
+      ),
+      delay: Math.min(r.delay || 0, s.delay || 0),
+      ease: (i) => (r.ease(i) + s.ease(i)) / 2
+      // Average the easing functions
+    } : r
+  ) : [...e, s], []);
+}, _ = ({
+  animationIn: t,
+  animationOut: n,
+  durationInFrames: e,
+  children: s,
+  style: l = {},
+  frame: r
+}) => {
+  var X;
+  const i = M(
+    F(t),
+    e,
+    r,
+    !1
+  ), o = M(
+    F(n),
+    e,
+    r,
+    !0
+  ), f = x.useMemo(() => {
+    const m = Object.keys(i).length > 0, v = t == null ? void 0 : t.reduce(
+      (y, S) => Math.min(y, S.delay || 0),
+      1 / 0
+    ), g = r - (v || 0);
+    return m && g < 0 ? { visibility: "hidden" } : i;
+  }, [i, r, t]), c = x.useMemo(() => {
+    const m = (n == null ? void 0 : n.length) > 0, v = n == null ? void 0 : n.reduce(
+      (g, y) => {
+        const S = y.delay || 0;
+        return Math.max(g, S);
+      },
+      0
+    );
+    return m && r > e - v ? { visibility: "hidden" } : o;
+  }, [o, r, n]), d = ((l == null ? void 0 : l.transform) || "").match(/rotate\((-?[\d.]+)deg\)/), p = d ? parseFloat(d[1]) : 0, $ = -p, u = x.useMemo(() => {
+    const m = {
+      ...f
+      // , ...timedStyle
+    };
+    return Object.entries(c).forEach(([v, g]) => {
+      v === "transform" ? m[v] = `${m[v] || ""} ${g || ""}`.trim() : v in m && typeof m[v] == "number" && typeof g == "number" ? m[v] = m[v] * g : m[v] = g;
+    }), m;
+  }, [f, c]);
+  if ((X = u.transform) != null && X.includes("rotate")) {
+    const m = u.transform;
+    u.transform = m.replace(
+      /rotate\(([^)]+)deg\)/,
+      (v, g) => `rotate(${parseFloat(g) - $}deg)`
+    );
+  }
+  const b = V(() => {
+    const m = u.transform || "", { translateX: v, translateY: g, scale: y, rotation: S, rotateY: A } = H(m);
+    return `${v} ${g} ${y} ${S || `rotate(${p}deg)`} ${A}`.trim();
+  }, [u, p]);
+  let h = i;
+  return p > 0 && h.transform && h.transform.includes("translateX") && (h = {
+    ...h,
+    transform: h.transform.replace(
+      /translateX\(([^)]+)\)/g,
+      (m, v) => `translateX(${parseFloat(v)}px)`
+    )
+  }), /* @__PURE__ */ w(
+    "div",
+    {
+      style: {
+        overflow: u.overflow || "visible",
+        pointerEvents: "none",
+        ...h,
+        transform: (h.transform || "") + ` -rotate(${$}deg) scale(1)`,
+        background: Object.keys(u).length === 0 ? "transparent" : u.backgroundColor,
+        display: "flex",
+        justifyContent: "center"
+      },
+      children: /* @__PURE__ */ w(
+        "div",
+        {
+          style: {
+            ...l,
+            ...u,
+            rotate: `${$}deg`,
+            overflow: "visible",
+            transform: b,
+            pointerEvents: "none",
+            background: Object.keys(u).length === 0 ? "transparent" : u.backgroundColor
+          },
+          children: s
+        }
+      )
+    }
+  );
+}, H = (t) => {
+  let n = "", e = "", s = "scale(1)", l = "", r = "";
+  const i = t.match(/translateX\([^)]+\)/);
+  i && (n = i[0]);
+  const o = t.match(/translateY\([^)]+\)/);
+  o && (e = o[0]);
+  const f = t.match(/scale\([^)]+\)/);
+  f && (s = f[0]);
+  const c = t.match(/rotate\([^)]+\)/);
+  c && (l = c[0]);
+  const a = t.match(/rotateY\([^)]+\)/);
+  return a && (r = a[0]), { translateX: n, translateY: e, scale: s, rotation: l, rotateY: r };
+}, z = ({
+  animationTimed: t,
+  durationInFrames: n,
+  children: e,
+  style: s = {},
+  frame: l
+}) => {
+  var p;
+  const r = M(
+    F(t),
+    n,
+    l,
+    !1,
+    !0
+  ), o = ((s == null ? void 0 : s.transform) || "").match(/rotate\((-?[\d.]+)deg\)/), f = o ? parseFloat(o[1]) : 0, c = -f, a = x.useMemo(() => ({
+    ...r
+  }), [r]);
+  if ((p = a.transform) != null && p.includes("rotate")) {
+    const $ = a.transform;
+    a.transform = $.replace(
+      /rotate\(([^)]+)deg\)/,
+      (u, b) => `rotate(${parseFloat(b) - c}deg)`
+    );
+  }
+  let d = a;
+  return f > 0 && d.transform && d.transform.includes("translateX") && (d = {
+    ...d,
+    transform: d.transform.replace(
+      /translateX\(([^)]+)\)/g,
+      ($, u) => `translateX(${parseFloat(u)}px)`
+    )
+  }), /* @__PURE__ */ w(
+    "div",
+    {
+      style: {
+        overflow: a.overflow || "visible",
+        pointerEvents: "none",
+        height: s.height,
+        width: s.width,
+        ...d
+      },
+      children: /* @__PURE__ */ w(
+        "div",
+        {
+          style: {
+            ...a,
+            overflow: "visible",
+            pointerEvents: "none",
+            height: "100%",
+            width: "100%"
+          },
+          children: e
+        }
+      )
+    }
+  );
+}, L = ({
+  children: t,
+  frame: n,
+  item: e,
+  keyframeAnimations: s
+}) => {
+  var p, $;
+  const l = s == null ? void 0 : s.find(
+    (u) => u.property.includes("maskReveal")
+  ), r = ((p = e.details.crop) == null ? void 0 : p.width) || e.details.width, i = (($ = e.details.crop) == null ? void 0 : $.height) || e.details.height;
+  let o = 1, f = i, c = 0, a = 0, d = r;
+  if ((n || 0) - e.display.from >= 0 && (l == null ? void 0 : l.property) === "maskRevealIn")
+    o = Math.min((n || 0) / l.durationInFrames, 1), f = i - i * (1 - o);
+  else if ((n || 0) - e.display.from >= 0 && (l == null ? void 0 : l.property) === "maskRevealCenterIn") {
+    o = Math.min((n || 0) / l.durationInFrames, 1);
+    const u = r / 2, b = i / 2;
+    d = r, f = i * o, c = u - d / 2, a = b - f / 2;
+  } else (n || 0) - e.display.from >= 0 && (l == null ? void 0 : l.property) === "maskRevealCornerIn" && (o = Math.min((n || 0) / l.durationInFrames, 1), d = r * o, f = i * o, c = r - d, a = 0);
+  return /* @__PURE__ */ w(
+    "div",
+    {
+      style: {
+        width: r,
+        height: i,
+        position: "relative",
+        overflow: "hidden"
+      },
+      children: /* @__PURE__ */ w(
+        "div",
+        {
+          style: {
+            position: "absolute",
+            left: c,
+            top: a,
+            width: d,
+            height: f,
+            overflow: "hidden"
+          },
+          children: t
+        }
+      )
+    }
+  );
+};
+export {
+  _ as BoxAnim,
+  z as ContentAnim,
+  L as MaskAnim,
+  D as combine,
+  F as combineAnimations,
+  H as extractTransformations,
+  M as useAnimation
+};

package/dist/index.umd.js

@@ -0,0 +1 @@
+(function(g,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):(g=typeof globalThis<"u"?globalThis:g||self,S(g.animations={},g.jsxRuntime,g.React,g.remotion))})(this,function(g,S,w,F){"use strict";const X=()=>({scale:t=>({transform:`scale(${t})`}),opacity:t=>({opacity:t}),translateX:t=>({transform:`translateX(${t}px)`}),translateY:t=>({transform:`translateY(${t}px)`}),rotate:t=>({transform:`rotate(${t}deg)`}),default:()=>({}),rotateY:t=>({transform:`rotateY(${t}deg)`}),shakeHorizontalIn:t=>({transform:`translateX(${t}px)`,overflow:"hidden"}),shakeVerticalIn:t=>({transform:`translateY(${t}px)`,overflow:"hidden"}),shakeHorizontalOut:t=>({transform:`translateX(${t}px)`,overflow:"hidden"}),shakeVerticalOut:t=>({transform:`translateY(${t}px)`,overflow:"hidden"})}),Y=(t,o=0)=>{const e=[],a=t/5;for(let l=0;l<6;l+=1)e.push(l*a+o);return e},I=(t,o,e,a=!1)=>{const{from:l,to:r,ease:i}=o,n=o.durationInFrames||30,f=Number(l),c=Number(r),s=Math.max(1,Number(n));if(isNaN(f)||isNaN(c))return console.error("Invalid animation values:",{from:l,to:r,animationDurationInFrames:n,property:o.property}),f;n===void 0&&console.warn(`durationInFrames is undefined for animation: ${o.property}. Using 1 frame as default.`);const d=a?[e-n,e]:[0,s];if(o.property.includes("shake")){const u=a?Y(s,e-n):Y(s);return F.interpolate(t,u,[0,f,c,f,c,0],{extrapolateLeft:"clamp",extrapolateRight:"clamp",easing:i})}return F.interpolate(t,d,[f,c],{extrapolateLeft:"clamp",extrapolateRight:"clamp",easing:i})},E=(t,o,e,a)=>{const l=o-(t.delay||0)*(a?-1:1),{property:r,durationInFrames:i}=t;if(!a&&l>i)return{};const n=I(l,t,e,a),f=X();return(f[r]||f.default)(n)},j=(t,o,e,a=!1,l=!1)=>w.useMemo(()=>{if(t.length===0)return{};const r=t.filter(i=>i.from!==void 0&&i.to!==void 0);if(r.length!==t.length&&console.error("Some animations are invalid and will be ignored"),l){const i=[],n={};r.reverse().forEach(s=>{const d=E(s,e,o,!1);if(s.persist===!0&&e-(s.delay||0)>=s.durationInFrames){const $=s.to,p=X(),y=(p[s.property]||p.default)($);Object.keys(y).forEach(h=>{h==="transform"?n[h]=n[h]?{[h]:`${n[h][h]} ${y[h]}`}:y:n[h]=y})}i.push(d)});const c={...i.reduce((s,d)=>(Object.keys(d).forEach(u=>{u==="transform"?s[u]=s[u]?`${s[u]} ${d[u]}`:d[u]:s[u]=d[u]}),s),{})};return Object.keys(n).forEach(s=>{const d=n[s];s==="transform"&&d.transform?c.transform=c.transform?`${c.transform} ${d.transform}`:d.transform:d[s]!==void 0&&(c[s]=d[s])}),c}else return r.map(n=>E(n,e,o,a)).reduce((n,f)=>(Object.keys(f).forEach(c=>{c==="transform"?n[c]=n[c]?`${n[c]} ${f[c]}`:f[c]:n[c]=f[c]}),n),{})},[t,e,o,a]),A=t=>t?Array.isArray(t)?t:[t]:[],C=(...t)=>{const o=[];return t.forEach(e=>{Array.isArray(e)?o.push(...e):e&&o.push(e)}),o.filter(e=>e!==void 0).reduce((e,a)=>e.find(r=>r.property===a.property)?e.map(r=>r.property===a.property?{...r,from:Math.min(r.from,a.from),to:Math.max(r.to,a.to),durationInFrames:Math.max(r.durationInFrames,a.durationInFrames),delay:Math.min(r.delay||0,a.delay||0),ease:i=>(r.ease(i)+a.ease(i))/2}:r):[...e,a],[])},H=({animationIn:t,animationOut:o,durationInFrames:e,children:a,style:l={},frame:r})=>{var T;const i=j(A(t),e,r,!1),n=j(A(o),e,r,!0),f=w.useMemo(()=>{const m=Object.keys(i).length>0,v=t==null?void 0:t.reduce((x,M)=>Math.min(x,M.delay||0),1/0),b=r-(v||0);return m&&b<0?{visibility:"hidden"}:i},[i,r,t]),c=w.useMemo(()=>{const m=(o==null?void 0:o.length)>0,v=o==null?void 0:o.reduce((b,x)=>{const M=x.delay||0;return Math.max(b,M)},0);return m&&r>e-v?{visibility:"hidden"}:n},[n,r,o]),d=((l==null?void 0:l.transform)||"").match(/rotate\((-?[\d.]+)deg\)/),u=d?parseFloat(d[1]):0,$=-u,p=w.useMemo(()=>{const m={...f};return Object.entries(c).forEach(([v,b])=>{v==="transform"?m[v]=`${m[v]||""} ${b||""}`.trim():v in m&&typeof m[v]=="number"&&typeof b=="number"?m[v]=m[v]*b:m[v]=b}),m},[f,c]);if((T=p.transform)!=null&&T.includes("rotate")){const m=p.transform;p.transform=m.replace(/rotate\(([^)]+)deg\)/,(v,b)=>`rotate(${parseFloat(b)-$}deg)`)}const y=w.useMemo(()=>{const m=p.transform||"",{translateX:v,translateY:b,scale:x,rotation:M,rotateY:D}=V(m);return`${v} ${b} ${x} ${M||`rotate(${u}deg)`} ${D}`.trim()},[p,u]);let h=i;return u>0&&h.transform&&h.transform.includes("translateX")&&(h={...h,transform:h.transform.replace(/translateX\(([^)]+)\)/g,(m,v)=>`translateX(${parseFloat(v)}px)`)}),S.jsx("div",{style:{overflow:p.overflow||"visible",pointerEvents:"none",...h,transform:(h.transform||"")+` -rotate(${$}deg) scale(1)`,background:Object.keys(p).length===0?"transparent":p.backgroundColor,display:"flex",justifyContent:"center"},children:S.jsx("div",{style:{...l,...p,rotate:`${$}deg`,overflow:"visible",transform:y,pointerEvents:"none",background:Object.keys(p).length===0?"transparent":p.backgroundColor},children:a})})},V=t=>{let o="",e="",a="scale(1)",l="",r="";const i=t.match(/translateX\([^)]+\)/);i&&(o=i[0]);const n=t.match(/translateY\([^)]+\)/);n&&(e=n[0]);const f=t.match(/scale\([^)]+\)/);f&&(a=f[0]);const c=t.match(/rotate\([^)]+\)/);c&&(l=c[0]);const s=t.match(/rotateY\([^)]+\)/);return s&&(r=s[0]),{translateX:o,translateY:e,scale:a,rotation:l,rotateY:r}},N=({animationTimed:t,durationInFrames:o,children:e,style:a={},frame:l})=>{var u;const r=j(A(t),o,l,!1,!0),n=((a==null?void 0:a.transform)||"").match(/rotate\((-?[\d.]+)deg\)/),f=n?parseFloat(n[1]):0,c=-f,s=w.useMemo(()=>({...r}),[r]);if((u=s.transform)!=null&&u.includes("rotate")){const $=s.transform;s.transform=$.replace(/rotate\(([^)]+)deg\)/,(p,y)=>`rotate(${parseFloat(y)-c}deg)`)}let d=s;return f>0&&d.transform&&d.transform.includes("translateX")&&(d={...d,transform:d.transform.replace(/translateX\(([^)]+)\)/g,($,p)=>`translateX(${parseFloat(p)}px)`)}),S.jsx("div",{style:{overflow:s.overflow||"visible",pointerEvents:"none",height:a.height,width:a.width,...d},children:S.jsx("div",{style:{...s,overflow:"visible",pointerEvents:"none",height:"100%",width:"100%"},children:e})})},R=({children:t,frame:o,item:e,keyframeAnimations:a})=>{var u,$;const l=a==null?void 0:a.find(p=>p.property.includes("maskReveal")),r=((u=e.details.crop)==null?void 0:u.width)||e.details.width,i=(($=e.details.crop)==null?void 0:$.height)||e.details.height;let n=1,f=i,c=0,s=0,d=r;if((o||0)-e.display.from>=0&&(l==null?void 0:l.property)==="maskRevealIn")n=Math.min((o||0)/l.durationInFrames,1),f=i-i*(1-n);else if((o||0)-e.display.from>=0&&(l==null?void 0:l.property)==="maskRevealCenterIn"){n=Math.min((o||0)/l.durationInFrames,1);const p=r/2,y=i/2;d=r,f=i*n,c=p-d/2,s=y-f/2}else(o||0)-e.display.from>=0&&(l==null?void 0:l.property)==="maskRevealCornerIn"&&(n=Math.min((o||0)/l.durationInFrames,1),d=r*n,f=i*n,c=r-d,s=0);return S.jsx("div",{style:{width:r,height:i,position:"relative",overflow:"hidden"},children:S.jsx("div",{style:{position:"absolute",left:c,top:s,width:d,height:f,overflow:"hidden"},children:t})})};g.BoxAnim=H,g.ContentAnim=N,g.MaskAnim=R,g.combine=C,g.combineAnimations=A,g.extractTransformations=V,g.useAnimation=j,Object.defineProperty(g,Symbol.toStringTag,{value:"Module"})});

package/dist/mask.d.ts

@@ -0,0 +1,6 @@
+export declare const MaskAnim: ({ children, frame, item, keyframeAnimations }: {
+    children: React.ReactNode;
+    frame: number;
+    item: any;
+    keyframeAnimations: any;
+}) => import("react/jsx-runtime").JSX.Element;

package/dist/use-animation.d.ts

@@ -0,0 +1,14 @@
+import { default as React } from 'react';
+
+export interface Animation {
+    property: keyof React.CSSProperties | string;
+    from: number;
+    to: number;
+    durationInFrames: number;
+    ease: (t: number) => number;
+    delay?: number;
+    persist?: boolean;
+}
+export declare const useAnimation: (animations: Animation[], durationInFrames: number, frame: number, isOut?: boolean, isTimed?: boolean) => React.CSSProperties;
+export declare const combineAnimations: (animations: Animation | Animation[] | undefined) => Animation[];
+export declare const combine: (...animations: (Animation | Animation[] | undefined)[]) => Animation[];

package/package.json

@@ -0,0 +1,49 @@
+{
+  "name": "@cliquify.me/animations",
+  "version": "6.0.0",
+  "private": false,
+  "publishConfig": {
+    "access": "public"
+  },
+  "files": [
+    "dist"
+  ],
+  "main": "dist/index.umd.js",
+  "module": "dist/index.es.js",
+  "types": "dist/index.d.ts",
+  "exports": {
+    ".": {
+      "import": "./dist/index.es.js",
+      "require": "./dist/index.umd.js",
+      "types": "./dist/index.d.ts"
+    }
+  },
+  "devDependencies": {
+    "@designcombo/events": "^1.0.2",
+    "@types/node": "^20.11.24",
+    "@types/react": "^18.2.0",
+    "rollup-plugin-peer-deps-external": "^2.2.4",
+    "typescript": "^5.3.3",
+    "vite": "^5.2.0",
+    "vite-plugin-dts": "^3.9.1",
+    "@cliquify.me/types": "5.0.0",
+    "@cliquify.me/typescript-config": "0.0.2"
+  },
+  "dependencies": {
+    "react": "^18.2.0",
+    "remotion": "^4.0.0",
+    "rxjs": "^7.8.1",
+    "nanoid": "^5.0.7"
+  },
+  "peerDependencies": {
+    "@designcombo/events": "^1.0.2",
+    "react": "^18.2.0",
+    "remotion": "^4.0.0",
+    "@cliquify.me/types": "5.0.0"
+  },
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc && vite build",
+    "format": "prettier --write ."
+  }
+}