@evatril/video-templates 2.0.7 → 2.0.9

package/package.json

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

package/src/Invitations/Elements/BlowingLeaves28012026.jsx

@@ -0,0 +1,68 @@
+import React, { useMemo } from "react";
+import { useCurrentFrame, useVideoConfig, interpolate } from "remotion";
+
+export const BlowingLeaves28012026 = ({ startAfter = 2, count = 30 }) => {
+  const frame = useCurrentFrame();
+  const { fps = 30 } = useVideoConfig();
+
+  const delayFrames = fps * startAfter;
+
+  // 🍃 Generate leaves once
+  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,
+      phase: Math.random() * 200,
+    }));
+  }, [count]);
+
+  return (
+    <>
+      {leaves.map((l, i) => {
+        const local = frame - delayFrames;
+
+        const appear = interpolate(local, [0, fps], [0, 1], {
+          extrapolateLeft: "clamp",
+          extrapolateRight: "clamp",
+        });
+
+        // Horizontal flow
+        const moveX = ((local * l.speedX + l.phase) % 120) - 10;
+
+        // Gentle vertical float
+        const moveY =
+          l.y +
+          Math.sin((local + l.phase) / 40) * 20 +
+          local * l.speedY;
+
+        // Rotation
+        const rotate = Math.sin((local + l.phase) / 30) * 25;
+
+        return (
+          <div
+            key={i}
+            style={{
+              position: "absolute",
+              left: `${moveX}%`,
+              top: `${moveY % 110}%`,
+              fontSize: l.size,
+              opacity: appear,
+              transform: `
+                translate(-50%, -50%)
+                rotate(${rotate}deg)
+              `,
+              pointerEvents: "none",
+            }}
+          >
+            🍁
+          </div>
+        );
+      })}
+    </>
+  );
+};

package/src/Invitations/Elements/Butterflies20012026.jsx

