@evatril/video-templates 2.0.11 → 2.0.14

package/src/Invitations/Frames/F28012026_02.jsx

@@ -6,7 +6,6 @@ import {
     useVideoConfig,
     interpolate,
     Easing,
-    staticFile,
 } from "remotion";
 import { FlowerReveal_TL_BR_28012026 } from "../Elements/FlowerReveal_TL_BR_28012026";
 import { HeartDraw28012026 } from "../Elements/HeartDraw28012026";
@@ -48,46 +47,46 @@ export const F28012026_02 = ({
 
     const { fps } = useVideoConfig();
 
-    const initialsStart = fps * 3.5;
-    const heartStart = initialsStart + fps * 1.2;
-     const openDuration = fps * 1; 
-     
+    const initialsStart = fps * 2;
+    const heartStart = initialsStart + fps * 1;
+    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",
-    }
-  );
+        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 (
@@ -134,19 +133,19 @@ export const F28012026_02 = ({
                     >
                         <h1
                             style={{
-                                fontFamily: "Dancing Script",
-                                color: "#B76E79",
-                                letterSpacing: 3,
-                                lineHeight: 1.3,
-                                fontWeight: 600,
                                 maxWidth: "80%",
                             }}
                         >
                             <WordReveal28012026
                                 text={invitationMessage}
-                                start={40}
+                                start={20}
                                 fontSize={60}
                                 color="#B76E79"
+                                fontFamily="Dancing Script"
+                                letterSpacing={3}
+                                lineHeight={1.3}
+                                fontWeight={600}
+                                exitDurationSec={2}
                             />
                         </h1>
 
@@ -204,7 +203,6 @@ export const F28012026_02 = ({
                                     color: "#D4A24C",
                                     fontWeight: 600,
                                     zIndex: 2,
-
                                     opacity: interpolate(
                                         frame,
                                         [initialsStart + fps * 0.3, initialsStart + fps * 0.6],
@@ -220,20 +218,20 @@ export const F28012026_02 = ({
 
                         <div
                             style={{
-                                fontSize: 65,
-                                fontWeight: "600",
-                                color: "#B76E79",
-                                lineHeight: 1.2,
                                 marginTop: "15px",
-                                letterSpacing: "4px",
                                 whiteSpace: "nowrap",
                             }}
                         >
                             <WordReveal28012026
                                 text={formatDate(occasionDate)}
-                                start={140}
+                                start={100}
                                 fontSize={65}
                                 color="#B76E79"
+                                fontFamily="Dancing Script"
+                                letterSpacing={4}
+                                lineHeight={1.2}
+                                fontWeight={600}
+                                exitDurationSec={2}
                             />
 
                         </div>

package/src/Invitations/Frames/F28012026_03.jsx

@@ -6,7 +6,6 @@ import {
   interpolate,
   Easing,
   Img,
-  staticFile,
 } from "remotion";
 import { HeartFlight28012026 } from "../Elements/HeartFlight28012026";
 
@@ -34,13 +33,13 @@ export const F28012026_03 = ({
   const topBorderTranslate = interpolate(
     frame,
     [topBorderStart, topBorderStart + 20],
-    [-60, 0], // slides DOWN from top
+    [-30, 0], // slides DOWN from top
     {
       extrapolateRight: "clamp",
     }
   );
 
-  const borderStart = fps * 1; 
+  const borderStart = fps * 1;
   const photoStart = borderStart + 20; // photo after border
 
   const borderOpacity = interpolate(frame, [borderStart, borderStart + 25], [0, 1], {
@@ -60,49 +59,49 @@ export const F28012026_03 = ({
     extrapolateRight: "clamp",
   });
 
-  const nameStart = fps * 2.5; // adjust timing if needed
+  const nameStart = fps * 1.5; // adjust timing if needed
 
   const nameOpacity = interpolate(frame, [nameStart, nameStart + 20], [0, 1], {
     extrapolateRight: "clamp",
     easing: Easing.out(Easing.ease),
   });
 
-const nameTranslateX = interpolate(
-  frame,
-  [
-    nameStart,
-    nameStart + fps * 2,
-    nameStart + fps * 2.3,
-  ],
-  [600, -10, 0],
-  {
-    extrapolateLeft: "clamp",
-    extrapolateRight: "clamp",
-    easing: Easing.inOut(Easing.cubic),
-  }
-);
+  const nameTranslateX = interpolate(
+    frame,
+    [
+      nameStart,
+      nameStart + fps * 2,
+      nameStart + fps * 2.3,
+    ],
+    [600, -10, 0],
+    {
+      extrapolateLeft: "clamp",
+      extrapolateRight: "clamp",
+      easing: Easing.inOut(Easing.cubic),
+    }
+  );
 
-  const emojiStart = nameStart + 20;
+  const emojiStart = nameStart + fps * 1;
 
   const emojiOpacity = interpolate(frame, [emojiStart, emojiStart + 20], [0, 1], {
     extrapolateRight: "clamp",
     easing: Easing.out(Easing.ease),
   });
 
- const emojiTranslateX = interpolate(
-  frame,
-  [
-    emojiStart,
-    emojiStart + fps * 2,
-    emojiStart + fps * 2.3,
-  ],
-  [600, -10, 0],
-  {
-    extrapolateLeft: "clamp",
-    extrapolateRight: "clamp",
-    easing: Easing.inOut(Easing.cubic),
-  }
-);
+  const emojiTranslateX = interpolate(
+    frame,
+    [
+      emojiStart,
+      emojiStart + fps * 2,
+      emojiStart + fps * 2.3,
+    ],
+    [600, -10, 0],
+    {
+      extrapolateLeft: "clamp",
+      extrapolateRight: "clamp",
+      easing: Easing.inOut(Easing.cubic),
+    }
+  );
 
   const sideNoteStart = nameStart + fps * 1.5; // appears ~0.8s after name
 
@@ -112,19 +111,19 @@ const nameTranslateX = interpolate(
   });
 
   const sideTranslateX = interpolate(
-  frame,
-  [
-    sideNoteStart,
-    sideNoteStart + fps * 2,
-    sideNoteStart + fps * 2.3,
-  ],
-  [600, -10, 0],
-  {
-    extrapolateLeft: "clamp",
-    extrapolateRight: "clamp",
-    easing: Easing.inOut(Easing.cubic),
-  }
-);
+    frame,
+    [
+      sideNoteStart,
+      sideNoteStart + fps * 2,
+      sideNoteStart + fps * 2.3,
+    ],
+    [600, -10, 0],
+    {
+      extrapolateLeft: "clamp",
+      extrapolateRight: "clamp",
+      easing: Easing.inOut(Easing.cubic),
+    }
+  );
 
   return (
     <AbsoluteFill
@@ -132,24 +131,24 @@ const nameTranslateX = interpolate(
         overflow: "hidden",
       }}
     >
-      <HeartFlight28012026  />
+      <HeartFlight28012026 />
 
       {/* Top Border */}
       <div
         style={{
           position: "absolute",
           top: 0,
-          left: 10,
+          left: 0,
           width: "100%",
           display: "flex",
           justifyContent: "center",
         }}
       >
         <Img
-          src={staticFile("video-images/28012026-TopBorder.webp")}
+          src="https://evatril-images.s3.ap-south-1.amazonaws.com/video-themes/hindu-wedding-1/v1/28012026-TopBorder.webp"
           style={{
-            width: "90%",
-            transform: `translateY(${topBorderTranslate}px) scale(1.2)`,
+            width: "100%",
+            transform: `translateY(${topBorderTranslate}px) `,
             opacity: topBorderOpacity,
           }}
         />
@@ -159,7 +158,7 @@ const nameTranslateX = interpolate(
         <div
           style={{
             position: "absolute",
-            top: "12%",
+            top: "20%",
             left: "50%",
             transform: "translateX(-50%)",
             width: 860,
@@ -170,7 +169,7 @@ const nameTranslateX = interpolate(
         >
           {/* BORDER */}
           <Img
-            src={staticFile("video-images/28012026-border.webp")}
+            src="https://evatril-images.s3.ap-south-1.amazonaws.com/video-themes/hindu-wedding-1/v1/28012026-border.webp"
             style={{
               position: "absolute",
               inset: 0,
@@ -178,24 +177,25 @@ const nameTranslateX = interpolate(
               height: "100%",
               opacity: borderOpacity,
               transform: `scale(${borderScale})`,
+              transformOrigin: "center",
               zIndex: 1
             }}
           />
 
-          {/* BRIDE PHOTO */}
           <Img
             src={firstPhoto}
             style={{
               position: "absolute",
               inset: 0,
               margin: "auto",
-              width: "72%",
-              height: "70%",
-              bottom: "15%",
               objectFit: "cover",
               borderRadius: "50%",
               opacity: photoOpacity,
-              transform: `scale(${photoScale})`,
+              left: "52%",
+              top: "70%",
+              transform: `translate(-48%, -50%) scale(${photoScale})`,
+              width: "79%",
+              height: "79%",
             }}
           />
         </div>
@@ -205,10 +205,9 @@ const nameTranslateX = interpolate(
       <div
         style={{
           position: "absolute",
-          top: "60%",
+          top: "65%",
           width: "100%",
           textAlign: "center",
-          opacity: nameOpacity,
 
         }}
       >
@@ -241,7 +240,7 @@ const nameTranslateX = interpolate(
             transform: `translateX(${emojiTranslateX}px)`,
           }}
         >
-          ✨✨ 
+          ✨✨
         </div>
 
 

package/src/Invitations/Frames/F28012026_04.jsx

@@ -6,7 +6,6 @@ import {
   interpolate,
   Easing,
   Img,
-  staticFile,
 } from "remotion";
 import { HeartFlight28012026 } from "../Elements/HeartFlight28012026";
 
@@ -34,7 +33,7 @@ export const F28012026_04 = ({
   const topBorderTranslate = interpolate(
     frame,
     [topBorderStart, topBorderStart + 20],
-    [-60, 0], // slides DOWN from top
+    [-30, 0], // slides DOWN from top
     {
       extrapolateRight: "clamp",
     }
@@ -60,7 +59,7 @@ export const F28012026_04 = ({
     extrapolateRight: "clamp",
   });
 
-  const nameStart = fps * 2.5; // adjust timing if needed
+  const nameStart = fps * 1.5; // adjust timing if needed
 
   const nameOpacity = interpolate(frame, [nameStart, nameStart + 20], [0, 1], {
     extrapolateRight: "clamp",
@@ -68,44 +67,43 @@ export const F28012026_04 = ({
   });
 
 
-const nameTranslateX = interpolate(
-  frame,
-  [
-    nameStart,
-    nameStart + fps * 2,
-    nameStart + fps * 2.3,
-  ],
-  [-600, 10, 0],
-  {
-    extrapolateLeft: "clamp",
+  const nameTranslateX = interpolate(
+    frame,
+    [
+      nameStart,
+      nameStart + fps * 2,
+      nameStart + fps * 2.3,
+    ],
+    [-600, 10, 0],
+    {
+      extrapolateLeft: "clamp",
+      extrapolateRight: "clamp",
+      easing: Easing.inOut(Easing.cubic),
+    }
+  );
+
+  const emojiStart = nameStart + fps * 1;
+
+  const emojiOpacity = interpolate(frame, [emojiStart, emojiStart + 20], [0, 1], {
     extrapolateRight: "clamp",
-    easing: Easing.inOut(Easing.cubic),
-  }
-);
+    easing: Easing.out(Easing.ease),
+  });
 
-   const emojiStart = nameStart + 20;
-  
-    const emojiOpacity = interpolate(frame, [emojiStart, emojiStart + 20], [0, 1], {
+  const emojiTranslateX = interpolate(
+    frame,
+    [
+      emojiStart,
+      emojiStart + fps * 2,
+      emojiStart + fps * 2.3,
+    ],
+    [-600, 10, 0],
+    {
+      extrapolateLeft: "clamp",
       extrapolateRight: "clamp",
-      easing: Easing.out(Easing.ease),
-    });
-  
-   const emojiTranslateX = interpolate(
-  frame,
-  [
-    emojiStart,
-    emojiStart + fps * 2,
-    emojiStart + fps * 2.3,
-  ],
-  [-600, 10, 0],
-  {
-    extrapolateLeft: "clamp",
-    extrapolateRight: "clamp",
-    easing: Easing.inOut(Easing.cubic),
-  }
-);
+      easing: Easing.inOut(Easing.cubic),
+    }
+  );
 
-  
   const sideNoteStart = nameStart + fps * 1.5; // appears ~0.8s after name
 
   const sideOpacity = interpolate(frame, [sideNoteStart, sideNoteStart + 20], [0, 1], {
@@ -113,20 +111,20 @@ const nameTranslateX = interpolate(
     easing: Easing.out(Easing.ease),
   });
 
-   const sideTranslateX = interpolate(
-   frame,
-   [
-     sideNoteStart,
-     sideNoteStart + fps * 2,
-     sideNoteStart + fps * 2.3,
-   ],
-   [-600, 10, 0],
-   {
-     extrapolateLeft: "clamp",
-     extrapolateRight: "clamp",
-     easing: Easing.inOut(Easing.cubic),
-   }
- );
+  const sideTranslateX = interpolate(
+    frame,
+    [
+      sideNoteStart,
+      sideNoteStart + fps * 2,
+      sideNoteStart + fps * 2.3,
+    ],
+    [-600, 10, 0],
+    {
+      extrapolateLeft: "clamp",
+      extrapolateRight: "clamp",
+      easing: Easing.inOut(Easing.cubic),
+    }
+  );
 
 
   return (
@@ -142,17 +140,17 @@ const nameTranslateX = interpolate(
         style={{
           position: "absolute",
           top: 0,
-          left: 10,
+          left: 0,
           width: "100%",
           display: "flex",
           justifyContent: "center",
         }}
       >
         <Img
-          src={staticFile("video-images/28012026-TopBorder.webp")}
+          src="https://evatril-images.s3.ap-south-1.amazonaws.com/video-themes/hindu-wedding-1/v1/28012026-TopBorder.webp"
           style={{
-            width: "90%",
-            transform: `translateY(${topBorderTranslate}px) scale(1.2)`,
+            width: "100%",
+            transform: `translateY(${topBorderTranslate}px) `,
             opacity: topBorderOpacity,
           }}
         />
@@ -162,7 +160,7 @@ const nameTranslateX = interpolate(
         <div
           style={{
             position: "absolute",
-            top: "12%",
+            top: "20%",
             left: "50%",
             transform: "translateX(-50%)",
             width: 860,
@@ -173,7 +171,7 @@ const nameTranslateX = interpolate(
         >
           {/* BORDER */}
           <Img
-            src={staticFile("video-images/28012026-border.webp")}
+            src="https://evatril-images.s3.ap-south-1.amazonaws.com/video-themes/hindu-wedding-1/v1/28012026-border.webp"
             style={{
               position: "absolute",
               inset: 0,
@@ -181,24 +179,25 @@ const nameTranslateX = interpolate(
               height: "100%",
               opacity: borderOpacity,
               transform: `scale(${borderScale})`,
+              transformOrigin: "center",
               zIndex: 1
             }}
           />
 
-          {/* BRIDE PHOTO */}
           <Img
             src={secondPhoto}
             style={{
               position: "absolute",
               inset: 0,
               margin: "auto",
-              width: "72%",
-              height: "70%",
-              bottom: "15%",
               objectFit: "cover",
               borderRadius: "50%",
               opacity: photoOpacity,
-              transform: `scale(${photoScale})`,
+              left: "52%",
+              top: "70%",
+              transform: `translate(-48%, -50%) scale(${photoScale})`,
+              width: "79%",
+              height: "79%",
             }}
           />
         </div>
@@ -208,10 +207,9 @@ const nameTranslateX = interpolate(
       <div
         style={{
           position: "absolute",
-          top: "60%",
+          top: "65%",
           width: "100%",
           textAlign: "center",
-          opacity: nameOpacity,
 
         }}
       >
@@ -225,7 +223,7 @@ const nameTranslateX = interpolate(
             maxWidth: "80%",
             lineHeight: "1.3",
             fontWeight: "600",
-             opacity: nameOpacity,
+            opacity: nameOpacity,
             transform: `translateX(${nameTranslateX}px)`,
           }}
         >
@@ -233,7 +231,7 @@ const nameTranslateX = interpolate(
 
         </h1>
 
-         <div
+        <div
           style={{
             display: "flex",
             justifyContent: "center",
@@ -245,7 +243,7 @@ const nameTranslateX = interpolate(
             transform: `translateX(${emojiTranslateX}px)`,
           }}
         >
-           ✨  ✨ 
+          ✨  ✨
         </div>
 
         <div
@@ -266,9 +264,6 @@ const nameTranslateX = interpolate(
         </div>
       </div>
 
-
-
-
     </AbsoluteFill>
   );
 };