@evatril/video-templates 2.0.10 → 2.0.11

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@evatril/video-templates",
-  "version": "2.0.10",
+  "version": "2.0.11",
   "description": "",
   "main": "src/index.js",
   "remotion": {

package/src/Invitations/Elements/FlowerReveal_TL_BR_28012026.jsx

@@ -1,7 +1,6 @@
 import React from "react";
 import {
   Img,
-  staticFile,
   useCurrentFrame,
   useVideoConfig,
   interpolate,
@@ -74,7 +73,7 @@ export const FlowerReveal_TL_BR_28012026 = ({ startAfter = 0 }) => {
     <>
       {/* 🌸 TOP LEFT */}
       <Img
-        src={staticFile("video-images/28012026-TopLeftFlower.webp")}
+        src="https://evatril-images.s3.ap-south-1.amazonaws.com/video-themes/hindu-wedding-1/v1/28012026-TopLeftFlower.webp"
         style={{
           position: "absolute",
           top: "-170px",
@@ -93,7 +92,7 @@ export const FlowerReveal_TL_BR_28012026 = ({ startAfter = 0 }) => {
 
       {/* 🌸 BOTTOM RIGHT */}
       <Img
-        src={staticFile("video-images/28012026-BottomRightFlower.webp")}
+        src="https://evatril-images.s3.ap-south-1.amazonaws.com/video-themes/hindu-wedding-1/v1/28012026-BottomRightFlower.webp"
         style={{
           position: "absolute",
           bottom: "-300px",

package/src/Invitations/Elements/SideTrees20012026.jsx

@@ -31,7 +31,7 @@ export const SideTrees20012026 = ({ startAfter = 1 }) => {
   const leftTreeX = interpolate(
     frame,
     [delay, delay + duration],
-    [-600, -380], // hidden → edge
+    [-600, -370],
     {
       extrapolateLeft: "clamp",
       extrapolateRight: "clamp",
@@ -42,7 +42,7 @@ export const SideTrees20012026 = ({ startAfter = 1 }) => {
   const rightTreeX = interpolate(
     frame,
     [delay, delay + duration],
-    [600, 380], // hidden → edge
+    [600, 400],
     {
       extrapolateLeft: "clamp",
       extrapolateRight: "clamp",
@@ -50,53 +50,41 @@ export const SideTrees20012026 = ({ startAfter = 1 }) => {
     }
   );
 
-  /* ---------------- 🌬️ TREE SWING (WIND) ---------------- */
-  const swingSpeed = 20; // higher = slower swing
-  const swingAngle = 2;  // degrees (keep small)
-
-  const swing =
-    frame > delay
-      ? Math.sin((frame - delay) / swingSpeed) * swingAngle
-      : 0;
-
-  const swayX =
+  /* ---------------- 🍃 LEAF SWAY ONLY ---------------- */
+  const leafSway =
     frame > delay
-      ? Math.sin((frame - delay) / (swingSpeed * 1.3)) * 6
+      ? Math.sin((frame - delay) / 28) * 8   // adjust 8 for more/less sway
       : 0;
 
   return (
     <>
       {/* 🌳 LEFT TREE */}
       <Img
-        src={staticFile("video-images/20012026-tree-left.webp")}
+        src={staticFile("video-images/20012026-tree-left1.webp")}
         style={{
           position: "absolute",
           left: 0,
           bottom: 0,
-          height: "100%",
+          width: "100%",
           opacity,
           transform: `
-            translateX(${leftTreeX + swayX}px)
-            rotate(${swing}deg)
+            translateX(${leftTreeX + leafSway}px)
           `,
-          transformOrigin: "bottom left", // 🌳 root fixed
         }}
       />
 
       {/* 🌳 RIGHT TREE */}
       <Img
-        src={staticFile("video-images/20012026-tree-right.webp")}
+        src={staticFile("video-images/20012026-tree-right2.webp")}
         style={{
           position: "absolute",
           right: 0,
-          bottom: 0,
+          bottom: "-25%",
           height: "100%",
           opacity,
           transform: `
-            translateX(${rightTreeX - swayX}px)
-            rotate(${-swing}deg)
+            translateX(${rightTreeX - leafSway}px)
           `,
-          transformOrigin: "bottom right", // 🌳 root fixed
         }}
       />
     </>

package/src/Invitations/Frames/F03022026_01.jsx

@@ -2,7 +2,6 @@ import React from "react";
 import {
   AbsoluteFill,
   Img,
-  staticFile,
   useCurrentFrame,
   useVideoConfig,
   interpolate,
@@ -64,7 +63,7 @@ export const F03022026_01 = () => {
   // Scene timing
   const sceneDuration = fps * 5;
 
-  // Exit starts near end
+  // Exit starts near end 
   const exitStart = sceneDuration - fps * 1;
 
   // Wedding exit
@@ -151,7 +150,7 @@ export const F03022026_01 = () => {
         }}
       >
         <Img
-          src={staticFile("video-images/03022026-krishnaradha.webp")}
+          src="https://evatril-images.s3.ap-south-1.amazonaws.com/video-themes/hindu-wedding-1/v1/03022026-krishnaradha.webp"
           style={{
             position: "absolute",
             top: "40%",
@@ -211,4 +210,4 @@ export const F03022026_01 = () => {
 
     </AbsoluteFill>
   );
-};
+};

package/src/Invitations/Frames/F03022026_02.jsx

@@ -6,7 +6,6 @@ import {
     useVideoConfig,
     interpolate,
     Easing,
-    staticFile,
 } from "remotion";
 import { WordReveal28012026 } from "../Elements/WordReveal28012026";
 
@@ -153,7 +152,6 @@ export const F03022026_02 = ({
                 overflow: "hidden",
             }}
         >
-
             <div
                 style={{
                     position: "absolute",
@@ -164,7 +162,7 @@ export const F03022026_02 = ({
                 }}
             >
                 <Img
-                    src={staticFile("video-images/03022026-krishnaradha-2.webp")}
+                    src="https://evatril-images.s3.ap-south-1.amazonaws.com/video-themes/hindu-wedding-1/v1/03022026-krishnaradha-2.webp"
                     style={{
                         position: "absolute",
                         bottom: "-15%",
@@ -202,7 +200,7 @@ export const F03022026_02 = ({
                         overflowWrap: "break-word",
                         lineHeight: "1.2",
                     }}
-                >
+                > 
                     <h1
                         style={{
                             fontFamily: "Dancing Script",

package/src/Invitations/Frames/F03022026_03.jsx

@@ -6,7 +6,6 @@ import {
   interpolate,
   Easing,
   Img,
-  staticFile,
 } from "remotion";
 
 export const F03022026_03 = ({
@@ -254,11 +253,11 @@ export const F03022026_03 = ({
 
       {secondPhoto && (
         <div
-          style={{
+          style={{ 
             position: "absolute",
             bottom: "10%",
             right: "8%",
-            width: 420,
+            width: 420, 
             height: 420,
             zIndex: 2,
             transform: `translateX(${secondPhotoX + exitRightX}px)`,

package/src/Invitations/Frames/F03022026_04.jsx

@@ -6,7 +6,6 @@ import {
   interpolate,
   Easing,
   Img,
-  staticFile,
 } from "remotion";
 
 export const F03022026_04 = ({
@@ -171,12 +170,12 @@ export const F03022026_04 = ({
       }}
     >
        <Img
-        src={staticFile("video-images/03022026-krishnaradha-41.webp")}
+        src="https://evatril-images.s3.ap-south-1.amazonaws.com/video-themes/hindu-wedding-1/v1/03022026-krishnaradha-4.webp"
         style={{
           position: "absolute",
           left: "50%",
           bottom: "-12%",
-          width: "80%",
+          width: "80%", 
           transform: `
             translate(-50%, ${translateY}px)
             translateX(${sway}px)

package/src/Invitations/Frames/F03022026_05.jsx

@@ -6,7 +6,6 @@ import {
   useVideoConfig,
   interpolate,
   Easing,
-  staticFile,
 } from "remotion";
 import { WordReveal28012026 } from "../Elements/WordReveal28012026";
 
@@ -159,7 +158,7 @@ export const F03022026_05 = ({
         }}
       >
         <Img
-          src={staticFile("video-images/03022026-krishnaradha-52.webp")}
+          src="https://evatril-images.s3.ap-south-1.amazonaws.com/video-themes/hindu-wedding-1/v1/03022026-krishnaradha-5.webp"
           style={{
             position: "absolute",
             top: "40%",
@@ -179,7 +178,7 @@ export const F03022026_05 = ({
           display: "flex",
           justifyContent: "center",
           alignItems: "center",
-          opacity: msgOpacity * msgExitOpacity,
+          opacity: msgOpacity * msgExitOpacity, 
           transform: `translateY(-20%) translateY(${msgY + msgExitY}px)`,
         }}
       >

package/src/Invitations/Frames/F20012026_02.jsx

@@ -67,9 +67,10 @@ export const F20012026_02 = ({
     >
       {/* Curtain */}
       <Img
-        src={staticFile("video-images/20012026-curtain-floral.webp")}
+        src={staticFile("video-images/20012026-curtain-floral3.webp")}
         style={{
           position: "absolute",
+          top:"-12%",
           left: "50%",
           width: "100%",
           opacity: imageOpacity,

package/src/Invitations/Frames/F20012026_03.jsx

@@ -9,272 +9,256 @@ import {
   staticFile,
 } from "remotion";
 
-import { GroomBrideLoveScene20012026 } from "../Elements/GroomBrideLoveScene20012026.jsx";
-import { SmoothRevealFromTop20012026 } from "../Elements/SmoothRevealFromTop20012026.jsx"
-
 export const F20012026_03 = ({
-  eventDateTime,
-  venueName,
-  venueAddress,
-  familyMember,
-  fadeInDuration = 30,
+  firstName,
+  firstPhoto,
+  secondName,
+  secondPhoto,
 }) => {
   const frame = useCurrentFrame();
   const { fps } = useVideoConfig();
+  const opacity = interpolate(frame, [0, 25], [0, 1], {
+    extrapolateRight: "clamp",
+  });
+
+  const translateY = interpolate(frame, [0, 25], [-40, 0], {
+    extrapolateRight: "clamp",
+    easing: Easing.out(Easing.ease),
+  });
 
-  /* ---------------- DATE UTILS ---------------- */
-  const getDateParts = (iso) => {
-    if (!iso) return { day: "", month: "", year: "", time: "" };
+  // timing (30fps based)
+  const firstPhotoStart = fps * 1;      // 1 second
+  const firstTextStart = fps * 1.5;     // +0.5s
+  const secondPhotoStart = fps * 2;     // +1s after first
+  const secondTextStart = fps * 2.5;    // +0.5s
 
-    const d = new Date(iso);
-    if (isNaN(d.getTime())) {
-      return { day: "", month: "", year: "", time: "" };
+  // FIRST PHOTO (from left)
+  const firstPhotoX = interpolate(
+    frame,
+    [firstPhotoStart, firstPhotoStart + fps * 2],
+    [-200, 0],
+    {
+      extrapolateRight: "clamp",
+      easing: Easing.out(Easing.cubic),
     }
+  );
 
-    return {
-      day: d.getDate(),
-      month: d.toLocaleString("en-US", { month: "long" }),
-      year: d.getFullYear(),
-      time: d.toLocaleTimeString("en-US", {
-        hour: "2-digit",
-        minute: "2-digit",
-        hour12: true,
-      }),
-    };
-  };
+  const firstPhotoOpacity = interpolate(
+    frame,
+    [firstPhotoStart, firstPhotoStart + 10],
+    [0, 1],
+    { extrapolateRight: "clamp" }
+  );
 
-  const { day, month, year, time } = getDateParts(eventDateTime);
+  // FIRST TEXT
+  const firstTextX = interpolate(
+    frame,
+    [firstTextStart, firstTextStart + 20],
+    [-30, 0],
+    {
+      extrapolateRight: "clamp",
+      easing: Easing.out(Easing.ease),
+    }
+  );
 
-  const DETAILS_START = fps * 4;
+  const firstTextOpacity = interpolate(
+    frame,
+    [firstTextStart, firstTextStart + 10],
+    [0, 1],
+    { extrapolateRight: "clamp" }
+  );
 
-  /* ================= IMAGE ANIMATION ================= */
-  const showImageAfter = fadeInDuration * 2;
+  // SECOND PHOTO (from right)
+  const secondPhotoX = interpolate(
+    frame,
+    [secondPhotoStart, secondPhotoStart + fps * 2],
+    [200, 0],
+    {
+      extrapolateRight: "clamp",
+      easing: Easing.out(Easing.cubic),
+    }
+  );
 
-  const imageOpacity = interpolate(
+  const secondPhotoOpacity = interpolate(
     frame,
-    [showImageAfter, showImageAfter + fps * 1.2],
+    [secondPhotoStart, secondPhotoStart + 10],
     [0, 1],
+    { extrapolateRight: "clamp" }
+  );
+
+  // SECOND TEXT
+  const secondTextX = interpolate(
+    frame,
+    [secondTextStart, secondTextStart + 20],
+    [60, 0], // 👉 from RIGHT to center
     {
       extrapolateRight: "clamp",
       easing: Easing.out(Easing.ease),
     }
   );
 
-  const imageScale = interpolate(
+  const secondTextOpacity = interpolate(
+    frame,
+    [secondTextStart, secondTextStart + 10],
+    [0, 1],
+    { extrapolateRight: "clamp" }
+  );
+
+  const totalFrames =  fps * 7;
+
+  const exitStart = totalFrames - fps * 2; // last 1 second
+
+  const exitOpacity = interpolate(
+    frame,
+    [exitStart, totalFrames],
+    [1, 0],
+    { extrapolateLeft: "clamp", extrapolateRight: "clamp" }
+  );
+  const exitTopY = interpolate(
     frame,
-    [showImageAfter, showImageAfter + fps * 1.2],
-    [0.95, 1],
+    [exitStart, totalFrames],
+    [0, -40],
     {
+      extrapolateLeft: "clamp",
       extrapolateRight: "clamp",
-      easing: Easing.out(Easing.cubic),
+      easing: Easing.in(Easing.ease),
     }
   );
-  const imageTranslateY = interpolate(
+  const exitLeftX = interpolate(
     frame,
-    [showImageAfter, showImageAfter + fps * 1.2],
-    [-200, 0], // 🔥 starts above and comes down
+    [exitStart, totalFrames],
+    [0, -60],
     {
+      extrapolateLeft: "clamp",
       extrapolateRight: "clamp",
-      easing: Easing.out(Easing.ease),
+      easing: Easing.in(Easing.ease),
+    }
+  );
+  const exitRightX = interpolate(
+    frame,
+    [exitStart, totalFrames],
+    [0, 60],
+    {
+      extrapolateLeft: "clamp",
+      extrapolateRight: "clamp",
+      easing: Easing.in(Easing.ease),
     }
   );
 
-  return ( 
+  return (
     <AbsoluteFill
       style={{
-        transformOrigin: "center center",
         overflow: "hidden",
       }}
     >
-      <Img
-        src={staticFile("video-images/20012026-wedding-gate.webp")}
-        style={{
-          position: "absolute",
-          top: 0,
-          left: "50%",
-          width: "100%",
-          height: "100%",
-          opacity: imageOpacity,
-          transform: `
-      translateX(-50%)
-      translateY(${imageTranslateY}px)
-      scale(${imageScale})
-    `,
-        }}
-      />
 
-      <GroomBrideLoveScene20012026 startAfter={3.5} />
+      {firstPhoto && (
+        <div
+          style={{
+            position: "absolute",
+            top: "28%",
+            left: "8%",
+            width: 420,
+            height: 420,
+            zIndex: 2,
+            transform: `translateX(${firstPhotoX + exitLeftX}px)`,
+            opacity: firstPhotoOpacity * exitOpacity,
+          }}
+        >
+          <Img
+            src={firstPhoto}
+            style={{
+              width: "100%",
+              height: "100%",
+              objectFit: "cover",
+              border: "4px solid #C65A7A",
+              borderRadius: "50%",
+            }}
+          />
+        </div>
+      )}
 
+      {/* FIRST NAME + SIDE NOTE */}
       <div
         style={{
           position: "absolute",
-          top: "24%",
-          width: "100%",
+          top: "35%",
+          left: "35%",
+          lineHeight: 1.2,
           display: "flex",
           flexDirection: "column",
           alignItems: "center",
-          textAlign: "center",
-          zIndex: 5,
-          gap: "30px"
+          transform: `translateX(${firstTextX + exitLeftX}px)`,
+          opacity: firstTextOpacity * exitOpacity,
+
         }}
       >
-        <div
-          style={{
-            maxWidth: "50%",
-            fontFamily: "Playfair Display",
-            fontSize: 55,
-            fontWeight: "600",
-            color: "#3B2F2F",
-            lineHeight: 1.2,
-            letterSpacing: "2px",
-            whiteSpace: "normal",
-            wordBreak: "break-word",
-            overflowWrap: "break-word",
-            ...SmoothRevealFromTop20012026({
-              frame,
-              startFrame: DETAILS_START,
-              delay: 0,
-            })
-          }}
-        >
-          {venueName}
-        </div>
-
-        <div
-          style={{
-            maxWidth: "80%",
-            fontFamily: "Playfair Display",
-            fontSize: 50,
-            fontWeight: "600",
-            color: "#5A4A42",
-            lineHeight: 1.2,
-            letterSpacing: "2px",
-            whiteSpace: "normal",
-            wordBreak: "break-word",
-            overflowWrap: "break-word",
-            ...SmoothRevealFromTop20012026({
-              frame,
-              startFrame: DETAILS_START,
-              delay: 25,
-            })
-
-          }}
-        >
-          {venueAddress}
-        </div>
-        <div
-          style={{
-            fontFamily: "Great Vibes",
-            fontSize: 55,
-            fontWeight: "600",
-            color: "#6B1E2E",
-            lineHeight: 1.2,
-            letterSpacing: "3px",
-            whiteSpace: "normal",
-            wordBreak: "break-word",
-            overflowWrap: "break-word",
-            ...SmoothRevealFromTop20012026({
-              frame,
-              startFrame: DETAILS_START,
-              delay: 50,
-            })
-
-          }}
-        >
-          On the joyous occasion
-        </div>
-        <div
+        <h1
           style={{
-            maxWidth: "80%",
-            display: "flex",
-            gap: 18,
-            fontFamily: "Playfair Display",
-            fontSize: 50,
-            fontWeight: "600",
-            color: "#6B1E2E",
-            lineHeight: 1.2,
-            letterSpacing: "2px",
-            whiteSpace: "normal",
-            wordBreak: "break-word",
-            overflowWrap: "break-word",
-            ...SmoothRevealFromTop20012026({
-              frame,
-              startFrame: DETAILS_START,
-              delay: 70,
-            })
-
+            fontFamily: "Dancing Script",
+            color: "#C65A7A",
+            fontSize: 80,
+            maxWidth: "70%",
+            textAlign: "center",
+            wordWrap: "break-word",
           }}
         >
-          <span>{day}</span>
-          <span>{month}</span>
-          <span>{year}</span>
-        </div>
-        <div
-          style={{
-            fontFamily: "Great Vibes",
-            fontSize: 55,
-            fontWeight: "600",
-            color: "#4B3A28",
-            lineHeight: 1.2,
-            letterSpacing: "2px",
-            whiteSpace: "normal",
-            wordBreak: "break-word",
-            overflowWrap: "break-word",
-            ...SmoothRevealFromTop20012026({
-              frame,
-              startFrame: DETAILS_START,
-              delay: 95,
-            })
+          {firstName}
+        </h1>
+      </div>
 
-          }}
-        >
-          Wedding Time
-        </div>
+      {secondPhoto && (
         <div
-          style={{
-            fontSize: 50,
-            fontWeight: "600",
-            color: "#4B3A28",
-            fontFamily: "Playfair Display",
-            lineHeight: 1.2,
-            letterSpacing: "2px",
-            whiteSpace: "normal",
-            wordBreak: "break-word",
-            overflowWrap: "break-word",
-            ...SmoothRevealFromTop20012026({
-              frame,
-              startFrame: DETAILS_START,
-              delay: 115,
-            })
-
+          style={{ 
+            position: "absolute",
+            bottom: "10%",
+            right: "8%",
+            width: 420,
+            height: 420,
+            zIndex: 2,
+            transform: `translateX(${secondPhotoX + exitRightX}px)`,
+            opacity: secondPhotoOpacity * exitOpacity,
           }}
         >
-          {time}
+          <Img
+            src={secondPhoto}
+            style={{
+              width: "100%",
+              height: "100%",
+              objectFit: "cover",
+              border: "4px solid #C65A7A",
+              borderRadius: "50%",
+            }}
+          />
         </div>
+      )}
 
-        <div
+      {/* SECOND NAME + SIDE NOTE */}
+      <div
+        style={{
+          position: "absolute",
+          bottom: "23%",
+          right: "30%",
+          lineHeight: 1.2,
+          display: "flex",
+          flexDirection: "column",
+          alignItems: "center",
+          transform: `translateX(${secondTextX + exitRightX}px)`,
+          opacity: secondTextOpacity * exitOpacity,
+        }}
+      >
+        <h1
           style={{
-            maxWidth: "70%",
-            fontFamily: "Playfair Display",
-            fontSize: 40,
-            fontWeight: "600",
-            lineHeight: 1.2,
-            color: "#7A5C3E",
-            lineHeight: 1.2,
-            letterSpacing: "2px",
-            whiteSpace: "normal",
-            wordBreak: "break-word",
-            overflowWrap: "break-word",
-            ...SmoothRevealFromTop20012026({
-              frame,
-              startFrame: DETAILS_START,
-              delay: 125,
-            })
-
+            fontFamily: "Dancing Script",
+            color: "#C65A7A",
+            fontSize: 80,
+            maxWidth: "90%",
+            textAlign: "center",
+            wordWrap: "break-word",
           }}
         >
-          {familyMember}
-        </div>
+          {secondName}
+        </h1>
       </div>
 
     </AbsoluteFill>

package/src/Invitations/Frames/F20012026_04.jsx

@@ -0,0 +1,282 @@
+import React from "react";
+import {
+  AbsoluteFill,
+  useCurrentFrame,
+  useVideoConfig,
+  interpolate,
+  Easing,
+  Img,
+  staticFile,
+} from "remotion";
+
+import { GroomBrideLoveScene20012026 } from "../Elements/GroomBrideLoveScene20012026.jsx";
+import { SmoothRevealFromTop20012026 } from "../Elements/SmoothRevealFromTop20012026.jsx"
+
+export const F20012026_04 = ({
+  eventDateTime,
+  venueName,
+  venueAddress,
+  familyMember,
+  fadeInDuration = 30,
+}) => {
+  const frame = useCurrentFrame();
+  const { fps } = useVideoConfig();
+
+  /* ---------------- DATE UTILS ---------------- */
+  const getDateParts = (iso) => {
+    if (!iso) return { day: "", month: "", year: "", time: "" };
+
+    const d = new Date(iso);
+    if (isNaN(d.getTime())) {
+      return { day: "", month: "", year: "", time: "" };
+    }
+
+    return {
+      day: d.getDate(),
+      month: d.toLocaleString("en-US", { month: "long" }),
+      year: d.getFullYear(),
+      time: d.toLocaleTimeString("en-US", {
+        hour: "2-digit",
+        minute: "2-digit",
+        hour12: true,
+      }),
+    };
+  };
+
+  const { day, month, year, time } = getDateParts(eventDateTime);
+
+  const DETAILS_START = fps * 4;
+
+  /* ================= IMAGE ANIMATION ================= */
+  const showImageAfter = fadeInDuration * 2;
+
+  const imageOpacity = interpolate(
+    frame,
+    [showImageAfter, showImageAfter + fps * 1.2],
+    [0, 1],
+    {
+      extrapolateRight: "clamp",
+      easing: Easing.out(Easing.ease),
+    }
+  );
+
+  const imageScale = interpolate(
+    frame,
+    [showImageAfter, showImageAfter + fps * 1.2],
+    [0.95, 1],
+    {
+      extrapolateRight: "clamp",
+      easing: Easing.out(Easing.cubic),
+    }
+  );
+  const imageTranslateY = interpolate(
+    frame,
+    [showImageAfter, showImageAfter + fps * 1.2],
+    [-200, 0], // 🔥 starts above and comes down
+    {
+      extrapolateRight: "clamp",
+      easing: Easing.out(Easing.ease),
+    }
+  );
+
+  return ( 
+    <AbsoluteFill
+      style={{
+        transformOrigin: "center center",
+        overflow: "hidden",
+      }}
+    >
+      <Img
+        src={staticFile("video-images/20012026-wedding-gate.webp")}
+        style={{
+          position: "absolute",
+          top: 0,
+          left: "50%",
+          width: "100%",
+          height: "100%",
+          opacity: imageOpacity,
+          transform: `
+      translateX(-50%)
+      translateY(${imageTranslateY}px)
+      scale(${imageScale})
+    `,
+        }}
+      />
+
+      <GroomBrideLoveScene20012026 startAfter={3.5} />
+
+      <div
+        style={{
+          position: "absolute",
+          top: "24%",
+          width: "100%",
+          display: "flex",
+          flexDirection: "column",
+          alignItems: "center",
+          textAlign: "center",
+          zIndex: 5,
+          gap: "30px"
+        }}
+      >
+        <div
+          style={{
+            maxWidth: "50%",
+            fontFamily: "Playfair Display",
+            fontSize: 55,
+            fontWeight: "600",
+            color: "#3B2F2F",
+            lineHeight: 1.2,
+            letterSpacing: "2px",
+            whiteSpace: "normal",
+            wordBreak: "break-word",
+            overflowWrap: "break-word",
+            ...SmoothRevealFromTop20012026({
+              frame,
+              startFrame: DETAILS_START,
+              delay: 0,
+            })
+          }}
+        >
+          {venueName}
+        </div>
+
+        <div
+          style={{
+            maxWidth: "80%",
+            fontFamily: "Playfair Display",
+            fontSize: 50,
+            fontWeight: "600",
+            color: "#5A4A42",
+            lineHeight: 1.2,
+            letterSpacing: "2px",
+            whiteSpace: "normal",
+            wordBreak: "break-word",
+            overflowWrap: "break-word",
+            ...SmoothRevealFromTop20012026({
+              frame,
+              startFrame: DETAILS_START,
+              delay: 25,
+            })
+
+          }}
+        >
+          {venueAddress}
+        </div>
+        <div
+          style={{
+            fontFamily: "Great Vibes",
+            fontSize: 55,
+            fontWeight: "600",
+            color: "#6B1E2E",
+            lineHeight: 1.2,
+            letterSpacing: "3px",
+            whiteSpace: "normal",
+            wordBreak: "break-word",
+            overflowWrap: "break-word",
+            ...SmoothRevealFromTop20012026({
+              frame,
+              startFrame: DETAILS_START,
+              delay: 50,
+            })
+
+          }}
+        >
+          On the joyous occasion
+        </div>
+        <div
+          style={{
+            maxWidth: "80%",
+            display: "flex",
+            gap: 18,
+            fontFamily: "Playfair Display",
+            fontSize: 50,
+            fontWeight: "600",
+            color: "#6B1E2E",
+            lineHeight: 1.2,
+            letterSpacing: "2px",
+            whiteSpace: "normal",
+            wordBreak: "break-word",
+            overflowWrap: "break-word",
+            ...SmoothRevealFromTop20012026({
+              frame,
+              startFrame: DETAILS_START,
+              delay: 70,
+            })
+
+          }}
+        >
+          <span>{day}</span>
+          <span>{month}</span>
+          <span>{year}</span>
+        </div>
+        <div
+          style={{
+            fontFamily: "Great Vibes",
+            fontSize: 55,
+            fontWeight: "600",
+            color: "#4B3A28",
+            lineHeight: 1.2,
+            letterSpacing: "2px",
+            whiteSpace: "normal",
+            wordBreak: "break-word",
+            overflowWrap: "break-word",
+            ...SmoothRevealFromTop20012026({
+              frame,
+              startFrame: DETAILS_START,
+              delay: 95,
+            })
+
+          }}
+        >
+          Wedding Time
+        </div>
+        <div
+          style={{
+            fontSize: 50,
+            fontWeight: "600",
+            color: "#4B3A28",
+            fontFamily: "Playfair Display",
+            lineHeight: 1.2,
+            letterSpacing: "2px",
+            whiteSpace: "normal",
+            wordBreak: "break-word",
+            overflowWrap: "break-word",
+            ...SmoothRevealFromTop20012026({
+              frame,
+              startFrame: DETAILS_START,
+              delay: 115,
+            })
+
+          }}
+        >
+          {time}
+        </div>
+
+        <div
+          style={{
+            maxWidth: "70%",
+            fontFamily: "Playfair Display",
+            fontSize: 40,
+            fontWeight: "600",
+            lineHeight: 1.2,
+            color: "#7A5C3E",
+            lineHeight: 1.2,
+            letterSpacing: "2px",
+            whiteSpace: "normal",
+            wordBreak: "break-word",
+            overflowWrap: "break-word",
+            ...SmoothRevealFromTop20012026({
+              frame,
+              startFrame: DETAILS_START,
+              delay: 125,
+            })
+
+          }}
+        >
+          {familyMember}
+        </div>
+      </div>
+
+    </AbsoluteFill>
+  );
+};

package/src/Invitations/Themes/T03022026_01.jsx

@@ -3,7 +3,6 @@ import {
     Sequence,
     useVideoConfig,
     Audio,
-    staticFile,
     AbsoluteFill,
     Img,
     useCurrentFrame,
@@ -114,18 +113,19 @@ export const T03022026_01 = ({
         venue?.address || formData?.venue_address || "";
 
     /* ---------------- PRELOAD IMAGES ---------------- */
+    const S3_BASE = "https://evatril-images.s3.ap-south-1.amazonaws.com/video-themes/hindu-wedding-1/v1/";
 
     const imagesToPreload = useMemo(
         () => [
-            staticFile("video-images/03022026-bg.webp"),
-            staticFile("video-images/03022026-bg-2.webp"),
-            staticFile("video-images/03022026-bg-3.webp"),
-            staticFile("video-images/03022026-bg-4.webp"),
-            staticFile("video-images/03022026-bg-5.webp"),
-            staticFile("video-images/03022026-krishnaradha.webp"),
-            staticFile("video-images/03022026-krishnaradha-2.webp"),
-            staticFile("video-images/03022026-krishnaradha-4.webp"),
-            staticFile("video-images/03022026-krishnaradha-5.webp"),
+            `${S3_BASE}03022026-bg.webp`,
+            `${S3_BASE}03022026-bg-2.webp`,
+            `${S3_BASE}03022026-bg-3.webp`,
+            `${S3_BASE}03022026-bg-4.webp`,
+            `${S3_BASE}03022026-bg-5.webp`,
+            `${S3_BASE}03022026-krishnaradha.webp`,
+            `${S3_BASE}03022026-krishnaradha-2.webp`,
+            `${S3_BASE}03022026-krishnaradha-4.webp`,
+            `${S3_BASE}03022026-krishnaradha-5.webp`,
         ],
         []
     );
@@ -150,20 +150,20 @@ export const T03022026_01 = ({
 
     const backgrounds = useMemo(
         () => [
-            staticFile("video-images/03022026-bg.webp"),
-            staticFile("video-images/03022026-bg-2.webp"),
-            staticFile("video-images/03022026-bg-3.webp"),
-            staticFile("video-images/03022026-bg-4.webp"),
-            staticFile("video-images/03022026-bg-5.webp"),
+            `${S3_BASE}03022026-bg.webp`,
+            `${S3_BASE}03022026-bg-2.webp`,
+            `${S3_BASE}03022026-bg-3.webp`,
+            `${S3_BASE}03022026-bg-4.webp`,
+            `${S3_BASE}03022026-bg-5.webp`,
         ],
-        []
+        [S3_BASE]
     );
 
     return (
         <AbsoluteFill>
             {/* 🎵 MUSIC */}
             <Audio
-                src={staticFile("video-images/wedding2.mp3")}
+                src={`${S3_BASE}wedding2.mp3`}
                 volume={musicVolume}
             />
 

package/src/Invitations/Themes/T20012026_01.jsx

@@ -14,6 +14,7 @@ import {
 import { F20012026_01 } from "../Frames/F20012026_01.jsx";
 import { F20012026_02 } from "../Frames/F20012026_02.jsx";
 import { F20012026_03 } from "../Frames/F20012026_03.jsx";
+import { F20012026_04 } from "../Frames/F20012026_04.jsx";
 import { InkSmokeTransition20012026 } from "../Elements/InkSmokeTransition20012026.jsx";
 import { usePreloadImages } from "../hooks/usePreloadImages.js";
 
@@ -149,6 +150,7 @@ export const T20012026_01 = ({
   const backgrounds = useMemo(
     () => [
       staticFile("video-images/20012026-bg.webp"),
+      staticFile("video-images/20012026-bg-2.webp"),
     ],
     []
   );
@@ -178,7 +180,7 @@ export const T20012026_01 = ({
         from={scene1Duration}
         durationInFrames={transitionDuration}
       >
-        <Page bg={backgrounds[0]}>
+        <Page bg={backgrounds[1]}>
           <InkSmokeTransition20012026 />
         </Page>
       </Sequence>
@@ -188,7 +190,7 @@ export const T20012026_01 = ({
         from={scene1Duration + transitionDuration}
         durationInFrames={scene2Duration}
       >
-        <Page bg={backgrounds[0]}>
+        <Page bg={backgrounds[1]}>
           <F20012026_02
             firstName={firstName}
             secondName={secondName}
@@ -206,7 +208,7 @@ export const T20012026_01 = ({
         from={scene1Duration + transitionDuration + scene2Duration}
         durationInFrames={transitionDuration}
       >
-        <Page bg={backgrounds[0]}>
+        <Page bg={backgrounds[1]}>
           <InkSmokeTransition20012026 />
         </Page>
       </Sequence>
@@ -218,6 +220,31 @@ export const T20012026_01 = ({
       >
         <Page bg={backgrounds[0]}>
           <F20012026_03
+            firstName={firstName}
+            firstPhoto={firstPhoto}
+            secondName={secondName}
+            secondPhoto={secondPhoto}
+          />
+        </Page>
+      </Sequence>
+
+      {/* ☁️ TRANSITION 3 */}
+      <Sequence
+        from={scene1Duration + transitionDuration + scene2Duration}
+        durationInFrames={transitionDuration}
+      >
+        <Page bg={backgrounds[1]}>
+          <InkSmokeTransition20012026 />
+        </Page>
+      </Sequence>
+
+      {/* ================= SCENE 4================= */}
+      <Sequence
+        from={scene1Duration + transitionDuration + scene2Duration + transitionDuration}
+        durationInFrames={scene3Duration}
+      >
+        <Page bg={backgrounds[0]}>
+          <F20012026_04
             eventDateTime={eventDateTime}
             venueName={venueName}
             venueAddress={venueAddress}
@@ -230,4 +257,4 @@ export const T20012026_01 = ({
   );
 };
 
-T20012026_01.duration = 24 * 30;
+T20012026_01.duration = 24 * 40;

package/src/fonts/registerFonts.js

@@ -1,6 +1,3 @@
-
-import { staticFile } from "remotion";
-
 let registered = false;
 
 export const registerFonts = () => {
@@ -10,21 +7,19 @@ export const registerFonts = () => {
    const fonts = [
     {
       family: "Great Vibes",
-      url: staticFile("Fonts/GreatVibes-Regular.ttf"),
+      url: "https://evatril-images.s3.ap-south-1.amazonaws.com/video-themes/hindu-wedding-1/v1/Fonts/GreatVibes-Regular.ttf",
       format: "truetype",
       weight: "400",
     },
     {
       family: "Dancing Script",
-      url: staticFile("Fonts/DancingScript-VariableFont_wght.ttf"
-      ),
+      url: "https://evatril-images.s3.ap-south-1.amazonaws.com/video-themes/hindu-wedding-1/v1/Fonts/DancingScript-VariableFont_wght.ttf",
       format: "truetype",
       weight: "100 700",
     },
     {
       family: "Playfair Display",
-      url: staticFile("Fonts/PlayfairDisplay-Italic-VariableFont_wght.ttf"
-      ),
+      url:"https://evatril-images.s3.ap-south-1.amazonaws.com/video-themes/hindu-wedding-1/v1/Fonts/PlayfairDisplay-Italic-VariableFont_wght.ttf",
       format: "truetype",
       weight: "100 900",
     },