@evatril/video-templates 2.0.7 → 2.0.9

package/src/Invitations/Frames/F05022026_04.jsx

@@ -0,0 +1,140 @@
+import React from "react";
+import {
+    AbsoluteFill,
+    Img,
+    useCurrentFrame,
+    useVideoConfig,
+    interpolate,
+    Easing,
+    staticFile,
+} from "remotion";
+import { WordReveal28012026 } from "../Elements/WordReveal28012026";
+import { HangingLamp05022026 } from "../Elements/HangingLamp05022026";
+
+export const F05022026_04 = ({
+    familyMember,
+}) => {
+    const frame = useCurrentFrame();
+    const { fps, durationInFrames } = useVideoConfig();
+
+    const plateStart = fps * 3.5;
+
+    const plateX = interpolate(
+        frame,
+        [plateStart, plateStart + 40],
+        [900, 0], // comes from right
+        {
+            easing: Easing.out(Easing.cubic),
+            extrapolateLeft: "clamp",
+            extrapolateRight: "clamp",
+        }
+    );
+
+    const plateOpacity = interpolate(frame, [plateStart, plateStart + 30], [0, 1], {
+        extrapolateLeft: "clamp",
+        extrapolateRight: "clamp",
+    });
+
+    // Last 1 second family message exit
+    const textExitStart = durationInFrames - fps * 2;
+
+    // Fade out
+    const familyOpacity = interpolate(
+        frame,
+        [textExitStart, durationInFrames],
+        [1, 0],
+        {
+            extrapolateLeft: "clamp",
+            extrapolateRight: "clamp",
+            easing: Easing.out(Easing.cubic),
+        }
+    );
+
+    // Small upward move
+    const familyY = interpolate(
+        frame,
+        [textExitStart, durationInFrames],
+        [0, -40],
+        {
+            extrapolateLeft: "clamp",
+            extrapolateRight: "clamp",
+            easing: Easing.out(Easing.cubic),
+        }
+    );
+
+
+    // Peacock head shake (small rotation)
+    const headShake = Math.sin(frame / 10) * 3;
+
+    // Tiny breathing float
+    const peacockFloat = Math.sin(frame / 25) * 4;
+
+    return (
+        <AbsoluteFill style={{ overflow: "hidden" }}>
+            <HangingLamp05022026 side="left" offset={-50} />
+            <HangingLamp05022026 side="right" offset={-50} />
+            <HangingLamp05022026 side="left" offset={0} />
+            <HangingLamp05022026 side="right" offset={0} />
+
+            <Img
+                src={staticFile("video-images/05022026-Nameplate.webp")}
+                style={{
+                    position: "absolute",
+                    right: 60,
+                    bottom: -450,
+                    transform: `translateX(${plateX}px)`,
+                    opacity: plateOpacity,
+                    width: 800,
+                    maxWidth: "90%",
+                }}
+            />
+
+            <Img
+                src={staticFile("video-images/05022026-LeftPeacock.webp")}
+                style={{
+                    position: "absolute",
+                    left: -100,
+                    bottom: -120,
+                    width: 600,
+                    maxWidth: "90%",
+                    transform: `
+      translateY(${peacockFloat}px)
+      rotate(${headShake}deg)
+    `,
+                    transformOrigin: "70% 25%", // head/neck area
+                }}
+            />
+
+
+            <div
+                style={{
+                    position: "absolute",
+                    top: "30%",
+                    left: "50%",
+                    transform: `translateX(-50%) translateY(${familyY}px)`,
+                    width: "100%",
+                    textAlign: "center",
+                    opacity: familyOpacity,
+                }}
+            >
+                <div
+                    style={{
+                        maxWidth: "60%",
+                        margin: "0 auto",
+                    }}
+                >
+                    <WordReveal28012026
+                        text={familyMember}
+                        start={20}
+                        fontSize={70}
+                        color="#CDB89A"
+                        fontFamily="Dancing Script"
+                        letterSpacing="3px"
+                        lineHeight="1.2"
+                        fontWeight="600"
+                    />
+                </div>
+            </div>
+        </AbsoluteFill>
+    );
+};

