@evatril/video-templates 2.0.9 → 2.0.11

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.png")}
+        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.png")}
+        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,10 +150,10 @@ 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: "32%",
+            top: "40%",
             left: "50%",
             width: "80%",
             objectFit: "cover",
@@ -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-4.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,11 +158,12 @@ export const F03022026_05 = ({
         }}
       >
         <Img
-          src={staticFile("video-images/03022026-krishnaradha-5.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: "30%",
+            top: "40%",
             left: "50%",
+            width:"80%",
             objectFit: "cover",
             opacity: imageOpacity * imageExitOpacity,
             transform: `translateX(-50%) translateX(${moveX}px) translateY(${imageExitY}px)`
@@ -178,8 +178,8 @@ export const F03022026_05 = ({
           display: "flex",
           justifyContent: "center",
           alignItems: "center",
-          opacity: msgOpacity * msgExitOpacity,
-          transform: `translateY(-18%) translateY(${msgY + msgExitY}px)`,
+          opacity: msgOpacity * msgExitOpacity, 
+          transform: `translateY(-20%) translateY(${msgY + msgExitY}px)`,
         }}
       >
         <div

package/src/Invitations/Frames/F05022026_01.jsx

@@ -99,7 +99,7 @@ export const F05022026_01 = () => {
             <AbsoluteFill
                 style={{
                     display: "flex",
-                    paddingTop: "10%",
+                    paddingTop: "15%",
                     alignItems: "center",
                     opacity: fade(ganeshStart) * ganeshExitOpacity,
                     transform: `translateY(${ganeshExitY}px)`,
@@ -108,7 +108,7 @@ export const F05022026_01 = () => {
                 <Img
                     src={staticFile("video-images/05022026-Ganesh.webp")}
                     style={{
-                        width: "60%",
+                        width: "50%",
                         objectFit: "contain",
                         transform: `scale(${ganeshScale * ganeshExitScale})`,
                     }}

package/src/Invitations/Frames/F20012026_01.jsx

@@ -20,7 +20,7 @@ export const F20012026_01 = ({
   const { fps, width, height } = useVideoConfig();
 
   /* -------------------- MESSAGE REVEAL -------------------- */
-  const messageStart = fps * 4;
+  const messageStart = fps * 2;
   const messageOpacity = interpolate(
     frame,
     [messageStart, messageStart + 15],
@@ -54,6 +54,49 @@ export const F20012026_01 = ({
   const brideAnim = reveal(brideStart);
   const wedsAnim = reveal(wedsStart);
   const groomAnim = reveal(groomStart);
+
+  const sceneDuration = fps * 8;
+  const exitDuration = fps * 1.3; // last 1 sec
+  const exitStart = sceneDuration - exitDuration;
+
+  const parts = 5;
+  const partDuration = exitDuration / parts;
+
+
+  const getExitAnim = (index) => {
+    const start = exitStart + partDuration * index;
+    const end = start + partDuration;
+
+    return {
+      opacity: interpolate(
+        frame,
+        [start, end],
+        [1, 0],
+        {
+          extrapolateLeft: "clamp",
+          extrapolateRight: "clamp",
+          easing: Easing.out(Easing.cubic),
+        }
+      ),
+
+      translateY: interpolate(
+        frame,
+        [start, end],
+        [0, -80],
+        {
+          extrapolateLeft: "clamp",
+          extrapolateRight: "clamp",
+        }
+      ),
+    };
+  };
+
+  const messageExit = getExitAnim(0);
+  const brideExit = getExitAnim(1);
+  const wedsExit = getExitAnim(2);
+  const groomExit = getExitAnim(3);
+  const coupleExit = getExitAnim(4);
+
   return (
     <AbsoluteFill style={{ overflow: "hidden" }}>
 
@@ -91,6 +134,8 @@ export const F20012026_01 = ({
             lineHeight: 1.2,
             opacity: messageOpacity,
             transform: `translateY(${messageTranslateY}px)`,
+            opacity: messageOpacity * messageExit.opacity,
+            transform: `translateY(${messageTranslateY + messageExit.translateY}px)`,
           }}
         >
           {welcomeMessage}
@@ -120,8 +165,10 @@ export const F20012026_01 = ({
               whiteSpace: "normal",
               wordBreak: "break-word",
               overflowWrap: "break-word",
-              opacity: brideAnim.opacity,
-              transform: `translateY(${brideAnim.translateY}px)`,
+              // opacity: brideAnim.opacity,
+              // transform: `translateY(${brideAnim.translateY}px)`,
+              opacity: brideAnim.opacity * brideExit.opacity,
+              transform: `translateY(${brideAnim.translateY + brideExit.translateY}px)`,
             }}
           >
             {firstName}
@@ -133,8 +180,10 @@ export const F20012026_01 = ({
               fontFamily: "Great Vibes",
               color: "#D4AF37",
               margin: "10px 0",
-              opacity: wedsAnim.opacity,
-              transform: `translateY(${wedsAnim.translateY}px)`,
+              // opacity: wedsAnim.opacity,
+              // transform: `translateY(${wedsAnim.translateY}px)`,
+              opacity: wedsAnim.opacity * wedsExit.opacity,
+              transform: `translateY(${wedsAnim.translateY + wedsExit.translateY}px)`,
             }}
           >
             weds
@@ -154,9 +203,10 @@ export const F20012026_01 = ({
               whiteSpace: "normal",
               wordBreak: "break-word",
               overflowWrap: "break-word",
-              opacity: groomAnim.opacity,
-              transform: `translateY(${groomAnim.translateY}px)`,
-
+              // opacity: groomAnim.opacity,
+              // transform: `translateY(${groomAnim.translateY}px)`,
+              opacity: groomAnim.opacity * groomExit.opacity,
+              transform: `translateY(${groomAnim.translateY + groomExit.translateY}px)`,
             }}
           >
             {secondName}

package/src/Invitations/Frames/F20012026_02.jsx

@@ -67,9 +67,10 @@ export const F20012026_02 = ({
     >
       {/* Curtain */}
       <Img
-        src={staticFile("video-images/20012026-curtain-floral.png")}
+        src={staticFile("video-images/20012026-curtain-floral3.webp")}
         style={{
           position: "absolute",
+          top:"-12%",
           left: "50%",
           width: "100%",
           opacity: imageOpacity,
@@ -179,7 +180,7 @@ export const F20012026_02 = ({
           <div
             style={{
               fontSize: 40,
-              fontWeight:"400",
+              fontWeight:"400", 
               fontFamily: "Great Vibes",
               color: "#2F6B4F",
             }}