@evatril/video-templates 2.0.11 → 2.0.14

package/src/Invitations/Frames/F20012026_03.jsx

@@ -6,8 +6,11 @@ import {
   interpolate,
   Easing,
   Img,
-  staticFile,
 } from "remotion";
+import { BottomSideFrames } from "../Elements/BottomSideFrames20012026";
+import { LetterReveal28012026 } from "../Elements/LetterReveal28012026";
+import { HeartDraw28012026 } from "../Elements/HeartDraw28012026";
+import { HangingJumar05022026 } from "../Elements/HangingJumar05022026";
 
 export const F20012026_03 = ({
   firstName,
@@ -16,133 +19,41 @@ export const F20012026_03 = ({
   secondPhoto,
 }) => {
   const frame = useCurrentFrame();
-  const { fps } = useVideoConfig();
-  const opacity = interpolate(frame, [0, 25], [0, 1], {
-    extrapolateRight: "clamp",
-  });
+  const { fps, durationInFrames } = useVideoConfig();
 
-  const translateY = interpolate(frame, [0, 25], [-40, 0], {
-    extrapolateRight: "clamp",
-    easing: Easing.out(Easing.ease),
-  });
+  const DETAILS_START = fps * 1;
+  const NAME_GAP = fps * 1.2;
 
-  // 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 showStart = fps * 2;            // show after 2 sec
+  const showDuration = fps * 0.6;       // fade in duration
+  const exitStart = durationInFrames - fps * 1; // last 1 sec
 
-  // FIRST PHOTO (from left)
-  const firstPhotoX = interpolate(
+  const entryOpacity = interpolate(
     frame,
-    [firstPhotoStart, firstPhotoStart + fps * 2],
-    [-200, 0],
-    {
-      extrapolateRight: "clamp",
-      easing: Easing.out(Easing.cubic),
-    }
-  );
-
-  const firstPhotoOpacity = interpolate(
-    frame,
-    [firstPhotoStart, firstPhotoStart + 10],
-    [0, 1],
-    { extrapolateRight: "clamp" }
-  );
-
-  // FIRST TEXT
-  const firstTextX = interpolate(
-    frame,
-    [firstTextStart, firstTextStart + 20],
-    [-30, 0],
-    {
-      extrapolateRight: "clamp",
-      easing: Easing.out(Easing.ease),
-    }
-  );
-
-  const firstTextOpacity = interpolate(
-    frame,
-    [firstTextStart, firstTextStart + 10],
-    [0, 1],
-    { extrapolateRight: "clamp" }
-  );
-
-  // SECOND PHOTO (from right)
-  const secondPhotoX = interpolate(
-    frame,
-    [secondPhotoStart, secondPhotoStart + fps * 2],
-    [200, 0],
-    {
-      extrapolateRight: "clamp",
-      easing: Easing.out(Easing.cubic),
-    }
-  );
-
-  const secondPhotoOpacity = interpolate(
-    frame,
-    [secondPhotoStart, secondPhotoStart + 10],
+    [showStart, showStart + showDuration],
     [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 secondTextOpacity = interpolate(
+  const entryY = interpolate(
     frame,
-    [secondTextStart, secondTextStart + 10],
-    [0, 1],
+    [showStart, showStart + showDuration],
+    [40, 0],
     { extrapolateRight: "clamp" }
   );
 
-  const totalFrames =  fps * 7;
-
-  const exitStart = totalFrames - fps * 2; // last 1 second
-
   const exitOpacity = interpolate(
     frame,
-    [exitStart, totalFrames],
+    [exitStart, durationInFrames],
     [1, 0],
-    { extrapolateLeft: "clamp", extrapolateRight: "clamp" }
-  );
-  const exitTopY = interpolate(
-    frame,
-    [exitStart, totalFrames],
-    [0, -40],
-    {
-      extrapolateLeft: "clamp",
-      extrapolateRight: "clamp",
-      easing: Easing.in(Easing.ease),
-    }
-  );
-  const exitLeftX = interpolate(
-    frame,
-    [exitStart, totalFrames],
-    [0, -60],
-    {
-      extrapolateLeft: "clamp",
-      extrapolateRight: "clamp",
-      easing: Easing.in(Easing.ease),
-    }
+    { extrapolateLeft: "clamp" }
   );
-  const exitRightX = interpolate(
+
+  const exitY = interpolate(
     frame,
-    [exitStart, totalFrames],
-    [0, 60],
-    {
-      extrapolateLeft: "clamp",
-      extrapolateRight: "clamp",
-      easing: Easing.in(Easing.ease),
-    }
+    [exitStart, durationInFrames],
+    [0, -80],
+    { extrapolateLeft: "clamp" }
   );
 
   return (
@@ -151,113 +62,83 @@ export const F20012026_03 = ({
         overflow: "hidden",
       }}
     >
+      <BottomSideFrames firstPhoto={firstPhoto} secondPhoto={secondPhoto} />
+      <HangingJumar05022026 side="left" offset={-40} />
+      <HangingJumar05022026 side="right" offset={-40} />
 
-      {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 */}
+      {/* CENTER NAMES */}
       <div
         style={{
           position: "absolute",
-          top: "35%",
-          left: "35%",
-          lineHeight: 1.2,
+          top: "30%",
+          left: "50%",
+          transform: "translate(-50%, -50%)",
           display: "flex",
           flexDirection: "column",
           alignItems: "center",
-          transform: `translateX(${firstTextX + exitLeftX}px)`,
-          opacity: firstTextOpacity * exitOpacity,
-
+          justifyContent: "center",
+          width: "100%",
+          zIndex: 10,
         }}
       >
+        <div
+          style={{
+            position: "absolute",
+            left: "50%",
+            top: "50%",
+            transform: `translate(-50%, -50%) translateY(${entryY + exitY}px)`,
+            fontSize: 240,
+            fontFamily: "Dancing Script",
+            color: "#D4A24C",
+            opacity: entryOpacity * exitOpacity * 0.15,
+            zIndex: 1, // Behind names
+            pointerEvents: "none",
+          }}
+        >
+          &
+        </div>
+        <HeartDraw28012026 startAfter={DETAILS_START + fps * 0.5} />
+        {/* FIRST NAME */}
         <h1
           style={{
             fontFamily: "Dancing Script",
-            color: "#C65A7A",
+            color: "#B76E79",
             fontSize: 80,
-            maxWidth: "70%",
+            fontWeight: "600",
+            letterSpacing: "2px",
             textAlign: "center",
-            wordWrap: "break-word",
-          }}
-        >
-          {firstName}
-        </h1>
-      </div>
-
-      {secondPhoto && (
-        <div
-          style={{ 
-            position: "absolute",
-            bottom: "10%",
-            right: "8%",
-            width: 420,
-            height: 420,
-            zIndex: 2,
-            transform: `translateX(${secondPhotoX + exitRightX}px)`,
-            opacity: secondPhotoOpacity * exitOpacity,
+            marginBottom: 20,
+            maxWidth: "80%",
+            wordBreak: "break-word",
+            zIndex: 10
           }}
         >
-          <Img
-            src={secondPhoto}
-            style={{
-              width: "100%",
-              height: "100%",
-              objectFit: "cover",
-              border: "4px solid #C65A7A",
-              borderRadius: "50%",
-            }}
+          <LetterReveal28012026
+            text={firstName}
+            start={DETAILS_START}
+            exitDirection="left"
           />
-        </div>
-      )}
+        </h1>
 
-      {/* 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,
-        }}
-      >
+        {/* SECOND NAME */}
         <h1
           style={{
             fontFamily: "Dancing Script",
-            color: "#C65A7A",
+            color: "#B76E79",
             fontSize: 80,
-            maxWidth: "90%",
+            fontWeight: "600",
+            letterSpacing: "2px",
             textAlign: "center",
-            wordWrap: "break-word",
+            maxWidth: "80%",
+            wordBreak: "break-word",
+            zIndex: 10
           }}
         >
-          {secondName}
+          <LetterReveal28012026
+            text={secondName}
+            start={DETAILS_START + NAME_GAP}
+            exitDirection="right"
+          />
         </h1>
       </div>
 

package/src/Invitations/Frames/F20012026_04.jsx

@@ -3,24 +3,19 @@ import {
   AbsoluteFill,
   useCurrentFrame,
   useVideoConfig,
-  interpolate,
-  Easing,
-  Img,
-  staticFile,
 } from "remotion";
 
 import { GroomBrideLoveScene20012026 } from "../Elements/GroomBrideLoveScene20012026.jsx";
-import { SmoothRevealFromTop20012026 } from "../Elements/SmoothRevealFromTop20012026.jsx"
+import { SmoothReveal20012026 } from "../Elements/SmoothReveal20012026.jsx"
 
 export const F20012026_04 = ({
   eventDateTime,
   venueName,
   venueAddress,
   familyMember,
-  fadeInDuration = 30,
 }) => {
   const frame = useCurrentFrame();
-  const { fps } = useVideoConfig();
+  const { fps, durationInFrames } = useVideoConfig();
 
   /* ---------------- DATE UTILS ---------------- */
   const getDateParts = (iso) => {
@@ -45,143 +40,95 @@ export const F20012026_04 = ({
 
   const { day, month, year, time } = getDateParts(eventDateTime);
 
-  const DETAILS_START = fps * 4;
+  const DETAILS_START = fps * 1;
 
-  /* ================= 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 ( 
+  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} />
+    > 
+      <GroomBrideLoveScene20012026 startAfter={2} />
 
       <div
         style={{
           position: "absolute",
-          top: "24%",
+          top: "30%",
           width: "100%",
           display: "flex",
           flexDirection: "column",
           alignItems: "center",
           textAlign: "center",
           zIndex: 5,
-          gap: "30px"
+          gap: "15px"
         }}
       >
         <div
           style={{
-            maxWidth: "50%",
-            fontFamily: "Playfair Display",
+            maxWidth: "60%",
+            fontFamily: "Dancing Script",
             fontSize: 55,
             fontWeight: "600",
-            color: "#3B2F2F",
+            color: "#4A3A32",
             lineHeight: 1.2,
             letterSpacing: "2px",
             whiteSpace: "normal",
             wordBreak: "break-word",
             overflowWrap: "break-word",
-            ...SmoothRevealFromTop20012026({
-              frame,
-              startFrame: DETAILS_START,
-              delay: 0,
+            ...SmoothReveal20012026({
+              frame, startFrame: DETAILS_START, delay: 0, direction: "top", durationInFrames, fps, exitDurationSec: 1.5
             })
           }}
         >
-          {venueName}
+          {venueName} 
         </div>
 
         <div
           style={{
-            maxWidth: "80%",
-            fontFamily: "Playfair Display",
+            maxWidth: "60%",
+            fontFamily: "Dancing Script",
             fontSize: 50,
             fontWeight: "600",
-            color: "#5A4A42",
+            color: "#4A3A32",
             lineHeight: 1.2,
             letterSpacing: "2px",
             whiteSpace: "normal",
             wordBreak: "break-word",
             overflowWrap: "break-word",
-            ...SmoothRevealFromTop20012026({
+            ...SmoothReveal20012026({
               frame,
               startFrame: DETAILS_START,
-              delay: 25,
+              delay: 10, direction: "top", durationInFrames,
+              fps, exitDurationSec: 1.5
             })
 
           }}
         >
-          {venueAddress}
+          {venueAddress} 
         </div>
         <div
           style={{
             fontFamily: "Great Vibes",
-            fontSize: 55,
+            fontSize: 50,
             fontWeight: "600",
-            color: "#6B1E2E",
+            color: "#8C6A2A",
             lineHeight: 1.2,
-            letterSpacing: "3px",
+            marginTop: "10px",
+            letterSpacing: "2px",
             whiteSpace: "normal",
             wordBreak: "break-word",
             overflowWrap: "break-word",
-            ...SmoothRevealFromTop20012026({
+            ...SmoothReveal20012026({
               frame,
               startFrame: DETAILS_START,
-              delay: 50,
+              delay: 30, direction: "left", durationInFrames,
+              fps, exitDurationSec: 1.5
             })
 
           }}
         >
-          On the joyous occasion
+          - On the joyous occasion -
         </div>
         <div
           style={{
@@ -191,16 +138,17 @@ export const F20012026_04 = ({
             fontFamily: "Playfair Display",
             fontSize: 50,
             fontWeight: "600",
-            color: "#6B1E2E",
+            color: "#7A2E3A",
             lineHeight: 1.2,
             letterSpacing: "2px",
             whiteSpace: "normal",
             wordBreak: "break-word",
             overflowWrap: "break-word",
-            ...SmoothRevealFromTop20012026({
+            ...SmoothReveal20012026({
               frame,
               startFrame: DETAILS_START,
-              delay: 70,
+              delay: 40, direction: "left", durationInFrames,
+              fps, exitDurationSec: 1.5
             })
 
           }}
@@ -209,71 +157,55 @@ export const F20012026_04 = ({
           <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",
+            fontSize: 55,
+            fontWeight: "600",
             lineHeight: 1.2,
             letterSpacing: "2px",
-            whiteSpace: "normal",
-            wordBreak: "break-word",
-            overflowWrap: "break-word",
-            ...SmoothRevealFromTop20012026({
+            ...SmoothReveal20012026({
               frame,
               startFrame: DETAILS_START,
-              delay: 115,
+              delay: 60,
+              direction: "right",
+              durationInFrames,
+              fps,
+              exitDurationSec: 1.5
             })
-
           }}
         >
-          {time}
+          <span style={{ color: "#8C6A2A", marginRight: 15 , fontFamily:"Great Vibes", fontSize:50 }}>
+            Wedding Time
+          </span>
+          <span style={{ color: "#7A2E3A" }}>
+            {time}
+          </span>
         </div>
 
         <div
           style={{
             maxWidth: "70%",
-            fontFamily: "Playfair Display",
-            fontSize: 40,
+            fontFamily: "Dancing Script",
+            fontSize: 50,
             fontWeight: "600",
             lineHeight: 1.2,
-            color: "#7A5C3E",
-            lineHeight: 1.2,
+            color: "#4A3A32",
             letterSpacing: "2px",
             whiteSpace: "normal",
             wordBreak: "break-word",
             overflowWrap: "break-word",
-            ...SmoothRevealFromTop20012026({
+            ...SmoothReveal20012026({
               frame,
               startFrame: DETAILS_START,
-              delay: 125,
+              delay: 80, direction: "bottom", durationInFrames,
+              fps, exitDurationSec: 1.5
             })
 
           }}
         >
-          {familyMember}
+          {familyMember} 
         </div>
       </div>
 

package/src/Invitations/Frames/F28012026_01.jsx

@@ -13,7 +13,7 @@ export const F28012026_01 = ({
   return (
     <AbsoluteFill style={{ overflow: "hidden" }}>
       <FlowerReveal_TR_BL_28012026 />
-      <GaneshBorder28012026  />
+      <GaneshBorder28012026 />
       <BlowingLeaves28012026 startAfter={2} />
 
       <div
@@ -27,10 +27,6 @@ export const F28012026_01 = ({
       >
         <h1
           style={{
-            fontFamily: "Dancing Script",
-            letterSpacing: 3,
-            lineHeight: 1.3,
-            fontWeight: 600,
             margin: 0,
             whiteSpace: "normal",
             wordBreak: "break-word",
@@ -38,14 +34,17 @@ export const F28012026_01 = ({
         >
           <WordReveal28012026
             text={welcomeMessage}
-            start={50}
+            start={40}
             fontSize={70}
             color="#D4A24C"
+            fontFamily="Dancing Script"
+            letterSpacing={3}
+            lineHeight={1.3}
+            fontWeight={600}
+            exitDurationSec={2}
           />
         </h1>
       </div>
-
-
     </AbsoluteFill>
   );
 };