@evatril/video-templates 2.0.9 → 2.0.10

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@evatril/video-templates",
-  "version": "2.0.9",
+  "version": "2.0.10",
   "description": "",
   "main": "src/index.js",
   "remotion": {

package/src/Invitations/Elements/BlowingLeaves28012026.jsx

@@ -1,22 +1,24 @@
 import React, { useMemo } from "react";
-import { useCurrentFrame, useVideoConfig, interpolate } from "remotion";
+import { useCurrentFrame, useVideoConfig, interpolate, Img, staticFile } from "remotion";
 
-export const BlowingLeaves28012026 = ({ startAfter = 2, count = 30 }) => {
+export const BlowingLeaves28012026 = ({ startAfter = 2, count = 5 }) => {
   const frame = useCurrentFrame();
   const { fps = 30 } = useVideoConfig();
 
   const delayFrames = fps * startAfter;
+  const leafSrc = staticFile("video-images/28012026-PinkLeaf.webp");
 
-  // 🍃 Generate leaves once
+  // 🍃 Generate leaves once (ULTRA SLOW SETTINGS)
   const leaves = useMemo(() => {
     return Array.from({ length: count }).map(() => ({
       x: Math.random() * 100,
       y: Math.random() * 100,
-      size: 20 + Math.random() * 25,
-      speedX: 0.3 + Math.random() * 0.8,
-      speedY: 0.1 + Math.random() * 0.4,
-      drift: 40 + Math.random() * 80,
-      rotateSpeed: 0.3 + Math.random() * 1,
+      size: 40 + Math.random() * 25,
+
+      // 🌿 VERY slow speeds
+      speedX: 1 + Math.random() * 1,     // % per second
+      speedY: 0.1 + Math.random() * 0.1,   // % per second
+
       phase: Math.random() * 200,
     }));
   }, [count]);
@@ -24,33 +26,39 @@ export const BlowingLeaves28012026 = ({ startAfter = 2, count = 30 }) => {
   return (
     <>
       {leaves.map((l, i) => {
-        const local = frame - delayFrames;
+        const local = Math.max(0, frame - delayFrames);
+
+        // ⭐ Convert frame → seconds (IMPORTANT)
+        const time = local / fps;
 
-        const appear = interpolate(local, [0, fps], [0, 1], {
+        const appear = interpolate(local, [0, fps * 2], [0, 1], {
           extrapolateLeft: "clamp",
           extrapolateRight: "clamp",
         });
 
-        // Horizontal flow
-        const moveX = ((local * l.speedX + l.phase) % 120) - 10;
+        // 🌿 Slow horizontal blowing
+        const moveX = ((l.x + time * l.speedX + l.phase) % 120) - 10;
 
-        // Gentle vertical float
+        // 🌿 Gentle floating vertical
         const moveY =
           l.y +
-          Math.sin((local + l.phase) / 40) * 20 +
-          local * l.speedY;
+          Math.sin((time * 2 + l.phase) / 2) * 10 +
+          time * l.speedY;
 
-        // Rotation
-        const rotate = Math.sin((local + l.phase) / 30) * 25;
+        // 🌿 Super slow rotation
+        const rotate =
+          Math.sin((time + l.phase) / 2) * 15;
 
         return (
-          <div
+          <Img
             key={i}
+            src={leafSrc}
             style={{
               position: "absolute",
               left: `${moveX}%`,
               top: `${moveY % 110}%`,
-              fontSize: l.size,
+              width: l.size,
+              height: "auto",
               opacity: appear,
               transform: `
                 translate(-50%, -50%)
@@ -58,9 +66,7 @@ export const BlowingLeaves28012026 = ({ startAfter = 2, count = 30 }) => {
               `,
               pointerEvents: "none",
             }}
-          >
-            🍁
-          </div>
+          />
         );
       })}
     </>

package/src/Invitations/Elements/CoupleWalk20012026.jsx

@@ -13,7 +13,7 @@ export const CoupleWalk20012026 = () => {
   const { fps, height } = useVideoConfig();
  
   /* -----------------------------⏳ WALK SETTINGS  ------------------------------*/
-  const delaySeconds = 0.5;
+  const delaySeconds = 0;
   const walkDurationSeconds = 5;
   const delayFrames = fps * delaySeconds;
   const walkFrames = fps * walkDurationSeconds;
@@ -56,7 +56,7 @@ export const CoupleWalk20012026 = () => {
 
       {/* 👰🤵 COUPLE (BOTTOM-CENTER) */}
       <Img
-        src={staticFile("video-images/20012026-couple-walk.png")}
+        src={staticFile("video-images/20012026-couple-walk.webp")}
         style={{
           position: "absolute",
           left: "50%",

package/src/Invitations/Elements/FlowersSide20012026.jsx

@@ -9,7 +9,7 @@ import {
 } from "remotion";
 
 /* 🌸 FALLING EMOJI FLOWER – MULTI LINE */
-const FallingEmojiFlower = ({ index, row = 0, startAfter = 6 }) => {
+const FallingEmojiFlower = ({ index, row = 0, startAfter = 0 }) => {
   const frame = useCurrentFrame();
   const { height, width, fps } = useVideoConfig();
 
@@ -20,7 +20,7 @@ const FallingEmojiFlower = ({ index, row = 0, startAfter = 6 }) => {
   const baseX =
     width / 2 - stripWidth / 2 + ((index * 50) % stripWidth);
 
-  /* 🌸 ROW OFFSET (2–3 LINES) */
+  /* 🌸 ROW OFFSET */
   const rowOffsetY = row * 60;
 
   const individualDelay = index * 10 + row * 15;
@@ -28,15 +28,10 @@ const FallingEmojiFlower = ({ index, row = 0, startAfter = 6 }) => {
 
   const localFrame = frame - delayFrames - individualDelay;
 
-  const progress = interpolate(
-    localFrame,
-    [0, duration],
-    [0, 1],
-    {
-      extrapolateLeft: "clamp",
-      extrapolateRight: "clamp",
-    }
-  );
+  const progress = interpolate(localFrame, [0, duration], [0, 1], {
+    extrapolateLeft: "clamp",
+    extrapolateRight: "clamp",
+  });
 
   const translateY = interpolate(
     progress,
@@ -51,24 +46,22 @@ const FallingEmojiFlower = ({ index, row = 0, startAfter = 6 }) => {
 
   const rotate = progress * 360;
 
-  // ❌ Do not render before start or after finish
   if (localFrame < 0 || localFrame > duration) return null;
 
   return (
-    <div
+    <Img
+      src={staticFile("video-images/05022026-Flower.webp")}
       style={{
         position: "absolute",
         left: baseX,
         top: translateY,
-        fontSize: 44,
-        opacity: 0.85,
+        width: "10%",
+        opacity: 0.9,
         transform: `translateX(${sway}px) rotate(${rotate}deg)`,
         pointerEvents: "none",
         userSelect: "none",
       }}
-    >
-      {["🌸", "🌺"][index % 2]}
-    </div>
+    />
   );
 };
 
@@ -77,18 +70,18 @@ export const FlowersSide20012026 = ({ startAfter = 1 }) => {
   const { fps } = useVideoConfig();
 
   const delayFrames = fps * startAfter;
- const revealDuration = fps * 2.5; // ⏱ 2 seconds
+  const revealDuration = fps * 2.5; // ⏱ 2 seconds
 
-const revealProgress = interpolate(
-  frame - delayFrames,
-  [0, revealDuration],
-  [0, 1],
-  {
-    extrapolateLeft: "clamp",
-    extrapolateRight: "clamp",
-    easing: Easing.out(Easing.cubic),
-  }
-);
+  const revealProgress = interpolate(
+    frame - delayFrames,
+    [0, revealDuration],
+    [0, 1],
+    {
+      extrapolateLeft: "clamp",
+      extrapolateRight: "clamp",
+      easing: Easing.out(Easing.cubic),
+    }
+  );
 
   return (
     <>
@@ -105,36 +98,36 @@ const revealProgress = interpolate(
       )}
       {/* 🌸 LEFT FLOWER DECOR */}
       <Img
-  src={staticFile("video-images/20012026-floral-left.png")}
-  style={{
-    position: "absolute",
-    left: 0,
-    bottom: 370,
-    width: "100%",
-    opacity: revealProgress,
-    transform: `
+        src={staticFile("video-images/20012026-floral-left.webp")}
+        style={{
+          position: "absolute",
+          left: 0,
+          bottom: 370,
+          width: "100%",
+          opacity: revealProgress,
+          transform: `
       translateX(${interpolate(revealProgress, [0, 1], [-120, -30])}px)
       scale(${interpolate(revealProgress, [0, 1], [0.96, 1])})
     `,
-    pointerEvents: "none",
-  }}
-/>
+          pointerEvents: "none",
+        }}
+      />
       {/* 🌸 RIGHT FLOWER DECOR */}
-     <Img
-  src={staticFile("video-images/20012026-floral-right.png")}
-  style={{
-    position: "absolute",
-    right: 0,
-    bottom: 370,
-    width: "100%",
-    opacity: revealProgress,
-    transform: `
+      <Img
+        src={staticFile("video-images/20012026-floral-right.webp")}
+        style={{
+          position: "absolute",
+          right: 0,
+          bottom: 370,
+          width: "100%",
+          opacity: revealProgress,
+          transform: `
       translateX(${interpolate(revealProgress, [0, 1], [120, 30])}px)
       scale(${interpolate(revealProgress, [0, 1], [0.96, 1])})
     `,
-    pointerEvents: "none",
-  }}
-/>
+          pointerEvents: "none",
+        }}
+      />
 
     </>
   );

package/src/Invitations/Elements/GroomBrideLoveScene20012026.jsx

@@ -8,7 +8,7 @@ import {
   Easing,
 } from "remotion";
 
-export const GroomBrideLoveScene20012026 = ({ startAfter = 3.5}) => {
+export const GroomBrideLoveScene20012026 = ({ startAfter = 3.5 }) => {
   const frame = useCurrentFrame();
   const { fps, width } = useVideoConfig();
 
@@ -60,10 +60,10 @@ export const GroomBrideLoveScene20012026 = ({ startAfter = 3.5}) => {
   const depthScale = 1 + Math.sin(walkFrame / 18) * 0.03;
   const rotateZ = Math.sin(walkFrame / 30) * 1.2;
 
-/* ---------------- BRIDE TURN (SAFE FLIP) ---------------- */
-const meetFrame = walkDelay + walkDuration;
-const brideTurnDuration = fps * 0.6;
-const brideFlip = interpolate(
+  /* ---------------- BRIDE TURN (SAFE FLIP) ---------------- */
+  const meetFrame = walkDelay + walkDuration;
+  const brideTurnDuration = fps * 0.6;
+  const brideFlip = interpolate(
     frame,
     [meetFrame, meetFrame + brideTurnDuration],
     [1, -1], // RIGHT → LEFT
@@ -75,12 +75,12 @@ const brideFlip = interpolate(
   );
 
   /* ---------------- LOVE EMOJI ---------------- */
-    const loveStart = meetFrame + brideTurnDuration;
+  const loveStart = meetFrame + brideTurnDuration;
   return (
     <>
       {/* 🤵 GROOM (SHOW → PAUSE → WALK) */}
       <Img
-        src={staticFile("video-images/20012026-groom.png")}
+        src={staticFile("video-images/20012026-groom.webp")}
         style={{
           position: "absolute",
           bottom: 0,
@@ -97,20 +97,20 @@ const brideFlip = interpolate(
       />
 
       {/* 👰 BRIDE (FIXED, SHOWS SAME TIME) */}
-  <Img
-  src={staticFile("video-images/20012026-bride.png")}
-  style={{
-    position: "absolute",
-    bottom: 0,
-    width: "40%",
-    opacity,
-    transform: `
+      <Img
+        src={staticFile("video-images/20012026-bride.webp")}
+        style={{
+          position: "absolute",
+          bottom: 0,
+          width: "40%",
+          opacity,
+          transform: `
       translateX(${brideX}px)
       scaleX(${brideFlip})
     `,
-    transformOrigin: "bottom center",
-  }}
-/>
+          transformOrigin: "bottom center",
+        }}
+      />
       {/* ❤️ MULTIPLE FLOATING LOVE EMOJIS */}
       {frame > loveStart &&
         Array.from({ length: 16 }).map((_, i) => {
@@ -134,28 +134,27 @@ const brideFlip = interpolate(
           );
 
           const spreadX =
-            brideX + 60  + Math.sin(i * 35) * 100;
+            brideX + 60 + Math.sin(i * 35) * 100;
 
           const scale = 0.7 + (i % 5) * 0.12;
 
           return (
-            <div
-               key={i}
+            <Img
+              key={i}
+              src={staticFile("video-images/28012026-Heart.webp")}
               style={{
                 position: "absolute",
                 bottom: "30%",
                 left: spreadX,
-                fontSize: 66,
+                width: 60,
                 opacity: emojiOpacity,
                 transform: `
-                  translateY(${floatY}px)
-                  scale(${scale})
-                `,
+            translateY(${floatY}px)
+            scale(${scale})
+          `,
                 pointerEvents: "none",
               }}
-            >
-              💖 
-            </div>
+            />
           );
         })}
     </>

package/src/Invitations/Elements/HeartFlight28012026.jsx

@@ -1,9 +1,91 @@
+// import React from "react";
+// import { useCurrentFrame, useVideoConfig, interpolate, Easing } from "remotion";
+
+// export const HeartFlight28012026 = ({
+//   emoji = "💖",
+//   startAfter = 3,
+// }) => {
+//   const frame = useCurrentFrame();
+//   const { fps, width, height } = useVideoConfig();
+
+//   const GLOBAL_DELAY = fps * startAfter;
+
+//   const hearts = [
+//     { sx: 0.1, sy: 0.9, ex: 0.8, ey: 0.2, delay: 0 },
+//     { sx: 0.9, sy: 0.85, ex: 0.2, ey: 0.1, delay: 20 },
+//     { sx: 0.3, sy: 1.0, ex: 0.7, ey: 0.3, delay: 40 },
+//     { sx: 0.4, sy: 0.9, ex: 0.8, ey: 0.2, delay: 10 },
+//     { sx: 0.5, sy: 0.85, ex: 0.2, ey: 0.1, delay: 30 },
+//     { sx: 0.8, sy: 1.0, ex: 0.7, ey: 0.3, delay: 50 },
+//   ];
+
+//   return (
+//     <>
+//       {hearts.map((h, i) => {
+//         const localFrame = frame - GLOBAL_DELAY - h.delay;
+
+//         const progress = interpolate(localFrame, [0, fps * 6], [0, 1], {
+//           extrapolateLeft: "clamp",
+//           extrapolateRight: "clamp",
+//           easing: Easing.inOut(Easing.ease),
+//         });
+
+//         const x = interpolate(progress, [0, 1], [
+//           h.sx * width,
+//           h.ex * width,
+//         ]);
+
+//         const y =
+//           interpolate(progress, [0, 1], [
+//             h.sy * height,
+//             h.ey * height,
+//           ]) +
+//           Math.sin(frame / 10 + i * 20) * 25;
+
+//         const scale = interpolate(progress, [0, 0.1, 0.9, 1], [0, 1, 1, 0.6]);
+
+//         const opacity = progress > 0.05 && progress < 0.95 ? 1 : 0;
+
+//         return (
+//           <div
+//             key={i}
+//             style={{
+//               position: "absolute",
+//               left: x,
+//               top: y,
+//               fontSize: 70,
+//               opacity,
+//               transform: `
+//                 translate(-50%, -50%)
+//                 scale(${scale})
+//                 rotate(${Math.sin(localFrame / 15 + i) * 15}deg)
+//               `,
+//               pointerEvents: "none",
+//             }}
+//           >
+//             {emoji}
+//           </div>
+//         );
+//       })}
+//     </>
+//   );
+// };
+
+
+
 import React from "react";
-import { useCurrentFrame, useVideoConfig, interpolate, Easing } from "remotion";
+import {
+  useCurrentFrame,
+  useVideoConfig,
+  interpolate,
+  Easing,
+  Img,
+  staticFile,
+} from "remotion";
 
 export const HeartFlight28012026 = ({
-  emoji = "💖",
   startAfter = 3,
+  heartImage = "heart.png", // image file name from public folder
 }) => {
   const frame = useCurrentFrame();
   const { fps, width, height } = useVideoConfig();
@@ -53,7 +135,6 @@ export const HeartFlight28012026 = ({
               position: "absolute",
               left: x,
               top: y,
-              fontSize: 70,
               opacity,
               transform: `
                 translate(-50%, -50%)
@@ -63,7 +144,13 @@ export const HeartFlight28012026 = ({
               pointerEvents: "none",
             }}
           >
-            {emoji}
+            <Img
+              src={staticFile("video-images/28012026-Heart.webp")}
+              style={{
+                width: 70,
+                height: 70,
+              }}
+            />
           </div>
         );
       })}

package/src/Invitations/Elements/PeacockDance20012026.jsx

@@ -51,7 +51,7 @@ export const PeacockDance20012026 = ({
 
   return (
     <Img
-      src={staticFile("video-images/20012026-peacock.png")}
+      src={staticFile("video-images/20012026-peacock.webp")}
       style={{
         position: "absolute",
         top: "55%",

package/src/Invitations/Elements/SideTrees20012026.jsx

@@ -68,7 +68,7 @@ export const SideTrees20012026 = ({ startAfter = 1 }) => {
     <>
       {/* 🌳 LEFT TREE */}
       <Img
-        src={staticFile("video-images/20012026-tree-left.png")}
+        src={staticFile("video-images/20012026-tree-left.webp")}
         style={{
           position: "absolute",
           left: 0,
@@ -85,7 +85,7 @@ export const SideTrees20012026 = ({ startAfter = 1 }) => {
 
       {/* 🌳 RIGHT TREE */}
       <Img
-        src={staticFile("video-images/20012026-tree-right.png")}
+        src={staticFile("video-images/20012026-tree-right.webp")}
         style={{
           position: "absolute",
           right: 0,

package/src/Invitations/Frames/F03022026_01.jsx

@@ -154,7 +154,7 @@ export const F03022026_01 = () => {
           src={staticFile("video-images/03022026-krishnaradha.webp")}
           style={{
             position: "absolute",
-            top: "32%",
+            top: "40%",
             left: "50%",
             width: "80%",
             objectFit: "cover",

package/src/Invitations/Frames/F03022026_04.jsx

@@ -171,7 +171,7 @@ export const F03022026_04 = ({
       }}
     >
        <Img
-        src={staticFile("video-images/03022026-krishnaradha-4.webp")}
+        src={staticFile("video-images/03022026-krishnaradha-41.webp")}
         style={{
           position: "absolute",
           left: "50%",

package/src/Invitations/Frames/F03022026_05.jsx

@@ -159,11 +159,12 @@ export const F03022026_05 = ({
         }}
       >
         <Img
-          src={staticFile("video-images/03022026-krishnaradha-5.webp")}
+          src={staticFile("video-images/03022026-krishnaradha-52.webp")}
           style={{
             position: "absolute",
-            top: "30%",
+            top: "40%",
             left: "50%",
+            width:"80%",
             objectFit: "cover",
             opacity: imageOpacity * imageExitOpacity,
             transform: `translateX(-50%) translateX(${moveX}px) translateY(${imageExitY}px)`
@@ -179,7 +180,7 @@ export const F03022026_05 = ({
           justifyContent: "center",
           alignItems: "center",
           opacity: msgOpacity * msgExitOpacity,
-          transform: `translateY(-18%) translateY(${msgY + msgExitY}px)`,
+          transform: `translateY(-20%) translateY(${msgY + msgExitY}px)`,
         }}
       >
         <div

package/src/Invitations/Frames/F05022026_01.jsx

@@ -99,7 +99,7 @@ export const F05022026_01 = () => {
             <AbsoluteFill
                 style={{
                     display: "flex",
-                    paddingTop: "10%",
+                    paddingTop: "15%",
                     alignItems: "center",
                     opacity: fade(ganeshStart) * ganeshExitOpacity,
                     transform: `translateY(${ganeshExitY}px)`,
@@ -108,7 +108,7 @@ export const F05022026_01 = () => {
                 <Img
                     src={staticFile("video-images/05022026-Ganesh.webp")}
                     style={{
-                        width: "60%",
+                        width: "50%",
                         objectFit: "contain",
                         transform: `scale(${ganeshScale * ganeshExitScale})`,
                     }}

package/src/Invitations/Frames/F20012026_01.jsx

@@ -20,7 +20,7 @@ export const F20012026_01 = ({
   const { fps, width, height } = useVideoConfig();
 
   /* -------------------- MESSAGE REVEAL -------------------- */
-  const messageStart = fps * 4;
+  const messageStart = fps * 2;
   const messageOpacity = interpolate(
     frame,
     [messageStart, messageStart + 15],
@@ -54,6 +54,49 @@ export const F20012026_01 = ({
   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;
+
+
+  const getExitAnim = (index) => {
+    const start = exitStart + partDuration * index;
+    const end = start + partDuration;
+
+    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 messageExit = getExitAnim(0);
+  const brideExit = getExitAnim(1);
+  const wedsExit = getExitAnim(2);
+  const groomExit = getExitAnim(3);
+  const coupleExit = getExitAnim(4);
+
   return (
     <AbsoluteFill style={{ overflow: "hidden" }}>
 
@@ -91,6 +134,8 @@ export const F20012026_01 = ({
             lineHeight: 1.2,
             opacity: messageOpacity,
             transform: `translateY(${messageTranslateY}px)`,
+            opacity: messageOpacity * messageExit.opacity,
+            transform: `translateY(${messageTranslateY + messageExit.translateY}px)`,
           }}
         >
           {welcomeMessage}
@@ -120,8 +165,10 @@ export const F20012026_01 = ({
               whiteSpace: "normal",
               wordBreak: "break-word",
               overflowWrap: "break-word",
-              opacity: brideAnim.opacity,
-              transform: `translateY(${brideAnim.translateY}px)`,
+              // opacity: brideAnim.opacity,
+              // transform: `translateY(${brideAnim.translateY}px)`,
+              opacity: brideAnim.opacity * brideExit.opacity,
+              transform: `translateY(${brideAnim.translateY + brideExit.translateY}px)`,
             }}
           >
             {firstName}
@@ -133,8 +180,10 @@ export const F20012026_01 = ({
               fontFamily: "Great Vibes",
               color: "#D4AF37",
               margin: "10px 0",
-              opacity: wedsAnim.opacity,
-              transform: `translateY(${wedsAnim.translateY}px)`,
+              // opacity: wedsAnim.opacity,
+              // transform: `translateY(${wedsAnim.translateY}px)`,
+              opacity: wedsAnim.opacity * wedsExit.opacity,
+              transform: `translateY(${wedsAnim.translateY + wedsExit.translateY}px)`,
             }}
           >
             weds
@@ -154,9 +203,10 @@ export const F20012026_01 = ({
               whiteSpace: "normal",
               wordBreak: "break-word",
               overflowWrap: "break-word",
-              opacity: groomAnim.opacity,
-              transform: `translateY(${groomAnim.translateY}px)`,
-
+              // opacity: groomAnim.opacity,
+              // transform: `translateY(${groomAnim.translateY}px)`,
+              opacity: groomAnim.opacity * groomExit.opacity,
+              transform: `translateY(${groomAnim.translateY + groomExit.translateY}px)`,
             }}
           >
             {secondName}

package/src/Invitations/Frames/F20012026_02.jsx

@@ -67,7 +67,7 @@ export const F20012026_02 = ({
     >
       {/* Curtain */}
       <Img
-        src={staticFile("video-images/20012026-curtain-floral.png")}
+        src={staticFile("video-images/20012026-curtain-floral.webp")}
         style={{
           position: "absolute",
           left: "50%",
@@ -179,7 +179,7 @@ export const F20012026_02 = ({
           <div
             style={{
               fontSize: 40,
-              fontWeight:"400",
+              fontWeight:"400", 
               fontFamily: "Great Vibes",
               color: "#2F6B4F",
             }}

package/src/Invitations/Frames/F20012026_03.jsx

@@ -79,7 +79,7 @@ export const F20012026_03 = ({
     }
   );
 
-  return (
+  return ( 
     <AbsoluteFill
       style={{
         transformOrigin: "center center",
@@ -87,7 +87,7 @@ export const F20012026_03 = ({
       }}
     >
       <Img
-        src={staticFile("video-images/20012026-wedding-gate.png")}
+        src={staticFile("video-images/20012026-wedding-gate.webp")}
         style={{
           position: "absolute",
           top: 0,

package/src/Invitations/Frames/F28012026_03.jsx

@@ -132,7 +132,7 @@ const nameTranslateX = interpolate(
         overflow: "hidden",
       }}
     >
-      <HeartFlight28012026 emoji="💗" />
+      <HeartFlight28012026  />
 
       {/* Top Border */}
       <div

package/src/Invitations/Frames/F28012026_04.jsx

@@ -135,8 +135,7 @@ const nameTranslateX = interpolate(
         overflow: "hidden",
       }}
     >
-      {/* <MultiHeartFloat28012026 startAfter={3} count={18} emoji="💖" /> */}
-      <HeartFlight28012026 emoji="💗" />
+      <HeartFlight28012026 />
 
       {/* Top Border */}
       <div

package/src/Invitations/Themes/T03022026_01.jsx

@@ -37,14 +37,15 @@ export const T03022026_01 = ({
     const fadeOutStart = durationInFrames - fadeDuration;
     const musicVolume = interpolate(
         frame,
-        [0, fadeOutStart, durationInFrames],
-        [0.4, 0.4, 0],
+        [0, fps, fadeOutStart, durationInFrames],
+        [0, 0.4, 0.4, 0],
         {
             easing: Easing.inOut(Easing.ease),
             extrapolateLeft: "clamp",
             extrapolateRight: "clamp",
         }
     );
+
     const slideDuration = 1 * fps;
 
     const firstSceneContent = 5 * fps;
@@ -266,4 +267,4 @@ export const T03022026_01 = ({
     );
 };
 
-T03022026_01.duration = 30 * 38;
+T03022026_01.duration = 24 * 38;

package/src/Invitations/Themes/T05022026_01.jsx

@@ -36,8 +36,8 @@ export const T05022026_01 = ({
     const fadeOutStart = durationInFrames - fadeDuration;
     const musicVolume = interpolate(
         frame,
-        [0, fadeOutStart, durationInFrames],
-        [0.4, 0.4, 0],
+        [0, fps, fadeOutStart, durationInFrames],
+        [0, 0.4, 0.4, 0],
         {
             easing: Easing.inOut(Easing.ease),
             extrapolateLeft: "clamp",
@@ -256,4 +256,4 @@ export const T05022026_01 = ({
     );
 };
 
-T05022026_01.duration = 30 * 30;
+T05022026_01.duration = 24 * 30;

package/src/Invitations/Themes/T20012026_01.jsx

@@ -35,8 +35,8 @@ export const T20012026_01 = ({
   const fadeOutStart = durationInFrames - fadeDuration;
   const musicVolume = interpolate(
     frame,
-    [0, fadeOutStart, durationInFrames],
-    [0.4, 0.4, 0],
+    [0, fps, fadeOutStart, durationInFrames],
+    [0, 0.4, 0.4, 0],
     {
       easing: Easing.inOut(Easing.ease),
       extrapolateLeft: "clamp",
@@ -44,6 +44,13 @@ export const T20012026_01 = ({
     }
   );
 
+  // 🎬 Change timing here
+  const scene1Duration = 8 * fps;
+  const scene2Duration = 10 * fps;
+  const scene3Duration = 12 * fps;
+
+  const transitionDuration = 1 * fps;
+
   /* ---------------- SAFE DATA ---------------- */
 
   const whoIsCreating =
@@ -98,11 +105,6 @@ export const T20012026_01 = ({
   const venueAddress =
     venue?.address || formData?.venue_address || "";
 
-  /* ---------------- TIMING ---------------- */
-
-  const framesPerPage = Math.floor(durationInFrames / 3);
-  const transitionDuration = Math.floor(framesPerPage * 0.25);
-
   /* ---------------- PRELOAD IMAGES ---------------- */
 
   const imagesToPreload = useMemo(
@@ -114,7 +116,9 @@ export const T20012026_01 = ({
       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"),
@@ -158,29 +162,33 @@ export const T20012026_01 = ({
         volume={musicVolume}
       />
 
-
       {/* ================= SCENE 1 ================= */}
-      <Sequence from={0} durationInFrames={framesPerPage + 2}>
-        <>
-          <Img
-            src={staticFile("video-images/20012026-bg.png")}
-            style={{ position: "absolute", width: "100%", height: "100%", objectFit: "cover" }}
-          />
+      <Sequence from={0} durationInFrames={scene1Duration}>
+        <Page bg={backgrounds[0]}>
           <F20012026_01
             firstName={firstName}
             secondName={secondName}
             welcomeMessage={welcomeMessage}
           />
-        </>
+        </Page>
+      </Sequence>
+
+      {/* ☁️ TRANSITION 1 */}
+      <Sequence
+        from={scene1Duration}
+        durationInFrames={transitionDuration}
+      >
+        <Page bg={backgrounds[0]}>
+          <InkSmokeTransition20012026 />
+        </Page>
       </Sequence>
 
       {/* ================= SCENE 2 ================= */}
-      <Sequence from={framesPerPage - 2} durationInFrames={framesPerPage + 2}>
-        <>
-          <Img
-            src={staticFile("video-images/20012026-bg.png")}
-            style={{ position: "absolute", width: "100%", height: "100%", objectFit: "cover" }}
-          />
+      <Sequence
+        from={scene1Duration + transitionDuration}
+        durationInFrames={scene2Duration}
+      >
+        <Page bg={backgrounds[0]}>
           <F20012026_02
             firstName={firstName}
             secondName={secondName}
@@ -190,43 +198,36 @@ export const T20012026_01 = ({
             occasionDate={occasionDate}
             fadeInDuration={transitionDuration}
           />
-        </>
+        </Page>
       </Sequence>
 
-      {/* ☁️ TRANSITION 1 → 2 */}
+      {/* ☁️ TRANSITION 2 */}
       <Sequence
-        from={framesPerPage - 2}
-        durationInFrames={transitionDuration + 2}
+        from={scene1Duration + transitionDuration + scene2Duration}
+        durationInFrames={transitionDuration}
       >
-        <InkSmokeTransition20012026 />
+        <Page bg={backgrounds[0]}>
+          <InkSmokeTransition20012026 />
+        </Page>
       </Sequence>
 
       {/* ================= SCENE 3 ================= */}
-      <Sequence from={framesPerPage * 2 - 2} durationInFrames={framesPerPage + 2}>
-        <>
-          <Img
-            src={staticFile("video-images/20012026-bg.png")}
-            style={{ position: "absolute", width: "100%", height: "100%", objectFit: "cover" }}
-          />
+      <Sequence
+        from={scene1Duration + transitionDuration + scene2Duration + transitionDuration}
+        durationInFrames={scene3Duration}
+      >
+        <Page bg={backgrounds[0]}>
           <F20012026_03
             eventDateTime={eventDateTime}
             venueName={venueName}
             venueAddress={venueAddress}
             familyMember={familyMember}
           />
-        </>
-      </Sequence>
-
-      {/* ☁️ TRANSITION 2 → 3 */}
-      <Sequence
-        from={framesPerPage * 2 - 2}
-        durationInFrames={transitionDuration + 2}
-      >
-        <InkSmokeTransition20012026 />
+        </Page>
       </Sequence>
 
     </AbsoluteFill>
   );
 };
 
-T20012026_01.duration = 30 * 30;
+T20012026_01.duration = 24 * 30;

package/src/Invitations/Themes/T28012026_01.jsx

@@ -36,14 +36,15 @@ export const T28012026_01 = ({
   const fadeOutStart = durationInFrames - fadeDuration;
   const musicVolume = interpolate(
     frame,
-    [0, fadeOutStart, durationInFrames],
-    [0.4, 0.4, 0],
+    [0, fps, fadeOutStart, durationInFrames],
+    [0, 0.4, 0.4, 0],
     {
       easing: Easing.inOut(Easing.ease),
       extrapolateLeft: "clamp",
       extrapolateRight: "clamp",
     }
   );
+
   const firstSceneDuration = fps * 5;
   const otherSceneDuration = fps * 8;
 
@@ -238,4 +239,4 @@ export const T28012026_01 = ({
   );
 }
 
-T28012026_01.duration = 30 * 37;
+T28012026_01.duration = 24 * 37;

package/src/compositions.jsx

@@ -11,32 +11,32 @@ export const VideoCompositions = () => {
       <Composition
         id="T20012026-01"
         component={T20012026_01}
-        fps={30}
-        durationInFrames={30 * 30}
+        fps={24}
+        durationInFrames={24 * 30}
         width={1080}
         height={1920}
       />
        <Composition
         id="T28012026-01"
         component={T28012026_01}
-        fps={30}
-        durationInFrames={30 * 37}
+        fps={24}
+        durationInFrames={24 * 37}
         width={1080}
         height={1920}
       />
       <Composition
         id="T03022026-01"
         component={T03022026_01}
-        fps={30}
-        durationInFrames={30 * 38}
+        fps={24}
+        durationInFrames={24 * 38}
         width={1080}
         height={1920}
       />
       <Composition
         id="T05022026-01"
         component={T05022026_01}
-        fps={30}
-        durationInFrames={30 * 38}
+        fps={24}
+        durationInFrames={24 * 30}
         width={1080}
         height={1920}
       />