@evatril/video-templates 2.0.11 → 2.0.14

package/src/Invitations/Elements/{HoldSlide.jsx → HoldSlide03022026.jsx}

@@ -1,7 +1,7 @@
 import React from "react";
 import { AbsoluteFill, Img, useCurrentFrame, interpolate } from "remotion";
 
-export const HoldSlide = ({
+export const HoldSlide03022026 = ({
   children,
   nextBg,
   contentDuration,

package/src/Invitations/Elements/LetterReveal28012026.jsx

@@ -1,41 +1,127 @@
+// import React from "react";
+// import { useCurrentFrame, interpolate } from "remotion";
+
+// export const LetterReveal28012026 = ({
+//   text = "",
+//   start = 0,
+//   stagger = 4, // frames between letters
+// }) => {
+//   const frame = useCurrentFrame();
+
+//   return (
+//     <>
+//       {text.split("").map((char, i) => {
+//         const appear = interpolate(
+//           frame,
+//           [start + i * stagger, start + i * stagger + 10],
+//           [0, 1],
+//           {
+//             extrapolateRight: "clamp",
+//           }
+//         );
+
+//         const y = interpolate(
+//           frame,
+//           [start + i * stagger, start + i * stagger + 10],
+//           [15, 0],
+//           {
+//             extrapolateRight: "clamp",
+//           }
+//         );
+
+//         return (
+//           <span
+//             key={i}
+//             style={{
+//               display: "inline-block",
+//               opacity: appear,
+//               transform: `translateY(${y}px)`,
+//             }}
+//           >
+//             {char === " " ? "\u00A0" : char}
+//           </span>
+//         );
+//       })}
+//     </>
+//   );
+// };
+
 import React from "react";
-import { useCurrentFrame, interpolate } from "remotion";
+import { useCurrentFrame, useVideoConfig, interpolate } from "remotion";
 
 export const LetterReveal28012026 = ({
   text = "",
   start = 0,
-  stagger = 4, // frames between letters
+  stagger = 4,
+  exitDirection = "left", // left OR right
 }) => {
   const frame = useCurrentFrame();
+  const { fps, durationInFrames } = useVideoConfig();
+
+  const letters = text.split("");
+
+  const letterAnimDuration = 10;
+
+  /* ENTRY END */
+  const lastEntryEnd =
+    start + letters.length * stagger + letterAnimDuration;
+
+  /* FIXED EXIT SETTINGS */
+  const EXIT_TOTAL_FRAMES = Math.floor(fps * 1.5); // last 1.5 sec
+
+  const exitStart = Math.max(
+    durationInFrames - EXIT_TOTAL_FRAMES,
+    lastEntryEnd + fps * 0.3
+  );
 
   return (
     <>
-      {text.split("").map((char, i) => {
+      {letters.map((char, i) => {
+
+        /* ENTRY */
+        const entryDelay = start + i * stagger;
+
         const appear = interpolate(
           frame,
-          [start + i * stagger, start + i * stagger + 10],
+          [entryDelay, entryDelay + letterAnimDuration],
           [0, 1],
-          {
-            extrapolateRight: "clamp",
-          }
+          { extrapolateRight: "clamp" }
         );
 
-        const y = interpolate(
+        const entryY = interpolate(
           frame,
-          [start + i * stagger, start + i * stagger + 10],
+          [entryDelay, entryDelay + letterAnimDuration],
           [15, 0],
-          {
-            extrapolateRight: "clamp",
-          }
+          { extrapolateRight: "clamp" }
+        );
+
+        /* EXIT */
+        const exitOpacity = interpolate(
+          frame,
+          [exitStart, durationInFrames],
+          [1, 0],
+          { extrapolateLeft: "clamp", extrapolateRight: "clamp" }
         );
 
+        const exitX = interpolate(
+          frame,
+          [exitStart, durationInFrames],
+          [
+            0,
+            exitDirection === "left" ? -140 : 140
+          ],
+          { extrapolateLeft: "clamp", extrapolateRight: "clamp" }
+        );
+
+        const finalOpacity = appear * exitOpacity;
+
         return (
           <span
             key={i}
             style={{
               display: "inline-block",
-              opacity: appear,
-              transform: `translateY(${y}px)`,
+              opacity: finalOpacity,
+              transform: `translate(${exitX}px, ${entryY}px)`,
             }}
           >
             {char === " " ? "\u00A0" : char}
@@ -45,3 +131,5 @@ export const LetterReveal28012026 = ({
     </>
   );
 };
+
+

package/src/Invitations/Elements/OpeningGate20012026.jsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { Img, interpolate, Easing, staticFile } from "remotion";
+import { Img, interpolate, Easing } from "remotion";
 
 export const OpeningGate20012026 = ({ frame, fps }) => {
   // ⏱ 1 second gate opening
@@ -31,7 +31,7 @@ export const OpeningGate20012026 = ({ frame, fps }) => {
     >
       {/* 🚪 LEFT DOOR */}
       <Img
-        src={staticFile("video-images/20012026-opening-gate.webp")}
+        src="https://evatril-images.s3.ap-south-1.amazonaws.com/video-themes/hindu-wedding-1/v1/20012026-opening-gate.webp"
         style={{
           position: "absolute",
           bottom: 0,
@@ -44,7 +44,7 @@ export const OpeningGate20012026 = ({ frame, fps }) => {
 
       {/* 🚪 RIGHT DOOR */}
       <Img
-        src={staticFile("video-images/20012026-opening-gate.webp")}
+        src="https://evatril-images.s3.ap-south-1.amazonaws.com/video-themes/hindu-wedding-1/v1/20012026-opening-gate.webp"
         style={{
           position: "absolute",
           bottom: 0,

package/src/Invitations/Elements/PageFlipTransition28012026.jsx

@@ -0,0 +1,84 @@
+import React from "react";
+import {
+  AbsoluteFill,
+  useCurrentFrame,
+  interpolate,
+  Easing,
+} from "remotion";
+
+export const PageFlipTransition28012026 = ({
+  children,
+  background,
+  sceneDuration = 192,
+  flipDuration = 30,
+  direction = "left", // "left" | "right"
+}) => {
+  const frame = useCurrentFrame();
+
+  const flipStart = sceneDuration - flipDuration;
+
+  const rotate = interpolate(
+  frame,
+  [flipStart, sceneDuration],
+  [0, 80],
+  {
+    extrapolateLeft: "clamp",
+    extrapolateRight: "clamp",
+    easing: Easing.inOut(Easing.cubic),
+  }
+);
+
+  const signedRotate = direction === "left" ? -rotate : rotate;
+
+  const bgOpacity = interpolate(
+    frame,
+    [flipStart + flipDuration * 0.5, sceneDuration],
+    [0, 1],
+    {
+      extrapolateLeft: "clamp",
+      extrapolateRight: "clamp",
+    }
+  );
+
+  return (
+    <AbsoluteFill style={{ perspective: 2500 }}>
+
+      {/* Fake back of page */} 
+      <AbsoluteFill>
+        <img
+          src="https://evatril-images.s3.ap-south-1.amazonaws.com/video-themes/hindu-wedding-1/v1/28012026-bg.webp"
+          style={{
+            position: "absolute",
+            inset: 0,
+            width: "100%",
+            height: "100%",
+            objectFit: "cover",
+          }}
+        />
+      </AbsoluteFill>
+
+      {/* Next page */}
+      <AbsoluteFill style={{ opacity: bgOpacity }}>
+        {background}
+      </AbsoluteFill>
+
+      {/* Current page */}
+      <AbsoluteFill
+        style={{
+          transformOrigin:
+            direction === "left" ? "left center" : "right center",
+          transformStyle: "preserve-3d",
+          backfaceVisibility: "hidden",
+          transform: `rotateY(${signedRotate}deg)`,
+          boxShadow:
+            direction === "left"
+              ? "20px 0 40px rgba(0,0,0,0.25)"
+              : "-20px 0 40px rgba(0,0,0,0.25)",
+        }}
+      >
+        {children}
+      </AbsoluteFill>
+
+    </AbsoluteFill>
+  );
+};

package/src/Invitations/Elements/SmoothReveal20012026.jsx

@@ -0,0 +1,62 @@
+import { interpolate } from "remotion";
+
+export const SmoothReveal20012026 = ({
+  frame,
+  startFrame,
+  delay = 0,
+  duration = 20,
+  distance = 40,
+  direction = "top",
+
+  // EXIT CONFIG
+  durationInFrames,
+  fps,
+  exitDurationSec = 1.5,
+}) => {
+
+  /* ---------------- ENTRY ---------------- */
+  const entry = interpolate(
+    frame,
+    [startFrame + delay, startFrame + delay + duration],
+    [0, 1],
+    { extrapolateRight: "clamp" }
+  );
+
+  /* ---------------- EXIT ---------------- */
+  let exit = 1;
+
+  if (durationInFrames && fps) {
+    const exitStart = durationInFrames - fps * exitDurationSec;
+
+    exit = interpolate(
+      frame,
+      [exitStart, durationInFrames],
+      [1, 0],
+      { extrapolateLeft: "clamp", extrapolateRight: "clamp" }
+    );
+  }
+
+  /* ---------------- OPACITY ---------------- */
+  const opacity = entry * exit;
+
+  /* ---------------- MOVEMENT ---------------- */
+  let x = 0;
+  let y = 0;
+
+  // ENTRY MOVEMENT
+  if (direction === "top") y = -distance * (1 - entry);
+  if (direction === "bottom") y = distance * (1 - entry);
+  if (direction === "left") x = -distance * (1 - entry);
+  if (direction === "right") x = distance * (1 - entry);
+
+  // EXIT MOVEMENT (SAFE — NO INTERPOLATE REVERSE)
+  if (direction === "top") y += -distance * (1 - exit);
+  if (direction === "bottom") y += distance * (1 - exit);
+  if (direction === "left") x += -distance * (1 - exit);
+  if (direction === "right") x += distance * (1 - exit);
+
+  return {
+    opacity,
+    transform: `translate(${x}px, ${y}px)`,
+  };
+};

package/src/Invitations/Elements/WordReveal28012026.jsx

@@ -14,15 +14,26 @@ export const WordReveal28012026 = ({
   fontFamily = "Dancing Script",
   letterSpacing = 2,
   lineHeight = 1.2,
-  fontWeight =600
+  fontWeight = 600,
+  exitDurationSec = 1.5,
 }) => {
   const frame = useCurrentFrame();
-  const { fps } = useVideoConfig();
+  const { fps, durationInFrames } = useVideoConfig();
 
   const words = text.split(" ");
 
-  const wordDelay = fps * 0.15;   // ⏱ 150ms between words
-  const animDuration = fps * 0.4; // ⏱ 400ms animation
+  const wordDelay = fps * 0.15;
+  const animDuration = fps * 0.4;
+
+  /* ---------------- LAST WORD END FRAME ---------------- */
+  const lastWordEnd =
+    start + words.length * wordDelay + animDuration;
+
+  /* ---------------- SAFE EXIT START ---------------- */
+  const exitStartBase = Math.max(
+    durationInFrames - fps * exitDurationSec,
+    lastWordEnd + fps * 0.3
+  );
 
   return (
     <div
@@ -37,7 +48,8 @@ export const WordReveal28012026 = ({
       {words.map((word, i) => {
         const delay = start + i * wordDelay;
 
-        const opacity = interpolate(
+        /* ---------------- ENTRY ---------------- */
+        const entryOpacity = interpolate(
           frame,
           [delay, delay + animDuration],
           [0, 1],
@@ -69,12 +81,38 @@ export const WordReveal28012026 = ({
           }
         );
 
+        /* ---------------- EXIT (Reverse Order) ---------------- */
+
+        const reverseIndex = words.length - 1 - i;
+        const exitDelay = exitStartBase + reverseIndex * wordDelay;
+
+        const exitProgress = interpolate(
+          frame,
+          [exitDelay, exitDelay + animDuration],
+          [0, 1],
+          {
+            extrapolateLeft: "clamp",
+            extrapolateRight: "clamp",
+            easing: Easing.in(Easing.cubic),
+          }
+        );
+
+        const exitOpacity = 1 - exitProgress;
+        const exitTranslateY = exitProgress * 30;
+        const exitScale = 1 - exitProgress * 0.05;
+
+        /* ---------------- FINAL VALUES ---------------- */
+
+        const finalOpacity = entryOpacity * exitOpacity;
+        const finalTranslateY = translateY + exitTranslateY;
+        const finalScale = scale * exitScale;
+
         return (
           <span
             key={i}
             style={{
-              opacity,
-              transform: `translateY(${translateY}px) scale(${scale})`,
+              opacity: finalOpacity,
+              transform: `translateY(${finalTranslateY}px) scale(${finalScale})`,
               margin: "0 12px 8px 0",
               fontSize,
               color,

package/src/Invitations/Frames/F03022026_01.jsx

@@ -188,7 +188,7 @@ export const F03022026_01 = () => {
           }}
         >
           Wedding
-        </h1>
+        </h1> 
 
         <h1
           style={{

package/src/Invitations/Frames/F03022026_02.jsx

@@ -200,13 +200,9 @@ export const F03022026_02 = ({
                         overflowWrap: "break-word",
                         lineHeight: "1.2",
                     }}
-                > 
+                >
                     <h1
                         style={{
-                            fontFamily: "Dancing Script",
-                            letterSpacing: 3,
-                            lineHeight: 1.3,
-                            fontWeight: 600,
                             maxWidth: "80%",
                             opacity: welcomeExitOpacity,
                             transform: `translateX(${welcomeExitX}px)`
@@ -217,6 +213,10 @@ export const F03022026_02 = ({
                             start={20}
                             fontSize={60}
                             color="#B45A6A"
+                            fontFamily="Dancing Script"
+                            letterSpacing={3}
+                            lineHeight={1.3}
+                            fontWeight={600}
                         />
                     </h1>
 
@@ -284,12 +284,7 @@ export const F03022026_02 = ({
 
                     <div
                         style={{
-                            fontSize: 65,
-                            fontWeight: "600",
-                            color: "#B76E79",
-                            lineHeight: 1.2,
                             marginTop: "15px",
-                            letterSpacing: "4px",
                             whiteSpace: "nowrap",
                             opacity: dateExitOpacity,
                             transform: `translateX(${dateExitX}px)`
@@ -300,6 +295,10 @@ export const F03022026_02 = ({
                             start={50}
                             fontSize={65}
                             color="#6B4A3A"
+                            fontFamily="Dancing Script"
+                            letterSpacing={4}
+                            lineHeight={1.3}
+                            fontWeight={600}
                         />
 
                     </div>

package/src/Invitations/Frames/F03022026_03.jsx

@@ -328,4 +328,4 @@ export const F03022026_03 = ({
 
     </AbsoluteFill>
   );
-};
+}; 

package/src/Invitations/Frames/F03022026_04.jsx

@@ -29,7 +29,7 @@ export const F03022026_04 = ({
         hour12: true,
       }),
     };
-  };
+  }; 
 
   const { day, month, year, time } = getDateParts(eventDateTime);
 

package/src/Invitations/Frames/F03022026_05.jsx

@@ -163,7 +163,7 @@ export const F03022026_05 = ({
             position: "absolute",
             top: "40%",
             left: "50%",
-            width:"80%",
+            width: "80%",
             objectFit: "cover",
             opacity: imageOpacity * imageExitOpacity,
             transform: `translateX(-50%) translateX(${moveX}px) translateY(${imageExitY}px)`
@@ -178,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)`,
         }}
       >
@@ -186,15 +186,18 @@ export const F03022026_05 = ({
           style={{
             maxWidth: "70%",
             textAlign: "center",
-            lineHeight: 1.3,
           }}
         >
           <WordReveal28012026
             text={familyMember}
-            start={20}
-            fontSize={60}            
-            color= "#F4A261"
+            start={10}
+            fontSize={60}
+            color="#F4A261"
             fontFamily="Playfair Display"
+            letterSpacing={3}
+            lineHeight={1.3}
+            fontWeight={600}
+            exitDurationSec={6}
           />
         </div>
       </div>
@@ -221,10 +224,10 @@ export const F03022026_05 = ({
             style={{
               fontFamily: "Dancing Script",
               fontSize: 180,
-              color:"#D94A5C"
+              color: "#D94A5C"
             }}
           >
-            Thank You 
+            Thank You
           </h1>
         </div>
       </div>

package/src/Invitations/Frames/F05022026_01.jsx

@@ -2,7 +2,6 @@ import React from "react";
 import {
     AbsoluteFill,
     Img,
-    staticFile,
     useCurrentFrame,
     useVideoConfig,
     interpolate,
@@ -106,7 +105,7 @@ export const F05022026_01 = () => {
                 }}
             >
                 <Img
-                    src={staticFile("video-images/05022026-Ganesh.webp")}
+                    src="https://evatril-images.s3.ap-south-1.amazonaws.com/video-themes/hindu-wedding-1/v1/05022026-Ganesh.webp"
                     style={{
                         width: "50%",
                         objectFit: "contain",

package/src/Invitations/Frames/F05022026_02.jsx

@@ -6,7 +6,6 @@ import {
     interpolate,
     Easing,
     Img,
-    staticFile,
 } from "remotion";
 import { HangingLamp05022026 } from "../Elements/HangingLamp05022026";
 import { DucksFrame05022026 } from "../Elements/DucksFrame05022026";
@@ -23,9 +22,9 @@ export const F05022026_02 = ({
 }) => {
     const frame = useCurrentFrame();
     const { fps } = useVideoConfig();
-    const opacity = interpolate(frame, [0, 25], [0, 1], {
-        extrapolateRight: "clamp",
-    });
+    // const opacity = interpolate(frame, [0, 25], [0, 1], {
+    //     extrapolateRight: "clamp",
+    // });
 
     const translateY = interpolate(frame, [0, 25], [-40, 0], {
         extrapolateRight: "clamp",
@@ -61,12 +60,6 @@ export const F05022026_02 = ({
             month: "long",
         });
         const year = d.getFullYear();
-
-        // return d.toLocaleDateString("en-IN", {
-        //     day: "numeric",
-        //     month: "long",
-        //     year: "numeric",
-        // });
         return {
             datemonth: dayMonth,
             year: year.toString(),
@@ -217,8 +210,8 @@ export const F05022026_02 = ({
                     style={{
                         maxWidth: "60%",
                         textAlign: "center",
-                        opacity: opacity * exitOpacity,
-                        transform: `translateY(${translateY + exitTopY}px)`,
+                       opacity:  exitOpacity,
+                    transform: `translateY(${translateY + exitTopY}px)`,
                     }}
                 >
                     <WordReveal28012026
@@ -354,8 +347,6 @@ export const F05022026_02 = ({
                     left: "13%",
                     lineHeight: 1.2,
                     whiteSpace: "nowrap",
-                    // opacity: exitOpacity,
-                    // transform: `translateY(${exitTopY}px)`,
                 }}
             >
                 <WordReveal28012026
@@ -367,6 +358,7 @@ export const F05022026_02 = ({
                     letterSpacing="2px"
                     lineHeight="1.2"
                     fontWeight="600"
+                    exitDurationSec={1.5}
                 />
                 <WordReveal28012026
                     text={dateParts.year}
@@ -377,6 +369,7 @@ export const F05022026_02 = ({
                     letterSpacing="4px"
                     lineHeight="1"
                     fontWeight="600"
+                    exitDurationSec={1.5}
                 />
             </div>
 

package/src/Invitations/Frames/F05022026_03.jsx

@@ -1,15 +1,14 @@
 import React from "react";
-import {
+import { 
   AbsoluteFill,
   useCurrentFrame,
   useVideoConfig,
   interpolate,
   Easing,
   Img,
-  staticFile,
 } from "remotion";
 import { HangingJumar05022026 } from "../Elements/HangingJumar05022026";
-import { FloatingFlowersBottom } from "../Elements/FloatingFlowersBottom";
+import { FloatingFlowersBottom05022026 } from "../Elements/FloatingFlowersBottom05022026";
 
 export const F05022026_03 = ({
   eventDateTime, venueName, venueAddress
@@ -183,10 +182,10 @@ export const F05022026_03 = ({
         overflow: "hidden",
       }}
     >
-      <FloatingFlowersBottom/>
+      <FloatingFlowersBottom05022026/>
 
       <Img
-        src={staticFile("video-images/20012026-couple-walk.webp")}
+        src="https://evatril-images.s3.ap-south-1.amazonaws.com/video-themes/hindu-wedding-1/v1/20012026-couple-walk.webp"
         style={{
           position: "absolute",
           left: "50%",