@evatril/video-templates 2.0.7 → 2.0.9

package/src/Invitations/Frames/F03022026_05.jsx

@@ -0,0 +1,235 @@
+import React from "react";
+import {
+  AbsoluteFill,
+  Img,
+  useCurrentFrame,
+  useVideoConfig,
+  interpolate,
+  Easing,
+  staticFile,
+} from "remotion";
+import { WordReveal28012026 } from "../Elements/WordReveal28012026";
+
+export const F03022026_05 = ({
+  familyMember,
+}) => {
+  const frame = useCurrentFrame();
+  const { fps } = useVideoConfig();
+
+  const moveDuration = fps * 3;
+  const moveX = interpolate(
+    frame,
+    [0, moveDuration],
+    [-80, 80],
+    {
+      easing: Easing.inOut(Easing.ease),
+      extrapolateRight: "clamp",
+    }
+  );
+
+  const start = fps * 0.8;
+  const msgOpacity = interpolate(frame, [start, start + 20], [0, 1], {
+    extrapolateLeft: "clamp",
+    extrapolateRight: "clamp",
+    easing: Easing.out(Easing.cubic),
+  });
+
+  const msgY = interpolate(frame, [start, start + 20], [60, 0], {
+    extrapolateLeft: "clamp",
+    extrapolateRight: "clamp",
+  });
+
+  // Scene timing
+  const sceneDuration = fps * 6;
+
+  // Exit starts near end
+  const exitStart = sceneDuration - fps * 1.5;
+
+  // Wedding exit
+  const msgExitOpacity = interpolate(
+    frame,
+    [exitStart, exitStart + 25],
+    [1, 0],
+    {
+      extrapolateLeft: "clamp",
+      extrapolateRight: "clamp",
+      easing: Easing.out(Easing.cubic),
+    }
+  );
+
+  const msgExitY = interpolate(
+    frame,
+    [exitStart, exitStart + 25],
+    [0, -80], // moves UP
+    {
+      extrapolateLeft: "clamp",
+      extrapolateRight: "clamp",
+    }
+  );
+
+  // Thank You appears AFTER familyMember exits
+  const thankStart = exitStart + 35;
+
+  const thankOpacity = interpolate(
+    frame,
+    [thankStart, thankStart + 25],
+    [0, 1],
+    {
+      extrapolateLeft: "clamp",
+      extrapolateRight: "clamp",
+      easing: Easing.out(Easing.cubic),
+    }
+  );
+
+  const thankY = interpolate(
+    frame,
+    [thankStart, thankStart + 25],
+    [60, 0],
+    {
+      extrapolateLeft: "clamp",
+      extrapolateRight: "clamp",
+    }
+  );
+
+  // Thank You exit (last 1.2 seconds)
+  const thankStay = fps * 2;
+
+  const thankExitStart = thankStart + thankStay;
+
+  const thankExitOpacity = interpolate(
+    frame,
+    [thankExitStart, thankExitStart + 25],
+    [1, 0],
+    {
+      extrapolateLeft: "clamp",
+      extrapolateRight: "clamp",
+      easing: Easing.out(Easing.cubic),
+    }
+  );
+
+  const thankExitY = interpolate(
+    frame,
+    [thankExitStart, thankExitStart + 25],
+    [0, -80], // moves UP
+    {
+      extrapolateLeft: "clamp",
+      extrapolateRight: "clamp",
+    }
+  );
+
+
+  // Image animation (same timing as Wedding)
+  const imageOpacity = interpolate(frame, [start, start + 25], [0, 1], {
+    extrapolateLeft: "clamp",
+    extrapolateRight: "clamp",
+    easing: Easing.out(Easing.cubic),
+  });
+
+  // Image exit (same timing as Wedding but slower for elegance)
+  const imageExitOpacity = interpolate(
+    frame,
+    [exitStart, exitStart + 35],
+    [1, 0],
+    {
+      extrapolateLeft: "clamp",
+      extrapolateRight: "clamp",
+      easing: Easing.out(Easing.cubic),
+    }
+  );
+
+  const imageExitY = interpolate(
+    frame,
+    [exitStart, exitStart + 35],
+    [0, -120], // image moves UP more
+    {
+      extrapolateLeft: "clamp",
+      extrapolateRight: "clamp",
+    }
+  );
+  return (
+    <AbsoluteFill style={{ overflow: "hidden" }}>
+
+      <div
+        style={{
+          position: "absolute",
+          bottom: 0,
+          width: "100%",
+          height: "100%",
+          overflow: "hidden",
+        }}
+      >
+        <Img
+          src={staticFile("video-images/03022026-krishnaradha-5.webp")}
+          style={{
+            position: "absolute",
+            top: "30%",
+            left: "50%",
+            objectFit: "cover",
+            opacity: imageOpacity * imageExitOpacity,
+            transform: `translateX(-50%) translateX(${moveX}px) translateY(${imageExitY}px)`
+          }}
+        />
+      </div>
+
+      <div
+        style={{
+          position: "absolute",
+          inset: 0,
+          display: "flex",
+          justifyContent: "center",
+          alignItems: "center",
+          opacity: msgOpacity * msgExitOpacity,
+          transform: `translateY(-18%) translateY(${msgY + msgExitY}px)`,
+        }}
+      >
+        <div
+          style={{
+            maxWidth: "70%",
+            textAlign: "center",
+            lineHeight: 1.3,
+          }}
+        >
+          <WordReveal28012026
+            text={familyMember}
+            start={20}
+            fontSize={60}            
+            color= "#F4A261"
+            fontFamily="Playfair Display"
+          />
+        </div>
+      </div>
+
+      {/* THANK YOU MESSAGE */}
+      <div
+        style={{
+          position: "absolute",
+          inset: 0,
+          display: "flex",
+          justifyContent: "center",
+          alignItems: "center",
+          opacity: thankOpacity * thankExitOpacity,
+          transform: `translateY(${thankY + thankExitY}px)`,
+        }}
+      >
+        <div
+          style={{
+            maxWidth: "50%",
+            textAlign: "center",
+          }}
+        >
+          <h1
+            style={{
+              fontFamily: "Dancing Script",
+              fontSize: 180,
+              color:"#D94A5C"
+            }}
+          >
+            Thank You 
+          </h1>
+        </div>
+      </div>
+
+
+    </AbsoluteFill>
+  );
+};