@@ -46,7 +46,7 @@ export const Butterflies20012026 = ({ frame, fps, width, height }) => {
         return (
           <Img
             key={i}
-            src={staticFile("video-images/20012026-butterfly.png")}
+            src={staticFile("video-images/20012026-butterfly.webp")}
             style={{
               position: "absolute",
               left: x,

package/src/Invitations/Elements/CornerFlipTransition05022026.jsx

@@ -0,0 +1,45 @@
+import React from "react";
+import {
+  AbsoluteFill,
+  interpolate,
+  useCurrentFrame,
+  Easing,
+} from "remotion";
+
+export const CornerFlipTransition = ({ children, duration }) => {
+  const frame = useCurrentFrame();
+
+  // Smooth cinematic progress
+  const p = interpolate(frame, [0, duration], [0, 1], {
+    easing: Easing.inOut(Easing.cubic),
+    extrapolateLeft: "clamp",
+    extrapolateRight: "clamp",
+  });
+
+  // Softer motion values
+  const rotateY = interpolate(p, [0, 1], [55, 0]);
+  const rotateX = interpolate(p, [0, 1], [10, 0]);
+  const move = interpolate(p, [0, 1], [160, 0]);
+  const opacity = interpolate(p, [0, 0.2, 1], [0, 1, 1]);
+  const shadow = interpolate(p, [0, 1], [0, 40]);
+
+  return (
+    <AbsoluteFill
+      style={{
+        opacity,
+        transformOrigin: "100% 100%",
+        transform: `
+          perspective(1600px)
+          rotateY(${rotateY}deg)
+          rotateX(${rotateX}deg)
+          translateX(${move}px)
+          translateY(${move}px)
+          scale(${0.95 + p * 0.05})
+        `,
+        boxShadow: `0 0 ${shadow}px rgba(0,0,0,${0.3 * p})`,
+      }}
+    >
+      {children}
+    </AbsoluteFill>
+  );
+};

package/src/Invitations/Elements/DucksFrame05022026.jsx

@@ -0,0 +1,38 @@
+import React from "react";
+import {
+  Img,
+  staticFile,
+  useCurrentFrame,
+  useVideoConfig,
+  interpolate,
+} from "remotion";
+
+export const DucksFrame05022026 = () => {
+  const frame = useCurrentFrame();
+  const { fps } = useVideoConfig();
+
+  // Horizontal swim
+  const swim = interpolate(frame, [0, fps * 8], [300, 0], {
+    extrapolateRight: "wrap",
+  });
+
+  // Water bob
+  const bob = Math.sin(frame / 12) * 6;
+
+  // Tiny tilt
+  const tilt = Math.sin(frame / 20) * 2;
+
+  return (
+    <Img
+      src={staticFile("video-images/05022026-Duck.webp")}
+      style={{
+        position: "absolute",
+        bottom: "-5%",
+        left: swim,
+        height: "55%",   // ✅ control by height
+        width: "auto", 
+        transform: `translateY(${bob}px) rotate(${tilt}deg)`,
+      }}
+    />
+  );
+};

package/src/Invitations/Elements/FloatingFlowersBottom.jsx

@@ -0,0 +1,70 @@
+import React from "react";
+import {
+    AbsoluteFill,
+    Img,
+    useCurrentFrame,
+    useVideoConfig,
+    interpolate,
+    staticFile,
+} from "remotion";
+
+const Flower = ({ side = "left", delay = 0, xOffset = 0, yOffset = 0 }) => {
+    const frame = useCurrentFrame();
+    const { height } = useVideoConfig();
+
+    const localFrame = Math.max(frame - delay, 0) % 240;
+
+    // Bottom → Top with Y offset
+    const top = interpolate(
+        localFrame,
+        [0, 240],
+        [height + 200 + yOffset, -200 + yOffset]
+    );
+
+    const swing = Math.sin(frame / 20) * 10;
+
+    return (
+        <Img
+            src={staticFile("video-images/05022026-Flower.webp")}
+            style={{
+                position: "absolute",
+                top,
+                width: 70,
+
+                left: side === "left" ? 20 + xOffset + swing : undefined,
+                right: side === "right" ? 20 + xOffset + swing : undefined,
+            }}
+        />
+    );
+};
+
+export const FloatingFlowersBottom = () => {
+    return (
+        <AbsoluteFill>
+            {/* LEFT */}
+            <Flower side="left" delay={0} xOffset={0} yOffset={0} />
+            <Flower side="left" delay={0} xOffset={50} yOffset={50} />
+            <Flower side="left" delay={40} xOffset={20} yOffset={0} />
+            <Flower side="left" delay={40} xOffset={70} yOffset={50} />
+            <Flower side="left" delay={80} xOffset={40} yOffset={0} />
+            <Flower side="left" delay={80} xOffset={90} yOffset={50} />
+            <Flower side="left" delay={120} xOffset={60} yOffset={0} />
+            <Flower side="left" delay={120} xOffset={110} yOffset={50} />
+            <Flower side="left" delay={160} xOffset={80} yOffset={0} />
+            <Flower side="left" delay={160} xOffset={130} yOffset={50} />
+
+            {/* RIGHT */}
+            <Flower side="right" delay={10} xOffset={0} yOffset={0} />
+            <Flower side="right" delay={10} xOffset={50} yOffset={50} />
+            <Flower side="right" delay={50} xOffset={20} yOffset={0} />
+            <Flower side="right" delay={50} xOffset={70} yOffset={50} />
+            <Flower side="right" delay={90} xOffset={40} yOffset={0} />
+            <Flower side="right" delay={90} xOffset={90} yOffset={50} />
+            <Flower side="right" delay={130} xOffset={60} yOffset={0} />
+            <Flower side="right" delay={130} xOffset={110} yOffset={50} />
+            <Flower side="right" delay={170} xOffset={80} yOffset={0} />
+            <Flower side="right" delay={170} xOffset={130} yOffset={50} />
+        </AbsoluteFill>
+    );
+};
+

package/src/Invitations/Elements/FlowerReveal_TL_BR_28012026.jsx

@@ -0,0 +1,114 @@
+import React from "react";
+import {
+  Img,
+  staticFile,
+  useCurrentFrame,
+  useVideoConfig,
+  interpolate,
+  Easing,
+} from "remotion";
+
+export const FlowerReveal_TL_BR_28012026 = ({ startAfter = 0 }) => {
+  const frame = useCurrentFrame();
+  const { fps } = useVideoConfig();
+
+  const delayFrames = fps * startAfter;
+  const bloomDuration = fps * 2.5; // 🌸 slower cinematic bloom
+  const localFrame = frame - delayFrames;
+
+  const progress = interpolate(localFrame, [0, bloomDuration], [0, 1], {
+    extrapolateRight: "clamp",
+    easing: Easing.out(Easing.cubic),
+  });
+
+  // 🌿 Opacity
+  const opacity = interpolate(localFrame, [0, bloomDuration * 0.5], [0, 1], {
+    extrapolateLeft: "clamp",
+    extrapolateRight: "clamp",
+  });
+
+  // 🌷 Scale
+  const scale = interpolate(localFrame, [0, bloomDuration], [0.6, 1], {
+    extrapolateLeft: "clamp",
+    extrapolateRight: "clamp",
+    easing: Easing.out(Easing.cubic),
+  });
+
+  // 🌺 Gentle settle
+  const settle = interpolate(
+    localFrame,
+    [bloomDuration * 0.7, bloomDuration],
+    [1.04, 1],
+    {
+      extrapolateRight: "clamp",
+    }
+  );
+
+  // 🍃 Slide in from corners
+  const slideTLX = interpolate(localFrame, [0, bloomDuration], [-180, 0], {
+    extrapolateRight: "clamp",
+    easing: Easing.out(Easing.cubic),
+  });
+
+  const slideTLY = interpolate(localFrame, [0, bloomDuration], [-180, 0], {
+    extrapolateRight: "clamp",
+    easing: Easing.out(Easing.cubic),
+  });
+
+  const slideBRX = interpolate(localFrame, [0, bloomDuration], [180, 0], {
+    extrapolateRight: "clamp",
+    easing: Easing.out(Easing.cubic),
+  });
+
+  const slideBRY = interpolate(localFrame, [0, bloomDuration], [180, 0], {
+    extrapolateRight: "clamp",
+    easing: Easing.out(Easing.cubic),
+  });
+
+  // 🌿 Organic sway
+  const swing = Math.sin(frame / 18) * 0.6;
+
+  const finalScale = scale * settle;
+
+  return (
+    <>
+      {/* 🌸 TOP LEFT */}
+      <Img
+        src={staticFile("video-images/28012026-TopLeftFlower.webp")}
+        style={{
+          position: "absolute",
+          top: "-170px",
+          left: "-50px",
+          width: "100%",
+          opacity,
+          transformOrigin: "top left",
+          transform: `
+            translate(${slideTLX}px, ${slideTLY}px)
+            scale(${finalScale})
+            rotate(${-swing}deg)
+          `,
+          pointerEvents: "none",
+        }}
+      />
+
+      {/* 🌸 BOTTOM RIGHT */}
+      <Img
+        src={staticFile("video-images/28012026-BottomRightFlower.webp")}
+        style={{
+          position: "absolute",
+          bottom: "-300px",
+          right: -10,
+          width: "100%",
+          opacity,
+          transformOrigin: "bottom right",
+          transform: `
+            translate(${slideBRX}px, ${slideBRY}px)
+            scale(${finalScale})
+            rotate(${swing}deg)
+          `,
+          pointerEvents: "none",
+        }}
+      />
+    </>
+  );
+};

package/src/Invitations/Elements/FlowerReveal_TR_BL_28012026.jsx

@@ -0,0 +1,116 @@
+import React from "react";
+import {
+  Img,
+  staticFile,
+  useCurrentFrame,
+  useVideoConfig,
+  interpolate,
+  Easing,
+} from "remotion";
+
+export const FlowerReveal_TR_BL_28012026 = () => {
+  const frame = useCurrentFrame();
+  const { fps } = useVideoConfig();
+
+  const bloomDuration = fps * 2.5;
+
+ // Main bloom progress
+const progress = interpolate(frame, [0, bloomDuration], [0, 1], {
+  extrapolateRight: "clamp",
+  easing: Easing.out(Easing.quad),
+});
+
+  // 🌿 Opacity
+  const opacity = interpolate(frame, [0, bloomDuration * 0.4], [0, 1], {
+    extrapolateRight: "clamp",
+  });
+
+  // Bloom scale (petal opening feel)
+const scale = interpolate(
+  frame,
+  [0, bloomDuration * 0.7, bloomDuration],
+  [0.4, 1.05, 1],
+  {
+    extrapolateRight: "clamp",
+    easing: Easing.out(Easing.cubic),
+  }
+);
+
+  // 🌺 Soft settle
+  const settle = interpolate(
+    frame,
+    [bloomDuration * 0.7, bloomDuration],
+    [1.04, 1],
+    {
+      extrapolateRight: "clamp",
+    }
+  );
+
+  // 🍃 Slide positions
+  const slideTRX = interpolate(frame, [0, bloomDuration], [180, 0], {
+    extrapolateRight: "clamp",
+    easing: Easing.out(Easing.cubic),
+  });
+
+  const slideTRY = interpolate(frame, [0, bloomDuration], [-180, 0], {
+    extrapolateRight: "clamp",
+    easing: Easing.out(Easing.cubic),
+  });
+
+  const slideBLX = interpolate(frame, [0, bloomDuration], [-180, 0], {
+    extrapolateRight: "clamp",
+    easing: Easing.out(Easing.cubic),
+  });
+
+  const slideBLY = interpolate(frame, [0, bloomDuration], [180, 0], {
+    extrapolateRight: "clamp",
+    easing: Easing.out(Easing.cubic),
+  });
+
+  // 🌿 Gentle sway
+  const swing = Math.sin(frame / 18) * 0.6;
+
+  const finalScale = scale * settle;
+
+  return (
+    <>
+      {/* 🌸 TOP RIGHT */}
+      <Img
+        src={staticFile("video-images/28012026-TopRightFlower.webp")}
+        style={{
+          position: "absolute",
+          top: "-130px",
+          right: 0,
+          width: "55%",
+          opacity,
+          transformOrigin: "top right",
+          transform: `
+            translate(${slideTRX}px, ${slideTRY}px)
+            scale(${finalScale})
+            rotate(${swing}deg)
+          `,
+          pointerEvents: "none",
+        }}
+      />
+
+      {/* 🌸 BOTTOM LEFT */}
+      <Img
+        src={staticFile("video-images/28012026-BottomLeftFlower.webp")}
+        style={{
+          position: "absolute",
+          bottom: "-250px",
+          left: "-80px",
+          width: "100%",
+          opacity,
+          transformOrigin: "bottom left",
+          transform: `
+            translate(${slideBLX}px, ${slideBLY}px)
+            scale(${finalScale})
+            rotate(${-swing}deg)
+          `,
+          pointerEvents: "none",
+        }}
+      />
+    </>
+  );
+};

package/src/Invitations/Elements/GaneshBorder28012026.jsx

@@ -0,0 +1,95 @@
+import React from "react";
+import {
+  Img,
+  staticFile,
+  useCurrentFrame,
+  useVideoConfig,
+  interpolate,
+  Easing,
+} from "remotion";
+
+export const GaneshBorder28012026 = () => {
+  const frame = useCurrentFrame();
+  const { fps } = useVideoConfig();
+
+const borderDelay = fps * 0.5; // 0.5 second delay
+
+const borderProgress = interpolate(
+  frame,
+  [borderDelay, borderDelay + fps * 3],
+  [0, 1],
+  {
+    extrapolateLeft: "clamp",
+    extrapolateRight: "clamp",
+    easing: Easing.out(Easing.cubic),
+  }
+);
+
+
+  const borderScale = interpolate(borderProgress, [0, 1], [0.9, 1]);
+  const borderOpacity = borderProgress;
+  
+  const ganeshProgress = interpolate(
+    frame,
+    [fps * 0.5, fps * 2.5],
+    [0, 1],
+    {
+      extrapolateLeft: "clamp",
+      extrapolateRight: "clamp",
+      easing: Easing.inOut(Easing.cubic),
+    }
+  );
+
+  const ganeshScale = interpolate(ganeshProgress, [0, 1], [0.45, 1]);
+  const ganeshOpacity = ganeshProgress;
+
+  /* 🌿 Gentle border rotation */
+ // const rotate = Math.max(0, frame - delayFrames) * 0.20;
+ const rotate = frame * 0.15;
+  return (
+    <div
+      style={{
+        position: "absolute",
+        top: "10%",
+        width: "100%",
+        display: "flex",
+        justifyContent: "center",
+        pointerEvents: "none",
+        zIndex: 2,
+      }}
+    >
+      <div style={{ width: "100%", position: "relative" }}>
+        {/* 🌸 BORDER */}
+        <Img
+          src={staticFile("video-images/28012026-FlowerBorder.webp")}
+          style={{
+            width: "100%",
+            transformOrigin: "50% 50%",
+             opacity: borderOpacity,
+            transform: `
+             scale(${borderScale})
+              rotate(${rotate}deg)
+            `,
+          }}
+        />
+
+        {/* 🕉 GANESH SMOOTH ENTRY */}
+        <Img
+          src={staticFile("video-images/28012026-Ganesh.webp")}
+          style={{
+            position: "absolute",
+            left: "53%",
+            top: "45%",
+            width: "55%",
+            opacity: ganeshOpacity,
+            transformOrigin: "50% 50%",
+            transform: `
+              translate(-50%, -50%)
+              scale(${ganeshScale})
+            `,
+          }}
+        />
+      </div>
+    </div>
+  );
+};