@evatril/video-templates 2.0.7 → 2.0.8

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@evatril/video-templates",
-  "version": "2.0.7",
+  "version": "2.0.8",
   "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/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>
+  );
+};

package/src/Invitations/Elements/GaneshGoldenHalo.jsx

@@ -0,0 +1,90 @@
+import React from "react";
+import {
+  Img,
+  staticFile,
+  useCurrentFrame,
+  useVideoConfig,
+  interpolate,
+  Easing,
+} from "remotion";
+
+export const GaneshGoldenHalo = () => {
+  const frame = useCurrentFrame();
+  const { fps } = useVideoConfig();
+
+  /* 🌸 HALO BLOOM FIRST */
+  const haloProgress = interpolate(frame, [0, fps * 2], [0, 1], {
+    extrapolateLeft: "clamp",
+    extrapolateRight: "clamp",
+    easing: Easing.inOut(Easing.cubic),
+  });
+
+  const haloScale = interpolate(haloProgress, [0, 1], [0, 1]);
+
+  /* 🕉 GANESH APPEARS AFTER HALO */
+  const ganeshDelay = fps * 1;
+
+  const ganeshProgress = interpolate(frame - ganeshDelay, [0, fps * 2], [0, 1], {
+    extrapolateLeft: "clamp",
+    extrapolateRight: "clamp",
+    easing: Easing.inOut(Easing.cubic),
+  });
+
+  const ganeshScale = interpolate(ganeshProgress, [0, 1], [0.45, 1]);
+  const ganeshOpacity = ganeshProgress;
+
+  /* 🌿 HALO ROTATION (LOCKED CENTER) */
+  const rotate = frame * 0.15;
+
+  return (
+    <div
+      style={{
+        position: "absolute",
+        inset: 0,
+        display: "flex",
+        justifyContent: "center",
+        alignItems: "center",
+        pointerEvents: "none",
+        zIndex: 2,
+      }}
+    >
+      <div style={{ position: "relative", width: "100%", height: "100%" }}>
+        {/* 🌸 HALO (isolated rotation container) */}
+        <div
+          style={{
+            position: "absolute",
+            left: "50%",
+            top: "45%",
+            transform: "translate(-50%, -50%)",
+          }}
+        >
+          <Img
+            src={staticFile("video-images/30012026-Ganesh_golden_halo2.png")}
+            style={{
+              width: "100%",
+              transformOrigin: "50% 50%",
+              transform: `scale(${haloScale}) rotate(${rotate}deg)`,
+            }}
+          />
+        </div>
+
+        {/* 🕉 GANESH */}
+        <Img
+          src={staticFile("video-images/28012026-Ganesh.png")}
+          style={{
+            position: "absolute",
+            left: "50%",
+            top: "55%",
+            width: "55%",
+            opacity: ganeshOpacity,
+            transformOrigin: "50% 50%",
+            transform: `
+              translate(-47%, -50%)
+              scale(${ganeshScale})
+            `,
+          }}
+        />
+      </div>
+    </div>
+  );
+};

package/src/Invitations/Elements/HeartDraw28012026.jsx

@@ -0,0 +1,51 @@
+import React, { useRef, useLayoutEffect, useState } from "react";
+import { useCurrentFrame, interpolate, Easing } from "remotion";
+
+export const HeartDraw28012026 = ({ startAfter = 30 }) => {
+  const frame = useCurrentFrame();
+  const pathRef = useRef(null);
+  const [length, setLength] = useState(0);
+
+  // Measure BEFORE paint (no blink)
+  useLayoutEffect(() => {
+    if (pathRef.current) {
+      const total = pathRef.current.getTotalLength();
+      setLength(total);
+    }
+  }, []);
+
+  const localFrame = frame - startAfter;
+
+  const progress = interpolate(localFrame, [0, 40], [0, 1], {
+    extrapolateLeft: "clamp",
+    extrapolateRight: "clamp",
+    easing: Easing.out(Easing.ease),
+  });
+
+  return (
+    <svg
+      width="720"
+      height="700"
+      viewBox="0 0 512 512"
+      style={{
+        position: "absolute",
+        zIndex: 0,
+      }}
+    >
+      <path
+        ref={pathRef}
+        d="M256 448s-168-104-168-240c0-53 43-96 96-96 33 0 62 16 72 40 10-24 39-40 72-40 53 0 96 43 96 96 0 136-168 240-168 240z"
+        fill="none"
+        stroke="#D4A24C"
+        strokeWidth={8}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        strokeDasharray={length || 1}
+        strokeDashoffset={(length || 1) * (1 - progress)}
+        style={{
+          opacity: length ? 1 : 0, // 👈 hide until measured
+        }}
+      />
+    </svg>
+  );
+};

package/src/Invitations/Elements/HeartFlight28012026.jsx

@@ -0,0 +1,72 @@
+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>
+        );
+      })}
+    </>
+  );
+};