@cliquify.me/animations 9.0.18 → 10.0.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.es.js +411 -336
- package/dist/index.umd.js +6 -6
- package/package.json +4 -4
package/dist/index.es.js
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
|
-
import { jsx as
|
|
2
|
-
import
|
|
3
|
-
import { interpolate as
|
|
4
|
-
const
|
|
1
|
+
import { jsx as H, Fragment as gt, jsxs as mt } from "react/jsx-runtime";
|
|
2
|
+
import U, { useMemo as St } from "react";
|
|
3
|
+
import { interpolate as G, Easing as E } from "remotion";
|
|
4
|
+
const vt = () => ({
|
|
5
5
|
scale: (t) => ({ transform: `scale(${t})` }),
|
|
6
6
|
growIn: (t) => ({ transform: `scale(${t})` }),
|
|
7
7
|
shrinkIn: (t) => ({ transform: `scale(${t})` }),
|
|
@@ -93,331 +93,331 @@ const nt = () => ({
|
|
|
93
93
|
borderRadius: `${t}px`,
|
|
94
94
|
overflow: "hidden"
|
|
95
95
|
})
|
|
96
|
-
}),
|
|
97
|
-
const
|
|
98
|
-
for (let
|
|
99
|
-
|
|
100
|
-
return
|
|
101
|
-
},
|
|
102
|
-
const { from:
|
|
103
|
-
if (isNaN(
|
|
96
|
+
}), bt = (t, d = 0) => {
|
|
97
|
+
const s = [], a = t / 5;
|
|
98
|
+
for (let c = 0; c < 6; c += 1)
|
|
99
|
+
s.push(c * a + d);
|
|
100
|
+
return s;
|
|
101
|
+
}, Nt = (t, d, s, a = !1) => {
|
|
102
|
+
const { from: c, to: o, ease: b } = d, h = d.durationInFrames || 30, u = Number(c), n = Number(o), r = Math.max(1, Number(h));
|
|
103
|
+
if (isNaN(u) || isNaN(n))
|
|
104
104
|
return console.error("Invalid animation values:", {
|
|
105
|
-
from:
|
|
106
|
-
to:
|
|
107
|
-
animationDurationInFrames:
|
|
108
|
-
property:
|
|
109
|
-
}),
|
|
110
|
-
|
|
111
|
-
`durationInFrames is undefined for animation: ${
|
|
105
|
+
from: c,
|
|
106
|
+
to: o,
|
|
107
|
+
animationDurationInFrames: h,
|
|
108
|
+
property: d.property
|
|
109
|
+
}), u;
|
|
110
|
+
h === void 0 && console.warn(
|
|
111
|
+
`durationInFrames is undefined for animation: ${d.property}. Using 1 frame as default.`
|
|
112
112
|
);
|
|
113
|
-
const
|
|
114
|
-
if (
|
|
115
|
-
return t <
|
|
116
|
-
let
|
|
117
|
-
if (
|
|
118
|
-
|
|
119
|
-
|
|
113
|
+
const f = d.delay || 0;
|
|
114
|
+
if (d.property === "hide-show" || d.property === "hide" || d.property === "show")
|
|
115
|
+
return t < f ? u : n;
|
|
116
|
+
let $;
|
|
117
|
+
if (d.property === "moveScaleIn" ? $ = a ? [
|
|
118
|
+
s - r - f,
|
|
119
|
+
s - r * 0.5 - f
|
|
120
120
|
] : [
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
] :
|
|
124
|
-
|
|
125
|
-
|
|
121
|
+
f + r * 0.5,
|
|
122
|
+
f + r
|
|
123
|
+
] : d.property === "moveTranslateY" ? $ = a ? [
|
|
124
|
+
s - r * 0.5 - f,
|
|
125
|
+
s - f
|
|
126
126
|
] : [
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
] :
|
|
130
|
-
|
|
131
|
-
|
|
127
|
+
f,
|
|
128
|
+
f + r * 0.5
|
|
129
|
+
] : $ = a ? [
|
|
130
|
+
s - r - f,
|
|
131
|
+
s - f
|
|
132
132
|
] : [
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
],
|
|
136
|
-
const
|
|
133
|
+
f,
|
|
134
|
+
f + r
|
|
135
|
+
], d.property.includes("shake")) {
|
|
136
|
+
const X = a ? bt(
|
|
137
137
|
r,
|
|
138
|
-
|
|
139
|
-
) :
|
|
140
|
-
return
|
|
138
|
+
s - r - f
|
|
139
|
+
) : bt(r, f);
|
|
140
|
+
return G(
|
|
141
141
|
t,
|
|
142
|
-
|
|
143
|
-
[0,
|
|
142
|
+
X,
|
|
143
|
+
[0, u, n, u, n, 0],
|
|
144
144
|
{
|
|
145
145
|
extrapolateLeft: "clamp",
|
|
146
146
|
extrapolateRight: "clamp",
|
|
147
|
-
easing:
|
|
147
|
+
easing: b
|
|
148
148
|
}
|
|
149
149
|
);
|
|
150
150
|
}
|
|
151
|
-
return
|
|
151
|
+
return G(t, $, [u, n], {
|
|
152
152
|
extrapolateLeft: "clamp",
|
|
153
153
|
extrapolateRight: "clamp",
|
|
154
|
-
easing:
|
|
154
|
+
easing: b
|
|
155
155
|
});
|
|
156
|
-
},
|
|
156
|
+
}, J = (t) => {
|
|
157
157
|
if (t == null) return 0;
|
|
158
158
|
if (typeof t == "number")
|
|
159
159
|
return Number.isNaN(t) ? 0 : t;
|
|
160
160
|
if (typeof t == "object") {
|
|
161
161
|
if (t.rotate !== void 0 && t.rotate !== null) {
|
|
162
|
-
const
|
|
163
|
-
if (!Number.isNaN(
|
|
162
|
+
const c = parseFloat(String(t.rotate));
|
|
163
|
+
if (!Number.isNaN(c)) return c;
|
|
164
164
|
}
|
|
165
165
|
if (t.rotation !== void 0 && t.rotation !== null) {
|
|
166
|
-
const
|
|
167
|
-
if (!Number.isNaN(
|
|
166
|
+
const c = parseFloat(String(t.rotation));
|
|
167
|
+
if (!Number.isNaN(c)) return c;
|
|
168
168
|
}
|
|
169
|
-
return t.transform ?
|
|
169
|
+
return t.transform ? J(t.transform) : 0;
|
|
170
170
|
}
|
|
171
|
-
const
|
|
172
|
-
if (
|
|
173
|
-
return parseFloat(
|
|
174
|
-
const
|
|
175
|
-
if (
|
|
176
|
-
const
|
|
177
|
-
if (
|
|
178
|
-
const [
|
|
179
|
-
return Math.atan2(
|
|
171
|
+
const d = String(t), s = /rotate\((-?[\d.]+)deg\)/.exec(d);
|
|
172
|
+
if (s)
|
|
173
|
+
return parseFloat(s[1]) || 0;
|
|
174
|
+
const a = /matrix\(([^)]+)\)/.exec(d);
|
|
175
|
+
if (a) {
|
|
176
|
+
const c = a[1].split(",").map((o) => parseFloat(o.trim()));
|
|
177
|
+
if (c.length >= 4) {
|
|
178
|
+
const [o, b] = c;
|
|
179
|
+
return Math.atan2(b, o) * (180 / Math.PI);
|
|
180
180
|
}
|
|
181
181
|
}
|
|
182
182
|
return 0;
|
|
183
|
-
},
|
|
184
|
-
var
|
|
185
|
-
const { property:
|
|
186
|
-
if (
|
|
187
|
-
const
|
|
188
|
-
let
|
|
189
|
-
if (
|
|
190
|
-
const
|
|
191
|
-
|
|
183
|
+
}, $t = (t, d, s, a, c) => {
|
|
184
|
+
var u, n, r, f, $;
|
|
185
|
+
const { property: o } = t;
|
|
186
|
+
if (o === "move") {
|
|
187
|
+
const X = Number(((u = t.details) == null ? void 0 : u.fromX) ?? t.from ?? 0), R = Number(((n = t.details) == null ? void 0 : n.toX) ?? t.to ?? 0), W = Number(((r = t.details) == null ? void 0 : r.fromY) ?? 0), M = Number(((f = t.details) == null ? void 0 : f.toY) ?? 0), P = Number((($ = t.details) == null ? void 0 : $.scale) || 1) || 1;
|
|
188
|
+
let j = c;
|
|
189
|
+
if (j == null || Number.isNaN(j)) {
|
|
190
|
+
const i = t.details;
|
|
191
|
+
j = J((i == null ? void 0 : i.rotate) ?? (i == null ? void 0 : i.rotation) ?? (i == null ? void 0 : i.transform));
|
|
192
192
|
}
|
|
193
|
-
const
|
|
193
|
+
const e = t.delay || 0, v = t.durationInFrames || 30, C = a ? [s - v - e, s - e] : [e, e + v], F = G(d, C, [X, R], {
|
|
194
194
|
extrapolateLeft: "clamp",
|
|
195
195
|
extrapolateRight: "clamp",
|
|
196
196
|
easing: t.ease
|
|
197
|
-
}), x =
|
|
197
|
+
}), x = G(d, C, [W, M], {
|
|
198
198
|
extrapolateLeft: "clamp",
|
|
199
199
|
extrapolateRight: "clamp",
|
|
200
200
|
easing: t.ease
|
|
201
|
-
}),
|
|
201
|
+
}), w = (j || 0) * Math.PI / 180, Y = Math.cos(w), l = Math.sin(w), g = F * Y + x * l, m = -F * l + x * Y, T = g / P, I = m / P;
|
|
202
202
|
return {
|
|
203
|
-
transform: `translateX(${
|
|
203
|
+
transform: `translateX(${T}px) translateY(${I}px)`
|
|
204
204
|
};
|
|
205
205
|
}
|
|
206
|
-
const
|
|
207
|
-
return (
|
|
208
|
-
},
|
|
206
|
+
const b = Nt(d, t, s, a), h = vt();
|
|
207
|
+
return (h[o] || h.default)(b);
|
|
208
|
+
}, Z = (t, d, s, a = !1, c = !1, o) => U.useMemo(() => {
|
|
209
209
|
if (t.length === 0) return {};
|
|
210
|
-
const
|
|
211
|
-
(
|
|
210
|
+
const b = t.filter(
|
|
211
|
+
(h) => h.from !== void 0 && h.to !== void 0
|
|
212
212
|
);
|
|
213
|
-
if (
|
|
214
|
-
const
|
|
215
|
-
return
|
|
216
|
-
const r =
|
|
213
|
+
if (b.length !== t.length && console.error("Some animations are invalid and will be ignored"), c) {
|
|
214
|
+
const h = [];
|
|
215
|
+
return b.reverse().forEach((n) => {
|
|
216
|
+
const r = $t(
|
|
217
217
|
n,
|
|
218
|
-
|
|
219
|
-
|
|
218
|
+
s,
|
|
219
|
+
d,
|
|
220
220
|
!1,
|
|
221
|
-
|
|
221
|
+
o
|
|
222
222
|
);
|
|
223
|
-
|
|
224
|
-
}),
|
|
225
|
-
(n, r) => (Object.keys(r).forEach((
|
|
226
|
-
|
|
223
|
+
h.push(r);
|
|
224
|
+
}), h.reduce(
|
|
225
|
+
(n, r) => (Object.keys(r).forEach((f) => {
|
|
226
|
+
f === "transform" || f === "filter" ? n[f] = n[f] ? `${n[f]} ${r[f]}` : r[f] : n[f] = r[f];
|
|
227
227
|
}), n),
|
|
228
228
|
{}
|
|
229
229
|
);
|
|
230
230
|
} else
|
|
231
|
-
return
|
|
232
|
-
(
|
|
233
|
-
r === "transform" || r === "filter" ?
|
|
234
|
-
}),
|
|
231
|
+
return b.map((u) => $t(u, s, d, a, o)).reduce(
|
|
232
|
+
(u, n) => (Object.keys(n).forEach((r) => {
|
|
233
|
+
r === "transform" || r === "filter" ? u[r] = u[r] ? `${u[r]} ${n[r]}` : n[r] : u[r] = n[r];
|
|
234
|
+
}), u),
|
|
235
235
|
{}
|
|
236
236
|
);
|
|
237
|
-
}, [t,
|
|
238
|
-
const
|
|
239
|
-
return t.forEach((
|
|
240
|
-
Array.isArray(
|
|
241
|
-
}),
|
|
242
|
-
(
|
|
243
|
-
) ?
|
|
244
|
-
(
|
|
245
|
-
...
|
|
246
|
-
from: Math.min(
|
|
247
|
-
to: Math.max(
|
|
237
|
+
}, [t, s, d, a, o]), z = (t) => t ? Array.isArray(t) ? t : [t] : [], Mt = (...t) => {
|
|
238
|
+
const d = [];
|
|
239
|
+
return t.forEach((s) => {
|
|
240
|
+
Array.isArray(s) ? d.push(...s) : s && d.push(s);
|
|
241
|
+
}), d.filter((s) => s !== void 0).reduce((s, a) => s.find(
|
|
242
|
+
(o) => o.property === a.property
|
|
243
|
+
) ? s.map(
|
|
244
|
+
(o) => o.property === a.property ? {
|
|
245
|
+
...o,
|
|
246
|
+
from: Math.min(o.from, a.from),
|
|
247
|
+
to: Math.max(o.to, a.to),
|
|
248
248
|
durationInFrames: Math.max(
|
|
249
|
-
|
|
250
|
-
|
|
249
|
+
o.durationInFrames,
|
|
250
|
+
a.durationInFrames
|
|
251
251
|
),
|
|
252
|
-
delay: Math.min(
|
|
253
|
-
ease: (
|
|
252
|
+
delay: Math.min(o.delay || 0, a.delay || 0),
|
|
253
|
+
ease: (b) => (o.ease(b) + a.ease(b)) / 2
|
|
254
254
|
// Average the easing functions
|
|
255
|
-
} :
|
|
256
|
-
) : [...
|
|
257
|
-
},
|
|
255
|
+
} : o
|
|
256
|
+
) : [...s, a], []);
|
|
257
|
+
}, Pt = ({
|
|
258
258
|
animationIn: t,
|
|
259
|
-
animationOut:
|
|
260
|
-
durationInFrames:
|
|
261
|
-
children:
|
|
262
|
-
style:
|
|
263
|
-
frame:
|
|
264
|
-
isTransition:
|
|
265
|
-
basicCharAnimationsIn:
|
|
266
|
-
basicCharAnimationsOut:
|
|
259
|
+
animationOut: d,
|
|
260
|
+
durationInFrames: s,
|
|
261
|
+
children: a,
|
|
262
|
+
style: c = {},
|
|
263
|
+
frame: o,
|
|
264
|
+
isTransition: b = !1,
|
|
265
|
+
basicCharAnimationsIn: h = [],
|
|
266
|
+
basicCharAnimationsOut: u = []
|
|
267
267
|
}) => {
|
|
268
|
-
const n =
|
|
269
|
-
(
|
|
270
|
-
), r =
|
|
271
|
-
|
|
268
|
+
const n = J(
|
|
269
|
+
(c == null ? void 0 : c.transform) || (c == null ? void 0 : c.rotate) || (c == null ? void 0 : c.rotation)
|
|
270
|
+
), r = Z(
|
|
271
|
+
z(t),
|
|
272
|
+
s,
|
|
272
273
|
o,
|
|
273
|
-
e,
|
|
274
274
|
!1,
|
|
275
275
|
!1,
|
|
276
276
|
n
|
|
277
|
-
),
|
|
278
|
-
|
|
277
|
+
), f = Z(
|
|
278
|
+
z(d),
|
|
279
|
+
s,
|
|
279
280
|
o,
|
|
280
|
-
e,
|
|
281
281
|
!0,
|
|
282
282
|
!1,
|
|
283
283
|
n
|
|
284
|
-
),
|
|
285
|
-
|
|
284
|
+
), $ = Z(
|
|
285
|
+
z(h),
|
|
286
|
+
s,
|
|
286
287
|
o,
|
|
287
|
-
e,
|
|
288
288
|
!0,
|
|
289
289
|
!1,
|
|
290
290
|
n
|
|
291
|
-
),
|
|
292
|
-
|
|
291
|
+
), X = Z(
|
|
292
|
+
z(u),
|
|
293
|
+
s,
|
|
293
294
|
o,
|
|
294
|
-
e,
|
|
295
295
|
!0,
|
|
296
296
|
!1,
|
|
297
297
|
n
|
|
298
|
-
),
|
|
299
|
-
const x = Object.keys(r).length > 0,
|
|
300
|
-
(
|
|
298
|
+
), R = U.useMemo(() => {
|
|
299
|
+
const x = Object.keys(r).length > 0, w = t == null ? void 0 : t.reduce(
|
|
300
|
+
(l, g) => Math.min(l, g.delay || 0),
|
|
301
301
|
1 / 0
|
|
302
|
-
),
|
|
303
|
-
return x &&
|
|
304
|
-
}, [r,
|
|
305
|
-
if (
|
|
306
|
-
return { visibility:
|
|
307
|
-
const x =
|
|
302
|
+
), Y = o - (w || 0);
|
|
303
|
+
return x && Y < 0 ? { visibility: b ? "visible" : "hidden" } : r;
|
|
304
|
+
}, [r, o, t, b]), W = U.useMemo(() => {
|
|
305
|
+
if (o > s)
|
|
306
|
+
return { visibility: b ? "visible" : "hidden" };
|
|
307
|
+
const x = z(d);
|
|
308
308
|
if (!x || x.length === 0) return {};
|
|
309
|
-
let
|
|
310
|
-
x.forEach((
|
|
311
|
-
const
|
|
312
|
-
|
|
309
|
+
let w = 0;
|
|
310
|
+
x.forEach((l) => {
|
|
311
|
+
const g = (l.durationInFrames || 0) + (l.delay || 0);
|
|
312
|
+
g > w && (w = g);
|
|
313
313
|
});
|
|
314
|
-
const
|
|
315
|
-
return
|
|
316
|
-
}, [
|
|
314
|
+
const Y = Math.max(0, s - w);
|
|
315
|
+
return o < Y ? {} : f;
|
|
316
|
+
}, [f, o, d, s, b]), M = U.useMemo(() => {
|
|
317
317
|
const x = {
|
|
318
|
-
...
|
|
318
|
+
...R
|
|
319
319
|
};
|
|
320
|
-
return Object.entries(
|
|
321
|
-
|
|
320
|
+
return Object.entries(W).forEach(([w, Y]) => {
|
|
321
|
+
w === "transform" ? x[w] = `${x[w] || ""} ${Y || ""}`.trim() : w in x && typeof x[w] == "number" && typeof Y == "number" ? x[w] = x[w] * Y : x[w] = Y;
|
|
322
322
|
}), x;
|
|
323
|
-
}, [
|
|
324
|
-
const x =
|
|
325
|
-
translateX:
|
|
326
|
-
translateY:
|
|
327
|
-
scale:
|
|
328
|
-
rotation:
|
|
329
|
-
rotateX:
|
|
330
|
-
rotateY:
|
|
331
|
-
rotateZ:
|
|
332
|
-
} =
|
|
333
|
-
return `${
|
|
334
|
-
}, [
|
|
335
|
-
top:
|
|
336
|
-
left:
|
|
337
|
-
position:
|
|
338
|
-
transform:
|
|
339
|
-
...
|
|
340
|
-
} =
|
|
341
|
-
return /* @__PURE__ */
|
|
323
|
+
}, [R, W]), P = St(() => {
|
|
324
|
+
const x = M.transform || "", {
|
|
325
|
+
translateX: w,
|
|
326
|
+
translateY: Y,
|
|
327
|
+
scale: l,
|
|
328
|
+
rotation: g,
|
|
329
|
+
rotateX: m,
|
|
330
|
+
rotateY: T,
|
|
331
|
+
rotateZ: I
|
|
332
|
+
} = Yt(x);
|
|
333
|
+
return `${g} ${w} ${Y} ${l} ${m} ${T} ${I}`.trim();
|
|
334
|
+
}, [M]), {
|
|
335
|
+
top: j,
|
|
336
|
+
left: e,
|
|
337
|
+
position: v,
|
|
338
|
+
transform: C,
|
|
339
|
+
...F
|
|
340
|
+
} = c || {};
|
|
341
|
+
return /* @__PURE__ */ H(
|
|
342
342
|
"div",
|
|
343
343
|
{
|
|
344
344
|
style: {
|
|
345
345
|
width: "100%",
|
|
346
346
|
height: "100%",
|
|
347
|
-
overflow:
|
|
347
|
+
overflow: M.overflow || $.overflow || X.overflow || "visible",
|
|
348
348
|
pointerEvents: "none"
|
|
349
349
|
},
|
|
350
|
-
children: /* @__PURE__ */
|
|
350
|
+
children: /* @__PURE__ */ H(
|
|
351
351
|
"div",
|
|
352
352
|
{
|
|
353
353
|
style: {
|
|
354
354
|
width: "100%",
|
|
355
355
|
height: "100%",
|
|
356
|
-
...
|
|
357
|
-
...
|
|
356
|
+
...F,
|
|
357
|
+
...M,
|
|
358
358
|
overflow: "visible",
|
|
359
|
-
transform:
|
|
359
|
+
transform: P,
|
|
360
360
|
pointerEvents: "none",
|
|
361
|
-
background: Object.keys(
|
|
361
|
+
background: Object.keys(M).length === 0 ? "transparent" : M.backgroundColor
|
|
362
362
|
},
|
|
363
|
-
children:
|
|
363
|
+
children: a
|
|
364
364
|
}
|
|
365
365
|
)
|
|
366
366
|
}
|
|
367
367
|
);
|
|
368
|
-
},
|
|
369
|
-
let
|
|
370
|
-
const
|
|
371
|
-
|
|
368
|
+
}, Yt = (t) => {
|
|
369
|
+
let d = "", s = "", a = "scale(1)", c = "", o = "", b = "", h = "";
|
|
370
|
+
const u = t.match(/translateX\([^)]+\)/g);
|
|
371
|
+
u && (d = u[u.length - 1]);
|
|
372
372
|
const n = t.match(/translateY\([^)]+\)/g);
|
|
373
|
-
n && (
|
|
373
|
+
n && (s = n[n.length - 1]);
|
|
374
374
|
const r = t.match(/scale\([^)]+\)/g);
|
|
375
|
-
r && (
|
|
376
|
-
const
|
|
377
|
-
|
|
378
|
-
const
|
|
379
|
-
|
|
380
|
-
const
|
|
381
|
-
|
|
382
|
-
const
|
|
383
|
-
return
|
|
384
|
-
},
|
|
375
|
+
r && (a = r[r.length - 1]);
|
|
376
|
+
const f = t.match(/rotate\([^)]+\)/g);
|
|
377
|
+
f && (c = f[f.length - 1]);
|
|
378
|
+
const $ = t.match(/rotateX\([^)]+\)/g);
|
|
379
|
+
$ && (o = $[$.length - 1]);
|
|
380
|
+
const X = t.match(/rotateY\([^)]+\)/g);
|
|
381
|
+
X && (b = X[X.length - 1]);
|
|
382
|
+
const R = t.match(/rotateZ\([^)]+\)/g);
|
|
383
|
+
return R && (h = R[R.length - 1]), { translateX: d, translateY: s, scale: a, rotation: c, rotateX: o, rotateY: b, rotateZ: h };
|
|
384
|
+
}, Ct = ({
|
|
385
385
|
animationTimed: t,
|
|
386
|
-
durationInFrames:
|
|
387
|
-
children:
|
|
388
|
-
style:
|
|
389
|
-
frame:
|
|
386
|
+
durationInFrames: d,
|
|
387
|
+
children: s,
|
|
388
|
+
style: a = {},
|
|
389
|
+
frame: c
|
|
390
390
|
}) => {
|
|
391
|
-
const
|
|
392
|
-
(
|
|
393
|
-
),
|
|
394
|
-
|
|
395
|
-
|
|
396
|
-
|
|
391
|
+
const o = J(
|
|
392
|
+
(a == null ? void 0 : a.transform) || (a == null ? void 0 : a.rotate) || (a == null ? void 0 : a.rotation)
|
|
393
|
+
), b = Z(
|
|
394
|
+
z(t),
|
|
395
|
+
d,
|
|
396
|
+
c,
|
|
397
397
|
!1,
|
|
398
398
|
!0,
|
|
399
|
-
|
|
400
|
-
),
|
|
401
|
-
...
|
|
402
|
-
}), [
|
|
403
|
-
return /* @__PURE__ */
|
|
399
|
+
o
|
|
400
|
+
), h = U.useMemo(() => ({
|
|
401
|
+
...b
|
|
402
|
+
}), [b]), u = !!h.borderRadius;
|
|
403
|
+
return /* @__PURE__ */ H(
|
|
404
404
|
"div",
|
|
405
405
|
{
|
|
406
406
|
style: {
|
|
407
|
-
overflow:
|
|
408
|
-
borderRadius:
|
|
407
|
+
overflow: u ? "hidden" : h.overflow || "visible",
|
|
408
|
+
borderRadius: h.borderRadius,
|
|
409
409
|
pointerEvents: "none",
|
|
410
|
-
height:
|
|
411
|
-
width:
|
|
412
|
-
...
|
|
413
|
-
...
|
|
410
|
+
height: a.height || "100%",
|
|
411
|
+
width: a.width || "100%",
|
|
412
|
+
...h,
|
|
413
|
+
...u ? { overflow: "hidden" } : {}
|
|
414
414
|
},
|
|
415
|
-
children: /* @__PURE__ */
|
|
415
|
+
children: /* @__PURE__ */ H(
|
|
416
416
|
"div",
|
|
417
417
|
{
|
|
418
418
|
style: {
|
|
419
|
-
overflow:
|
|
420
|
-
borderRadius:
|
|
419
|
+
overflow: u ? "hidden" : "visible",
|
|
420
|
+
borderRadius: h.borderRadius,
|
|
421
421
|
pointerEvents: "none",
|
|
422
422
|
height: "100%",
|
|
423
423
|
width: "100%",
|
|
@@ -425,181 +425,256 @@ const nt = () => ({
|
|
|
425
425
|
alignItems: "center",
|
|
426
426
|
justifyContent: "center"
|
|
427
427
|
},
|
|
428
|
-
children:
|
|
428
|
+
children: s
|
|
429
429
|
}
|
|
430
430
|
)
|
|
431
431
|
}
|
|
432
432
|
);
|
|
433
|
-
},
|
|
433
|
+
}, yt = (t) => {
|
|
434
434
|
if (typeof (t == null ? void 0 : t.ease) == "function")
|
|
435
435
|
return t.ease;
|
|
436
436
|
switch (t == null ? void 0 : t.easing) {
|
|
437
437
|
case "ease-in":
|
|
438
438
|
case "accelerate":
|
|
439
|
-
return
|
|
439
|
+
return E.in(E.cubic);
|
|
440
440
|
case "ease-out":
|
|
441
441
|
case "smooth":
|
|
442
442
|
case "slowDown":
|
|
443
|
-
return
|
|
443
|
+
return E.out(E.cubic);
|
|
444
444
|
case "ease-in-out":
|
|
445
445
|
case "natural":
|
|
446
446
|
case "swing":
|
|
447
|
-
return
|
|
447
|
+
return E.inOut(E.cubic);
|
|
448
448
|
case "bounce":
|
|
449
|
-
return
|
|
449
|
+
return E.bounce;
|
|
450
450
|
case "elastic":
|
|
451
|
-
return
|
|
451
|
+
return E.elastic(1);
|
|
452
452
|
case "overshoot":
|
|
453
453
|
case "impulse":
|
|
454
|
-
return
|
|
454
|
+
return E.out(E.back(1.7));
|
|
455
455
|
case "none":
|
|
456
456
|
case "linear":
|
|
457
457
|
default:
|
|
458
|
-
return
|
|
458
|
+
return E.linear;
|
|
459
459
|
}
|
|
460
|
-
},
|
|
461
|
-
const
|
|
460
|
+
}, Xt = (t, d) => {
|
|
461
|
+
const s = d * Math.PI / 180, a = Math.cos(s), c = Math.sin(s), o = t / 100 * 50, b = 50, h = 50, u = 200, n = a, r = c, f = -c, $ = a;
|
|
462
462
|
return `polygon(${[
|
|
463
463
|
[
|
|
464
|
-
|
|
465
|
-
|
|
464
|
+
b - n * u - f * o,
|
|
465
|
+
h - r * u - $ * o
|
|
466
466
|
],
|
|
467
467
|
[
|
|
468
|
-
|
|
469
|
-
|
|
468
|
+
b + n * u - f * o,
|
|
469
|
+
h + r * u - $ * o
|
|
470
470
|
],
|
|
471
471
|
[
|
|
472
|
-
|
|
473
|
-
|
|
472
|
+
b + n * u + f * o,
|
|
473
|
+
h + r * u + $ * o
|
|
474
474
|
],
|
|
475
475
|
[
|
|
476
|
-
|
|
477
|
-
|
|
476
|
+
b - n * u + f * o,
|
|
477
|
+
h - r * u + $ * o
|
|
478
478
|
]
|
|
479
|
-
].map(([
|
|
480
|
-
},
|
|
479
|
+
].map(([R, W]) => `${R}% ${W}%`).join(", ")})`;
|
|
480
|
+
}, Bt = ({
|
|
481
481
|
children: t,
|
|
482
|
-
currentWidth:
|
|
483
|
-
currentHeight:
|
|
484
|
-
frame:
|
|
485
|
-
item:
|
|
486
|
-
keyframeAnimations:
|
|
487
|
-
durationInFrames:
|
|
482
|
+
currentWidth: d,
|
|
483
|
+
currentHeight: s,
|
|
484
|
+
frame: a,
|
|
485
|
+
item: c,
|
|
486
|
+
keyframeAnimations: o,
|
|
487
|
+
durationInFrames: b
|
|
488
488
|
}) => {
|
|
489
|
-
var
|
|
490
|
-
if (!
|
|
491
|
-
return /* @__PURE__ */
|
|
492
|
-
const
|
|
493
|
-
var
|
|
494
|
-
return !!((
|
|
495
|
-
},
|
|
496
|
-
var
|
|
497
|
-
return !!((
|
|
498
|
-
}, n =
|
|
499
|
-
(
|
|
500
|
-
), r =
|
|
501
|
-
(
|
|
489
|
+
var _, k, A, tt, et, rt, ot, nt, st, at, lt, it, ct, dt, ft, ut, pt, ht;
|
|
490
|
+
if (!o || !Array.isArray(o) || o.length === 0)
|
|
491
|
+
return /* @__PURE__ */ H(gt, { children: t });
|
|
492
|
+
const h = (p) => {
|
|
493
|
+
var B, N;
|
|
494
|
+
return !!((B = p == null ? void 0 : p.property) != null && B.includes("maskReveal") || (N = p == null ? void 0 : p.id) != null && N.includes("maskReveal"));
|
|
495
|
+
}, u = (p) => {
|
|
496
|
+
var B, N;
|
|
497
|
+
return !!((p == null ? void 0 : p.type) === "exit" || (B = p == null ? void 0 : p.property) != null && B.includes("Out") || (N = p == null ? void 0 : p.id) != null && N.includes("Out"));
|
|
498
|
+
}, n = o.find(
|
|
499
|
+
(p) => h(p) && !u(p)
|
|
500
|
+
), r = o.find(
|
|
501
|
+
(p) => h(p) && u(p)
|
|
502
502
|
);
|
|
503
503
|
if (!n && !r)
|
|
504
|
-
return /* @__PURE__ */
|
|
505
|
-
const
|
|
506
|
-
let
|
|
507
|
-
|
|
508
|
-
|
|
504
|
+
return /* @__PURE__ */ H(gt, { children: t });
|
|
505
|
+
const f = Math.max(1, b || 300), $ = n ? Math.max(1, Number(n.durationInFrames || 30)) : 30, X = n ? Math.max(0, Number(n.delay || 0)) : 0, R = r ? Math.max(1, Number(r.durationInFrames || 30)) : 30, W = r ? Math.max(0, Number(r.delay || 0)) : 0, M = r ? Math.max(0, f - R - W) : Number.POSITIVE_INFINITY;
|
|
506
|
+
let P = !1, j = !1, e = null, v = !1, C = 30, F = 0;
|
|
507
|
+
if (r && a >= M) {
|
|
508
|
+
e = r, v = !0, C = R, F = a - M;
|
|
509
|
+
const p = String(r.property || r.id || ""), B = p.includes("Blur") || p.includes("Soft") || !!((_ = r == null ? void 0 : r.details) != null && _.blurBottom) || !!((k = r == null ? void 0 : r.details) != null && k.softEdge);
|
|
510
|
+
F >= C - 1 && !B && (P = !0);
|
|
511
|
+
} else if (n)
|
|
512
|
+
if (a < X)
|
|
513
|
+
P = !0, e = n, v = !1, C = $, F = 0;
|
|
514
|
+
else if (a < X + $)
|
|
515
|
+
e = n, v = !1, C = $, F = a - X;
|
|
516
|
+
else {
|
|
517
|
+
const p = String(n.property || n.id || "");
|
|
518
|
+
p.includes("Blur") || p.includes("Soft") || !!((A = n == null ? void 0 : n.details) != null && A.blurBottom) || !!((tt = n == null ? void 0 : n.details) != null && tt.softEdge) ? (e = n, v = !1, C = $, F = $) : (j = !0, e = null);
|
|
519
|
+
}
|
|
520
|
+
else
|
|
521
|
+
j = !0, e = null;
|
|
522
|
+
const x = Math.max(0, F), w = C > 0 ? Math.min(Math.max(0, x / C), 1) : 1, Y = e ? yt(e) : E.linear, l = Math.max(
|
|
509
523
|
0,
|
|
510
|
-
Math.min(1,
|
|
524
|
+
Math.min(1, Y(w))
|
|
511
525
|
);
|
|
512
|
-
let
|
|
513
|
-
|
|
514
|
-
|
|
515
|
-
|
|
516
|
-
|
|
526
|
+
let g, m = "", T = 1;
|
|
527
|
+
const I = String(
|
|
528
|
+
(e == null ? void 0 : e.property) || (e == null ? void 0 : e.id) || ""
|
|
529
|
+
), i = ((et = e == null ? void 0 : e.details) == null ? void 0 : et.direction) || "up";
|
|
530
|
+
if (P)
|
|
531
|
+
g = "inset(100%)";
|
|
532
|
+
else if (j || !e)
|
|
533
|
+
g = void 0;
|
|
517
534
|
else {
|
|
518
|
-
const
|
|
519
|
-
|
|
520
|
-
|
|
521
|
-
|
|
522
|
-
|
|
523
|
-
|
|
524
|
-
|
|
525
|
-
|
|
526
|
-
W,
|
|
527
|
-
M
|
|
535
|
+
const p = I.includes("ShrinkScale"), B = I.includes("CenterScale"), N = I.includes("Slide") || I.includes("slide");
|
|
536
|
+
if (B) {
|
|
537
|
+
const y = Number(
|
|
538
|
+
((rt = e == null ? void 0 : e.details) == null ? void 0 : rt.angle) ?? (e == null ? void 0 : e.angle) ?? 0
|
|
539
|
+
), O = v ? 100 * (1 - l) : 100 * l;
|
|
540
|
+
g = Xt(
|
|
541
|
+
O,
|
|
542
|
+
y
|
|
528
543
|
);
|
|
529
|
-
} else if (
|
|
530
|
-
const
|
|
531
|
-
((
|
|
532
|
-
),
|
|
544
|
+
} else if (p) {
|
|
545
|
+
const y = Number(
|
|
546
|
+
((ot = e == null ? void 0 : e.details) == null ? void 0 : ot.initialVisiblePercent) ?? (e == null ? void 0 : e.initialVisiblePercent) ?? 50
|
|
547
|
+
), O = Math.max(
|
|
533
548
|
0,
|
|
534
|
-
Math.min(50, (100 -
|
|
535
|
-
),
|
|
536
|
-
|
|
537
|
-
${
|
|
538
|
-
${
|
|
539
|
-
${
|
|
540
|
-
${
|
|
549
|
+
Math.min(50, (100 - y) / 2)
|
|
550
|
+
), q = v ? O * l : O * (1 - l);
|
|
551
|
+
g = `inset(
|
|
552
|
+
${q}%
|
|
553
|
+
${q}%
|
|
554
|
+
${q}%
|
|
555
|
+
${q}%
|
|
541
556
|
)`;
|
|
542
|
-
} else if (
|
|
543
|
-
|
|
544
|
-
else if (
|
|
545
|
-
|
|
546
|
-
else if (
|
|
547
|
-
const
|
|
548
|
-
|
|
557
|
+
} else if (N)
|
|
558
|
+
g = "inset(0% 0% 0% 0%)", v ? i === "down" ? m = `translateY(${100 * l}%)` : i === "left" ? m = `translateX(${-100 * l}%)` : i === "right" ? m = `translateX(${100 * l}%)` : m = `translateY(${-100 * l}%)` : i === "down" ? m = `translateY(${-100 * (1 - l)}%)` : i === "left" ? m = `translateX(${100 * (1 - l)}%)` : i === "right" ? m = `translateX(${-100 * (1 - l)}%)` : m = `translateY(${100 * (1 - l)}%)`;
|
|
559
|
+
else if (I.includes("Center"))
|
|
560
|
+
g = `circle(${v ? 150 * (1 - l) : 150 * l}% at 50% 50%)`;
|
|
561
|
+
else if (I.includes("Corner")) {
|
|
562
|
+
const y = v ? l : 1 - l;
|
|
563
|
+
i === "down" ? g = `inset(0 ${100 * y}% ${100 * y}% 0)` : i === "up" ? g = `inset(${100 * y}% ${100 * y}% 0 0)` : i === "left" ? g = `inset(0 0 ${100 * y}% ${100 * y}%)` : i === "right" ? g = `inset(${100 * y}% 0 0 ${100 * y}%)` : g = `inset(0 ${100 * y}% ${100 * y}% 0)`;
|
|
549
564
|
} else
|
|
550
|
-
|
|
551
|
-
const
|
|
552
|
-
|
|
565
|
+
v ? i === "down" ? g = `inset(${100 * l}% 0 0 0)` : i === "left" ? g = `inset(0 0 0 ${100 * l}%)` : i === "right" ? g = `inset(0 ${100 * l}% 0 0)` : g = `inset(0 0 ${100 * l}% 0)` : i === "down" ? g = `inset(0 0 ${100 * (1 - l)}% 0)` : i === "left" ? g = `inset(0 0 0 ${100 * (1 - l)}%)` : i === "right" ? g = `inset(0 ${100 * (1 - l)}% 0 0)` : g = `inset(${100 * (1 - l)}% 0 0 0)`;
|
|
566
|
+
const S = !!((nt = e == null ? void 0 : e.details) != null && nt.scale || e != null && e.scale);
|
|
567
|
+
B || p ? ((st = e == null ? void 0 : e.details) == null ? void 0 : st.scale) === !1 ? T = 1 : T = v ? 1 + 0.5 * l : 1.5 - 0.5 * l : S && (T = v ? 1 - 0.2 * l : 0.8 + 0.2 * l);
|
|
568
|
+
}
|
|
569
|
+
const K = I.includes("Blur") || I.includes("Soft") || !!((at = e == null ? void 0 : e.details) != null && at.blurBottom) || !!((lt = e == null ? void 0 : e.details) != null && lt.softEdge);
|
|
570
|
+
let V;
|
|
571
|
+
if (K && !P && e) {
|
|
572
|
+
g = void 0;
|
|
573
|
+
const p = Number(((it = e == null ? void 0 : e.details) == null ? void 0 : it.featherSize) ?? 25), B = Number(((ct = e == null ? void 0 : e.details) == null ? void 0 : ct.maxRevealPercent) ?? 50), N = 30;
|
|
574
|
+
if (v) {
|
|
575
|
+
const S = 100 - (100 - B) * l;
|
|
576
|
+
i === "up" ? (m = `translateY(${N * l}%)`, V = `linear-gradient(to bottom, black 0%, black ${Math.max(
|
|
577
|
+
0,
|
|
578
|
+
S - p
|
|
579
|
+
)}%, transparent ${S}%, transparent 100%)`) : i === "down" ? (m = `translateY(${-N * l}%)`, V = `linear-gradient(to top, black 0%, black ${Math.max(
|
|
580
|
+
0,
|
|
581
|
+
S - p
|
|
582
|
+
)}%, transparent ${S}%, transparent 100%)`) : i === "left" ? (m = `translateX(${N * l}%)`, V = `linear-gradient(to right, black 0%, black ${Math.max(
|
|
583
|
+
0,
|
|
584
|
+
S - p
|
|
585
|
+
)}%, transparent ${S}%, transparent 100%)`) : i === "right" && (m = `translateX(${-N * l}%)`, V = `linear-gradient(to left, black 0%, black ${Math.max(
|
|
586
|
+
0,
|
|
587
|
+
S - p
|
|
588
|
+
)}%, transparent ${S}%, transparent 100%)`);
|
|
589
|
+
} else {
|
|
590
|
+
const S = B * l;
|
|
591
|
+
i === "up" ? (m = `translateY(${N * (1 - l)}%)`, V = `linear-gradient(to bottom, black 0%, black ${Math.max(
|
|
592
|
+
0,
|
|
593
|
+
S - p
|
|
594
|
+
)}%, transparent ${S}%, transparent 100%)`) : i === "down" ? (m = `translateY(${-N * (1 - l)}%)`, V = `linear-gradient(to top, black 0%, black ${Math.max(
|
|
595
|
+
0,
|
|
596
|
+
S - p
|
|
597
|
+
)}%, transparent ${S}%, transparent 100%)`) : i === "left" ? (m = `translateX(${N * (1 - l)}%)`, V = `linear-gradient(to right, black 0%, black ${Math.max(
|
|
598
|
+
0,
|
|
599
|
+
S - p
|
|
600
|
+
)}%, transparent ${S}%, transparent 100%)`) : i === "right" && (m = `translateX(${-N * (1 - l)}%)`, V = `linear-gradient(to left, black 0%, black ${Math.max(
|
|
601
|
+
0,
|
|
602
|
+
S - p
|
|
603
|
+
)}%, transparent ${S}%, transparent 100%)`);
|
|
604
|
+
}
|
|
553
605
|
}
|
|
554
|
-
const
|
|
555
|
-
|
|
556
|
-
|
|
557
|
-
].filter(Boolean).join(" ") || void 0,
|
|
558
|
-
return /* @__PURE__ */
|
|
606
|
+
const xt = [
|
|
607
|
+
m,
|
|
608
|
+
T !== 1 ? `scale(${T})` : ""
|
|
609
|
+
].filter(Boolean).join(" ") || void 0, L = (dt = c == null ? void 0 : c.details) == null ? void 0 : dt.boxShadow, Q = L && (L.x || L.y || L.blur) ? `drop-shadow(${L.x || 0}px ${L.y || 0}px ${L.blur || 0}px ${L.color || "#000000"})` : void 0, D = Number(((ft = e == null ? void 0 : e.details) == null ? void 0 : ft.blurAmount) ?? 16), wt = !!(K && (((ut = e == null ? void 0 : e.details) == null ? void 0 : ut.blurBottom) ?? !0));
|
|
610
|
+
return /* @__PURE__ */ H(
|
|
559
611
|
"div",
|
|
560
612
|
{
|
|
561
613
|
style: {
|
|
562
|
-
width:
|
|
563
|
-
height:
|
|
614
|
+
width: d !== void 0 ? d : "100%",
|
|
615
|
+
height: s !== void 0 ? s : "100%",
|
|
564
616
|
position: "relative",
|
|
565
|
-
visibility:
|
|
566
|
-
filter:
|
|
567
|
-
WebkitFilter:
|
|
617
|
+
visibility: P ? "hidden" : "visible",
|
|
618
|
+
filter: Q,
|
|
619
|
+
WebkitFilter: Q
|
|
568
620
|
},
|
|
569
|
-
children: /* @__PURE__ */
|
|
621
|
+
children: /* @__PURE__ */ mt(
|
|
570
622
|
"div",
|
|
571
623
|
{
|
|
572
624
|
style: {
|
|
573
625
|
width: "100%",
|
|
574
626
|
height: "100%",
|
|
575
627
|
position: "relative",
|
|
576
|
-
clipPath:
|
|
577
|
-
WebkitClipPath:
|
|
578
|
-
|
|
628
|
+
clipPath: g || void 0,
|
|
629
|
+
WebkitClipPath: g || void 0,
|
|
630
|
+
maskImage: V || void 0,
|
|
631
|
+
WebkitMaskImage: V || void 0,
|
|
632
|
+
overflow: g || V ? "hidden" : "visible"
|
|
579
633
|
},
|
|
580
|
-
children:
|
|
581
|
-
|
|
582
|
-
|
|
583
|
-
|
|
584
|
-
|
|
585
|
-
|
|
586
|
-
|
|
587
|
-
|
|
588
|
-
|
|
589
|
-
|
|
590
|
-
|
|
591
|
-
|
|
634
|
+
children: [
|
|
635
|
+
/* @__PURE__ */ H(
|
|
636
|
+
"div",
|
|
637
|
+
{
|
|
638
|
+
style: {
|
|
639
|
+
width: "100%",
|
|
640
|
+
height: "100%",
|
|
641
|
+
transform: xt,
|
|
642
|
+
transformOrigin: "center"
|
|
643
|
+
},
|
|
644
|
+
children: t
|
|
645
|
+
}
|
|
646
|
+
),
|
|
647
|
+
wt && !P && /* @__PURE__ */ H(
|
|
648
|
+
"div",
|
|
649
|
+
{
|
|
650
|
+
style: {
|
|
651
|
+
position: "absolute",
|
|
652
|
+
top: i === "down" ? 0 : void 0,
|
|
653
|
+
bottom: i === "up" ? 0 : void 0,
|
|
654
|
+
left: 0,
|
|
655
|
+
right: 0,
|
|
656
|
+
width: i === "left" || i === "right" ? ((pt = e == null ? void 0 : e.details) == null ? void 0 : pt.blurHeight) || "25%" : "100%",
|
|
657
|
+
height: i === "up" || i === "down" ? ((ht = e == null ? void 0 : e.details) == null ? void 0 : ht.blurHeight) || "25%" : "100%",
|
|
658
|
+
pointerEvents: "none",
|
|
659
|
+
backdropFilter: `blur(${D}px)`,
|
|
660
|
+
WebkitBackdropFilter: `blur(${D}px)`,
|
|
661
|
+
maskImage: i === "down" ? "linear-gradient(to bottom, rgba(0,0,0,1) 0%, rgba(0,0,0,0.8) 40%, transparent 100%)" : i === "left" ? "linear-gradient(to left, rgba(0,0,0,1) 0%, rgba(0,0,0,0.8) 40%, transparent 100%)" : i === "right" ? "linear-gradient(to right, rgba(0,0,0,1) 0%, rgba(0,0,0,0.8) 40%, transparent 100%)" : "linear-gradient(to top, rgba(0,0,0,1) 0%, rgba(0,0,0,0.8) 40%, transparent 100%)",
|
|
662
|
+
WebkitMaskImage: i === "down" ? "linear-gradient(to bottom, rgba(0,0,0,1) 0%, rgba(0,0,0,0.8) 40%, transparent 100%)" : i === "left" ? "linear-gradient(to left, rgba(0,0,0,1) 0%, rgba(0,0,0,0.8) 40%, transparent 100%)" : i === "right" ? "linear-gradient(to right, rgba(0,0,0,1) 0%, rgba(0,0,0,0.8) 40%, transparent 100%)" : "linear-gradient(to top, rgba(0,0,0,1) 0%, rgba(0,0,0,0.8) 40%, transparent 100%)"
|
|
663
|
+
}
|
|
664
|
+
}
|
|
665
|
+
)
|
|
666
|
+
]
|
|
592
667
|
}
|
|
593
668
|
)
|
|
594
669
|
}
|
|
595
670
|
);
|
|
596
|
-
},
|
|
671
|
+
}, Ft = Bt;
|
|
597
672
|
export {
|
|
598
|
-
|
|
599
|
-
|
|
600
|
-
|
|
601
|
-
|
|
602
|
-
|
|
603
|
-
|
|
604
|
-
|
|
673
|
+
Pt as BoxAnim,
|
|
674
|
+
Ct as ContentAnim,
|
|
675
|
+
Ft as MaskAnim,
|
|
676
|
+
Mt as combine,
|
|
677
|
+
z as combineAnimations,
|
|
678
|
+
Yt as extractTransformations,
|
|
679
|
+
Z as useAnimation
|
|
605
680
|
};
|
package/dist/index.umd.js
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
|
-
(function(M,m){typeof exports=="object"&&typeof module<"u"?m(exports,require("react/jsx-runtime"),require("react"),require("remotion")):typeof define=="function"&&define.amd?define(["exports","react/jsx-runtime","react","remotion"],m):(M=typeof globalThis<"u"?globalThis:M||self,m(M.animations={},M.jsxRuntime,M.React,M.remotion))})(this,function(M,m,L,S){"use strict";const re=()=>({scale:e=>({transform:`scale(${e})`}),growIn:e=>({transform:`scale(${e})`}),shrinkIn:e=>({transform:`scale(${e})`}),shrinkOut:e=>({transform:`scale(${e})`}),opacity:e=>({opacity:e}),translateX:e=>({transform:`translateX(${e}%)`}),translateY:e=>({transform:`translateY(${e}%)`}),rotate:e=>({transform:`rotate(${e}deg)`}),spin:e=>({transform:`rotate(${e}deg)`}),spinIn:e=>({transform:`rotate(${e}deg)`}),twistIn:e=>({transform:`rotate(${e}deg)`}),twistOut:e=>({transform:`rotate(${e}deg)`}),moveScaleIn:e=>({transform:`scale(${e})`}),spinOut:e=>({transform:`rotate(${e}deg)`}),default:()=>({}),rotateY:e=>({transform:`rotateY(${e}deg)`}),rotateX:e=>({transform:`rotateX(${e}deg)`}),blur:e=>({filter:`blur(${e}px)`}),blurIn:e=>({filter:`blur(${e}px)`}),blurOut:e=>({filter:`blur(${e}px)`}),blurV2In:e=>({filter:`blur(${e}px)`}),blurSlide:e=>({filter:`blur(${e}px)`,transform:`translateY(${e*5}%)`}),blurSlideV2In:e=>({filter:`blur(${e}px)`}),brightness:e=>({filter:`brightness(${e}%)`}),contrast:e=>({filter:`contrast(${e}%)`}),grayscale:e=>({filter:`grayscale(${e}%)`}),hue:e=>({filter:`hue-rotate(${e}deg)`}),saturation:e=>({filter:`saturate(${e}%)`}),vignette:e=>({filter:`contrast(${100+e*20}%) brightness(${100-e*20}%)`}),noise:e=>({filter:`contrast(${100+e*40}%) brightness(${100+e*20}%)`}),pixelate:e=>({filter:`contrast(${100+e*2}%)`}),chromaticAberration:e=>({filter:`hue-rotate(${e*10}deg) contrast(110%)`}),lightLeak:e=>({filter:`brightness(${100+e*50}%) saturate(${100+e*30}%)`}),duotone:e=>({filter:`sepia(${e*100}%) hue-rotate(${e*180}deg)`}),shakeHorizontalIn:e=>({transform:`translateX(${e}px)`}),shakeVerticalIn:e=>({transform:`translateY(${e}px)`}),shakeHorizontalOut:e=>({transform:`translateX(${e}px)`}),shakeVerticalOut:e=>({transform:`translateY(${e}px)`}),maskUpIn:e=>({transform:`translateY(${e}px)`,overflow:"hidden"}),maskUpOut:e=>({transform:`translateY(${e}px)`,overflow:"hidden"}),maskDownIn:e=>({transform:`translateY(${e}px)`,overflow:"hidden"}),maskDownOut:e=>({transform:`translateY(${e}px)`,overflow:"hidden"}),moveTranslateY:e=>({transform:`translateY(${e}%)`}),"hide-show":e=>({opacity:e}),hide:e=>({opacity:e}),show:e=>({opacity:e}),borderRadius:e=>({borderRadius:`${e}px`,overflow:"hidden"}),"corner-radius":e=>({borderRadius:`${e}px`,overflow:"hidden"})}),z=(e,l=0)=>{const s=[],o=e/5;for(let a=0;a<6;a+=1)s.push(a*o+l);return s},se=(e,l,s,o=!1)=>{const{from:a,to:t,ease:h}=l,u=l.durationInFrames||30,c=Number(a),n=Number(t),r=Math.max(1,Number(u));if(isNaN(c)||isNaN(n))return console.error("Invalid animation values:",{from:a,to:t,animationDurationInFrames:u,property:l.property}),c;u===void 0&&console.warn(`durationInFrames is undefined for animation: ${l.property}. Using 1 frame as default.`);const i=l.delay||0;if(l.property==="hide-show"||l.property==="hide"||l.property==="show")return e<i?c:n;let $;if(l.property==="moveScaleIn"?$=o?[s-r-i,s-r*.5-i]:[i+r*.5,i+r]:l.property==="moveTranslateY"?$=o?[s-r*.5-i,s-i]:[i,i+r*.5]:$=o?[s-r-i,s-i]:[i,i+r],l.property.includes("shake")){const E=o?z(r,s-r-i):z(r,i);return S.interpolate(e,E,[0,c,n,c,n,0],{extrapolateLeft:"clamp",extrapolateRight:"clamp",easing:h})}return S.interpolate(e,$,[c,n],{extrapolateLeft:"clamp",extrapolateRight:"clamp",easing:h})},Z=e=>{if(e==null)return 0;if(typeof e=="number")return Number.isNaN(e)?0:e;if(typeof e=="object"){if(e.rotate!==void 0&&e.rotate!==null){const a=parseFloat(String(e.rotate));if(!Number.isNaN(a))return a}if(e.rotation!==void 0&&e.rotation!==null){const a=parseFloat(String(e.rotation));if(!Number.isNaN(a))return a}return e.transform?Z(e.transform):0}const l=String(e),s=/rotate\((-?[\d.]+)deg\)/.exec(l);if(s)return parseFloat(s[1])||0;const o=/matrix\(([^)]+)\)/.exec(l);if(o){const a=o[1].split(",").map(t=>parseFloat(t.trim()));if(a.length>=4){const[t,h]=a;return Math.atan2(h,t)*(180/Math.PI)}}return 0},O=(e,l,s,o,a)=>{var c,n,r,i,$;const{property:t}=e;if(t==="move"){const E=Number(((c=e.details)==null?void 0:c.fromX)??e.from??0),X=Number(((n=e.details)==null?void 0:n.toX)??e.to??0),F=Number(((r=e.details)==null?void 0:r.fromY)??0),P=Number(((i=e.details)==null?void 0:i.toY)??0),T=Number((($=e.details)==null?void 0:$.scale)||1)||1;let A=a;if(A==null||Number.isNaN(A)){const w=e.details;A=Z((w==null?void 0:w.rotate)??(w==null?void 0:w.rotation)??(w==null?void 0:w.transform))}const d=e.delay||0,N=e.durationInFrames||30,j=o?[s-N-d,s-d]:[d,d+N],C=S.interpolate(l,j,[E,X],{extrapolateLeft:"clamp",extrapolateRight:"clamp",easing:e.ease}),x=S.interpolate(l,j,[F,P],{extrapolateLeft:"clamp",extrapolateRight:"clamp",easing:e.ease}),v=(A||0)*Math.PI/180,y=Math.cos(v),f=Math.sin(v),p=C*y+x*f,I=-C*f+x*y,V=p/T,W=I/T;return{transform:`translateX(${V}px) translateY(${W}px)`}}const h=se(l,e,s,o),u=re();return(u[t]||u.default)(h)},H=(e,l,s,o=!1,a=!1,t)=>L.useMemo(()=>{if(e.length===0)return{};const h=e.filter(u=>u.from!==void 0&&u.to!==void 0);if(h.length!==e.length&&console.error("Some animations are invalid and will be ignored"),a){const u=[];return h.reverse().forEach(n=>{const r=O(n,s,l,!1,t);u.push(r)}),u.reduce((n,r)=>(Object.keys(r).forEach(i=>{i==="transform"||i==="filter"?n[i]=n[i]?`${n[i]} ${r[i]}`:r[i]:n[i]=r[i]}),n),{})}else return h.map(c=>O(c,s,l,o,t)).reduce((c,n)=>(Object.keys(n).forEach(r=>{r==="transform"||r==="filter"?c[r]=c[r]?`${c[r]} ${n[r]}`:n[r]:c[r]=n[r]}),c),{})},[e,s,l,o,t]),R=e=>e?Array.isArray(e)?e:[e]:[],oe=(...e)=>{const l=[];return e.forEach(s=>{Array.isArray(s)?l.push(...s):s&&l.push(s)}),l.filter(s=>s!==void 0).reduce((s,o)=>s.find(t=>t.property===o.property)?s.map(t=>t.property===o.property?{...t,from:Math.min(t.from,o.from),to:Math.max(t.to,o.to),durationInFrames:Math.max(t.durationInFrames,o.durationInFrames),delay:Math.min(t.delay||0,o.delay||0),ease:h=>(t.ease(h)+o.ease(h))/2}:t):[...s,o],[])},ne=({animationIn:e,animationOut:l,durationInFrames:s,children:o,style:a={},frame:t,isTransition:h=!1,basicCharAnimationsIn:u=[],basicCharAnimationsOut:c=[]})=>{const n=Z((a==null?void 0:a.transform)||(a==null?void 0:a.rotate)||(a==null?void 0:a.rotation)),r=H(R(e),s,t,!1,!1,n),i=H(R(l),s,t,!0,!1,n),$=H(R(u),s,t,!0,!1,n),E=H(R(c),s,t,!0,!1,n),X=L.useMemo(()=>{const x=Object.keys(r).length>0,v=e==null?void 0:e.reduce((f,p)=>Math.min(f,p.delay||0),1/0),y=t-(v||0);return x&&y<0?{visibility:h?"visible":"hidden"}:r},[r,t,e,h]),F=L.useMemo(()=>{if(t>s)return{visibility:h?"visible":"hidden"};const x=R(l);if(!x||x.length===0)return{};let v=0;x.forEach(f=>{const p=(f.durationInFrames||0)+(f.delay||0);p>v&&(v=p)});const y=Math.max(0,s-v);return t<y?{}:i},[i,t,l,s,h]),P=L.useMemo(()=>{const x={...X};return Object.entries(F).forEach(([v,y])=>{v==="transform"?x[v]=`${x[v]||""} ${y||""}`.trim():v in x&&typeof x[v]=="number"&&typeof y=="number"?x[v]=x[v]*y:x[v]=y}),x},[X,F]),T=L.useMemo(()=>{const x=P.transform||"",{translateX:v,translateY:y,scale:f,rotation:p,rotateX:I,rotateY:V,rotateZ:W}=G(x);return`${p} ${v} ${y} ${f} ${I} ${V} ${W}`.trim()},[P]),{top:A,left:d,position:N,transform:j,...C}=a||{};return m.jsx("div",{style:{width:"100%",height:"100%",overflow:P.overflow||$.overflow||E.overflow||"visible",pointerEvents:"none"},children:m.jsx("div",{style:{width:"100%",height:"100%",...C,...P,overflow:"visible",transform:T,pointerEvents:"none",background:Object.keys(P).length===0?"transparent":P.backgroundColor},children:o})})},G=e=>{let l="",s="",o="scale(1)",a="",t="",h="",u="";const c=e.match(/translateX\([^)]+\)/g);c&&(l=c[c.length-1]);const n=e.match(/translateY\([^)]+\)/g);n&&(s=n[n.length-1]);const r=e.match(/scale\([^)]+\)/g);r&&(o=r[r.length-1]);const i=e.match(/rotate\([^)]+\)/g);i&&(a=i[i.length-1]);const $=e.match(/rotateX\([^)]+\)/g);$&&(t=$[$.length-1]);const E=e.match(/rotateY\([^)]+\)/g);E&&(h=E[E.length-1]);const X=e.match(/rotateZ\([^)]+\)/g);return X&&(u=X[X.length-1]),{translateX:l,translateY:s,scale:o,rotation:a,rotateX:t,rotateY:h,rotateZ:u}},ae=({animationTimed:e,durationInFrames:l,children:s,style:o={},frame:a})=>{const t=Z((o==null?void 0:o.transform)||(o==null?void 0:o.rotate)||(o==null?void 0:o.rotation)),h=H(R(e),l,a,!1,!0,t),u=L.useMemo(()=>({...h}),[h]),c=!!u.borderRadius;return m.jsx("div",{style:{overflow:c?"hidden":u.overflow||"visible",borderRadius:u.borderRadius,pointerEvents:"none",height:o.height||"100%",width:o.width||"100%",...u,...c?{overflow:"hidden"}:{}},children:m.jsx("div",{style:{overflow:c?"hidden":"visible",borderRadius:u.borderRadius,pointerEvents:"none",height:"100%",width:"100%",display:"flex",alignItems:"center",justifyContent:"center"},children:s})})},le=e=>{if(typeof(e==null?void 0:e.ease)=="function")return e.ease;switch(e==null?void 0:e.easing){case"ease-in":case"accelerate":return S.Easing.in(S.Easing.cubic);case"ease-out":case"smooth":case"slowDown":return S.Easing.out(S.Easing.cubic);case"ease-in-out":case"natural":case"swing":return S.Easing.inOut(S.Easing.cubic);case"bounce":return S.Easing.bounce;case"elastic":return S.Easing.elastic(1);case"overshoot":case"impulse":return S.Easing.out(S.Easing.back(1.7));case"none":case"linear":default:return S.Easing.linear}},ie=(e,l)=>{const s=l*Math.PI/180,o=Math.cos(s),a=Math.sin(s),t=e/100*50,h=50,u=50,c=200,n=o,r=a,i=-a,$=o;return`polygon(${[[h-n*c-i*t,u-r*c-$*t],[h+n*c-i*t,u+r*c-$*t],[h+n*c+i*t,u+r*c+$*t],[h-n*c+i*t,u-r*c+$*t]].map(([X,F])=>`${X}% ${F}%`).join(", ")})`},ce=({children:e,currentWidth:l,currentHeight:s,frame:o,item:a,keyframeAnimations:t,durationInFrames:h})=>{var K,Q,D,_,k,ee;if(!t||!Array.isArray(t)||t.length===0)return m.jsx(m.Fragment,{children:e});const u=g=>{var b,B;return!!((b=g==null?void 0:g.property)!=null&&b.includes("maskReveal")||(B=g==null?void 0:g.id)!=null&&B.includes("maskReveal"))},c=g=>{var b,B;return!!((g==null?void 0:g.type)==="exit"||(b=g==null?void 0:g.property)!=null&&b.includes("Out")||(B=g==null?void 0:g.id)!=null&&B.includes("Out"))},n=t.find(g=>u(g)&&!c(g)),r=t.find(g=>u(g)&&c(g));if(!n&&!r)return m.jsx(m.Fragment,{children:e});const i=Math.max(1,h||300),$=n?Math.max(1,Number(n.durationInFrames||30)):30,E=n?Math.max(0,Number(n.delay||0)):0,X=r?Math.max(1,Number(r.durationInFrames||30)):30,F=r?Math.max(0,Number(r.delay||0)):0,P=r?Math.max(0,i-X-F):Number.POSITIVE_INFINITY;let T=!1,A=!1,d=null,N=!1,j=30,C=0;r&&o>=P?(d=r,N=!0,j=X,C=o-P,C>=j-1&&(T=!0)):n?o<E?(T=!0,d=n,N=!1,j=$,C=0):o<E+$?(d=n,N=!1,j=$,C=o-E):(A=!0,d=null):(A=!0,d=null);const x=Math.max(0,C),v=j>0?Math.min(Math.max(0,x/j),1):1,y=d?le(d):S.Easing.linear,f=Math.max(0,Math.min(1,y(v)));let p,I="",V=1;if(T)p="inset(100%)";else if(A||!d)p=void 0;else{const g=String(d.property||d.id||""),b=((K=d.details)==null?void 0:K.direction)||"up",B=g.includes("ShrinkScale"),te=g.includes("CenterScale"),de=g.includes("Slide")||g.includes("slide");if(te){const Y=Number(((Q=d==null?void 0:d.details)==null?void 0:Q.angle)??(d==null?void 0:d.angle)??0),q=N?100*(1-f):100*f;p=ie(q,Y)}else if(B){const Y=Number(((D=d==null?void 0:d.details)==null?void 0:D.initialVisiblePercent)??(d==null?void 0:d.initialVisiblePercent)??50),q=Math.max(0,Math.min(50,(100-Y)/2)),U=N?q*f:q*(1-f);p=`inset(
|
|
2
|
-
${
|
|
3
|
-
${
|
|
4
|
-
${
|
|
5
|
-
${
|
|
6
|
-
)`}else if(
|
|
1
|
+
(function(E,N){typeof exports=="object"&&typeof module<"u"?N(exports,require("react/jsx-runtime"),require("react"),require("remotion")):typeof define=="function"&&define.amd?define(["exports","react/jsx-runtime","react","remotion"],N):(E=typeof globalThis<"u"?globalThis:E||self,N(E.animations={},E.jsxRuntime,E.React,E.remotion))})(this,function(E,N,q,Y){"use strict";const xt=()=>({scale:t=>({transform:`scale(${t})`}),growIn:t=>({transform:`scale(${t})`}),shrinkIn:t=>({transform:`scale(${t})`}),shrinkOut:t=>({transform:`scale(${t})`}),opacity:t=>({opacity:t}),translateX:t=>({transform:`translateX(${t}%)`}),translateY:t=>({transform:`translateY(${t}%)`}),rotate:t=>({transform:`rotate(${t}deg)`}),spin:t=>({transform:`rotate(${t}deg)`}),spinIn:t=>({transform:`rotate(${t}deg)`}),twistIn:t=>({transform:`rotate(${t}deg)`}),twistOut:t=>({transform:`rotate(${t}deg)`}),moveScaleIn:t=>({transform:`scale(${t})`}),spinOut:t=>({transform:`rotate(${t}deg)`}),default:()=>({}),rotateY:t=>({transform:`rotateY(${t}deg)`}),rotateX:t=>({transform:`rotateX(${t}deg)`}),blur:t=>({filter:`blur(${t}px)`}),blurIn:t=>({filter:`blur(${t}px)`}),blurOut:t=>({filter:`blur(${t}px)`}),blurV2In:t=>({filter:`blur(${t}px)`}),blurSlide:t=>({filter:`blur(${t}px)`,transform:`translateY(${t*5}%)`}),blurSlideV2In:t=>({filter:`blur(${t}px)`}),brightness:t=>({filter:`brightness(${t}%)`}),contrast:t=>({filter:`contrast(${t}%)`}),grayscale:t=>({filter:`grayscale(${t}%)`}),hue:t=>({filter:`hue-rotate(${t}deg)`}),saturation:t=>({filter:`saturate(${t}%)`}),vignette:t=>({filter:`contrast(${100+t*20}%) brightness(${100-t*20}%)`}),noise:t=>({filter:`contrast(${100+t*40}%) brightness(${100+t*20}%)`}),pixelate:t=>({filter:`contrast(${100+t*2}%)`}),chromaticAberration:t=>({filter:`hue-rotate(${t*10}deg) contrast(110%)`}),lightLeak:t=>({filter:`brightness(${100+t*50}%) saturate(${100+t*30}%)`}),duotone:t=>({filter:`sepia(${t*100}%) hue-rotate(${t*180}deg)`}),shakeHorizontalIn:t=>({transform:`translateX(${t}px)`}),shakeVerticalIn:t=>({transform:`translateY(${t}px)`}),shakeHorizontalOut:t=>({transform:`translateX(${t}px)`}),shakeVerticalOut:t=>({transform:`translateY(${t}px)`}),maskUpIn:t=>({transform:`translateY(${t}px)`,overflow:"hidden"}),maskUpOut:t=>({transform:`translateY(${t}px)`,overflow:"hidden"}),maskDownIn:t=>({transform:`translateY(${t}px)`,overflow:"hidden"}),maskDownOut:t=>({transform:`translateY(${t}px)`,overflow:"hidden"}),moveTranslateY:t=>({transform:`translateY(${t}%)`}),"hide-show":t=>({opacity:t}),hide:t=>({opacity:t}),show:t=>({opacity:t}),borderRadius:t=>({borderRadius:`${t}px`,overflow:"hidden"}),"corner-radius":t=>({borderRadius:`${t}px`,overflow:"hidden"})}),K=(t,d=0)=>{const s=[],a=t/5;for(let c=0;c<6;c+=1)s.push(c*a+d);return s},wt=(t,d,s,a=!1)=>{const{from:c,to:o,ease:b}=d,h=d.durationInFrames||30,u=Number(c),n=Number(o),r=Math.max(1,Number(h));if(isNaN(u)||isNaN(n))return console.error("Invalid animation values:",{from:c,to:o,animationDurationInFrames:h,property:d.property}),u;h===void 0&&console.warn(`durationInFrames is undefined for animation: ${d.property}. Using 1 frame as default.`);const f=d.delay||0;if(d.property==="hide-show"||d.property==="hide"||d.property==="show")return t<f?u:n;let $;if(d.property==="moveScaleIn"?$=a?[s-r-f,s-r*.5-f]:[f+r*.5,f+r]:d.property==="moveTranslateY"?$=a?[s-r*.5-f,s-f]:[f,f+r*.5]:$=a?[s-r-f,s-f]:[f,f+r],d.property.includes("shake")){const I=a?K(r,s-r-f):K(r,f);return Y.interpolate(t,I,[0,u,n,u,n,0],{extrapolateLeft:"clamp",extrapolateRight:"clamp",easing:b})}return Y.interpolate(t,$,[u,n],{extrapolateLeft:"clamp",extrapolateRight:"clamp",easing:b})},U=t=>{if(t==null)return 0;if(typeof t=="number")return Number.isNaN(t)?0:t;if(typeof t=="object"){if(t.rotate!==void 0&&t.rotate!==null){const c=parseFloat(String(t.rotate));if(!Number.isNaN(c))return c}if(t.rotation!==void 0&&t.rotation!==null){const c=parseFloat(String(t.rotation));if(!Number.isNaN(c))return c}return t.transform?U(t.transform):0}const d=String(t),s=/rotate\((-?[\d.]+)deg\)/.exec(d);if(s)return parseFloat(s[1])||0;const a=/matrix\(([^)]+)\)/.exec(d);if(a){const c=a[1].split(",").map(o=>parseFloat(o.trim()));if(c.length>=4){const[o,b]=c;return Math.atan2(b,o)*(180/Math.PI)}}return 0},Q=(t,d,s,a,c)=>{var u,n,r,f,$;const{property:o}=t;if(o==="move"){const I=Number(((u=t.details)==null?void 0:u.fromX)??t.from??0),P=Number(((n=t.details)==null?void 0:n.toX)??t.to??0),L=Number(((r=t.details)==null?void 0:r.fromY)??0),C=Number(((f=t.details)==null?void 0:f.toY)??0),F=Number((($=t.details)==null?void 0:$.scale)||1)||1;let W=c;if(W==null||Number.isNaN(W)){const i=t.details;W=U((i==null?void 0:i.rotate)??(i==null?void 0:i.rotation)??(i==null?void 0:i.transform))}const e=t.delay||0,m=t.durationInFrames||30,T=a?[s-m-e,s-e]:[e,e+m],V=Y.interpolate(d,T,[I,P],{extrapolateLeft:"clamp",extrapolateRight:"clamp",easing:t.ease}),x=Y.interpolate(d,T,[L,C],{extrapolateLeft:"clamp",extrapolateRight:"clamp",easing:t.ease}),w=(W||0)*Math.PI/180,X=Math.cos(w),l=Math.sin(w),g=V*X+x*l,S=-V*l+x*X,H=g/F,j=S/F;return{transform:`translateX(${H}px) translateY(${j}px)`}}const b=wt(d,t,s,a),h=xt();return(h[o]||h.default)(b)},O=(t,d,s,a=!1,c=!1,o)=>q.useMemo(()=>{if(t.length===0)return{};const b=t.filter(h=>h.from!==void 0&&h.to!==void 0);if(b.length!==t.length&&console.error("Some animations are invalid and will be ignored"),c){const h=[];return b.reverse().forEach(n=>{const r=Q(n,s,d,!1,o);h.push(r)}),h.reduce((n,r)=>(Object.keys(r).forEach(f=>{f==="transform"||f==="filter"?n[f]=n[f]?`${n[f]} ${r[f]}`:r[f]:n[f]=r[f]}),n),{})}else return b.map(u=>Q(u,s,d,a,o)).reduce((u,n)=>(Object.keys(n).forEach(r=>{r==="transform"||r==="filter"?u[r]=u[r]?`${u[r]} ${n[r]}`:n[r]:u[r]=n[r]}),u),{})},[t,s,d,a,o]),Z=t=>t?Array.isArray(t)?t:[t]:[],St=(...t)=>{const d=[];return t.forEach(s=>{Array.isArray(s)?d.push(...s):s&&d.push(s)}),d.filter(s=>s!==void 0).reduce((s,a)=>s.find(o=>o.property===a.property)?s.map(o=>o.property===a.property?{...o,from:Math.min(o.from,a.from),to:Math.max(o.to,a.to),durationInFrames:Math.max(o.durationInFrames,a.durationInFrames),delay:Math.min(o.delay||0,a.delay||0),ease:b=>(o.ease(b)+a.ease(b))/2}:o):[...s,a],[])},vt=({animationIn:t,animationOut:d,durationInFrames:s,children:a,style:c={},frame:o,isTransition:b=!1,basicCharAnimationsIn:h=[],basicCharAnimationsOut:u=[]})=>{const n=U((c==null?void 0:c.transform)||(c==null?void 0:c.rotate)||(c==null?void 0:c.rotation)),r=O(Z(t),s,o,!1,!1,n),f=O(Z(d),s,o,!0,!1,n),$=O(Z(h),s,o,!0,!1,n),I=O(Z(u),s,o,!0,!1,n),P=q.useMemo(()=>{const x=Object.keys(r).length>0,w=t==null?void 0:t.reduce((l,g)=>Math.min(l,g.delay||0),1/0),X=o-(w||0);return x&&X<0?{visibility:b?"visible":"hidden"}:r},[r,o,t,b]),L=q.useMemo(()=>{if(o>s)return{visibility:b?"visible":"hidden"};const x=Z(d);if(!x||x.length===0)return{};let w=0;x.forEach(l=>{const g=(l.durationInFrames||0)+(l.delay||0);g>w&&(w=g)});const X=Math.max(0,s-w);return o<X?{}:f},[f,o,d,s,b]),C=q.useMemo(()=>{const x={...P};return Object.entries(L).forEach(([w,X])=>{w==="transform"?x[w]=`${x[w]||""} ${X||""}`.trim():w in x&&typeof x[w]=="number"&&typeof X=="number"?x[w]=x[w]*X:x[w]=X}),x},[P,L]),F=q.useMemo(()=>{const x=C.transform||"",{translateX:w,translateY:X,scale:l,rotation:g,rotateX:S,rotateY:H,rotateZ:j}=D(x);return`${g} ${w} ${X} ${l} ${S} ${H} ${j}`.trim()},[C]),{top:W,left:e,position:m,transform:T,...V}=c||{};return N.jsx("div",{style:{width:"100%",height:"100%",overflow:C.overflow||$.overflow||I.overflow||"visible",pointerEvents:"none"},children:N.jsx("div",{style:{width:"100%",height:"100%",...V,...C,overflow:"visible",transform:F,pointerEvents:"none",background:Object.keys(C).length===0?"transparent":C.backgroundColor},children:a})})},D=t=>{let d="",s="",a="scale(1)",c="",o="",b="",h="";const u=t.match(/translateX\([^)]+\)/g);u&&(d=u[u.length-1]);const n=t.match(/translateY\([^)]+\)/g);n&&(s=n[n.length-1]);const r=t.match(/scale\([^)]+\)/g);r&&(a=r[r.length-1]);const f=t.match(/rotate\([^)]+\)/g);f&&(c=f[f.length-1]);const $=t.match(/rotateX\([^)]+\)/g);$&&(o=$[$.length-1]);const I=t.match(/rotateY\([^)]+\)/g);I&&(b=I[I.length-1]);const P=t.match(/rotateZ\([^)]+\)/g);return P&&(h=P[P.length-1]),{translateX:d,translateY:s,scale:a,rotation:c,rotateX:o,rotateY:b,rotateZ:h}},mt=({animationTimed:t,durationInFrames:d,children:s,style:a={},frame:c})=>{const o=U((a==null?void 0:a.transform)||(a==null?void 0:a.rotate)||(a==null?void 0:a.rotation)),b=O(Z(t),d,c,!1,!0,o),h=q.useMemo(()=>({...b}),[b]),u=!!h.borderRadius;return N.jsx("div",{style:{overflow:u?"hidden":h.overflow||"visible",borderRadius:h.borderRadius,pointerEvents:"none",height:a.height||"100%",width:a.width||"100%",...h,...u?{overflow:"hidden"}:{}},children:N.jsx("div",{style:{overflow:u?"hidden":"visible",borderRadius:h.borderRadius,pointerEvents:"none",height:"100%",width:"100%",display:"flex",alignItems:"center",justifyContent:"center"},children:s})})},Nt=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 Y.Easing.in(Y.Easing.cubic);case"ease-out":case"smooth":case"slowDown":return Y.Easing.out(Y.Easing.cubic);case"ease-in-out":case"natural":case"swing":return Y.Easing.inOut(Y.Easing.cubic);case"bounce":return Y.Easing.bounce;case"elastic":return Y.Easing.elastic(1);case"overshoot":case"impulse":return Y.Easing.out(Y.Easing.back(1.7));case"none":case"linear":default:return Y.Easing.linear}},Yt=(t,d)=>{const s=d*Math.PI/180,a=Math.cos(s),c=Math.sin(s),o=t/100*50,b=50,h=50,u=200,n=a,r=c,f=-c,$=a;return`polygon(${[[b-n*u-f*o,h-r*u-$*o],[b+n*u-f*o,h+r*u-$*o],[b+n*u+f*o,h+r*u+$*o],[b-n*u+f*o,h-r*u+$*o]].map(([P,L])=>`${P}% ${L}%`).join(", ")})`},yt=({children:t,currentWidth:d,currentHeight:s,frame:a,item:c,keyframeAnimations:o,durationInFrames:b})=>{var tt,et,rt,ot,nt,st,at,lt,it,ct,dt,ft,ut,pt,ht,gt,bt,$t;if(!o||!Array.isArray(o)||o.length===0)return N.jsx(N.Fragment,{children:t});const h=p=>{var M,y;return!!((M=p==null?void 0:p.property)!=null&&M.includes("maskReveal")||(y=p==null?void 0:p.id)!=null&&y.includes("maskReveal"))},u=p=>{var M,y;return!!((p==null?void 0:p.type)==="exit"||(M=p==null?void 0:p.property)!=null&&M.includes("Out")||(y=p==null?void 0:p.id)!=null&&y.includes("Out"))},n=o.find(p=>h(p)&&!u(p)),r=o.find(p=>h(p)&&u(p));if(!n&&!r)return N.jsx(N.Fragment,{children:t});const f=Math.max(1,b||300),$=n?Math.max(1,Number(n.durationInFrames||30)):30,I=n?Math.max(0,Number(n.delay||0)):0,P=r?Math.max(1,Number(r.durationInFrames||30)):30,L=r?Math.max(0,Number(r.delay||0)):0,C=r?Math.max(0,f-P-L):Number.POSITIVE_INFINITY;let F=!1,W=!1,e=null,m=!1,T=30,V=0;if(r&&a>=C){e=r,m=!0,T=P,V=a-C;const p=String(r.property||r.id||""),M=p.includes("Blur")||p.includes("Soft")||!!((tt=r==null?void 0:r.details)!=null&&tt.blurBottom)||!!((et=r==null?void 0:r.details)!=null&&et.softEdge);V>=T-1&&!M&&(F=!0)}else if(n)if(a<I)F=!0,e=n,m=!1,T=$,V=0;else if(a<I+$)e=n,m=!1,T=$,V=a-I;else{const p=String(n.property||n.id||"");p.includes("Blur")||p.includes("Soft")||!!((rt=n==null?void 0:n.details)!=null&&rt.blurBottom)||!!((ot=n==null?void 0:n.details)!=null&&ot.softEdge)?(e=n,m=!1,T=$,V=$):(W=!0,e=null)}else W=!0,e=null;const x=Math.max(0,V),w=T>0?Math.min(Math.max(0,x/T),1):1,X=e?Nt(e):Y.Easing.linear,l=Math.max(0,Math.min(1,X(w)));let g,S="",H=1;const j=String((e==null?void 0:e.property)||(e==null?void 0:e.id)||""),i=((nt=e==null?void 0:e.details)==null?void 0:nt.direction)||"up";if(F)g="inset(100%)";else if(W||!e)g=void 0;else{const p=j.includes("ShrinkScale"),M=j.includes("CenterScale"),y=j.includes("Slide")||j.includes("slide");if(M){const B=Number(((st=e==null?void 0:e.details)==null?void 0:st.angle)??(e==null?void 0:e.angle)??0),G=m?100*(1-l):100*l;g=Yt(G,B)}else if(p){const B=Number(((at=e==null?void 0:e.details)==null?void 0:at.initialVisiblePercent)??(e==null?void 0:e.initialVisiblePercent)??50),G=Math.max(0,Math.min(50,(100-B)/2)),J=m?G*l:G*(1-l);g=`inset(
|
|
2
|
+
${J}%
|
|
3
|
+
${J}%
|
|
4
|
+
${J}%
|
|
5
|
+
${J}%
|
|
6
|
+
)`}else if(y)g="inset(0% 0% 0% 0%)",m?i==="down"?S=`translateY(${100*l}%)`:i==="left"?S=`translateX(${-100*l}%)`:i==="right"?S=`translateX(${100*l}%)`:S=`translateY(${-100*l}%)`:i==="down"?S=`translateY(${-100*(1-l)}%)`:i==="left"?S=`translateX(${100*(1-l)}%)`:i==="right"?S=`translateX(${-100*(1-l)}%)`:S=`translateY(${100*(1-l)}%)`;else if(j.includes("Center"))g=`circle(${m?150*(1-l):150*l}% at 50% 50%)`;else if(j.includes("Corner")){const B=m?l:1-l;i==="down"?g=`inset(0 ${100*B}% ${100*B}% 0)`:i==="up"?g=`inset(${100*B}% ${100*B}% 0 0)`:i==="left"?g=`inset(0 0 ${100*B}% ${100*B}%)`:i==="right"?g=`inset(${100*B}% 0 0 ${100*B}%)`:g=`inset(0 ${100*B}% ${100*B}% 0)`}else m?i==="down"?g=`inset(${100*l}% 0 0 0)`:i==="left"?g=`inset(0 0 0 ${100*l}%)`:i==="right"?g=`inset(0 ${100*l}% 0 0)`:g=`inset(0 0 ${100*l}% 0)`:i==="down"?g=`inset(0 0 ${100*(1-l)}% 0)`:i==="left"?g=`inset(0 0 0 ${100*(1-l)}%)`:i==="right"?g=`inset(0 ${100*(1-l)}% 0 0)`:g=`inset(${100*(1-l)}% 0 0 0)`;const v=!!((lt=e==null?void 0:e.details)!=null&<.scale||e!=null&&e.scale);M||p?((it=e==null?void 0:e.details)==null?void 0:it.scale)===!1?H=1:H=m?1+.5*l:1.5-.5*l:v&&(H=m?1-.2*l:.8+.2*l)}const _=j.includes("Blur")||j.includes("Soft")||!!((ct=e==null?void 0:e.details)!=null&&ct.blurBottom)||!!((dt=e==null?void 0:e.details)!=null&&dt.softEdge);let R;if(_&&!F&&e){g=void 0;const p=Number(((ft=e==null?void 0:e.details)==null?void 0:ft.featherSize)??25),M=Number(((ut=e==null?void 0:e.details)==null?void 0:ut.maxRevealPercent)??50),y=30;if(m){const v=100-(100-M)*l;i==="up"?(S=`translateY(${y*l}%)`,R=`linear-gradient(to bottom, black 0%, black ${Math.max(0,v-p)}%, transparent ${v}%, transparent 100%)`):i==="down"?(S=`translateY(${-y*l}%)`,R=`linear-gradient(to top, black 0%, black ${Math.max(0,v-p)}%, transparent ${v}%, transparent 100%)`):i==="left"?(S=`translateX(${y*l}%)`,R=`linear-gradient(to right, black 0%, black ${Math.max(0,v-p)}%, transparent ${v}%, transparent 100%)`):i==="right"&&(S=`translateX(${-y*l}%)`,R=`linear-gradient(to left, black 0%, black ${Math.max(0,v-p)}%, transparent ${v}%, transparent 100%)`)}else{const v=M*l;i==="up"?(S=`translateY(${y*(1-l)}%)`,R=`linear-gradient(to bottom, black 0%, black ${Math.max(0,v-p)}%, transparent ${v}%, transparent 100%)`):i==="down"?(S=`translateY(${-y*(1-l)}%)`,R=`linear-gradient(to top, black 0%, black ${Math.max(0,v-p)}%, transparent ${v}%, transparent 100%)`):i==="left"?(S=`translateX(${y*(1-l)}%)`,R=`linear-gradient(to right, black 0%, black ${Math.max(0,v-p)}%, transparent ${v}%, transparent 100%)`):i==="right"&&(S=`translateX(${-y*(1-l)}%)`,R=`linear-gradient(to left, black 0%, black ${Math.max(0,v-p)}%, transparent ${v}%, transparent 100%)`)}}const Et=[S,H!==1?`scale(${H})`:""].filter(Boolean).join(" ")||void 0,z=(pt=c==null?void 0:c.details)==null?void 0:pt.boxShadow,k=z&&(z.x||z.y||z.blur)?`drop-shadow(${z.x||0}px ${z.y||0}px ${z.blur||0}px ${z.color||"#000000"})`:void 0,A=Number(((ht=e==null?void 0:e.details)==null?void 0:ht.blurAmount)??16),Xt=!!(_&&(((gt=e==null?void 0:e.details)==null?void 0:gt.blurBottom)??!0));return N.jsx("div",{style:{width:d!==void 0?d:"100%",height:s!==void 0?s:"100%",position:"relative",visibility:F?"hidden":"visible",filter:k,WebkitFilter:k},children:N.jsxs("div",{style:{width:"100%",height:"100%",position:"relative",clipPath:g||void 0,WebkitClipPath:g||void 0,maskImage:R||void 0,WebkitMaskImage:R||void 0,overflow:g||R?"hidden":"visible"},children:[N.jsx("div",{style:{width:"100%",height:"100%",transform:Et,transformOrigin:"center"},children:t}),Xt&&!F&&N.jsx("div",{style:{position:"absolute",top:i==="down"?0:void 0,bottom:i==="up"?0:void 0,left:0,right:0,width:i==="left"||i==="right"?((bt=e==null?void 0:e.details)==null?void 0:bt.blurHeight)||"25%":"100%",height:i==="up"||i==="down"?(($t=e==null?void 0:e.details)==null?void 0:$t.blurHeight)||"25%":"100%",pointerEvents:"none",backdropFilter:`blur(${A}px)`,WebkitBackdropFilter:`blur(${A}px)`,maskImage:i==="down"?"linear-gradient(to bottom, rgba(0,0,0,1) 0%, rgba(0,0,0,0.8) 40%, transparent 100%)":i==="left"?"linear-gradient(to left, rgba(0,0,0,1) 0%, rgba(0,0,0,0.8) 40%, transparent 100%)":i==="right"?"linear-gradient(to right, rgba(0,0,0,1) 0%, rgba(0,0,0,0.8) 40%, transparent 100%)":"linear-gradient(to top, rgba(0,0,0,1) 0%, rgba(0,0,0,0.8) 40%, transparent 100%)",WebkitMaskImage:i==="down"?"linear-gradient(to bottom, rgba(0,0,0,1) 0%, rgba(0,0,0,0.8) 40%, transparent 100%)":i==="left"?"linear-gradient(to left, rgba(0,0,0,1) 0%, rgba(0,0,0,0.8) 40%, transparent 100%)":i==="right"?"linear-gradient(to right, rgba(0,0,0,1) 0%, rgba(0,0,0,0.8) 40%, transparent 100%)":"linear-gradient(to top, rgba(0,0,0,1) 0%, rgba(0,0,0,0.8) 40%, transparent 100%)"}})]})})};E.BoxAnim=vt,E.ContentAnim=mt,E.MaskAnim=yt,E.combine=St,E.combineAnimations=Z,E.extractTransformations=D,E.useAnimation=O,Object.defineProperty(E,Symbol.toStringTag,{value:"Module"})});
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@cliquify.me/animations",
|
|
3
|
-
"version": "
|
|
3
|
+
"version": "10.0.1",
|
|
4
4
|
"private": false,
|
|
5
5
|
"publishConfig": {
|
|
6
6
|
"access": "public"
|
|
@@ -19,8 +19,8 @@
|
|
|
19
19
|
"typescript": "^5.3.3",
|
|
20
20
|
"vite": "^5.2.0",
|
|
21
21
|
"vite-plugin-dts": "^3.9.1",
|
|
22
|
-
"@cliquify.me/
|
|
23
|
-
"@cliquify.me/
|
|
22
|
+
"@cliquify.me/types": "9.0.1",
|
|
23
|
+
"@cliquify.me/typescript-config": "1.0.0"
|
|
24
24
|
},
|
|
25
25
|
"dependencies": {
|
|
26
26
|
"remotion": "4.0.506",
|
|
@@ -31,7 +31,7 @@
|
|
|
31
31
|
"@designcombo/events": "^1.0.2",
|
|
32
32
|
"react": "^18.2.0 || ^19.0.0",
|
|
33
33
|
"remotion": "4.0.506",
|
|
34
|
-
"@cliquify.me/types": "
|
|
34
|
+
"@cliquify.me/types": "9.0.1"
|
|
35
35
|
},
|
|
36
36
|
"scripts": {
|
|
37
37
|
"dev": "vite",
|