@evatril/video-templates 2.0.11 → 2.0.12

package/package.json

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

package/src/Invitations/Elements/SideTrees20012026.jsx

@@ -42,7 +42,7 @@ export const SideTrees20012026 = ({ startAfter = 1 }) => {
   const rightTreeX = interpolate(
     frame,
     [delay, delay + duration],
-    [600, 400],
+    [600, 200],
     {
       extrapolateLeft: "clamp",
       extrapolateRight: "clamp",
@@ -75,12 +75,12 @@ export const SideTrees20012026 = ({ startAfter = 1 }) => {
 
       {/* 🌳 RIGHT TREE */}
       <Img
-        src={staticFile("video-images/20012026-tree-right2.webp")}
+        src={staticFile("video-images/20012026-tree-right1.png")}
         style={{
           position: "absolute",
           right: 0,
           bottom: "-25%",
-          height: "100%",
+          height: "80%",
           opacity,
           transform: `
             translateX(${rightTreeX - leafSway}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={{
@@ -70,18 +113,38 @@ export const F20012026_02 = ({
         src={staticFile("video-images/20012026-curtain-floral3.webp")}
         style={{
           position: "absolute",
-          top:"-12%",
+          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
@@ -128,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
@@ -156,7 +219,7 @@ export const F20012026_02 = ({
             ...SmoothRevealFromTop20012026({ frame, startFrame: DETAILS_START, delay: 95 }),
           }}
         >
-          {secondName}  
+          {secondName}
         </h1>
 
         <div
@@ -164,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
@@ -180,7 +243,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

@@ -264,3 +264,4 @@ export const F20012026_03 = ({
     </AbsoluteFill>
   );
 };
+ 

package/src/Invitations/Frames/F20012026_04.jsx

@@ -280,3 +280,4 @@ export const F20012026_04 = ({
     </AbsoluteFill>
   );
 };
+ 

package/src/Invitations/Themes/T03022026_01.jsx

@@ -267,4 +267,4 @@ export const T03022026_01 = ({
     );
 };
 
-T03022026_01.duration = 24 * 38;
+T03022026_01.duration = 30 * 38;

package/src/Invitations/Themes/T05022026_01.jsx

@@ -256,4 +256,4 @@ export const T05022026_01 = ({
     );
 };
 
-T05022026_01.duration = 24 * 30;
+T05022026_01.duration = 30 * 30;

package/src/Invitations/Themes/T20012026_01.jsx

@@ -140,7 +140,7 @@ export const T20012026_01 = ({
           inset: 0,
           width: "100%",
           height: "100%",
-          objectFit: "cover",
+          objectFit: "cover", 
         }}
       />
       {children}
@@ -150,7 +150,7 @@ export const T20012026_01 = ({
   const backgrounds = useMemo(
     () => [
       staticFile("video-images/20012026-bg.webp"),
-      staticFile("video-images/20012026-bg-2.webp"),
+      staticFile("video-images/20012026-bg-3.png"),
     ],
     []
   );
@@ -257,4 +257,4 @@ export const T20012026_01 = ({
   );
 };
 
-T20012026_01.duration = 24 * 40;
+T20012026_01.duration = 30 * 40;

package/src/Invitations/Themes/T28012026_01.jsx

@@ -239,4 +239,4 @@ export const T28012026_01 = ({
   );
 }
 
-T28012026_01.duration = 24 * 37;
+T28012026_01.duration = 30 * 37;

package/src/compositions.jsx

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