@evatril/video-templates 2.0.11 → 2.0.14

package/src/Invitations/Frames/F05022026_04.jsx

@@ -6,10 +6,9 @@ import {
     useVideoConfig,
     interpolate,
     Easing,
-    staticFile,
 } from "remotion";
 import { WordReveal28012026 } from "../Elements/WordReveal28012026";
-import { HangingLamp05022026 } from "../Elements/HangingLamp05022026";
+import { HangingJumar05022026 } from "../Elements/HangingJumar05022026";
 
 export const F05022026_04 = ({
     familyMember,
@@ -71,13 +70,10 @@ export const F05022026_04 = ({
 
     return (
         <AbsoluteFill style={{ overflow: "hidden" }}>
-            <HangingLamp05022026 side="left" offset={-50} />
-            <HangingLamp05022026 side="right" offset={-50} />
-            <HangingLamp05022026 side="left" offset={0} />
-            <HangingLamp05022026 side="right" offset={0} />
-
+            <HangingJumar05022026 side="left" offset={-40} />
+            <HangingJumar05022026 side="right" offset={-40} />
             <Img
-                src={staticFile("video-images/05022026-Nameplate.webp")}
+                src="https://evatril-images.s3.ap-south-1.amazonaws.com/video-themes/hindu-wedding-1/v1/05022026-Nameplate.webp"
                 style={{
                     position: "absolute",
                     right: 60,
@@ -90,11 +86,11 @@ export const F05022026_04 = ({
             />
 
             <Img
-                src={staticFile("video-images/05022026-LeftPeacock.webp")}
+                src="https://evatril-images.s3.ap-south-1.amazonaws.com/video-themes/hindu-wedding-1/v1/05022026-LeftPeacock.webp"
                 style={{
                     position: "absolute",
-                    left: -100,
-                    bottom: -120,
+                    left: -250,
+                    bottom: -30,
                     width: 600,
                     maxWidth: "90%",
                     transform: `
@@ -109,7 +105,7 @@ export const F05022026_04 = ({
             <div
                 style={{
                     position: "absolute",
-                    top: "30%",
+                    top: "26%",
                     left: "50%",
                     transform: `translateX(-50%) translateY(${familyY}px)`,
                     width: "100%",
@@ -119,7 +115,7 @@ export const F05022026_04 = ({
             >
                 <div
                     style={{
-                        maxWidth: "60%",
+                        maxWidth: "70%",
                         margin: "0 auto",
                     }}
                 >
@@ -127,7 +123,7 @@ export const F05022026_04 = ({
                         text={familyMember}
                         start={20}
                         fontSize={70}
-                        color="#CDB89A"
+                        color="#B8860B"
                         fontFamily="Dancing Script"
                         letterSpacing="3px"
                         lineHeight="1.2"

package/src/Invitations/Frames/F20012026_01.jsx

@@ -13,14 +13,14 @@ import { CoupleWalk20012026 } from "../Elements/CoupleWalk20012026.jsx";
 import { FlowersSide20012026 } from "../Elements/FlowersSide20012026.jsx";
 
 export const F20012026_01 = ({
-  firstName, secondName, welcomeMessage,
-}) => {
+  welcomeMessage
+}) => {  
   /* -------------------- HOOKS (ONLY HERE) -------------------- */
   const frame = useCurrentFrame();
-  const { fps, width, height } = useVideoConfig();
+  const { fps, width, height, durationInFrames } = useVideoConfig();
 
   /* -------------------- MESSAGE REVEAL -------------------- */
-  const messageStart = fps * 2;
+  const messageStart = fps * 1;
   const messageOpacity = interpolate(
     frame,
     [messageStart, messageStart + 15],
@@ -36,66 +36,33 @@ export const F20012026_01 = ({
       easing: Easing.out(Easing.cubic),
     }
   );
-  /* -------------------- NAME ANIMATIONS -------------------- */
-  const brideStart = messageStart + fps * 1;
-  const wedsStart = brideStart + fps * 0.6;
-  const groomStart = wedsStart + fps * 0.6;
-
-  const reveal = (start) => ({
-    opacity: interpolate(frame, [start, start + 20], [0, 1], {
-      extrapolateRight: "clamp",
-    }),
-    translateY: interpolate(frame, [start, start + 25], [40, 0], {
-      extrapolateRight: "clamp",
-      easing: Easing.out(Easing.cubic),
-    }),
-  });
-
-  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;
 
+  /* -------------------- MESSAGE EXIT (LAST 1 SECOND) -------------------- */
 
-  const getExitAnim = (index) => {
-    const start = exitStart + partDuration * index;
-    const end = start + partDuration;
+  const exitDuration = fps * 2; // exactly 1 second
+  const exitStart = durationInFrames - exitDuration;
 
-    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 messageExitOpacity = interpolate(
+    frame,
+    [exitStart, durationInFrames],
+    [1, 0],
+    {
+      extrapolateLeft: "clamp",
+      extrapolateRight: "clamp",
+      easing: Easing.in(Easing.cubic),
+    }
+  );
 
-  const messageExit = getExitAnim(0);
-  const brideExit = getExitAnim(1);
-  const wedsExit = getExitAnim(2);
-  const groomExit = getExitAnim(3);
-  const coupleExit = getExitAnim(4);
+  const messageExitTranslateY = interpolate(
+    frame,
+    [exitStart, durationInFrames],
+    [0, -60],
+    {
+      extrapolateLeft: "clamp",
+      extrapolateRight: "clamp",
+      easing: Easing.in(Easing.cubic),
+    }
+  );
 
   return (
     <AbsoluteFill style={{ overflow: "hidden" }}>
@@ -132,86 +99,12 @@ export const F20012026_01 = ({
             color: "#6D4C6A",
             fontWeight: "700",
             lineHeight: 1.2,
-            opacity: messageOpacity,
-            transform: `translateY(${messageTranslateY}px)`,
-            opacity: messageOpacity * messageExit.opacity,
-            transform: `translateY(${messageTranslateY + messageExit.translateY}px)`,
+            opacity: messageOpacity * messageExitOpacity,
+            transform: `translateY(${messageTranslateY + messageExitTranslateY}px)`
           }}
         >
           {welcomeMessage}
         </div>
-
-        {/* ----------- NAMES ----------- */}
-        <div
-          style={{
-            width: "100%",
-            display: "flex",
-            flexDirection: "column",
-            alignItems: "center",
-          }}
-        >
-          <h1
-            style={{
-              width: "100%",
-              maxWidth: "80%",
-              marginTop: "10px",
-              fontFamily: "Playfair Display",
-              color: "#6B1E2E",
-              fontSize: 60,
-              fontWeight: "600",
-              lineHeight: 1.3,
-              letterSpacing: "2px",
-              textAlign: "center",
-              whiteSpace: "normal",
-              wordBreak: "break-word",
-              overflowWrap: "break-word",
-              // opacity: brideAnim.opacity,
-              // transform: `translateY(${brideAnim.translateY}px)`,
-              opacity: brideAnim.opacity * brideExit.opacity,
-              transform: `translateY(${brideAnim.translateY + brideExit.translateY}px)`,
-            }}
-          >
-            {firstName}
-          </h1>
-
-          <h2
-            style={{
-              fontSize: 70,
-              fontFamily: "Great Vibes",
-              color: "#D4AF37",
-              margin: "10px 0",
-              // opacity: wedsAnim.opacity,
-              // transform: `translateY(${wedsAnim.translateY}px)`,
-              opacity: wedsAnim.opacity * wedsExit.opacity,
-              transform: `translateY(${wedsAnim.translateY + wedsExit.translateY}px)`,
-            }}
-          >
-            weds
-          </h2>
-
-          <h1
-            style={{
-              width: "100%",
-              maxWidth: "80%",
-              fontFamily: "Playfair Display",
-              color: "#6B1E2E",
-              fontSize: 60,
-              fontWeight: "600",
-              lineHeight: 1.3,
-              letterSpacing: "2px",
-              textAlign: "center",
-              whiteSpace: "normal",
-              wordBreak: "break-word",
-              overflowWrap: "break-word",
-              // opacity: groomAnim.opacity,
-              // transform: `translateY(${groomAnim.translateY}px)`,
-              opacity: groomAnim.opacity * groomExit.opacity,
-              transform: `translateY(${groomAnim.translateY + groomExit.translateY}px)`,
-            }}
-          >
-            {secondName}
-          </h1>
-        </div>
       </div>
     </AbsoluteFill>
   );

package/src/Invitations/Frames/F20012026_02.jsx

@@ -6,12 +6,10 @@ import {
   interpolate,
   Easing,
   Img,
-  staticFile,
 } from "remotion";
 
-import { SideTrees20012026 } from "../Elements/SideTrees20012026.jsx";
-import { PeacockDance20012026 } from "../Elements/PeacockDance20012026.jsx";
-import { SmoothRevealFromTop20012026 } from "../Elements/SmoothRevealFromTop20012026.jsx";
+import { SmoothReveal20012026 } from "../Elements/SmoothReveal20012026.jsx";
+import { HangingLamp05022026 } from "../Elements/HangingLamp05022026.jsx";
 
 export const F20012026_02 = ({
   firstName,
@@ -20,91 +18,127 @@ export const F20012026_02 = ({
   secondSideNote,
   invitationMessage,
   occasionDate,
-  fadeInDuration = 30,
+  // fadeInDuration = 30,
 }) => {
   const frame = useCurrentFrame();
-  const { fps } = useVideoConfig();
+  const { fps, durationInFrames } = useVideoConfig();
 
   /* ================= DATE FORMAT ================= */
   const formatDate = (date) => {
-    if (!date) return "";
-    const d = new Date(date);
-    if (isNaN(d.getTime())) return "";
+    if (!date) return { datemonth: "", year: "" };
 
-    return d.toLocaleDateString("en-IN", {
+    let d;
+
+    // Handle DD-MM-YYYY
+    if (typeof date === "string" && date.includes("-")) {
+      const parts = date.split("-");
+      if (parts[0].length === 2) {
+        d = new Date(`${parts[2]}-${parts[1]}-${parts[0]}`);
+      } else {
+        d = new Date(date);
+      }
+    } else {
+      d = new Date(date);
+    }
+
+    if (isNaN(d.getTime())) return { datemonth: "", year: "" };
+    const dayMonth = d.toLocaleDateString("en-IN", {
       day: "numeric",
       month: "long",
-      year: "numeric",
     });
+    const year = d.getFullYear();
+    return {
+      datemonth: dayMonth,
+      year: year.toString(),
+    };
   };
 
-  const DETAILS_START = fps * 3;
+  const dateParts = formatDate(occasionDate);
+
+  const DETAILS_START = fps * 1;
+
+  /* ================= PEACOCK WALK ANIMATION ================= */
 
-  /* ================= CURTAIN ANIMATION ================= */
+  const walkStart = 0;
+  /* ================= PEACOCK HEAD + FEATHER SWING ================= */
 
-  const showImageAfter = fadeInDuration;
+  // Head swing (faster small movement)
+  const headSwing = Math.sin(frame * 0.12) * 1;
+  // -4° to +4° rotation
 
-  const imageOpacity = interpolate(
+  // Feather sway (slow royal movement)
+  const featherSwing = Math.sin(frame * 0.06) * 6;
+  // -6px to +6px movement
+
+
+  // Small bounce for walking feel
+  const peacockBounce = interpolate(
     frame,
-    [showImageAfter, showImageAfter + fps],
-    [0, 1],
-    { extrapolateRight: "clamp", easing: Easing.out(Easing.ease) }
+    [walkStart, walkStart + fps * 0.3, walkStart + fps * 0.6, walkStart + fps * 0.9],
+    [0, -6, 0, -6],
+    { extrapolateRight: "clamp" }
   );
 
-  const imageScale = interpolate(
+  // Fade in same time as curtain
+  const peacockOpacity = interpolate(
     frame,
-    [showImageAfter, showImageAfter + fps],
-    [0.92, 1],
-    { extrapolateRight: "clamp", easing: Easing.out(Easing.ease) }
+    [0, fps],   // 👈 fade from frame 0 to 1 second
+    [0, 1],
+    { extrapolateRight: "clamp" }
   );
 
   return (
     <AbsoluteFill
       style={{
         overflow: "hidden",
-        willChange: "transform",
       }}
     >
-      {/* Curtain */}
+      <HangingLamp05022026 side="left" offset={-200} />
+      <HangingLamp05022026 side="right" offset={-200} />
+      {/* Peacock */}
       <Img
-        src={staticFile("video-images/20012026-curtain-floral3.webp")}
+        src="https://evatril-images.s3.ap-south-1.amazonaws.com/video-themes/hindu-wedding-1/v1/20012026-peacock.webp"
         style={{
           position: "absolute",
-          top:"-12%",
-          left: "50%",
+          top: "25%",
           width: "100%",
-          opacity: imageOpacity,
-          transform: `translateX(-50%) scale(${imageScale})`,
+          opacity: peacockOpacity,
+          transform: `
+          translateY(${peacockBounce}px)
+          translateX(${featherSwing}px)
+          rotate(${headSwing}deg)
+          `,
+          transformOrigin: "bottom center",
           willChange: "transform, opacity",
         }}
       />
 
-      {/* Decorations */}
-      <SideTrees20012026 startAfter={2} />
-      <PeacockDance20012026 startAfter={3} />
-
       {/* Content */}
       <div
         style={{
           position: "relative",
-          top: "26%",
+          top: "20%",
           width: "100%",
           display: "flex",
           flexDirection: "column",
           alignItems: "center",
           textAlign: "center",
-          gap: 15,
+          gap: 10,
         }}
       >
         {/* Invitation */}
         <div
           style={{
-            maxWidth: "50%",
+            maxWidth: "70%",
             fontFamily: "Dancing Script",
-            color: "#4A3A2A",
-            fontSize: 40,
+            color: "#8C6A2A",
+            fontSize: 55,
+            lineHeight: 1.2,
             letterSpacing: 2,
-            ...SmoothRevealFromTop20012026({ frame, startFrame: DETAILS_START, delay: 0 }),
+            ...SmoothReveal20012026({
+              frame, startFrame: DETAILS_START, delay: 0, direction: "top", durationInFrames,
+              fps, exitDurationSec: 2,
+            }),
           }}
         >
           {invitationMessage}
@@ -114,10 +148,13 @@ export const F20012026_02 = ({
           style={{
             maxWidth: "70%",
             fontFamily: "Playfair Display",
-            color: "#7A1E2E",
-            fontSize: 60,
+            color: "#3A3A3A",
+            fontSize: 70,
             letterSpacing: 3,
-            ...SmoothRevealFromTop20012026({ frame, startFrame: DETAILS_START, delay: 25 }),
+            ...SmoothReveal20012026({
+              frame, startFrame: DETAILS_START, delay: 20, direction: "left", durationInFrames,
+              fps, exitDurationSec: 2,
+            }),
           }}
         >
           {firstName}
@@ -126,13 +163,16 @@ export const F20012026_02 = ({
         <div
           style={{
             fontFamily: "Dancing Script",
-            color: "#B87A6A",
-            fontSize: 35,
-            maxWidth:"70%",
-            ...SmoothRevealFromTop20012026({ frame, startFrame: DETAILS_START, delay: 50 }),
+            color: "#A67C2E",
+            fontSize: 40,
+            maxWidth: "60%",
+            ...SmoothReveal20012026({
+              frame, startFrame: DETAILS_START, delay: 30, direction: "left", durationInFrames,
+              fps, exitDurationSec: 2,
+            }),
           }}
         >
-          {firstSideNote} 
+          {firstSideNote}
         </div>
 
         <div
@@ -140,66 +180,99 @@ export const F20012026_02 = ({
             fontSize: 40,
             color: "#C9A24D",
             letterSpacing: 6,
-            ...SmoothRevealFromTop20012026({ frame, startFrame: DETAILS_START, delay: 70 }),
+            marginTop: "15px",
+            ...SmoothReveal20012026({
+              frame, startFrame: DETAILS_START, delay: 35, direction: "top", durationInFrames,
+              fps, exitDurationSec: 2,
+            }),
           }}
         >
-          ❁ ❁ ❁
+          — ✦ —
         </div>
 
         <h1
           style={{
             maxWidth: "70%",
             fontFamily: "Playfair Display",
-            color: "#7A1E2E",
-            fontSize: 60,
+            color: "#3A3A3A",
+            fontSize: 70,
             letterSpacing: 3,
-            ...SmoothRevealFromTop20012026({ frame, startFrame: DETAILS_START, delay: 95 }),
+            ...SmoothReveal20012026({
+              frame, startFrame: DETAILS_START, delay: 50, direction: "right", durationInFrames,
+              fps, exitDurationSec: 2,
+            }),
           }}
         >
-          {secondName}  
+          {secondName}
         </h1>
 
         <div
           style={{
             fontFamily: "Dancing Script",
-            color: "#B87A6A",
-            fontSize: 35,
-            maxWidth:"70%",
-            ...SmoothRevealFromTop20012026({ frame, startFrame: DETAILS_START, delay: 120 }),
+            color: "#A67C2E",
+            fontSize: 40,
+            maxWidth: "60%",
+            ...SmoothReveal20012026({
+              frame, startFrame: DETAILS_START, delay: 60, direction: "right", durationInFrames,
+              fps, exitDurationSec: 2,
+            }),
+          }}
+        >
+          {secondSideNote}
+        </div>
+        {/* Bottom Occasion Date - Screen Fixed */}
+        <div
+          style={{
+            fontSize: 50,
+            fontWeight: "400",
+            fontFamily: "Dancing Script",
+            color: "#8C6A2A",
+            ...SmoothReveal20012026({
+              frame, startFrame: DETAILS_START, delay: 80, direction: "bottom", durationInFrames,
+              fps, exitDurationSec: 2,
+            }),
           }}
         >
-          {secondSideNote} 
+          – Join us on this auspicious day –
         </div>
 
         <div
           style={{
-            textAlign: "center",
-            ...SmoothRevealFromTop20012026({ frame, startFrame: DETAILS_START, delay: 145 }),
+            fontSize: 60,
+            fontFamily: "Playfair Display",
+            color: "#5F8F7B",
+            letterSpacing: 2,
+            lineHeight: 1.2,
+            display: "flex",
+            flexDirection: "column",
+            alignItems: "center",
           }}
         >
-          <div
+          <span
             style={{
-              fontSize: 40,
-              fontWeight:"400", 
-              fontFamily: "Great Vibes",
-              color: "#2F6B4F",
+              ...SmoothReveal20012026({
+                frame, startFrame: DETAILS_START, delay: 95, direction: "bottom", durationInFrames,
+                fps, exitDurationSec: 2,
+              }),
             }}
           >
-            – Join us on this auspicious day –
-          </div>
+            {dateParts.datemonth}
+          </span>
 
-          <div
+          {/* Year */}
+          <span
             style={{
-              fontSize: 50,
-              fontFamily: "Playfair Display",
-              color: "#5A4632",
-              letterSpacing: 4,
+              ...SmoothReveal20012026({
+                frame, startFrame: DETAILS_START, delay: 110, direction: "bottom", durationInFrames,
+                fps, exitDurationSec: 2,
+              }),
             }}
           >
-            {formatDate(occasionDate)}
-          </div>
+            {dateParts.year}
+          </span>
         </div>
+
       </div>
-    </AbsoluteFill>
+    </AbsoluteFill >
   );
 };