package/src/Invitations/Frames/F05022026_01.jsx

@@ -0,0 +1,173 @@
+import React from "react";
+import {
+    AbsoluteFill,
+    Img,
+    staticFile,
+    useCurrentFrame,
+    useVideoConfig,
+    interpolate,
+    Easing,
+} from "remotion";
+import { DucksFrame05022026 } from "../Elements/DucksFrame05022026";
+import { HangingLamp05022026 } from "../Elements/HangingLamp05022026";
+
+export const F05022026_01 = () => {
+    const frame = useCurrentFrame();
+    const { fps } = useVideoConfig();
+
+    // TIMINGS
+    const ganeshStart = fps * 0.5;
+    const word1Start = fps * 1;
+    const word2Start = fps * 1.5;
+    const word3Start = fps * 2;
+
+    // Fade helper
+    const fade = (start) =>
+        interpolate(frame, [start, start + fps * 0.7], [0, 1], {
+            extrapolateLeft: "clamp",
+            extrapolateRight: "clamp",
+            easing: Easing.out(Easing.ease),
+        });
+
+    // Slide helper
+    const slide = (start) =>
+        interpolate(frame, [start, start + fps * 0.7], [30, 0], {
+            extrapolateLeft: "clamp",
+            extrapolateRight: "clamp",
+            easing: Easing.out(Easing.ease),
+        });
+
+    // Ganesh scale
+    const ganeshScale = interpolate(
+        frame,
+        [ganeshStart, ganeshStart + fps],
+        [0.9, 1],
+        {
+            extrapolateLeft: "clamp",
+            extrapolateRight: "clamp",
+            easing: Easing.out(Easing.ease),
+        }
+    );
+
+    const totalFrames = fps * 6;
+
+    const exitStart = totalFrames - fps * 1;
+
+    const ganeshExitOpacity = interpolate(
+        frame,
+        [exitStart, totalFrames],
+        [1, 0],
+        { extrapolateLeft: "clamp", extrapolateRight: "clamp" }
+    );
+
+    const ganeshExitY = interpolate(
+        frame,
+        [exitStart, totalFrames],
+        [0, -40],
+        {
+            extrapolateLeft: "clamp",
+            extrapolateRight: "clamp",
+            easing: Easing.in(Easing.ease),
+        }
+    );
+
+    const ganeshExitScale = interpolate(
+        frame,
+        [exitStart, totalFrames],
+        [1, 0.85],
+        {
+            extrapolateLeft: "clamp",
+            extrapolateRight: "clamp",
+            easing: Easing.in(Easing.ease),
+        }
+    );
+
+
+    return (
+        <AbsoluteFill style={{ overflow: "hidden" }}>
+
+            {/* LEFT CORNER LAMP */}
+            <HangingLamp05022026 side="left" offset={-200} />
+            <HangingLamp05022026 side="left" offset={10} />
+            {/* Right CORNER LAMP */}
+            <HangingLamp05022026 side="right" offset={-200} />
+            <HangingLamp05022026 side="right" offset={10} />
+
+            <DucksFrame05022026 />
+
+            {/* GANESH CENTER */}
+            <AbsoluteFill
+                style={{
+                    display: "flex",
+                    paddingTop: "10%",
+                    alignItems: "center",
+                    opacity: fade(ganeshStart) * ganeshExitOpacity,
+                    transform: `translateY(${ganeshExitY}px)`,
+                }}
+            >
+                <Img
+                    src={staticFile("video-images/05022026-Ganesh.webp")}
+                    style={{
+                        width: "60%",
+                        objectFit: "contain",
+                        transform: `scale(${ganeshScale * ganeshExitScale})`,
+                    }}
+                />
+            </AbsoluteFill>
+
+            {/* TEXT */}
+            <div
+                style={{
+                    position: "absolute",
+                    top: "55%",
+                    left: "50%",
+                    display: "flex",
+                    flexDirection: "column",
+                    alignItems: "center",
+                    lineHeight: 1.2,
+                    fontWeight: 600,
+                    transform: `translate(-50%, -50%) translateY(${ganeshExitY}px)`,
+                    opacity: ganeshExitOpacity,
+                }}
+            >
+                <h1
+                    style={{
+                        fontFamily: "Dancing Script",
+                        color: "#2F5D50",
+                        fontSize: 120,
+                        margin: 0,
+                        opacity: fade(word1Start) * ganeshExitOpacity,
+                        transform: `translateY(${slide(word1Start)}px)`,
+                    }}
+                >
+                    Shree
+                </h1>
+
+                <h1
+                    style={{
+                        fontFamily: "Dancing Script",
+                        color: "#2F5D50",
+                        fontSize: 120,
+                        opacity: fade(word2Start) * ganeshExitOpacity,
+                        transform: `translateY(${slide(word2Start)}px)`,
+                    }}
+                >
+                    Ganeshay
+                </h1>
+
+                <h1
+                    style={{
+                        fontFamily: "Dancing Script",
+                        color: "#2F5D50",
+                        fontSize: 120,
+                        margin: 0,
+                        opacity: fade(word3Start) * ganeshExitOpacity,
+                        transform: `translateY(${slide(word3Start)}px)`,
+                    }}
+                >
+                    Namaha
+                </h1>
+            </div>
+        </AbsoluteFill>
+    );
+};