@evatril/video-templates 2.0.6 → 2.0.8

package/src/Invitations/Frames/F20012026_02.jsx

@@ -11,26 +11,21 @@ import {
 
 import { SideTrees20012026 } from "../Elements/SideTrees20012026.jsx";
 import { PeacockDance20012026 } from "../Elements/PeacockDance20012026.jsx";
-import { SmoothRevealFromTop } from "../Elements/SmoothRevealFromTop.jsx";
-
-export const F20012026_02 = ({ firstName, secondName, firstSideNote, secondSideNote, invitationMessage, occasionDate, fadeInDuration = 30,
+import { SmoothRevealFromTop20012026 } from "../Elements/SmoothRevealFromTop20012026.jsx";
+
+export const F20012026_02 = ({
+  firstName,
+  secondName,
+  firstSideNote,
+  secondSideNote,
+  invitationMessage,
+  occasionDate,
+  fadeInDuration = 30,
 }) => {
   const frame = useCurrentFrame();
   const { fps } = useVideoConfig();
 
-  /* ================= SCENE FADE + ZOOM  ================= */
-  // 🎥 VERY SMOOTH CINEMATIC ZOOM
-  const sceneScale = interpolate(
-    frame,
-    [0, fadeInDuration * 2],
-    [1.20, 1],
-    {
-      extrapolateRight: "clamp",
-      easing: Easing.out(Easing.cubic),
-    }
-  );
-
-  /* ================= SAFE DATE FORMAT ================= */
+  /* ================= DATE FORMAT ================= */
   const formatDate = (date) => {
     if (!date) return "";
     const d = new Date(date);
@@ -43,261 +38,167 @@ export const F20012026_02 = ({ firstName, secondName, firstSideNote, secondSideN
     });
   };
 
-
   const DETAILS_START = fps * 3;
 
-  /* ================= IMAGE ANIMATION ================= */
-  const showImageAfter = fadeInDuration * 1;
+  /* ================= CURTAIN ANIMATION ================= */
+
+  const showImageAfter = fadeInDuration;
 
   const imageOpacity = interpolate(
     frame,
     [showImageAfter, showImageAfter + fps],
     [0, 1],
-    {
-      extrapolateRight: "clamp",
-      easing: Easing.out(Easing.ease),
-    }
+    { extrapolateRight: "clamp", easing: Easing.out(Easing.ease) }
   );
 
   const imageScale = interpolate(
     frame,
     [showImageAfter, showImageAfter + fps],
     [0.92, 1],
-    {
-      extrapolateRight: "clamp",
-      easing: Easing.out(Easing.ease),
-    }
+    { extrapolateRight: "clamp", easing: Easing.out(Easing.ease) }
   );
 
   return (
-    <AbsoluteFill>
-      <AbsoluteFill style={{ backgroundColor: "#1a1a1a" }} />
-      <AbsoluteFill
+    <AbsoluteFill
+      style={{
+        overflow: "hidden",
+        willChange: "transform",
+      }}
+    >
+      {/* Curtain */}
+      <Img
+        src={staticFile("video-images/20012026-curtain-floral.png")}
         style={{
-          transform: `scale(${sceneScale})`,
-          transformOrigin: "center center",
-          overflow: "hidden",
+          position: "absolute",
+          left: "50%",
+          width: "100%",
+          opacity: imageOpacity,
+          transform: `translateX(-50%) scale(${imageScale})`,
+          willChange: "transform, opacity",
+        }}
+      />
 
+      {/* Decorations */}
+      <SideTrees20012026 startAfter={2} />
+      <PeacockDance20012026 startAfter={3} />
+
+      {/* Content */}
+      <div
+        style={{
+          position: "relative",
+          top: "26%",
+          width: "100%",
+          display: "flex",
+          flexDirection: "column",
+          alignItems: "center",
+          textAlign: "center",
+          gap: 15,
         }}
       >
-        {/* ================= BACKGROUND ================= */}
-        <Img
-          src={staticFile("video-images/20012026-bg.png")}
+        {/* Invitation */}
+        <div
           style={{
-            position: "absolute",
-            width: "100%",
-            height: "100%",
-            objectFit: "cover",
+            maxWidth: "50%",
+            fontFamily: "Dancing Script",
+            color: "#4A3A2A",
+            fontSize: 40,
+            letterSpacing: 2,
+            ...SmoothRevealFromTop20012026({ frame, startFrame: DETAILS_START, delay: 0 }),
           }}
-        />
+        >
+          {invitationMessage}
+        </div>
 
-        <Img
-          src={staticFile("video-images/20012026-curtain-floral.png")}
+        <h1
           style={{
-            position: "absolute",
-            left: "50%",
-            width: "100%",
-            opacity: imageOpacity,
-            transform: `translateX(-50%) scale(${imageScale})`,
+            maxWidth: "70%",
+            fontFamily: "Playfair Display",
+            color: "#7A1E2E",
+            fontSize: 60,
+            letterSpacing: 3,
+            ...SmoothRevealFromTop20012026({ frame, startFrame: DETAILS_START, delay: 25 }),
           }}
-        />
-
-        {/* ================= DECORATIONS ================= */}
-        <SideTrees20012026 startAfter={2} />
-        <PeacockDance20012026 startAfter={3} />
+        >
+          {firstName}
+        </h1>
 
         <div
           style={{
-            position: "relative",
-            top: "26%",
-            width: "100%",
-            display: "flex",
-            flexDirection: "column",
-            alignItems: "center",
-            textAlign: "center",
-            gap: "15px"
+            fontFamily: "Dancing Script",
+            color: "#B87A6A",
+            fontSize: 35,
+            maxWidth:"70%",
+            ...SmoothRevealFromTop20012026({ frame, startFrame: DETAILS_START, delay: 50 }),
           }}
         >
-          {/* Invitation Message */}
-          <div
-            style={{
-              maxWidth: "50%",
-              fontFamily: "Dancing Script",
-              color: "#4A3A2A",
-              fontSize: 40,
-              fontWeight: "500",
-              lineHeight: 1.2,
-              letterSpacing: "2px",
-              ...SmoothRevealFromTop({
-                frame,
-                startFrame: DETAILS_START,
-                delay: 0,
-              })
-            }}
-          >
-            {invitationMessage}
-          </div>
-
-          {/* Bride Name */}
-          <h1
-            style={{
-              maxWidth: "70%",
-              fontFamily: "Playfair Display",
-              color: "#7A1E2E",
-              fontSize: 60,
-              fontWeight: "600",
-              lineHeight: 1.2,
-              letterSpacing: "3px",
-              whiteSpace: "normal",
-              wordBreak: "break-word",
-              overflowWrap: "break-word",
-              ...SmoothRevealFromTop({
-                frame,
-                startFrame: DETAILS_START,
-                delay: 25,
-              })
-            }}
-          >
-            {firstName}
-          </h1>
-
-          {/* Bride Side Note */}
-          <div
-            style={{
-              maxWidth: "60%",
-              fontFamily: "Dancing Script",
-              color: "#B87A6A",
-              fontSize: 40,
-              fontWeight: "600",
-              lineHeight: 1.2,
-              letterSpacing: "2px",
-              whiteSpace: "normal",
-              wordBreak: "break-word",
-              overflowWrap: "break-word",
-              ...SmoothRevealFromTop({
-                frame,
-                startFrame: DETAILS_START,
-                delay: 50,
-              })
-            }}
-          >
-            {firstSideNote}
-          </div>
+          {firstSideNote} 
+        </div>
 
-          {/* & Symbol */}
-          <div
-            style={{
-              fontSize: 40,
-              color: "#C9A24D",
-              letterSpacing: "6px",
-              ...SmoothRevealFromTop({
-                frame,
-                startFrame: DETAILS_START,
-                delay: 70,
-              })
-            }}
-          >
-            ❁ ❁ ❁
-          </div>
+        <div
+          style={{
+            fontSize: 40,
+            color: "#C9A24D",
+            letterSpacing: 6,
+            ...SmoothRevealFromTop20012026({ frame, startFrame: DETAILS_START, delay: 70 }),
+          }}
+        >
+          ❁ ❁ ❁
+        </div>
 
+        <h1
+          style={{
+            maxWidth: "70%",
+            fontFamily: "Playfair Display",
+            color: "#7A1E2E",
+            fontSize: 60,
+            letterSpacing: 3,
+            ...SmoothRevealFromTop20012026({ frame, startFrame: DETAILS_START, delay: 95 }),
+          }}
+        >
+          {secondName}  
+        </h1>
 
-          {/* Groom Name */}
-          <h1
-            style={{
-              maxWidth: "70%",
-              fontFamily: "Playfair Display",
-              color: "#7A1E2E",
-              fontSize: 60,
-              fontWeight: "600",
-              lineHeight: 1.2,
-              letterSpacing: "3px",
-              whiteSpace: "normal",
-              wordBreak: "break-word",
-              overflowWrap: "break-word",
-              ...SmoothRevealFromTop({
-                frame,
-                startFrame: DETAILS_START,
-                delay: 95,
-              })
-            }}
-          >
-            {secondName}
-          </h1>
+        <div
+          style={{
+            fontFamily: "Dancing Script",
+            color: "#B87A6A",
+            fontSize: 35,
+            maxWidth:"70%",
+            ...SmoothRevealFromTop20012026({ frame, startFrame: DETAILS_START, delay: 120 }),
+          }}
+        >
+          {secondSideNote} 
+        </div>
 
-          {/* Groom Side Note */}
+        <div
+          style={{
+            textAlign: "center",
+            ...SmoothRevealFromTop20012026({ frame, startFrame: DETAILS_START, delay: 145 }),
+          }}
+        >
           <div
             style={{
-              maxWidth: "70%",
-              fontFamily: "Dancing Script",
-              color: "#B87A6A",
               fontSize: 40,
-              fontWeight: "600",
-              lineHeight: 1.2,
-              letterSpacing: "2px",
-              whiteSpace: "normal",
-              wordBreak: "break-word",
-              overflowWrap: "break-word",
-              ...SmoothRevealFromTop({
-                frame,
-                startFrame: DETAILS_START,
-                delay: 120,
-              })
+              fontWeight:"400",
+              fontFamily: "Great Vibes",
+              color: "#2F6B4F",
             }}
           >
-            {secondSideNote}
+            – Join us on this auspicious day –
           </div>
 
-          {/* Date */}
           <div
             style={{
-              maxWidth: "70%",
-              marginTop: 20,
-              textAlign: "center",
-              ...SmoothRevealFromTop({
-                frame,
-                startFrame: DETAILS_START,
-                delay: 145,
-              })
+              fontSize: 50,
+              fontFamily: "Playfair Display",
+              color: "#5A4632",
+              letterSpacing: 4,
             }}
           >
-            {/* -------- Message Line -------- */}
-            <div
-              style={{
-                fontSize: 45,
-                fontFamily: "Great Vibes",
-                fontWeight: "500",
-                letterSpacing: "3px",
-                color: "#2F6B4F",
-                lineHeight: 1.2,
-                marginBottom: 8,
-                whiteSpace: "nowrap",
-
-              }}
-            >
-              – Join us on this auspicious day –
-            </div>
-
-            {/* -------- Date Line -------- */}
-            <div
-              style={{
-                fontSize: 55,
-                fontFamily: "Playfair Display",
-                fontWeight: "400",
-                color: "#5A4632",
-                lineHeight: 1.2,
-                letterSpacing: "4px",
-                whiteSpace: "nowrap", // 🔥 force single line
-              }}
-            >
-              {formatDate(occasionDate)}
-            </div>
+            {formatDate(occasionDate)}
           </div>
-
-
         </div>
-
-
-      </AbsoluteFill>
+      </div>
     </AbsoluteFill>
   );
 };

package/src/Invitations/Frames/F20012026_03.jsx

@@ -10,7 +10,7 @@ import {
 } from "remotion";
 
 import { GroomBrideLoveScene20012026 } from "../Elements/GroomBrideLoveScene20012026.jsx";
-import{ SmoothRevealFromTop} from "../Elements/SmoothRevealFromTop.jsx"
+import { SmoothRevealFromTop20012026 } from "../Elements/SmoothRevealFromTop20012026.jsx"
 
 export const F20012026_03 = ({
   eventDateTime,
@@ -22,18 +22,6 @@ export const F20012026_03 = ({
   const frame = useCurrentFrame();
   const { fps } = useVideoConfig();
 
-  /* ================= SCENE REVEAL (SMOKE FOLLOW-UP) ================= */
-  // 🎥 VERY SMOOTH CINEMATIC ZOOM
-  const sceneScale = interpolate(
-    frame,
-    [0, fadeInDuration * 2],
-    [1.20, 1],
-    {
-      extrapolateRight: "clamp",
-      easing: Easing.out(Easing.cubic),
-    }
-  );
-
   /* ---------------- DATE UTILS ---------------- */
   const getDateParts = (iso) => {
     if (!iso) return { day: "", month: "", year: "", time: "" };
@@ -58,7 +46,7 @@ export const F20012026_03 = ({
   const { day, month, year, time } = getDateParts(eventDateTime);
 
   const DETAILS_START = fps * 4;
- 
+
   /* ================= IMAGE ANIMATION ================= */
   const showImageAfter = fadeInDuration * 2;
 
@@ -92,26 +80,12 @@ export const F20012026_03 = ({
   );
 
   return (
-     <AbsoluteFill>
-    <AbsoluteFill style={{ backgroundColor: "#1a1a1a" }} />
     <AbsoluteFill
       style={{
-        transform: `scale(${sceneScale})`,
         transformOrigin: "center center",
         overflow: "hidden",
       }}
     >
-      {/* ================= BACKGROUND ================= */}
-      <Img
-        src={staticFile("video-images/20012026-bg.png")}
-        style={{
-          position: "absolute",
-          width: "100%",
-          height: "100%",
-          objectFit: "cover",
-
-        }}
-      />
       <Img
         src={staticFile("video-images/20012026-wedding-gate.png")}
         style={{
@@ -156,7 +130,7 @@ export const F20012026_03 = ({
             whiteSpace: "normal",
             wordBreak: "break-word",
             overflowWrap: "break-word",
-            ...SmoothRevealFromTop({
+            ...SmoothRevealFromTop20012026({
               frame,
               startFrame: DETAILS_START,
               delay: 0,
@@ -178,7 +152,7 @@ export const F20012026_03 = ({
             whiteSpace: "normal",
             wordBreak: "break-word",
             overflowWrap: "break-word",
-            ...SmoothRevealFromTop({
+            ...SmoothRevealFromTop20012026({
               frame,
               startFrame: DETAILS_START,
               delay: 25,
@@ -199,11 +173,11 @@ export const F20012026_03 = ({
             whiteSpace: "normal",
             wordBreak: "break-word",
             overflowWrap: "break-word",
-            ...SmoothRevealFromTop({
-  frame,
-  startFrame: DETAILS_START,
-  delay: 50,
-})
+            ...SmoothRevealFromTop20012026({
+              frame,
+              startFrame: DETAILS_START,
+              delay: 50,
+            })
 
           }}
         >
@@ -223,11 +197,11 @@ export const F20012026_03 = ({
             whiteSpace: "normal",
             wordBreak: "break-word",
             overflowWrap: "break-word",
-           ...SmoothRevealFromTop({
-  frame,
-  startFrame: DETAILS_START,
-  delay: 70,
-})
+            ...SmoothRevealFromTop20012026({
+              frame,
+              startFrame: DETAILS_START,
+              delay: 70,
+            })
 
           }}
         >
@@ -246,11 +220,11 @@ export const F20012026_03 = ({
             whiteSpace: "normal",
             wordBreak: "break-word",
             overflowWrap: "break-word",
-            ...SmoothRevealFromTop({
-  frame,
-  startFrame: DETAILS_START,
-  delay: 95,
-})
+            ...SmoothRevealFromTop20012026({
+              frame,
+              startFrame: DETAILS_START,
+              delay: 95,
+            })
 
           }}
         >
@@ -267,11 +241,11 @@ export const F20012026_03 = ({
             whiteSpace: "normal",
             wordBreak: "break-word",
             overflowWrap: "break-word",
-            ...SmoothRevealFromTop({
-  frame,
-  startFrame: DETAILS_START,
-  delay: 115,
-})
+            ...SmoothRevealFromTop20012026({
+              frame,
+              startFrame: DETAILS_START,
+              delay: 115,
+            })
 
           }}
         >
@@ -291,11 +265,11 @@ export const F20012026_03 = ({
             whiteSpace: "normal",
             wordBreak: "break-word",
             overflowWrap: "break-word",
-            ...SmoothRevealFromTop({
-  frame,
-  startFrame: DETAILS_START,
-  delay: 125,
-})
+            ...SmoothRevealFromTop20012026({
+              frame,
+              startFrame: DETAILS_START,
+              delay: 125,
+            })
 
           }}
         >
@@ -304,7 +278,5 @@ export const F20012026_03 = ({
       </div>
 
     </AbsoluteFill>
-    
-    </AbsoluteFill>
   );
 };

package/src/Invitations/Frames/F28012026_01.jsx

@@ -0,0 +1,51 @@
+import React from "react";
+import {
+  AbsoluteFill,
+} from "remotion";
+import { FlowerReveal_TR_BL_28012026 } from "../Elements/FlowerReveal_TR_BL_28012026";
+import { GaneshBorder28012026 } from "../Elements/GaneshBorder28012026";
+import { BlowingLeaves28012026 } from "../Elements/BlowingLeaves28012026";
+import { WordReveal28012026 } from "../Elements/WordReveal28012026";
+
+export const F28012026_01 = ({
+  welcomeMessage,
+}) => {
+  return (
+    <AbsoluteFill style={{ overflow: "hidden" }}>
+      <FlowerReveal_TR_BL_28012026 />
+      <GaneshBorder28012026  />
+      <BlowingLeaves28012026 startAfter={2} />
+
+      <div
+        style={{
+          position: "absolute",
+          bottom: "2%",
+          right: "6%",
+          maxWidth: "50%",
+          textAlign: "right",
+        }}
+      >
+        <h1
+          style={{
+            fontFamily: "Dancing Script",
+            letterSpacing: 3,
+            lineHeight: 1.3,
+            fontWeight: 600,
+            margin: 0,
+            whiteSpace: "normal",
+            wordBreak: "break-word",
+          }}
+        >
+          <WordReveal28012026
+            text={welcomeMessage}
+            start={50}
+            fontSize={70}
+            color="#D4A24C"
+          />
+        </h1>
+      </div>
+
+
+    </AbsoluteFill>
+  );
+};