@evatril/video-templates 2.0.10 → 2.0.12

package/package.json

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

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/SideTrees20012026.jsx

@@ -31,7 +31,7 @@ export const SideTrees20012026 = ({ startAfter = 1 }) => {
   const leftTreeX = interpolate(
     frame,
     [delay, delay + duration],
-    [-600, -380], // hidden → edge
+    [-600, -370],
     {
       extrapolateLeft: "clamp",
       extrapolateRight: "clamp",
@@ -42,7 +42,7 @@ export const SideTrees20012026 = ({ startAfter = 1 }) => {
   const rightTreeX = interpolate(
     frame,
     [delay, delay + duration],
-    [600, 380], // hidden → edge
+    [600, 200],
     {
       extrapolateLeft: "clamp",
       extrapolateRight: "clamp",
@@ -50,53 +50,41 @@ export const SideTrees20012026 = ({ startAfter = 1 }) => {
     }
   );
 
-  /* ---------------- 🌬️ TREE SWING (WIND) ---------------- */
-  const swingSpeed = 20; // higher = slower swing
-  const swingAngle = 2;  // degrees (keep small)
-
-  const swing =
+  /* ---------------- 🍃 LEAF SWAY ONLY ---------------- */
+  const leafSway =
     frame > delay
-      ? Math.sin((frame - delay) / swingSpeed) * swingAngle
-      : 0;
-
-  const swayX =
-    frame > delay
-      ? Math.sin((frame - delay) / (swingSpeed * 1.3)) * 6
+      ? Math.sin((frame - delay) / 28) * 8   // adjust 8 for more/less sway
       : 0;
 
   return (
     <>
       {/* 🌳 LEFT TREE */}
       <Img
-        src={staticFile("video-images/20012026-tree-left.webp")}
+        src={staticFile("video-images/20012026-tree-left1.webp")}
         style={{
           position: "absolute",
           left: 0,
           bottom: 0,
-          height: "100%",
+          width: "100%",
           opacity,
           transform: `
-            translateX(${leftTreeX + swayX}px)
-            rotate(${swing}deg)
+            translateX(${leftTreeX + leafSway}px)
           `,
-          transformOrigin: "bottom left", // 🌳 root fixed
         }}
       />
 
       {/* 🌳 RIGHT TREE */}
       <Img
-        src={staticFile("video-images/20012026-tree-right.webp")}
+        src={staticFile("video-images/20012026-tree-right1.png")}
         style={{
           position: "absolute",
           right: 0,
-          bottom: 0,
-          height: "100%",
+          bottom: "-25%",
+          height: "80%",
           opacity,
           transform: `
-            translateX(${rightTreeX - swayX}px)
-            rotate(${-swing}deg)
+            translateX(${rightTreeX - leafSway}px)
           `,
-          transformOrigin: "bottom right", // 🌳 root fixed
         }}
       />
     </>

package/src/Invitations/Frames/F03022026_01.jsx

@@ -2,7 +2,6 @@ import React from "react";
 import {
   AbsoluteFill,
   Img,
-  staticFile,
   useCurrentFrame,
   useVideoConfig,
   interpolate,
@@ -64,7 +63,7 @@ export const F03022026_01 = () => {
   // Scene timing
   const sceneDuration = fps * 5;
 
-  // Exit starts near end
+  // Exit starts near end 
   const exitStart = sceneDuration - fps * 1;
 
   // Wedding exit
@@ -151,7 +150,7 @@ export const F03022026_01 = () => {
         }}
       >
         <Img
-          src={staticFile("video-images/03022026-krishnaradha.webp")}
+          src="https://evatril-images.s3.ap-south-1.amazonaws.com/video-themes/hindu-wedding-1/v1/03022026-krishnaradha.webp"
           style={{
             position: "absolute",
             top: "40%",
@@ -211,4 +210,4 @@ export const F03022026_01 = () => {
 
     </AbsoluteFill>
   );
-};
+};

package/src/Invitations/Frames/F03022026_02.jsx

@@ -6,7 +6,6 @@ import {
     useVideoConfig,
     interpolate,
     Easing,
-    staticFile,
 } from "remotion";
 import { WordReveal28012026 } from "../Elements/WordReveal28012026";
 
@@ -153,7 +152,6 @@ export const F03022026_02 = ({
                 overflow: "hidden",
             }}
         >
-
             <div
                 style={{
                     position: "absolute",
@@ -164,7 +162,7 @@ export const F03022026_02 = ({
                 }}
             >
                 <Img
-                    src={staticFile("video-images/03022026-krishnaradha-2.webp")}
+                    src="https://evatril-images.s3.ap-south-1.amazonaws.com/video-themes/hindu-wedding-1/v1/03022026-krishnaradha-2.webp"
                     style={{
                         position: "absolute",
                         bottom: "-15%",
@@ -202,7 +200,7 @@ export const F03022026_02 = ({
                         overflowWrap: "break-word",
                         lineHeight: "1.2",
                     }}
-                >
+                > 
                     <h1
                         style={{
                             fontFamily: "Dancing Script",

package/src/Invitations/Frames/F03022026_03.jsx

@@ -6,7 +6,6 @@ import {
   interpolate,
   Easing,
   Img,
-  staticFile,
 } from "remotion";
 
 export const F03022026_03 = ({
@@ -254,11 +253,11 @@ export const F03022026_03 = ({
 
       {secondPhoto && (
         <div
-          style={{
+          style={{ 
             position: "absolute",
             bottom: "10%",
             right: "8%",
-            width: 420,
+            width: 420, 
             height: 420,
             zIndex: 2,
             transform: `translateX(${secondPhotoX + exitRightX}px)`,

package/src/Invitations/Frames/F03022026_04.jsx

@@ -6,7 +6,6 @@ import {
   interpolate,
   Easing,
   Img,
-  staticFile,
 } from "remotion";
 
 export const F03022026_04 = ({
@@ -171,12 +170,12 @@ export const F03022026_04 = ({
       }}
     >
        <Img
-        src={staticFile("video-images/03022026-krishnaradha-41.webp")}
+        src="https://evatril-images.s3.ap-south-1.amazonaws.com/video-themes/hindu-wedding-1/v1/03022026-krishnaradha-4.webp"
         style={{
           position: "absolute",
           left: "50%",
           bottom: "-12%",
-          width: "80%",
+          width: "80%", 
           transform: `
             translate(-50%, ${translateY}px)
             translateX(${sway}px)

package/src/Invitations/Frames/F03022026_05.jsx

@@ -6,7 +6,6 @@ import {
   useVideoConfig,
   interpolate,
   Easing,
-  staticFile,
 } from "remotion";
 import { WordReveal28012026 } from "../Elements/WordReveal28012026";
 
@@ -159,7 +158,7 @@ export const F03022026_05 = ({
         }}
       >
         <Img
-          src={staticFile("video-images/03022026-krishnaradha-52.webp")}
+          src="https://evatril-images.s3.ap-south-1.amazonaws.com/video-themes/hindu-wedding-1/v1/03022026-krishnaradha-5.webp"
           style={{
             position: "absolute",
             top: "40%",
@@ -179,7 +178,7 @@ export const F03022026_05 = ({
           display: "flex",
           justifyContent: "center",
           alignItems: "center",
-          opacity: msgOpacity * msgExitOpacity,
+          opacity: msgOpacity * msgExitOpacity, 
           transform: `translateY(-20%) translateY(${msgY + msgExitY}px)`,
         }}
       >

package/src/Invitations/Frames/F20012026_01.jsx

@@ -78,7 +78,7 @@ export const F20012026_01 = ({
           easing: Easing.out(Easing.cubic),
         }
       ),
-
+ 
       translateY: interpolate(
         frame,
         [start, end],

package/src/Invitations/Frames/F20012026_02.jsx

@@ -58,6 +58,49 @@ export const F20012026_02 = ({
     { extrapolateRight: "clamp", easing: Easing.out(Easing.ease) }
   );
 
+  /* ================= PEACOCK ANIMATION ================= */
+
+  const peacockTranslateY = interpolate(
+    frame,
+    [showImageAfter, showImageAfter + fps],
+    [40, 0], // moves slightly upward while appearing
+    {
+      extrapolateRight: "clamp",
+      easing: Easing.out(Easing.ease),
+    }
+  );
+
+  /* ================= PEACOCK WALK ANIMATION ================= */
+
+  const walkStart = showImageAfter;
+  /* ================= PEACOCK HEAD + FEATHER SWING ================= */
+
+  // Head swing (faster small movement)
+  const headSwing = Math.sin(frame * 0.12) * 1;
+  // -4° to +4° rotation
+
+  // Feather sway (slow royal movement)
+  const featherSwing = Math.sin(frame * 0.06) * 6;
+  // -6px to +6px movement
+
+
+  // Small bounce for walking feel
+  const peacockBounce = interpolate(
+    frame,
+    [walkStart, walkStart + fps * 0.3, walkStart + fps * 0.6, walkStart + fps * 0.9],
+    [0, -6, 0, -6],
+    { extrapolateRight: "clamp" }
+  );
+
+  // Fade in same time as curtain
+  const peacockOpacity = interpolate(
+    frame,
+    [showImageAfter, showImageAfter + fps],
+    [0, 1],
+    { extrapolateRight: "clamp" }
+  );
+
+
   return (
     <AbsoluteFill
       style={{
@@ -67,20 +110,41 @@ export const F20012026_02 = ({
     >
       {/* Curtain */}
       <Img
-        src={staticFile("video-images/20012026-curtain-floral.webp")}
+        src={staticFile("video-images/20012026-curtain-floral3.webp")}
         style={{
           position: "absolute",
+          top: "-14%",
           left: "50%",
           width: "100%",
+          height: "100%",
           opacity: imageOpacity,
           transform: `translateX(-50%) scale(${imageScale})`,
           willChange: "transform, opacity",
         }}
       />
 
+      {/* Peacock */}
+      <Img
+        src={staticFile("video-images/20012026-peacock2.png")}
+        style={{
+          position: "absolute",
+          bottom: "8%",
+          width: "100%",
+          opacity: peacockOpacity,
+          transform: `
+      translateY(${peacockBounce}px)
+      translateX(${featherSwing}px)
+      rotate(${headSwing}deg)
+    `,
+          transformOrigin: "bottom center",
+          willChange: "transform, opacity",
+        }}
+      />
+
+
       {/* Decorations */}
-      <SideTrees20012026 startAfter={2} />
-      <PeacockDance20012026 startAfter={3} />
+      {/* <SideTrees20012026 startAfter={2} />
+      <PeacockDance20012026 startAfter={3} /> */}
 
       {/* Content */}
       <div
@@ -127,11 +191,11 @@ export const F20012026_02 = ({
             fontFamily: "Dancing Script",
             color: "#B87A6A",
             fontSize: 35,
-            maxWidth:"70%",
+            maxWidth: "70%",
             ...SmoothRevealFromTop20012026({ frame, startFrame: DETAILS_START, delay: 50 }),
           }}
         >
-          {firstSideNote} 
+          {firstSideNote}
         </div>
 
         <div
@@ -155,7 +219,7 @@ export const F20012026_02 = ({
             ...SmoothRevealFromTop20012026({ frame, startFrame: DETAILS_START, delay: 95 }),
           }}
         >
-          {secondName}  
+          {secondName}
         </h1>
 
         <div
@@ -163,11 +227,11 @@ export const F20012026_02 = ({
             fontFamily: "Dancing Script",
             color: "#B87A6A",
             fontSize: 35,
-            maxWidth:"70%",
+            maxWidth: "70%",
             ...SmoothRevealFromTop20012026({ frame, startFrame: DETAILS_START, delay: 120 }),
           }}
         >
-          {secondSideNote} 
+          {secondSideNote}
         </div>
 
         <div
@@ -179,7 +243,7 @@ export const F20012026_02 = ({
           <div
             style={{
               fontSize: 40,
-              fontWeight:"400", 
+              fontWeight: "400",
               fontFamily: "Great Vibes",
               color: "#2F6B4F",
             }}