@evatril/video-templates 2.0.9 → 2.0.11

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@evatril/video-templates",
-  "version": "2.0.9",
+  "version": "2.0.11",
   "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/FlowerReveal_TL_BR_28012026.jsx

@@ -1,7 +1,6 @@
 import React from "react";
 import {
   Img,
-  staticFile,
   useCurrentFrame,
   useVideoConfig,
   interpolate,
@@ -74,7 +73,7 @@ export const FlowerReveal_TL_BR_28012026 = ({ startAfter = 0 }) => {
     <>
       {/* 🌸 TOP LEFT */}
       <Img
-        src={staticFile("video-images/28012026-TopLeftFlower.webp")}
+        src="https://evatril-images.s3.ap-south-1.amazonaws.com/video-themes/hindu-wedding-1/v1/28012026-TopLeftFlower.webp"
         style={{
           position: "absolute",
           top: "-170px",
@@ -93,7 +92,7 @@ export const FlowerReveal_TL_BR_28012026 = ({ startAfter = 0 }) => {
 
       {/* 🌸 BOTTOM RIGHT */}
       <Img
-        src={staticFile("video-images/28012026-BottomRightFlower.webp")}
+        src="https://evatril-images.s3.ap-south-1.amazonaws.com/video-themes/hindu-wedding-1/v1/28012026-BottomRightFlower.webp"
         style={{
           position: "absolute",
           bottom: "-300px",

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%",