package/src/Invitations/Frames/F20012026_01.jsx

@@ -1,12 +1,10 @@
 import React from "react";
 import {
   AbsoluteFill,
-  Img,
   useCurrentFrame,
   useVideoConfig,
   interpolate,
   Easing,
-  staticFile
 } from "remotion";
 
 import { Butterflies20012026 } from "../Elements/Butterflies20012026.jsx";

package/src/Invitations/Frames/F20012026_02.jsx

@@ -11,7 +11,7 @@ import {
 
 import { SideTrees20012026 } from "../Elements/SideTrees20012026.jsx";
 import { PeacockDance20012026 } from "../Elements/PeacockDance20012026.jsx";
-import { SmoothRevealFromTop } from "../Elements/SmoothRevealFromTop.jsx";
+import { SmoothRevealFromTop20012026 } from "../Elements/SmoothRevealFromTop20012026.jsx";
 
 export const F20012026_02 = ({
   firstName,
@@ -103,7 +103,7 @@ export const F20012026_02 = ({
             color: "#4A3A2A",
             fontSize: 40,
             letterSpacing: 2,
-            ...SmoothRevealFromTop({ frame, startFrame: DETAILS_START, delay: 0 }),
+            ...SmoothRevealFromTop20012026({ frame, startFrame: DETAILS_START, delay: 0 }),
           }}
         >
           {invitationMessage}
@@ -116,7 +116,7 @@ export const F20012026_02 = ({
             color: "#7A1E2E",
             fontSize: 60,
             letterSpacing: 3,
-            ...SmoothRevealFromTop({ frame, startFrame: DETAILS_START, delay: 25 }),
+            ...SmoothRevealFromTop20012026({ frame, startFrame: DETAILS_START, delay: 25 }),
           }}
         >
           {firstName}
@@ -128,7 +128,7 @@ export const F20012026_02 = ({
             color: "#B87A6A",
             fontSize: 35,
             maxWidth:"70%",
-            ...SmoothRevealFromTop({ frame, startFrame: DETAILS_START, delay: 50 }),
+            ...SmoothRevealFromTop20012026({ frame, startFrame: DETAILS_START, delay: 50 }),
           }}
         >
           {firstSideNote} 
@@ -139,7 +139,7 @@ export const F20012026_02 = ({
             fontSize: 40,
             color: "#C9A24D",
             letterSpacing: 6,
-            ...SmoothRevealFromTop({ frame, startFrame: DETAILS_START, delay: 70 }),
+            ...SmoothRevealFromTop20012026({ frame, startFrame: DETAILS_START, delay: 70 }),
           }}
         >
           ❁ ❁ ❁
@@ -152,7 +152,7 @@ export const F20012026_02 = ({
             color: "#7A1E2E",
             fontSize: 60,
             letterSpacing: 3,
-            ...SmoothRevealFromTop({ frame, startFrame: DETAILS_START, delay: 95 }),
+            ...SmoothRevealFromTop20012026({ frame, startFrame: DETAILS_START, delay: 95 }),
           }}
         >
           {secondName}  
@@ -164,7 +164,7 @@ export const F20012026_02 = ({
             color: "#B87A6A",
             fontSize: 35,
             maxWidth:"70%",
-            ...SmoothRevealFromTop({ frame, startFrame: DETAILS_START, delay: 120 }),
+            ...SmoothRevealFromTop20012026({ frame, startFrame: DETAILS_START, delay: 120 }),
           }}
         >
           {secondSideNote} 
@@ -173,7 +173,7 @@ export const F20012026_02 = ({
         <div
           style={{
             textAlign: "center",
-            ...SmoothRevealFromTop({ frame, startFrame: DETAILS_START, delay: 145 }),
+            ...SmoothRevealFromTop20012026({ frame, startFrame: DETAILS_START, delay: 145 }),
           }}
         >
           <div

package/src/Invitations/Frames/F20012026_03.jsx

@@ -10,7 +10,7 @@ import {
 } from "remotion";
 
 import { GroomBrideLoveScene20012026 } from "../Elements/GroomBrideLoveScene20012026.jsx";
-import { SmoothRevealFromTop } from "../Elements/SmoothRevealFromTop.jsx"
+import { SmoothRevealFromTop20012026 } from "../Elements/SmoothRevealFromTop20012026.jsx"
 
 export const F20012026_03 = ({
   eventDateTime,
@@ -130,7 +130,7 @@ export const F20012026_03 = ({
             whiteSpace: "normal",
             wordBreak: "break-word",
             overflowWrap: "break-word",
-            ...SmoothRevealFromTop({
+            ...SmoothRevealFromTop20012026({
               frame,
               startFrame: DETAILS_START,
               delay: 0,
@@ -152,7 +152,7 @@ export const F20012026_03 = ({
             whiteSpace: "normal",
             wordBreak: "break-word",
             overflowWrap: "break-word",
-            ...SmoothRevealFromTop({
+            ...SmoothRevealFromTop20012026({
               frame,
               startFrame: DETAILS_START,
               delay: 25,
@@ -173,7 +173,7 @@ export const F20012026_03 = ({
             whiteSpace: "normal",
             wordBreak: "break-word",
             overflowWrap: "break-word",
-            ...SmoothRevealFromTop({
+            ...SmoothRevealFromTop20012026({
               frame,
               startFrame: DETAILS_START,
               delay: 50,
@@ -197,7 +197,7 @@ export const F20012026_03 = ({
             whiteSpace: "normal",
             wordBreak: "break-word",
             overflowWrap: "break-word",
-            ...SmoothRevealFromTop({
+            ...SmoothRevealFromTop20012026({
               frame,
               startFrame: DETAILS_START,
               delay: 70,
@@ -220,7 +220,7 @@ export const F20012026_03 = ({
             whiteSpace: "normal",
             wordBreak: "break-word",
             overflowWrap: "break-word",
-            ...SmoothRevealFromTop({
+            ...SmoothRevealFromTop20012026({
               frame,
               startFrame: DETAILS_START,
               delay: 95,
@@ -241,7 +241,7 @@ export const F20012026_03 = ({
             whiteSpace: "normal",
             wordBreak: "break-word",
             overflowWrap: "break-word",
-            ...SmoothRevealFromTop({
+            ...SmoothRevealFromTop20012026({
               frame,
               startFrame: DETAILS_START,
               delay: 115,
@@ -265,7 +265,7 @@ export const F20012026_03 = ({
             whiteSpace: "normal",
             wordBreak: "break-word",
             overflowWrap: "break-word",
-            ...SmoothRevealFromTop({
+            ...SmoothRevealFromTop20012026({
               frame,
               startFrame: DETAILS_START,
               delay: 125,

package/src/Invitations/Frames/F28012026_01.jsx

@@ -0,0 +1,51 @@
+import React from "react";
+import {
+  AbsoluteFill,
+} from "remotion";
+import { FlowerReveal_TR_BL_28012026 } from "../Elements/FlowerReveal_TR_BL_28012026";
+import { GaneshBorder28012026 } from "../Elements/GaneshBorder28012026";
+import { BlowingLeaves28012026 } from "../Elements/BlowingLeaves28012026";
+import { WordReveal28012026 } from "../Elements/WordReveal28012026";
+
+export const F28012026_01 = ({
+  welcomeMessage,
+}) => {
+  return (
+    <AbsoluteFill style={{ overflow: "hidden" }}>
+      <FlowerReveal_TR_BL_28012026 />
+      <GaneshBorder28012026  />
+      <BlowingLeaves28012026 startAfter={2} />
+
+      <div
+        style={{
+          position: "absolute",
+          bottom: "2%",
+          right: "6%",
+          maxWidth: "50%",
+          textAlign: "right",
+        }}
+      >
+        <h1
+          style={{
+            fontFamily: "Dancing Script",
+            letterSpacing: 3,
+            lineHeight: 1.3,
+            fontWeight: 600,
+            margin: 0,
+            whiteSpace: "normal",
+            wordBreak: "break-word",
+          }}
+        >
+          <WordReveal28012026
+            text={welcomeMessage}
+            start={50}
+            fontSize={70}
+            color="#D4A24C"
+          />
+        </h1>
+      </div>
+
+
+    </AbsoluteFill>
+  );
+};

package/src/Invitations/Frames/F28012026_02.jsx

@@ -0,0 +1,246 @@
+import React from "react";
+import {
+    AbsoluteFill,
+    Img,
+    useCurrentFrame,
+    useVideoConfig,
+    interpolate,
+    Easing,
+    staticFile,
+} from "remotion";
+import { FlowerReveal_TL_BR_28012026 } from "../Elements/FlowerReveal_TL_BR_28012026";
+import { HeartDraw28012026 } from "../Elements/HeartDraw28012026";
+import { WordReveal28012026 } from "../Elements/WordReveal28012026";
+
+export const F28012026_02 = ({
+    firstName, secondName, invitationMessage, occasionDate
+}) => {
+    const frame = useCurrentFrame();
+
+    const firstInitial = firstName?.charAt(0)?.toUpperCase();
+    const secondInitial = secondName?.charAt(0)?.toUpperCase();
+
+    const formatDate = (date) => {
+        if (!date) return "";
+
+        let d;
+
+        // Handle DD-MM-YYYY
+        if (typeof date === "string" && date.includes("-")) {
+            const parts = date.split("-");
+            if (parts[0].length === 2) {
+                d = new Date(`${parts[2]}-${parts[1]}-${parts[0]}`);
+            } else {
+                d = new Date(date);
+            }
+        } else {
+            d = new Date(date);
+        }
+
+        if (isNaN(d.getTime())) return "";
+
+        return d.toLocaleDateString("en-IN", {
+            day: "numeric",
+            month: "long",
+            year: "numeric",
+        });
+    };
+
+    const { fps } = useVideoConfig();
+
+    const initialsStart = fps * 3.5;
+    const heartStart = initialsStart + fps * 1.2;
+     const openDuration = fps * 1; 
+     
+    const initialsOpacity = interpolate(
+    frame,
+    [initialsStart + fps * 0.1, initialsStart + openDuration],
+    [0, 1],
+    {
+      extrapolateLeft: "clamp",
+      extrapolateRight: "clamp",
+      easing: Easing.out(Easing.cubic),
+    }
+  );
+ // 🌿 INITIALS SCALE (soft overshoot)
+  const initialsScale = interpolate(
+    frame,
+    [
+      initialsStart,
+      initialsStart + openDuration * 0.7,
+      initialsStart + openDuration,
+    ],
+    [0.45, 1.05, 1],
+    {
+      extrapolateLeft: "clamp",
+      extrapolateRight: "clamp",
+      easing: Easing.out(Easing.cubic),
+    }
+  );
+
+  // ☁️ FLOAT UP
+  const initialsY = interpolate(
+    frame,
+    [initialsStart, initialsStart + openDuration],
+    [20, 0],
+    {
+      extrapolateLeft: "clamp",
+      extrapolateRight: "clamp",
+    }
+  );
+
+
+    return (
+        <AbsoluteFill style={{ overflow: "hidden" }}>
+            <FlowerReveal_TL_BR_28012026 />
+            <div
+                style={{
+                    position: "absolute",
+                    inset: 0,                 // fills whole screen
+                    display: "flex",
+                    justifyContent: "center", // vertical center
+                    alignItems: "center",     // horizontal center
+                    textAlign: "center",
+                }}
+            >
+                <div
+                    style={{
+                        display: "flex",
+                        flexDirection: "column",
+                        alignItems: "center",
+                        gap: "30px",
+                        width: "100%",
+                        whiteSpace: "normal",
+                        wordBreak: "break-word",
+                        overflowWrap: "break-word",
+                        lineHeight: "1.2",
+                    }}
+                >
+
+                    <div
+                        style={{
+                            display: "flex",
+                            flexDirection: "column",
+                            alignItems: "center",
+                            textAlign: "center",
+                            gap: "100px",
+                            width: "100%",
+                            whiteSpace: "normal",
+                            wordBreak: "break-word",
+                            overflowWrap: "break-word",
+                            lineHeight: "1.2",
+                            marginTop: "16%"
+                        }}
+                    >
+                        <h1
+                            style={{
+                                fontFamily: "Dancing Script",
+                                color: "#B76E79",
+                                letterSpacing: 3,
+                                lineHeight: 1.3,
+                                fontWeight: 600,
+                                maxWidth: "80%",
+                            }}
+                        >
+                            <WordReveal28012026
+                                text={invitationMessage}
+                                start={40}
+                                fontSize={60}
+                                color="#B76E79"
+                            />
+                        </h1>
+
+                        <div
+                            style={{
+                                position: "relative",
+                                width: "400px",
+                                height: "350px",
+                                display: "flex",
+                                justifyContent: "center",
+                                alignItems: "center",
+                                opacity: initialsOpacity,
+                                transform: `translateY(${initialsY}px) scale(${initialsScale})`,
+                            }}
+                        >
+                            <HeartDraw28012026 startAfter={heartStart} />
+                            {/* Bride Initial – Top */}
+                            <span
+                                style={{
+                                    position: "absolute",
+                                    top: 0,
+                                    transform: "translate(-80px, -10px)",
+                                    fontFamily: "Dancing Script",
+                                    fontSize: 200,
+                                    color: "#D4A24C",
+                                    fontWeight: 600,
+                                    zIndex: 2,
+                                }}
+                            >
+                                {firstInitial}
+                            </span>
+
+                            {/* Ampersand – Center */}
+                            <span
+                                style={{
+                                    position: "absolute",
+                                    fontFamily: "Dancing Script",
+                                    fontSize: 200,
+                                    color: "#D4A24C",
+                                    opacity: 0.2,
+                                    zIndex: 1,
+                                }}
+                            >
+                                &
+                            </span>
+
+                            {/* Groom Initial – Bottom */}
+                            <span
+                                style={{
+                                    position: "absolute",
+                                    bottom: 0,
+                                    transform: "translate(50px, 50px)",
+                                    fontFamily: "Dancing Script",
+                                    fontSize: 200,
+                                    color: "#D4A24C",
+                                    fontWeight: 600,
+                                    zIndex: 2,
+
+                                    opacity: interpolate(
+                                        frame,
+                                        [initialsStart + fps * 0.3, initialsStart + fps * 0.6],
+                                        [0, 1],
+                                        { extrapolateRight: "clamp" }
+                                    ),
+                                }}
+                            >
+                                {secondInitial}
+                            </span>
+
+                        </div>
+
+                        <div
+                            style={{
+                                fontSize: 65,
+                                fontWeight: "600",
+                                color: "#B76E79",
+                                lineHeight: 1.2,
+                                marginTop: "15px",
+                                letterSpacing: "4px",
+                                whiteSpace: "nowrap",
+                            }}
+                        >
+                            <WordReveal28012026
+                                text={formatDate(occasionDate)}
+                                start={140}
+                                fontSize={65}
+                                color="#B76E79"
+                            />
+
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+        </AbsoluteFill>
+    );
+};