@evatril/video-templates 2.0.11 → 2.0.14

package/package.json

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

package/src/Invitations/Elements/BlowingLeaves28012026.jsx

@@ -1,12 +1,12 @@
 import React, { useMemo } from "react";
-import { useCurrentFrame, useVideoConfig, interpolate, Img, staticFile } from "remotion";
+import { useCurrentFrame, useVideoConfig, interpolate, Img } from "remotion";
 
 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");
+  const leafSrc = "https://evatril-images.s3.ap-south-1.amazonaws.com/video-themes/hindu-wedding-1/v1/28012026-PinkLeaf.webp"
 
   // 🍃 Generate leaves once (ULTRA SLOW SETTINGS)
   const leaves = useMemo(() => {

package/src/Invitations/Elements/BottomSideFrames20012026.jsx

@@ -0,0 +1,122 @@
+import React from "react";
+import {
+    AbsoluteFill,
+    useCurrentFrame,
+    useVideoConfig,
+    interpolate,
+    Easing,
+    Img,
+} from "remotion";
+
+export const BottomSideFrames = ({ firstPhoto, secondPhoto }) => {
+    const frame = useCurrentFrame();
+    const { fps } = useVideoConfig();
+
+    const frameStart = fps * 1;
+
+    const leftAnim = interpolate(
+        frame,
+        [frameStart, frameStart + 20],
+        [-120, 0],
+        { extrapolateRight: "clamp" }
+    );
+
+    const rightAnim = interpolate(
+        frame,
+        [frameStart, frameStart + 20],
+        [120, 0],
+        { extrapolateRight: "clamp" }
+    );
+
+    const opacity = interpolate(
+        frame,
+        [frameStart, frameStart + 10],
+        [0, 1],
+        { extrapolateRight: "clamp" }
+    );
+
+    return (
+        <AbsoluteFill pointerEvents="none">
+
+            {/* Left frame with photo */}
+            <div
+                style={{
+                    position: "absolute",
+                    bottom: 0,
+                    left: -150,
+                    width: 780,
+                    transform: `translateX(${leftAnim}px)`,
+                    opacity,
+                    zIndex: 50,
+                }}
+            >
+                {/* FRAME */}
+                <Img
+                    src="https://evatril-images.s3.ap-south-1.amazonaws.com/video-themes/hindu-wedding-1/v1/20012026-LeftFrame.webp"
+                    style={{
+                        width: "100%",
+                        height: "auto",
+                        objectFit: "contain",
+                    }}
+                />
+
+                {/* PHOTO */}
+                {firstPhoto && (
+                    <Img
+                        src={firstPhoto}
+                        style={{
+                            position: "absolute",
+                            top: "17%",
+                            left: "28%",
+                            width: "43%",
+                            height: "38%",
+                            objectFit: "cover",
+                            borderRadius: "50%",
+                        }}
+                    />
+                )}
+            </div>
+
+            {/* Right frame with photo */}
+            <div
+                style={{
+                    position: "absolute",
+                    bottom: 0,
+                    right: -150,
+                    width: 780,
+                    transform: `translateX(${rightAnim}px)`,
+                    opacity,
+                    zIndex: 50,
+                }}
+            >
+                {/* FRAME */}
+                <Img
+                    src="https://evatril-images.s3.ap-south-1.amazonaws.com/video-themes/hindu-wedding-1/v1/20012026-RightFrame.webp"
+                    style={{
+                        width: "100%",
+                        height: "auto",
+                        objectFit: "contain",
+                    }}
+                />
+
+                {/* PHOTO */}
+                {secondPhoto && (
+                    <Img
+                        src={secondPhoto}
+                        style={{
+                            position: "absolute",
+                            top: "17%",
+                            left: "29%",
+                            width: "43%",
+                            height: "38%",
+                            objectFit: "cover",
+                            borderRadius: "50%",
+                        }}
+                    />
+                )}
+            </div>
+
+        </AbsoluteFill>
+    );
+};
+

package/src/Invitations/Elements/Butterflies20012026.jsx

@@ -1,8 +1,8 @@
 import React from "react";
-import { Img, interpolate, staticFile } from "remotion";
+import { Img, interpolate } from "remotion";
 
 export const Butterflies20012026 = ({ frame, fps, width, height }) => {
-  const GLOBAL_DELAY = fps * 2;
+  const GLOBAL_DELAY = fps * 0.5;
   const butterflies = [
     { 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 },
@@ -46,10 +46,10 @@ export const Butterflies20012026 = ({ frame, fps, width, height }) => {
         return (
           <Img
             key={i}
-            src={staticFile("video-images/20012026-butterfly.webp")}
+            src="https://evatril-images.s3.ap-south-1.amazonaws.com/video-themes/hindu-wedding-1/v1/20012026-butterfly.webp"
             style={{
               position: "absolute",
-              left: x,
+              left: x, 
               top: y,
               width: 120,
               height: 120,

package/src/Invitations/Elements/CoupleWalk20012026.jsx

@@ -1,7 +1,6 @@
 import React from "react";
 import {
   Img,
-  staticFile,
   useCurrentFrame,
   useVideoConfig,
   interpolate,
@@ -14,7 +13,7 @@ export const CoupleWalk20012026 = () => {
  
   /* -----------------------------⏳ WALK SETTINGS  ------------------------------*/
   const delaySeconds = 0;
-  const walkDurationSeconds = 5;
+  const walkDurationSeconds = 4;
   const delayFrames = fps * delaySeconds;
   const walkFrames = fps * walkDurationSeconds;
   const localFrame = frame - delayFrames;
@@ -56,7 +55,7 @@ export const CoupleWalk20012026 = () => {
 
       {/* 👰🤵 COUPLE (BOTTOM-CENTER) */}
       <Img
-        src={staticFile("video-images/20012026-couple-walk.webp")}
+        src="https://evatril-images.s3.ap-south-1.amazonaws.com/video-themes/hindu-wedding-1/v1/20012026-couple-walk.webp"
         style={{
           position: "absolute",
           left: "50%",

package/src/Invitations/Elements/CurtainTransition20012026.jsx

@@ -0,0 +1,79 @@
+import React from "react";
+import {
+    AbsoluteFill,
+    useCurrentFrame,
+    useVideoConfig,
+    interpolate,
+    Easing,
+    Img,
+} from "remotion";
+
+export const CurtainTransition20012026 = ({ mode }) => {
+    const frame = useCurrentFrame();
+    const { durationInFrames } = useVideoConfig();
+    const { width } = useVideoConfig();
+
+    const progress = interpolate(
+        frame,
+        [0, durationInFrames],
+        [0, 1],
+        {
+            easing: Easing.inOut(Easing.ease),
+            extrapolateRight: "clamp",
+        }
+    );
+
+    const leftX =
+        mode === "close"
+            ? interpolate(frame, [0, durationInFrames], [-width / 2, 0], {
+                easing: Easing.inOut(Easing.ease),
+                extrapolateRight: "clamp",
+            })
+            : interpolate(frame, [0, durationInFrames], [0, -width / 2], {
+                easing: Easing.inOut(Easing.ease),
+                extrapolateRight: "clamp",
+            });
+
+    const rightX =
+        mode === "close"
+            ? interpolate(frame, [0, durationInFrames], [width / 2, 0], {
+                easing: Easing.inOut(Easing.ease),
+                extrapolateRight: "clamp",
+            })
+            : interpolate(frame, [0, durationInFrames], [0, width / 2], {
+                easing: Easing.inOut(Easing.ease),
+                extrapolateRight: "clamp",
+            });
+
+    return (
+        <AbsoluteFill style={{ zIndex: 999 }}>
+            <Img
+                src="https://evatril-images.s3.ap-south-1.amazonaws.com/video-themes/hindu-wedding-1/v1/20012026-Curtain.webp"
+                style={{
+                    position: "absolute",
+                    left: 0,
+                    top: 0,
+                    width: "50%",
+                    height: "120%",
+                    objectFit: "cover",
+                    transformOrigin: "top",
+                    transform: `translateX(${leftX}px)`,
+                }}
+            />
+            <Img
+                src="https://evatril-images.s3.ap-south-1.amazonaws.com/video-themes/hindu-wedding-1/v1/20012026-Curtain.webp"
+                style={{
+                    position: "absolute",
+                    right: 0,
+                    top: 0,
+                    width: "50%",
+                    height: "120%",
+                    objectFit: "cover",
+                    transformOrigin: "top",
+                    transform: `translateX(${rightX}px) scaleX(-1)`,
+                }}
+            />
+        </AbsoluteFill>
+    );
+};
+

package/src/Invitations/Elements/DucksFrame05022026.jsx

@@ -1,7 +1,6 @@
 import React from "react";
 import {
   Img,
-  staticFile,
   useCurrentFrame,
   useVideoConfig,
   interpolate,
@@ -24,7 +23,7 @@ export const DucksFrame05022026 = () => {
 
   return (
     <Img
-      src={staticFile("video-images/05022026-Duck.webp")}
+      src="https://evatril-images.s3.ap-south-1.amazonaws.com/video-themes/hindu-wedding-1/v1/05022026-Duck.webp"
       style={{
         position: "absolute",
         bottom: "-5%",

package/src/Invitations/Elements/{FloatingFlowersBottom.jsx → FloatingFlowersBottom05022026.jsx}

@@ -5,7 +5,6 @@ import {
     useCurrentFrame,
     useVideoConfig,
     interpolate,
-    staticFile,
 } from "remotion";
 
 const Flower = ({ side = "left", delay = 0, xOffset = 0, yOffset = 0 }) => {
@@ -25,7 +24,7 @@ const Flower = ({ side = "left", delay = 0, xOffset = 0, yOffset = 0 }) => {
 
     return (
         <Img
-            src={staticFile("video-images/05022026-Flower.webp")}
+            src="https://evatril-images.s3.ap-south-1.amazonaws.com/video-themes/hindu-wedding-1/v1/05022026-Flower.webp"
             style={{
                 position: "absolute",
                 top,
@@ -38,7 +37,7 @@ const Flower = ({ side = "left", delay = 0, xOffset = 0, yOffset = 0 }) => {
     );
 };
 
-export const FloatingFlowersBottom = () => {
+export const FloatingFlowersBottom05022026 = () => {
     return (
         <AbsoluteFill>
             {/* LEFT */}

package/src/Invitations/Elements/FlowerReveal_TR_BL_28012026.jsx

@@ -1,7 +1,6 @@
 import React from "react";
 import {
   Img,
-  staticFile,
   useCurrentFrame,
   useVideoConfig,
   interpolate,
@@ -76,7 +75,7 @@ const scale = interpolate(
     <>
       {/* 🌸 TOP RIGHT */}
       <Img
-        src={staticFile("video-images/28012026-TopRightFlower.webp")}
+        src="https://evatril-images.s3.ap-south-1.amazonaws.com/video-themes/hindu-wedding-1/v1/28012026-TopRightFlower.webp"
         style={{
           position: "absolute",
           top: "-130px",
@@ -95,7 +94,7 @@ const scale = interpolate(
 
       {/* 🌸 BOTTOM LEFT */}
       <Img
-        src={staticFile("video-images/28012026-BottomLeftFlower.webp")}
+        src="https://evatril-images.s3.ap-south-1.amazonaws.com/video-themes/hindu-wedding-1/v1/28012026-BottomLeftFlower.webp"
         style={{
           position: "absolute",
           bottom: "-250px",

package/src/Invitations/Elements/FlowersSide20012026.jsx

@@ -1,76 +1,18 @@
 import React from "react";
 import {
   Img,
-  staticFile,
   useCurrentFrame,
   useVideoConfig,
   interpolate,
   Easing,
 } from "remotion";
 
-/* 🌸 FALLING EMOJI FLOWER – MULTI LINE */
-const FallingEmojiFlower = ({ index, row = 0, startAfter = 0 }) => {
-  const frame = useCurrentFrame();
-  const { height, width, fps } = useVideoConfig();
-
-  const delayFrames = fps * startAfter;
-
-  /* 🌸 CENTER STRIP */
-  const stripWidth = width * 0.28;
-  const baseX =
-    width / 2 - stripWidth / 2 + ((index * 50) % stripWidth);
-
-  /* 🌸 ROW OFFSET */
-  const rowOffsetY = row * 60;
-
-  const individualDelay = index * 10 + row * 15;
-  const duration = fps * 4;
-
-  const localFrame = frame - delayFrames - individualDelay;
-
-  const progress = interpolate(localFrame, [0, duration], [0, 1], {
-    extrapolateLeft: "clamp",
-    extrapolateRight: "clamp",
-  });
-
-  const translateY = interpolate(
-    progress,
-    [0, 1],
-    [-80 + rowOffsetY, height + 80]
-  );
-
-  const sway =
-    progress < 1
-      ? Math.sin(localFrame / 15) * 14
-      : 0;
-
-  const rotate = progress * 360;
-
-  if (localFrame < 0 || localFrame > duration) return null;
-
-  return (
-    <Img
-      src={staticFile("video-images/05022026-Flower.webp")}
-      style={{
-        position: "absolute",
-        left: baseX,
-        top: translateY,
-        width: "10%",
-        opacity: 0.9,
-        transform: `translateX(${sway}px) rotate(${rotate}deg)`,
-        pointerEvents: "none",
-        userSelect: "none",
-      }}
-    />
-  );
-};
-
 export const FlowersSide20012026 = ({ startAfter = 1 }) => {
   const frame = useCurrentFrame();
   const { fps } = useVideoConfig();
 
   const delayFrames = fps * startAfter;
-  const revealDuration = fps * 2.5; // ⏱ 2 seconds
+  const revealDuration = fps * 2.5; 
 
   const revealProgress = interpolate(
     frame - delayFrames,
@@ -85,20 +27,9 @@ export const FlowersSide20012026 = ({ startAfter = 1 }) => {
 
   return (
     <>
-      {/* 🌸 ONE-TIME FLOWER FALL (AFTER 2s) */}
-      {[0, 1, 2].map((row) =>
-        Array.from({ length: 5 }).map((_, i) => (
-          <FallingEmojiFlower
-            key={`row-${row}-${i}`}
-            index={i}
-            row={row}
-            startAfter={6}
-          />
-        ))
-      )}
       {/* 🌸 LEFT FLOWER DECOR */}
       <Img
-        src={staticFile("video-images/20012026-floral-left.webp")}
+        src="https://evatril-images.s3.ap-south-1.amazonaws.com/video-themes/hindu-wedding-1/v1/20012026-floral-left.webp"
         style={{
           position: "absolute",
           left: 0,
@@ -114,7 +45,7 @@ export const FlowersSide20012026 = ({ startAfter = 1 }) => {
       />
       {/* 🌸 RIGHT FLOWER DECOR */}
       <Img
-        src={staticFile("video-images/20012026-floral-right.webp")}
+        src="https://evatril-images.s3.ap-south-1.amazonaws.com/video-themes/hindu-wedding-1/v1/20012026-floral-right.webp"
         style={{
           position: "absolute",
           right: 0,

package/src/Invitations/Elements/GaneshBorder28012026.jsx

@@ -1,7 +1,6 @@
 import React from "react";
 import {
   Img,
-  staticFile,
   useCurrentFrame,
   useVideoConfig,
   interpolate,
@@ -44,7 +43,6 @@ const borderProgress = interpolate(
   const ganeshOpacity = ganeshProgress;
 
   /* 🌿 Gentle border rotation */
- // const rotate = Math.max(0, frame - delayFrames) * 0.20;
  const rotate = frame * 0.15;
   return (
     <div
@@ -61,7 +59,7 @@ const borderProgress = interpolate(
       <div style={{ width: "100%", position: "relative" }}>
         {/* 🌸 BORDER */}
         <Img
-          src={staticFile("video-images/28012026-FlowerBorder.webp")}
+          src="https://evatril-images.s3.ap-south-1.amazonaws.com/video-themes/hindu-wedding-1/v1/28012026-FlowerBorder.webp"
           style={{
             width: "100%",
             transformOrigin: "50% 50%",
@@ -75,7 +73,7 @@ const borderProgress = interpolate(
 
         {/* 🕉 GANESH SMOOTH ENTRY */}
         <Img
-          src={staticFile("video-images/28012026-Ganesh.webp")}
+          src="https://evatril-images.s3.ap-south-1.amazonaws.com/video-themes/hindu-wedding-1/v1/28012026-Ganesh.webp"
           style={{
             position: "absolute",
             left: "53%",

package/src/Invitations/Elements/GroomBrideLoveScene20012026.jsx

@@ -1,14 +1,13 @@
 import React from "react";
 import {
   Img,
-  staticFile,
   useCurrentFrame,
   useVideoConfig,
   interpolate,
   Easing,
 } from "remotion";
 
-export const GroomBrideLoveScene20012026 = ({ startAfter = 3.5 }) => {
+export const GroomBrideLoveScene20012026 = ({ startAfter = 2 }) => {
   const frame = useCurrentFrame();
   const { fps, width } = useVideoConfig();
 
@@ -41,7 +40,7 @@ export const GroomBrideLoveScene20012026 = ({ startAfter = 3.5 }) => {
   );
 
   /* ---------------- POSITIONS ---------------- */
-  const brideX = width - 390; // 👰 fixed right
+  const brideX = width - 380; // 👰 fixed right
   const groomStartX = -140;   // 🤵 visible at left initially
   const groomEndX = brideX - 260;
 
@@ -80,7 +79,7 @@ export const GroomBrideLoveScene20012026 = ({ startAfter = 3.5 }) => {
     <>
       {/* 🤵 GROOM (SHOW → PAUSE → WALK) */}
       <Img
-        src={staticFile("video-images/20012026-groom.webp")}
+        src="https://evatril-images.s3.ap-south-1.amazonaws.com/video-themes/hindu-wedding-1/v1/20012026-groom.webp"
         style={{
           position: "absolute",
           bottom: 0,
@@ -98,10 +97,10 @@ export const GroomBrideLoveScene20012026 = ({ startAfter = 3.5 }) => {
 
       {/* 👰 BRIDE (FIXED, SHOWS SAME TIME) */}
       <Img
-        src={staticFile("video-images/20012026-bride.webp")}
+        src="https://evatril-images.s3.ap-south-1.amazonaws.com/video-themes/hindu-wedding-1/v1/20012026-bride.webp"
         style={{
           position: "absolute",
-          bottom: 0,
+          bottom:0,
           width: "40%",
           opacity,
           transform: `
@@ -141,7 +140,7 @@ export const GroomBrideLoveScene20012026 = ({ startAfter = 3.5 }) => {
           return (
             <Img
               key={i}
-              src={staticFile("video-images/28012026-Heart.webp")}
+              src="https://evatril-images.s3.ap-south-1.amazonaws.com/video-themes/hindu-wedding-1/v1/28012026-Heart.webp"
               style={{
                 position: "absolute",
                 bottom: "30%",

package/src/Invitations/Elements/HangingJumar05022026.jsx

@@ -1,7 +1,6 @@
 import React from "react";
 import {
   Img,
-  staticFile,
   useCurrentFrame,
 } from "remotion";
 
@@ -19,7 +18,7 @@ export const HangingJumar05022026 = ({
 
   return (
     <Img
-      src={staticFile("video-images/05022026-HangingJumar.webp")}
+      src="https://evatril-images.s3.ap-south-1.amazonaws.com/video-themes/hindu-wedding-1/v1/05022026-HangingJumar.webp"
       style={{
         position: "absolute",
         top: 0,

package/src/Invitations/Elements/HangingLamp05022026.jsx

@@ -1,7 +1,6 @@
 import React from "react";
 import {
   Img,
-  staticFile,
   useCurrentFrame,
 } from "remotion";
 
@@ -19,7 +18,7 @@ export const HangingLamp05022026 = ({
 
   return (
     <Img
-      src={staticFile("video-images/05022026-HangingLamps.webp")}
+      src="https://evatril-images.s3.ap-south-1.amazonaws.com/video-themes/hindu-wedding-1/v1/05022026-HangingLamps.webp"
       style={{
         position: "absolute",
         top: 0,

package/src/Invitations/Elements/HeartFlight28012026.jsx

@@ -1,78 +1,3 @@
-// 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,
@@ -80,12 +5,10 @@ import {
   interpolate,
   Easing,
   Img,
-  staticFile,
 } from "remotion";
 
 export const HeartFlight28012026 = ({
   startAfter = 3,
-  heartImage = "heart.png", // image file name from public folder
 }) => {
   const frame = useCurrentFrame();
   const { fps, width, height } = useVideoConfig();
@@ -145,7 +68,7 @@ export const HeartFlight28012026 = ({
             }}
           >
             <Img
-              src={staticFile("video-images/28012026-Heart.webp")}
+              src="https://evatril-images.s3.ap-south-1.amazonaws.com/video-themes/hindu-wedding-1/v1/28012026-Heart.webp"
               style={{
                 width: 70,
                 height: 70,