@evatril/video-templates 2.0.12 → 2.0.14

package/src/Invitations/Frames/F28012026_05.jsx

@@ -6,9 +6,9 @@ import {
   useVideoConfig,
   interpolate,
   Easing,
-  staticFile,
 } from "remotion";
 import { WordReveal28012026 } from "../Elements/WordReveal28012026";
+import { HangingJumar05022026 } from "../Elements/HangingJumar05022026";
 
 export const F28012026_05 = ({
   eventDateTime,
@@ -77,7 +77,7 @@ export const F28012026_05 = ({
     <AbsoluteFill style={{ overflow: "hidden" }}>
       {/* Background Frame */}
       <Img
-        src={staticFile("video-images/28012026-frame.webp")}
+        src="https://evatril-images.s3.ap-south-1.amazonaws.com/video-themes/hindu-wedding-1/v1/28012026-frame.webp"
         style={{
           position: "absolute",
           inset: 0,
@@ -88,6 +88,8 @@ export const F28012026_05 = ({
           opacity,
         }}
       />
+      <HangingJumar05022026 side="left" offset={-40} />
+      <HangingJumar05022026 side="right" offset={-40} />
 
       {/* Text Content */}
       <div
@@ -98,79 +100,106 @@ export const F28012026_05 = ({
           flexDirection: "column",
           justifyContent: "start",
           alignItems: "center",
-          paddingTop: "40%",
-          gap: 30,
+          paddingTop: "45%",
+          gap: 20,
           zIndex: 5,
         }}
       >
         <div style={textWrapper}>
           <WordReveal28012026
             text={venueName}
-            start={frameStart + 40}
+            start={frameStart + 20}
             fontSize={70}
             color="#7B1E3A"
             fontFamily="Playfair Display"
+            letterSpacing={2}
+            lineHeight={1.2}
+            fontWeight={600}
+            exitDurationSec={1.5}
           />
         </div>
 
         <div style={textWrapper}>
           <WordReveal28012026
             text={venueAddress}
-            start={frameStart + 50}
+            start={frameStart + 40}
             fontSize={60}
             color="#4A3A2A"
             fontFamily="Playfair Display"
+            letterSpacing={2}
+            lineHeight={1.2}
+            fontWeight={600}
+            exitDurationSec={1.5}
           />
         </div>
 
         <div style={textWrapper}>
           <WordReveal28012026
             text="On the joyous occasion"
-            start={frameStart + 60}
+            start={frameStart + 50}
             fontSize={70}
             color="#6B1E2E"
             fontFamily="Dancing Script"
+            letterSpacing={3}
+            lineHeight={1.2}
+            fontWeight={600}
+            exitDurationSec={1.5}
           />
         </div>
 
         <div style={textWrapper}>
           <WordReveal28012026
             text={`${day} ${month} ${year}`}
-            start={frameStart + 80}
+            start={frameStart + 60}
             fontSize={60}
             color="#8A6A3F"
             fontFamily="Great Vibes"
             letterSpacing={6}
+            lineHeight={1.2}
+            fontWeight={600}
+            exitDurationSec={1.5}
           />
         </div>
 
         <div style={textWrapper}>
           <WordReveal28012026
             text="Wedding Time"
-            start={frameStart + 100}
+            start={frameStart + 80}
             fontSize={60}
             color="#7B1E3A"
             fontFamily="Dancing Script"
+            letterSpacing={2}
+            lineHeight={1.2}
+            fontWeight={600}
+            exitDurationSec={1.5}
           />
         </div>
 
         <div style={textWrapper}>
           <WordReveal28012026
             text={time}
-            start={frameStart + 110}
+            start={frameStart + 90}
             fontSize={60}
             color="#4B3A28"
             fontFamily="Dancing Script"
+            letterSpacing={2}
+            lineHeight={1.2}
+            fontWeight={600}
+            exitDurationSec={1.5}
           />
         </div>
 
         <div style={textWrapper}>
           <WordReveal28012026
             text={familyMember}
-            start={frameStart + 130}
+            start={frameStart + 110}
             fontSize={50}
             color="#B2455D"
             fontFamily="Playfair Display"
+            letterSpacing={2}
+            lineHeight={1.2}
+            fontWeight={600}
+            exitDurationSec={1.5}
           />
         </div>
       </div>

package/src/Invitations/Themes/T03022026_01.jsx

@@ -16,7 +16,7 @@ import { F03022026_02 } from "../Frames/F03022026_02.jsx";
 import { F03022026_03 } from "../Frames/F03022026_03.jsx";
 import { F03022026_04 } from "../Frames/F03022026_04.jsx";
 import { F03022026_05 } from "../Frames/F03022026_05.jsx";
-import { HoldSlide } from "../Elements/HoldSlide.jsx";
+import { HoldSlide03022026 } from "../Elements/HoldSlide03022026.jsx";
 
 export const T03022026_01 = ({
     event,
@@ -51,7 +51,7 @@ export const T03022026_01 = ({
     const secondSceneContent = 6 * fps;
     const thirdSceneContent = 7 * fps;
     const fourSceneContent = 7 * fps;
-    const fiveSceneContent = 9 * fps;
+    const fiveSceneContent = 8 * fps;
     const firstSceneDuration = firstSceneContent + slideDuration;
     const secondSceneDuration = secondSceneContent + slideDuration;
     const thirdSceneDuration = thirdSceneContent + slideDuration;
@@ -119,7 +119,7 @@ export const T03022026_01 = ({
         () => [
             `${S3_BASE}03022026-bg.webp`,
             `${S3_BASE}03022026-bg-2.webp`,
-            `${S3_BASE}03022026-bg-3.webp`,
+            `${S3_BASE}03022026-bg-3.webp`, 
             `${S3_BASE}03022026-bg-4.webp`,
             `${S3_BASE}03022026-bg-5.webp`,
             `${S3_BASE}03022026-krishnaradha.webp`,
@@ -169,7 +169,7 @@ export const T03022026_01 = ({
 
             {/* 🌸 SCENE 1 (0–10s) */}
             <Sequence from={0} durationInFrames={firstSceneDuration}>
-                <HoldSlide
+                <HoldSlide03022026
                     contentDuration={firstSceneContent}
                     slideDuration={slideDuration}
                     nextBg={backgrounds[1]}
@@ -177,12 +177,12 @@ export const T03022026_01 = ({
                     <Page bg={backgrounds[0]}>
                         <F03022026_01 />
                     </Page>
-                </HoldSlide>
+                </HoldSlide03022026>
             </Sequence>
 
             {/* 🌸 SCENE 2 (10–20s) */}
             <Sequence from={firstSceneDuration} durationInFrames={secondSceneDuration}>
-                <HoldSlide
+                <HoldSlide03022026
                     contentDuration={secondSceneContent}
                     slideDuration={slideDuration}
                     nextBg={backgrounds[2]}
@@ -195,7 +195,7 @@ export const T03022026_01 = ({
                             occasionDate={occasionDate}
                         />
                     </Page>
-                </HoldSlide>
+                </HoldSlide03022026>
             </Sequence>
 
             {/* 🌸 SCENE 3 (20–30s) */}
@@ -203,7 +203,7 @@ export const T03022026_01 = ({
                 from={firstSceneDuration + secondSceneDuration}
                 durationInFrames={thirdSceneDuration}
             >
-                <HoldSlide
+                <HoldSlide03022026
                     contentDuration={thirdSceneContent}
                     slideDuration={slideDuration}
                     nextBg={backgrounds[3]}
@@ -220,7 +220,7 @@ export const T03022026_01 = ({
                             invitationMessage={invitationMessage}
                         />
                     </Page>
-                </HoldSlide>
+                </HoldSlide03022026>
             </Sequence>
 
             {/* SCENE 4 */}
@@ -228,7 +228,7 @@ export const T03022026_01 = ({
                 from={firstSceneDuration + secondSceneDuration + thirdSceneDuration}
                 durationInFrames={fourSceneDuration}
             >
-                <HoldSlide
+                <HoldSlide03022026
                     contentDuration={fourSceneContent}
                     slideDuration={slideDuration}
                     nextBg={backgrounds[4]}
@@ -240,7 +240,7 @@ export const T03022026_01 = ({
                             venueAddress={venueAddress}
                         />
                     </Page>
-                </HoldSlide>
+                </HoldSlide03022026>
             </Sequence>
 
             {/* SCENE 5 */}
@@ -253,18 +253,13 @@ export const T03022026_01 = ({
                 }
                 durationInFrames={fiveSceneDuration}
             >
-                <HoldSlide
-                    contentDuration={fiveSceneContent}
-                    slideDuration={slideDuration}
-                >
                     <Page bg={backgrounds[4]}>
                         <F03022026_05 familyMember={familyMember} />
                     </Page>
-                </HoldSlide>
             </Sequence>
 
         </AbsoluteFill>
     );
 };
 
-T03022026_01.duration = 30 * 38;
+T03022026_01.duration = (5 + 6 + 7 + 7 + 8) * 30 + 5 * (1 * 30);

package/src/Invitations/Themes/T05022026_01.jsx

@@ -3,7 +3,6 @@ import {
     Sequence,
     useVideoConfig,
     Audio,
-    staticFile,
     AbsoluteFill,
     Img,
     useCurrentFrame,
@@ -119,20 +118,24 @@ export const T05022026_01 = ({
 
     /* ---------------- PRELOAD IMAGES ---------------- */
 
+    const S3_BASE = "https://evatril-images.s3.ap-south-1.amazonaws.com/video-themes/hindu-wedding-1/v1/";
     const imagesToPreload = useMemo(
         () => [
-            staticFile("video-images/05022026-bg.webp"),
-            staticFile("video-images/05022026-bg-2.webp"),
-            staticFile("video-images/05022026-bg-3.webp"),
-            staticFile("video-images/05022026-bg-4.webp"),
-            staticFile("video-images/05022026-Duck.webp"),
-            staticFile("video-images/05022026-HangingLamps.webp"),
-            staticFile("video-images/05022026-Ganesh.webp"),
-            staticFile("video-images/05022026-Flower.webp"),
-            staticFile("video-images/20012026-couple-walk.webp"),
-            staticFile("video-images/05022026-HangingJumar.webp"),
-            staticFile("video-images/05022026-Nameplate.webp"),
-            staticFile("video-images/05022026-LeftPeacock.webp"),
+            `${S3_BASE}05022026-bg.webp`,
+            `${S3_BASE}05022026-bg-2.webp`,
+            `${S3_BASE}05022026-bg-3.webp`,
+            `${S3_BASE}05022026-bg-4.webp`,
+
+            `${S3_BASE}05022026-Duck.webp`,
+            `${S3_BASE}05022026-HangingLamps.webp`,
+            `${S3_BASE}05022026-Ganesh.webp`,
+
+            `${S3_BASE}05022026-HangingJumar.webp`,
+            `${S3_BASE}05022026-Flower.webp`,
+            `${S3_BASE}20012026-couple-walk.webp`,
+
+            `${S3_BASE}05022026-Nameplate.webp`,
+            `${S3_BASE}05022026-LeftPeacock.webp`,
         ],
         []
     );
@@ -157,10 +160,10 @@ export const T05022026_01 = ({
 
     const backgrounds = useMemo(
         () => [
-            staticFile("video-images/05022026-bg.webp"),
-            staticFile("video-images/05022026-bg-2.webp"),
-            staticFile("video-images/05022026-bg-3.webp"),
-            staticFile("video-images/05022026-bg-4.webp"),
+            `${S3_BASE}05022026-bg.webp`,
+            `${S3_BASE}05022026-bg-2.webp`,
+            `${S3_BASE}05022026-bg-3.webp`,
+            `${S3_BASE}05022026-bg-4.webp`,
         ],
         []
     );
@@ -168,7 +171,8 @@ export const T05022026_01 = ({
     return (
         <AbsoluteFill>
             <Audio
-                src={staticFile("video-images/wedding2.mp3")} volume={musicVolume}
+                src={`${S3_BASE}wedding2.mp3`}
+                volume={musicVolume}
             />
 
             {/* SCENE 1 */}
@@ -256,4 +260,4 @@ export const T05022026_01 = ({
     );
 };
 
-T05022026_01.duration = 30 * 30;
+T05022026_01.duration = (7 + 7 + 7 + 9) * 30;

package/src/Invitations/Themes/T20012026_01.jsx

@@ -3,7 +3,6 @@ import {
   Sequence,
   useVideoConfig,
   Audio,
-  staticFile,
   AbsoluteFill,
   useCurrentFrame,
   Img,
@@ -15,8 +14,8 @@ import { F20012026_01 } from "../Frames/F20012026_01.jsx";
 import { F20012026_02 } from "../Frames/F20012026_02.jsx";
 import { F20012026_03 } from "../Frames/F20012026_03.jsx";
 import { F20012026_04 } from "../Frames/F20012026_04.jsx";
-import { InkSmokeTransition20012026 } from "../Elements/InkSmokeTransition20012026.jsx";
 import { usePreloadImages } from "../hooks/usePreloadImages.js";
+import { CurtainTransition20012026 } from "../Elements/CurtainTransition20012026.jsx";
 
 export const T20012026_01 = ({
   event,
@@ -46,11 +45,25 @@ export const T20012026_01 = ({
   );
 
   // 🎬 Change timing here
-  const scene1Duration = 8 * fps;
-  const scene2Duration = 10 * fps;
-  const scene3Duration = 12 * fps;
+  const scene1Duration = 5 * fps;
+  const scene2Duration = 8 * fps;
+  const scene3Duration = 5 * fps;
+  const scene4Duration = 10 * fps;
+  const curtainDuration = 1.5 * fps;
 
-  const transitionDuration = 1 * fps;
+  /* ---------------- TIMELINE CALCULATION ---------------- */
+
+  const s1Start = 0;
+  const s1End = s1Start + scene1Duration;
+
+  const s2Start = s1End + curtainDuration;
+  const s2End = s2Start + scene2Duration;
+
+  const s3Start = s2End + curtainDuration;
+  const s3End = s3Start + scene3Duration;
+
+  const s4Start = s3End + curtainDuration;
+  const s4End = s4Start + scene4Duration;
 
   /* ---------------- SAFE DATA ---------------- */
 
@@ -106,25 +119,36 @@ export const T20012026_01 = ({
   const venueAddress =
     venue?.address || formData?.venue_address || "";
 
+  /* ---------------- PRELOAD IMAGES ---------------- */
+  const S3_BASE = "https://evatril-images.s3.ap-south-1.amazonaws.com/video-themes/hindu-wedding-1/v1/";
+
   /* ---------------- PRELOAD IMAGES ---------------- */
 
   const imagesToPreload = useMemo(
     () => [
-      staticFile("video-images/20012026-bg.webp"),
-      staticFile("video-images/20012026-bride.webp"),
-      staticFile("video-images/20012026-butterfly.webp"),
-      staticFile("video-images/20012026-couple-walk.webp"),
-      staticFile("video-images/20012026-curtain-floral.webp"),
-      staticFile("video-images/20012026-floral-left.webp"),
-      staticFile("video-images/20012026-floral-right.webp"),
-      staticFile("video-images/05022026-Flower.webp"),
-      staticFile("video-images/20012026-groom.webp"),
-      staticFile("video-images/28012026-Heart.webp"),
-      staticFile("video-images/20012026-opening-gate.webp"),
-      staticFile("video-images/20012026-peacock.webp"),
-      staticFile("video-images/20012026-tree-left.webp"),
-      staticFile("video-images/20012026-tree-right.webp"),
-      staticFile("video-images/20012026-wedding-gate.webp"),
+      `${S3_BASE}20012026-bg.webp`,
+      `${S3_BASE}20012026-bg-2.webp`,
+      `${S3_BASE}20012026-bg-3.webp`,
+      `${S3_BASE}20012026-bg-4.webp`,
+
+      `${S3_BASE}20012026-opening-gate.webp`,
+      `${S3_BASE}20012026-butterfly.webp`,
+      `${S3_BASE}20012026-couple-walk.webp`,
+      `${S3_BASE}20012026-floral-left.webp`,
+      `${S3_BASE}20012026-floral-right.webp`,
+
+      `${S3_BASE}20012026-Curtain.webp`,
+
+      `${S3_BASE}20012026-peacock.webp`,
+      `${S3_BASE}05022026-HangingLamps.webp`,
+
+      `${S3_BASE}20012026-LeftFrame.webp`,
+      `${S3_BASE}20012026-RightFrame.webp`,
+      `${S3_BASE}05022026-HangingJumar.webp`,
+
+      `${S3_BASE}20012026-groom.webp`,
+      `${S3_BASE}20012026-bride.webp`,
+      `${S3_BASE}28012026-Heart.webp`,
     ],
     []
   );
@@ -140,7 +164,7 @@ export const T20012026_01 = ({
           inset: 0,
           width: "100%",
           height: "100%",
-          objectFit: "cover", 
+          objectFit: "cover",
         }}
       />
       {children}
@@ -149,10 +173,12 @@ export const T20012026_01 = ({
 
   const backgrounds = useMemo(
     () => [
-      staticFile("video-images/20012026-bg.webp"),
-      staticFile("video-images/20012026-bg-3.png"),
+      `${S3_BASE}20012026-bg.webp`,
+      `${S3_BASE}20012026-bg-2.webp`,
+      `${S3_BASE}20012026-bg-3.webp`,
+      `${S3_BASE}20012026-bg-4.webp`,
     ],
-    []
+    [S3_BASE]
   );
 
   return (
@@ -160,12 +186,12 @@ export const T20012026_01 = ({
 
       {/* 🎵 MUSIC */}
       <Audio
-        src={staticFile("video-images/wedding.mp3")}
+        src={`${S3_BASE}wedding2.mp3`}
         volume={musicVolume}
       />
 
       {/* ================= SCENE 1 ================= */}
-      <Sequence from={0} durationInFrames={scene1Duration}>
+      <Sequence from={s1Start} durationInFrames={scene1Duration + curtainDuration}>
         <Page bg={backgrounds[0]}>
           <F20012026_01
             firstName={firstName}
@@ -175,21 +201,17 @@ export const T20012026_01 = ({
         </Page>
       </Sequence>
 
-      {/* ☁️ TRANSITION 1 */}
-      <Sequence
-        from={scene1Duration}
-        durationInFrames={transitionDuration}
-      >
-        <Page bg={backgrounds[1]}>
-          <InkSmokeTransition20012026 />
-        </Page>
+      {/* CURTAIN 1 */}
+      <Sequence from={s1End} durationInFrames={curtainDuration}>
+        <CurtainTransition20012026 mode="close" />
+      </Sequence>
+
+      <Sequence from={s2Start} durationInFrames={curtainDuration}>
+        <CurtainTransition20012026 mode="open" />
       </Sequence>
 
       {/* ================= SCENE 2 ================= */}
-      <Sequence
-        from={scene1Duration + transitionDuration}
-        durationInFrames={scene2Duration}
-      >
+      <Sequence from={s2Start} durationInFrames={scene2Duration + curtainDuration}>
         <Page bg={backgrounds[1]}>
           <F20012026_02
             firstName={firstName}
@@ -198,27 +220,22 @@ export const T20012026_01 = ({
             secondSideNote={secondSideNote}
             invitationMessage={invitationMessage}
             occasionDate={occasionDate}
-            fadeInDuration={transitionDuration}
           />
         </Page>
       </Sequence>
 
-      {/* ☁️ TRANSITION 2 */}
-      <Sequence
-        from={scene1Duration + transitionDuration + scene2Duration}
-        durationInFrames={transitionDuration}
-      >
-        <Page bg={backgrounds[1]}>
-          <InkSmokeTransition20012026 />
-        </Page>
+      {/* ☁️ CURTAIN 2 */}
+      <Sequence from={s2End} durationInFrames={curtainDuration}>
+        <CurtainTransition20012026 mode="close" />
+      </Sequence>
+
+      <Sequence from={s3Start} durationInFrames={curtainDuration}>
+        <CurtainTransition20012026 mode="open" />
       </Sequence>
 
       {/* ================= SCENE 3 ================= */}
-      <Sequence
-        from={scene1Duration + transitionDuration + scene2Duration + transitionDuration}
-        durationInFrames={scene3Duration}
-      >
-        <Page bg={backgrounds[0]}>
+      <Sequence from={s3Start} durationInFrames={scene3Duration + curtainDuration}>
+        <Page bg={backgrounds[2]}>
           <F20012026_03
             firstName={firstName}
             firstPhoto={firstPhoto}
@@ -228,22 +245,18 @@ export const T20012026_01 = ({
         </Page>
       </Sequence>
 
-      {/* ☁️ TRANSITION 3 */}
-      <Sequence
-        from={scene1Duration + transitionDuration + scene2Duration}
-        durationInFrames={transitionDuration}
-      >
-        <Page bg={backgrounds[1]}>
-          <InkSmokeTransition20012026 />
-        </Page>
+      {/* ☁️ CURTAIN 3 */}
+      <Sequence from={s3End} durationInFrames={curtainDuration}>
+        <CurtainTransition20012026 mode="close" />
+      </Sequence>
+
+      <Sequence from={s4Start} durationInFrames={curtainDuration}>
+        <CurtainTransition20012026 mode="open" />
       </Sequence>
 
       {/* ================= SCENE 4================= */}
-      <Sequence
-        from={scene1Duration + transitionDuration + scene2Duration + transitionDuration}
-        durationInFrames={scene3Duration}
-      >
-        <Page bg={backgrounds[0]}>
+      <Sequence from={s4Start} durationInFrames={scene4Duration}>
+        <Page bg={backgrounds[3]}>
           <F20012026_04
             eventDateTime={eventDateTime}
             venueName={venueName}
@@ -257,4 +270,4 @@ export const T20012026_01 = ({
   );
 };
 
-T20012026_01.duration = 30 * 40;
+T20012026_01.duration = (5 + 8 + 5 + 10) * 30 + 3 * (1.5 * 30);