@evatril/video-templates 2.0.8 → 2.0.9
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/package.json +1 -1
- package/src/Invitations/Elements/Butterflies20012026.jsx +1 -1
- package/src/Invitations/Elements/CornerFlipTransition05022026.jsx +45 -0
- package/src/Invitations/Elements/DucksFrame05022026.jsx +38 -0
- package/src/Invitations/Elements/FloatingFlowersBottom.jsx +70 -0
- package/src/Invitations/Elements/HangingJumar05022026.jsx +40 -0
- package/src/Invitations/Elements/HangingLamp05022026.jsx +40 -0
- package/src/Invitations/Elements/HoldSlide.jsx +0 -49
- package/src/Invitations/Elements/OpeningGate20012026.jsx +2 -2
- package/src/Invitations/Elements/WordReveal28012026.jsx +4 -2
- package/src/Invitations/Frames/F03022026_01.jsx +1 -1
- package/src/Invitations/Frames/F03022026_02.jsx +2 -1
- package/src/Invitations/Frames/F03022026_04.jsx +2 -4
- package/src/Invitations/Frames/F03022026_05.jsx +1 -1
- package/src/Invitations/Frames/F05022026_01.jsx +173 -0
- package/src/Invitations/Frames/F05022026_02.jsx +387 -0
- package/src/Invitations/Frames/F05022026_03.jsx +328 -0
- package/src/Invitations/Frames/F05022026_04.jsx +140 -0
- package/src/Invitations/Themes/T05022026_01.jsx +259 -0
- package/src/Invitations/Themes/T20012026_01.jsx +53 -18
- package/src/compositions.jsx +9 -0
- package/src/index.js +2 -1
package/package.json
CHANGED
|
@@ -46,7 +46,7 @@ export const Butterflies20012026 = ({ frame, fps, width, height }) => {
|
|
|
46
46
|
return (
|
|
47
47
|
<Img
|
|
48
48
|
key={i}
|
|
49
|
-
src={staticFile("video-images/20012026-butterfly.
|
|
49
|
+
src={staticFile("video-images/20012026-butterfly.webp")}
|
|
50
50
|
style={{
|
|
51
51
|
position: "absolute",
|
|
52
52
|
left: x,
|
|
@@ -0,0 +1,45 @@
|
|
|
1
|
+
import React from "react";
|
|
2
|
+
import {
|
|
3
|
+
AbsoluteFill,
|
|
4
|
+
interpolate,
|
|
5
|
+
useCurrentFrame,
|
|
6
|
+
Easing,
|
|
7
|
+
} from "remotion";
|
|
8
|
+
|
|
9
|
+
export const CornerFlipTransition = ({ children, duration }) => {
|
|
10
|
+
const frame = useCurrentFrame();
|
|
11
|
+
|
|
12
|
+
// Smooth cinematic progress
|
|
13
|
+
const p = interpolate(frame, [0, duration], [0, 1], {
|
|
14
|
+
easing: Easing.inOut(Easing.cubic),
|
|
15
|
+
extrapolateLeft: "clamp",
|
|
16
|
+
extrapolateRight: "clamp",
|
|
17
|
+
});
|
|
18
|
+
|
|
19
|
+
// Softer motion values
|
|
20
|
+
const rotateY = interpolate(p, [0, 1], [55, 0]);
|
|
21
|
+
const rotateX = interpolate(p, [0, 1], [10, 0]);
|
|
22
|
+
const move = interpolate(p, [0, 1], [160, 0]);
|
|
23
|
+
const opacity = interpolate(p, [0, 0.2, 1], [0, 1, 1]);
|
|
24
|
+
const shadow = interpolate(p, [0, 1], [0, 40]);
|
|
25
|
+
|
|
26
|
+
return (
|
|
27
|
+
<AbsoluteFill
|
|
28
|
+
style={{
|
|
29
|
+
opacity,
|
|
30
|
+
transformOrigin: "100% 100%",
|
|
31
|
+
transform: `
|
|
32
|
+
perspective(1600px)
|
|
33
|
+
rotateY(${rotateY}deg)
|
|
34
|
+
rotateX(${rotateX}deg)
|
|
35
|
+
translateX(${move}px)
|
|
36
|
+
translateY(${move}px)
|
|
37
|
+
scale(${0.95 + p * 0.05})
|
|
38
|
+
`,
|
|
39
|
+
boxShadow: `0 0 ${shadow}px rgba(0,0,0,${0.3 * p})`,
|
|
40
|
+
}}
|
|
41
|
+
>
|
|
42
|
+
{children}
|
|
43
|
+
</AbsoluteFill>
|
|
44
|
+
);
|
|
45
|
+
};
|
|
@@ -0,0 +1,38 @@
|
|
|
1
|
+
import React from "react";
|
|
2
|
+
import {
|
|
3
|
+
Img,
|
|
4
|
+
staticFile,
|
|
5
|
+
useCurrentFrame,
|
|
6
|
+
useVideoConfig,
|
|
7
|
+
interpolate,
|
|
8
|
+
} from "remotion";
|
|
9
|
+
|
|
10
|
+
export const DucksFrame05022026 = () => {
|
|
11
|
+
const frame = useCurrentFrame();
|
|
12
|
+
const { fps } = useVideoConfig();
|
|
13
|
+
|
|
14
|
+
// Horizontal swim
|
|
15
|
+
const swim = interpolate(frame, [0, fps * 8], [300, 0], {
|
|
16
|
+
extrapolateRight: "wrap",
|
|
17
|
+
});
|
|
18
|
+
|
|
19
|
+
// Water bob
|
|
20
|
+
const bob = Math.sin(frame / 12) * 6;
|
|
21
|
+
|
|
22
|
+
// Tiny tilt
|
|
23
|
+
const tilt = Math.sin(frame / 20) * 2;
|
|
24
|
+
|
|
25
|
+
return (
|
|
26
|
+
<Img
|
|
27
|
+
src={staticFile("video-images/05022026-Duck.webp")}
|
|
28
|
+
style={{
|
|
29
|
+
position: "absolute",
|
|
30
|
+
bottom: "-5%",
|
|
31
|
+
left: swim,
|
|
32
|
+
height: "55%", // ✅ control by height
|
|
33
|
+
width: "auto",
|
|
34
|
+
transform: `translateY(${bob}px) rotate(${tilt}deg)`,
|
|
35
|
+
}}
|
|
36
|
+
/>
|
|
37
|
+
);
|
|
38
|
+
};
|
|
@@ -0,0 +1,70 @@
|
|
|
1
|
+
import React from "react";
|
|
2
|
+
import {
|
|
3
|
+
AbsoluteFill,
|
|
4
|
+
Img,
|
|
5
|
+
useCurrentFrame,
|
|
6
|
+
useVideoConfig,
|
|
7
|
+
interpolate,
|
|
8
|
+
staticFile,
|
|
9
|
+
} from "remotion";
|
|
10
|
+
|
|
11
|
+
const Flower = ({ side = "left", delay = 0, xOffset = 0, yOffset = 0 }) => {
|
|
12
|
+
const frame = useCurrentFrame();
|
|
13
|
+
const { height } = useVideoConfig();
|
|
14
|
+
|
|
15
|
+
const localFrame = Math.max(frame - delay, 0) % 240;
|
|
16
|
+
|
|
17
|
+
// Bottom → Top with Y offset
|
|
18
|
+
const top = interpolate(
|
|
19
|
+
localFrame,
|
|
20
|
+
[0, 240],
|
|
21
|
+
[height + 200 + yOffset, -200 + yOffset]
|
|
22
|
+
);
|
|
23
|
+
|
|
24
|
+
const swing = Math.sin(frame / 20) * 10;
|
|
25
|
+
|
|
26
|
+
return (
|
|
27
|
+
<Img
|
|
28
|
+
src={staticFile("video-images/05022026-Flower.webp")}
|
|
29
|
+
style={{
|
|
30
|
+
position: "absolute",
|
|
31
|
+
top,
|
|
32
|
+
width: 70,
|
|
33
|
+
|
|
34
|
+
left: side === "left" ? 20 + xOffset + swing : undefined,
|
|
35
|
+
right: side === "right" ? 20 + xOffset + swing : undefined,
|
|
36
|
+
}}
|
|
37
|
+
/>
|
|
38
|
+
);
|
|
39
|
+
};
|
|
40
|
+
|
|
41
|
+
export const FloatingFlowersBottom = () => {
|
|
42
|
+
return (
|
|
43
|
+
<AbsoluteFill>
|
|
44
|
+
{/* LEFT */}
|
|
45
|
+
<Flower side="left" delay={0} xOffset={0} yOffset={0} />
|
|
46
|
+
<Flower side="left" delay={0} xOffset={50} yOffset={50} />
|
|
47
|
+
<Flower side="left" delay={40} xOffset={20} yOffset={0} />
|
|
48
|
+
<Flower side="left" delay={40} xOffset={70} yOffset={50} />
|
|
49
|
+
<Flower side="left" delay={80} xOffset={40} yOffset={0} />
|
|
50
|
+
<Flower side="left" delay={80} xOffset={90} yOffset={50} />
|
|
51
|
+
<Flower side="left" delay={120} xOffset={60} yOffset={0} />
|
|
52
|
+
<Flower side="left" delay={120} xOffset={110} yOffset={50} />
|
|
53
|
+
<Flower side="left" delay={160} xOffset={80} yOffset={0} />
|
|
54
|
+
<Flower side="left" delay={160} xOffset={130} yOffset={50} />
|
|
55
|
+
|
|
56
|
+
{/* RIGHT */}
|
|
57
|
+
<Flower side="right" delay={10} xOffset={0} yOffset={0} />
|
|
58
|
+
<Flower side="right" delay={10} xOffset={50} yOffset={50} />
|
|
59
|
+
<Flower side="right" delay={50} xOffset={20} yOffset={0} />
|
|
60
|
+
<Flower side="right" delay={50} xOffset={70} yOffset={50} />
|
|
61
|
+
<Flower side="right" delay={90} xOffset={40} yOffset={0} />
|
|
62
|
+
<Flower side="right" delay={90} xOffset={90} yOffset={50} />
|
|
63
|
+
<Flower side="right" delay={130} xOffset={60} yOffset={0} />
|
|
64
|
+
<Flower side="right" delay={130} xOffset={110} yOffset={50} />
|
|
65
|
+
<Flower side="right" delay={170} xOffset={80} yOffset={0} />
|
|
66
|
+
<Flower side="right" delay={170} xOffset={130} yOffset={50} />
|
|
67
|
+
</AbsoluteFill>
|
|
68
|
+
);
|
|
69
|
+
};
|
|
70
|
+
|
|
@@ -0,0 +1,40 @@
|
|
|
1
|
+
import React from "react";
|
|
2
|
+
import {
|
|
3
|
+
Img,
|
|
4
|
+
staticFile,
|
|
5
|
+
useCurrentFrame,
|
|
6
|
+
} from "remotion";
|
|
7
|
+
|
|
8
|
+
export const HangingJumar05022026 = ({
|
|
9
|
+
side = "left",
|
|
10
|
+
offset = 0,
|
|
11
|
+
}) => {
|
|
12
|
+
const frame = useCurrentFrame();
|
|
13
|
+
|
|
14
|
+
// Slight variation per lamp
|
|
15
|
+
const swing = Math.sin((frame + offset) / 18) * 4;
|
|
16
|
+
const float = Math.sin((frame + offset) / 25) * 3;
|
|
17
|
+
|
|
18
|
+
const isLeft = side === "left";
|
|
19
|
+
|
|
20
|
+
return (
|
|
21
|
+
<Img
|
|
22
|
+
src={staticFile("video-images/05022026-HangingJumar.webp")}
|
|
23
|
+
style={{
|
|
24
|
+
position: "absolute",
|
|
25
|
+
top: 0,
|
|
26
|
+
|
|
27
|
+
[isLeft ? "left" : "right"]: offset, // ✅ corner + inner
|
|
28
|
+
|
|
29
|
+
height: "30%",
|
|
30
|
+
width: "auto",
|
|
31
|
+
|
|
32
|
+
transformOrigin: "top center",
|
|
33
|
+
transform: `
|
|
34
|
+
translateY(${float}px)
|
|
35
|
+
rotate(${isLeft ? swing : -swing}deg)
|
|
36
|
+
`,
|
|
37
|
+
}}
|
|
38
|
+
/>
|
|
39
|
+
);
|
|
40
|
+
};
|
|
@@ -0,0 +1,40 @@
|
|
|
1
|
+
import React from "react";
|
|
2
|
+
import {
|
|
3
|
+
Img,
|
|
4
|
+
staticFile,
|
|
5
|
+
useCurrentFrame,
|
|
6
|
+
} from "remotion";
|
|
7
|
+
|
|
8
|
+
export const HangingLamp05022026 = ({
|
|
9
|
+
side = "left",
|
|
10
|
+
offset = 0,
|
|
11
|
+
}) => {
|
|
12
|
+
const frame = useCurrentFrame();
|
|
13
|
+
|
|
14
|
+
// Slight variation per lamp
|
|
15
|
+
const swing = Math.sin((frame + offset) / 18) * 4;
|
|
16
|
+
const float = Math.sin((frame + offset) / 25) * 3;
|
|
17
|
+
|
|
18
|
+
const isLeft = side === "left";
|
|
19
|
+
|
|
20
|
+
return (
|
|
21
|
+
<Img
|
|
22
|
+
src={staticFile("video-images/05022026-HangingLamps.webp")}
|
|
23
|
+
style={{
|
|
24
|
+
position: "absolute",
|
|
25
|
+
top: 0,
|
|
26
|
+
|
|
27
|
+
[isLeft ? "left" : "right"]: offset, // ✅ corner + inner
|
|
28
|
+
|
|
29
|
+
height: "40%",
|
|
30
|
+
width: "auto",
|
|
31
|
+
|
|
32
|
+
transformOrigin: "top center",
|
|
33
|
+
transform: `
|
|
34
|
+
translateY(${float}px)
|
|
35
|
+
rotate(${isLeft ? swing : -swing}deg)
|
|
36
|
+
`,
|
|
37
|
+
}}
|
|
38
|
+
/>
|
|
39
|
+
);
|
|
40
|
+
};
|
|
@@ -1,52 +1,3 @@
|
|
|
1
|
-
// import React from "react";
|
|
2
|
-
// import { AbsoluteFill, useCurrentFrame, interpolate } from "remotion";
|
|
3
|
-
|
|
4
|
-
// export const HoldSlide = ({
|
|
5
|
-
// children,
|
|
6
|
-
// nextChildren,
|
|
7
|
-
// contentDuration,
|
|
8
|
-
// slideDuration,
|
|
9
|
-
// }) => {
|
|
10
|
-
// const frame = useCurrentFrame();
|
|
11
|
-
|
|
12
|
-
// const progress = interpolate(
|
|
13
|
-
// frame,
|
|
14
|
-
// [contentDuration, contentDuration + slideDuration],
|
|
15
|
-
// [0, 1],
|
|
16
|
-
// {
|
|
17
|
-
// extrapolateLeft: "clamp",
|
|
18
|
-
// extrapolateRight: "clamp",
|
|
19
|
-
// }
|
|
20
|
-
// );
|
|
21
|
-
|
|
22
|
-
// const width = 100;
|
|
23
|
-
|
|
24
|
-
// return (
|
|
25
|
-
// <AbsoluteFill style={{ overflow: "hidden" }}>
|
|
26
|
-
// {/* CURRENT */}
|
|
27
|
-
// <AbsoluteFill
|
|
28
|
-
// style={{
|
|
29
|
-
// transform: `translateX(${-progress * width}%)`,
|
|
30
|
-
// }}
|
|
31
|
-
// >
|
|
32
|
-
// {children}
|
|
33
|
-
// </AbsoluteFill>
|
|
34
|
-
|
|
35
|
-
// {/* NEXT */}
|
|
36
|
-
// {nextChildren && (
|
|
37
|
-
// <AbsoluteFill
|
|
38
|
-
// style={{
|
|
39
|
-
// transform: `translateX(${100 - progress * width}%)`,
|
|
40
|
-
// }}
|
|
41
|
-
// >
|
|
42
|
-
// {nextChildren}
|
|
43
|
-
// </AbsoluteFill>
|
|
44
|
-
// )}
|
|
45
|
-
// </AbsoluteFill>
|
|
46
|
-
// );
|
|
47
|
-
// };
|
|
48
|
-
|
|
49
|
-
|
|
50
1
|
import React from "react";
|
|
51
2
|
import { AbsoluteFill, Img, useCurrentFrame, interpolate } from "remotion";
|
|
52
3
|
|
|
@@ -31,7 +31,7 @@ export const OpeningGate20012026 = ({ frame, fps }) => {
|
|
|
31
31
|
>
|
|
32
32
|
{/* 🚪 LEFT DOOR */}
|
|
33
33
|
<Img
|
|
34
|
-
src={staticFile("video-images/20012026-opening-gate.
|
|
34
|
+
src={staticFile("video-images/20012026-opening-gate.webp")}
|
|
35
35
|
style={{
|
|
36
36
|
position: "absolute",
|
|
37
37
|
bottom: 0,
|
|
@@ -44,7 +44,7 @@ export const OpeningGate20012026 = ({ frame, fps }) => {
|
|
|
44
44
|
|
|
45
45
|
{/* 🚪 RIGHT DOOR */}
|
|
46
46
|
<Img
|
|
47
|
-
src={staticFile("video-images/20012026-opening-gate.
|
|
47
|
+
src={staticFile("video-images/20012026-opening-gate.webp")}
|
|
48
48
|
style={{
|
|
49
49
|
position: "absolute",
|
|
50
50
|
bottom: 0,
|
|
@@ -13,6 +13,8 @@ export const WordReveal28012026 = ({
|
|
|
13
13
|
color = "#000",
|
|
14
14
|
fontFamily = "Dancing Script",
|
|
15
15
|
letterSpacing = 2,
|
|
16
|
+
lineHeight = 1.2,
|
|
17
|
+
fontWeight =600
|
|
16
18
|
}) => {
|
|
17
19
|
const frame = useCurrentFrame();
|
|
18
20
|
const { fps } = useVideoConfig();
|
|
@@ -78,8 +80,8 @@ export const WordReveal28012026 = ({
|
|
|
78
80
|
color,
|
|
79
81
|
fontFamily,
|
|
80
82
|
letterSpacing,
|
|
81
|
-
lineHeight
|
|
82
|
-
fontWeight
|
|
83
|
+
lineHeight,
|
|
84
|
+
fontWeight,
|
|
83
85
|
display: "inline-block",
|
|
84
86
|
}}
|
|
85
87
|
>
|
|
@@ -156,7 +156,7 @@ export const F03022026_01 = () => {
|
|
|
156
156
|
position: "absolute",
|
|
157
157
|
top: "32%",
|
|
158
158
|
left: "50%",
|
|
159
|
-
width: "
|
|
159
|
+
width: "80%",
|
|
160
160
|
objectFit: "cover",
|
|
161
161
|
opacity: imageOpacity * imageExitOpacity,
|
|
162
162
|
transform: `translateX(${moveX}px) translateX(-50%) translateY(${imageExitY}px)`,
|
|
@@ -146,6 +146,7 @@ export const F03022026_02 = ({
|
|
|
146
146
|
{ extrapolateLeft: "clamp", extrapolateRight: "clamp" }
|
|
147
147
|
);
|
|
148
148
|
|
|
149
|
+
|
|
149
150
|
return (
|
|
150
151
|
<AbsoluteFill
|
|
151
152
|
style={{
|
|
@@ -187,6 +188,7 @@ export const F03022026_02 = ({
|
|
|
187
188
|
top: "28%",
|
|
188
189
|
}}
|
|
189
190
|
>
|
|
191
|
+
|
|
190
192
|
<div
|
|
191
193
|
style={{
|
|
192
194
|
display: "flex",
|
|
@@ -295,7 +297,6 @@ export const F03022026_02 = ({
|
|
|
295
297
|
transform: `translateX(${dateExitX}px)`
|
|
296
298
|
}}
|
|
297
299
|
>
|
|
298
|
-
{/* {formatDate(occasionDate)} */}
|
|
299
300
|
<WordReveal28012026
|
|
300
301
|
text={formatDate(occasionDate)}
|
|
301
302
|
start={50}
|
|
@@ -194,7 +194,7 @@ export const F03022026_04 = ({
|
|
|
194
194
|
letterSpacing: 2,
|
|
195
195
|
lineHeight: 1,
|
|
196
196
|
fontWeight: 600,
|
|
197
|
-
fontSize:
|
|
197
|
+
fontSize: 150,
|
|
198
198
|
margin: 0,
|
|
199
199
|
transform: `translateX(${wedX + exitLeftX}px)`,
|
|
200
200
|
opacity: wedOpacity * exitOpacity,
|
|
@@ -223,8 +223,6 @@ export const F03022026_04 = ({
|
|
|
223
223
|
fontSize: 60,
|
|
224
224
|
color: "#B11226",
|
|
225
225
|
fontFamily: "Playfair Display",
|
|
226
|
-
// transform: `translateX(${addressX + exitRightX}px)`,
|
|
227
|
-
// opacity: addressOpacity * exitOpacity,
|
|
228
226
|
transform: `translateX(${dateX + exitRightX}px)`,
|
|
229
227
|
opacity: dateOpacity * exitOpacity,
|
|
230
228
|
}}
|
|
@@ -239,7 +237,7 @@ export const F03022026_04 = ({
|
|
|
239
237
|
letterSpacing: 2,
|
|
240
238
|
lineHeight: 1,
|
|
241
239
|
fontWeight: 600,
|
|
242
|
-
fontSize:
|
|
240
|
+
fontSize: 150,
|
|
243
241
|
margin: 0,
|
|
244
242
|
transform: `translateX(${venueX + exitLeftX}px)`,
|
|
245
243
|
opacity: venueOpacity * exitOpacity,
|
|
@@ -0,0 +1,173 @@
|
|
|
1
|
+
import React from "react";
|
|
2
|
+
import {
|
|
3
|
+
AbsoluteFill,
|
|
4
|
+
Img,
|
|
5
|
+
staticFile,
|
|
6
|
+
useCurrentFrame,
|
|
7
|
+
useVideoConfig,
|
|
8
|
+
interpolate,
|
|
9
|
+
Easing,
|
|
10
|
+
} from "remotion";
|
|
11
|
+
import { DucksFrame05022026 } from "../Elements/DucksFrame05022026";
|
|
12
|
+
import { HangingLamp05022026 } from "../Elements/HangingLamp05022026";
|
|
13
|
+
|
|
14
|
+
export const F05022026_01 = () => {
|
|
15
|
+
const frame = useCurrentFrame();
|
|
16
|
+
const { fps } = useVideoConfig();
|
|
17
|
+
|
|
18
|
+
// TIMINGS
|
|
19
|
+
const ganeshStart = fps * 0.5;
|
|
20
|
+
const word1Start = fps * 1;
|
|
21
|
+
const word2Start = fps * 1.5;
|
|
22
|
+
const word3Start = fps * 2;
|
|
23
|
+
|
|
24
|
+
// Fade helper
|
|
25
|
+
const fade = (start) =>
|
|
26
|
+
interpolate(frame, [start, start + fps * 0.7], [0, 1], {
|
|
27
|
+
extrapolateLeft: "clamp",
|
|
28
|
+
extrapolateRight: "clamp",
|
|
29
|
+
easing: Easing.out(Easing.ease),
|
|
30
|
+
});
|
|
31
|
+
|
|
32
|
+
// Slide helper
|
|
33
|
+
const slide = (start) =>
|
|
34
|
+
interpolate(frame, [start, start + fps * 0.7], [30, 0], {
|
|
35
|
+
extrapolateLeft: "clamp",
|
|
36
|
+
extrapolateRight: "clamp",
|
|
37
|
+
easing: Easing.out(Easing.ease),
|
|
38
|
+
});
|
|
39
|
+
|
|
40
|
+
// Ganesh scale
|
|
41
|
+
const ganeshScale = interpolate(
|
|
42
|
+
frame,
|
|
43
|
+
[ganeshStart, ganeshStart + fps],
|
|
44
|
+
[0.9, 1],
|
|
45
|
+
{
|
|
46
|
+
extrapolateLeft: "clamp",
|
|
47
|
+
extrapolateRight: "clamp",
|
|
48
|
+
easing: Easing.out(Easing.ease),
|
|
49
|
+
}
|
|
50
|
+
);
|
|
51
|
+
|
|
52
|
+
const totalFrames = fps * 6;
|
|
53
|
+
|
|
54
|
+
const exitStart = totalFrames - fps * 1;
|
|
55
|
+
|
|
56
|
+
const ganeshExitOpacity = interpolate(
|
|
57
|
+
frame,
|
|
58
|
+
[exitStart, totalFrames],
|
|
59
|
+
[1, 0],
|
|
60
|
+
{ extrapolateLeft: "clamp", extrapolateRight: "clamp" }
|
|
61
|
+
);
|
|
62
|
+
|
|
63
|
+
const ganeshExitY = interpolate(
|
|
64
|
+
frame,
|
|
65
|
+
[exitStart, totalFrames],
|
|
66
|
+
[0, -40],
|
|
67
|
+
{
|
|
68
|
+
extrapolateLeft: "clamp",
|
|
69
|
+
extrapolateRight: "clamp",
|
|
70
|
+
easing: Easing.in(Easing.ease),
|
|
71
|
+
}
|
|
72
|
+
);
|
|
73
|
+
|
|
74
|
+
const ganeshExitScale = interpolate(
|
|
75
|
+
frame,
|
|
76
|
+
[exitStart, totalFrames],
|
|
77
|
+
[1, 0.85],
|
|
78
|
+
{
|
|
79
|
+
extrapolateLeft: "clamp",
|
|
80
|
+
extrapolateRight: "clamp",
|
|
81
|
+
easing: Easing.in(Easing.ease),
|
|
82
|
+
}
|
|
83
|
+
);
|
|
84
|
+
|
|
85
|
+
|
|
86
|
+
return (
|
|
87
|
+
<AbsoluteFill style={{ overflow: "hidden" }}>
|
|
88
|
+
|
|
89
|
+
{/* LEFT CORNER LAMP */}
|
|
90
|
+
<HangingLamp05022026 side="left" offset={-200} />
|
|
91
|
+
<HangingLamp05022026 side="left" offset={10} />
|
|
92
|
+
{/* Right CORNER LAMP */}
|
|
93
|
+
<HangingLamp05022026 side="right" offset={-200} />
|
|
94
|
+
<HangingLamp05022026 side="right" offset={10} />
|
|
95
|
+
|
|
96
|
+
<DucksFrame05022026 />
|
|
97
|
+
|
|
98
|
+
{/* GANESH CENTER */}
|
|
99
|
+
<AbsoluteFill
|
|
100
|
+
style={{
|
|
101
|
+
display: "flex",
|
|
102
|
+
paddingTop: "10%",
|
|
103
|
+
alignItems: "center",
|
|
104
|
+
opacity: fade(ganeshStart) * ganeshExitOpacity,
|
|
105
|
+
transform: `translateY(${ganeshExitY}px)`,
|
|
106
|
+
}}
|
|
107
|
+
>
|
|
108
|
+
<Img
|
|
109
|
+
src={staticFile("video-images/05022026-Ganesh.webp")}
|
|
110
|
+
style={{
|
|
111
|
+
width: "60%",
|
|
112
|
+
objectFit: "contain",
|
|
113
|
+
transform: `scale(${ganeshScale * ganeshExitScale})`,
|
|
114
|
+
}}
|
|
115
|
+
/>
|
|
116
|
+
</AbsoluteFill>
|
|
117
|
+
|
|
118
|
+
{/* TEXT */}
|
|
119
|
+
<div
|
|
120
|
+
style={{
|
|
121
|
+
position: "absolute",
|
|
122
|
+
top: "55%",
|
|
123
|
+
left: "50%",
|
|
124
|
+
display: "flex",
|
|
125
|
+
flexDirection: "column",
|
|
126
|
+
alignItems: "center",
|
|
127
|
+
lineHeight: 1.2,
|
|
128
|
+
fontWeight: 600,
|
|
129
|
+
transform: `translate(-50%, -50%) translateY(${ganeshExitY}px)`,
|
|
130
|
+
opacity: ganeshExitOpacity,
|
|
131
|
+
}}
|
|
132
|
+
>
|
|
133
|
+
<h1
|
|
134
|
+
style={{
|
|
135
|
+
fontFamily: "Dancing Script",
|
|
136
|
+
color: "#2F5D50",
|
|
137
|
+
fontSize: 120,
|
|
138
|
+
margin: 0,
|
|
139
|
+
opacity: fade(word1Start) * ganeshExitOpacity,
|
|
140
|
+
transform: `translateY(${slide(word1Start)}px)`,
|
|
141
|
+
}}
|
|
142
|
+
>
|
|
143
|
+
Shree
|
|
144
|
+
</h1>
|
|
145
|
+
|
|
146
|
+
<h1
|
|
147
|
+
style={{
|
|
148
|
+
fontFamily: "Dancing Script",
|
|
149
|
+
color: "#2F5D50",
|
|
150
|
+
fontSize: 120,
|
|
151
|
+
opacity: fade(word2Start) * ganeshExitOpacity,
|
|
152
|
+
transform: `translateY(${slide(word2Start)}px)`,
|
|
153
|
+
}}
|
|
154
|
+
>
|
|
155
|
+
Ganeshay
|
|
156
|
+
</h1>
|
|
157
|
+
|
|
158
|
+
<h1
|
|
159
|
+
style={{
|
|
160
|
+
fontFamily: "Dancing Script",
|
|
161
|
+
color: "#2F5D50",
|
|
162
|
+
fontSize: 120,
|
|
163
|
+
margin: 0,
|
|
164
|
+
opacity: fade(word3Start) * ganeshExitOpacity,
|
|
165
|
+
transform: `translateY(${slide(word3Start)}px)`,
|
|
166
|
+
}}
|
|
167
|
+
>
|
|
168
|
+
Namaha
|
|
169
|
+
</h1>
|
|
170
|
+
</div>
|
|
171
|
+
</AbsoluteFill>
|
|
172
|
+
);
|
|
173
|
+
};
|