@evatril/video-templates 2.0.0

package/package.json

@@ -0,0 +1,14 @@
+{
+  "name": "@evatril/video-templates",
+  "version": "2.0.0",
+  "description": "",
+  "main": "src/index.js",
+  "remotion": {
+    "entryPoint": "src/remotionRoot.jsx"
+  },
+   "peerDependencies": {
+    "react": ">=18",
+    "react-dom": ">=18",
+    "remotion": "^4.0.0"
+  }
+}

package/src/Invitations/Elements/Butterflies20012026.jsx

@@ -0,0 +1,70 @@
+import React from "react";
+import { Img, interpolate, staticFile } from "remotion";
+
+export const Butterflies20012026 = ({ frame, fps, width, height }) => {
+  const GLOBAL_DELAY = fps * 2;
+  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 },
+    { sx: 0.3, sy: 1.0, ex: 0.7, ey: 0.3, delay: 40 },
+  ];
+
+  return (
+    <>
+      {butterflies.map((b, i) => {
+        const localFrame = frame - GLOBAL_DELAY - b.delay;
+       const progress = interpolate(
+          localFrame,
+          [0, fps * 6],
+          [0, 1],
+          {
+            extrapolateLeft: "clamp",
+            extrapolateRight: "clamp",
+          }
+        );
+
+        const x = interpolate(progress, [0, 1], [
+          b.sx * width,
+          b.ex * width,
+        ]);
+
+        const y =
+          interpolate(progress, [0, 1], [
+            b.sy * height,
+            b.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 (
+          <Img
+            key={i}
+            src={staticFile("video-images/20012026-butterfly.png")}
+            style={{
+              position: "absolute",
+              left: x,
+              top: y,
+              width: 120,
+              height: 120,
+              opacity,
+              transform: `
+                translate(-50%, -50%)
+                scale(${scale})
+                rotate(${Math.sin(localFrame / 15 + i) * 15}deg)
+              `,
+              filter: "drop-shadow(0 0 6px rgba(0,255,255,0.45))",
+              pointerEvents: "none",
+            }}
+          />
+        );
+      })}
+    </>
+  );
+};

package/src/Invitations/Elements/CoupleWalk20012026.jsx

@@ -0,0 +1,74 @@
+import React from "react";
+import {
+  Img,
+  staticFile,
+  useCurrentFrame,
+  useVideoConfig,
+  interpolate,
+  Easing,
+} from "remotion";
+
+export const CoupleWalk20012026 = () => {
+  const frame = useCurrentFrame();
+  const { fps, height } = useVideoConfig();
+ 
+  /* -----------------------------⏳ WALK SETTINGS  ------------------------------*/
+  const delaySeconds = 0.5;
+  const walkDurationSeconds = 5;
+  const delayFrames = fps * delaySeconds;
+  const walkFrames = fps * walkDurationSeconds;
+  const localFrame = frame - delayFrames;
+  /* --------🚶 WALK FROM BOTTOM → UP (Bottom-center anchor)--------*/
+    const walkY = interpolate(
+    localFrame,
+    [0, walkFrames],
+    [height + 600, height - 950],
+    {
+      extrapolateLeft: "clamp",
+      extrapolateRight: "clamp",
+      easing: Easing.out(Easing.cubic),
+    }
+  );
+  const isWalking = localFrame >= 0 && localFrame <= walkFrames;
+
+  /* ------- ⬆️⬇️ SUBTLE BOUNCE -------*/
+  const bounce = isWalking
+    ? Math.sin(localFrame / 10) * 3
+    : 0;
+
+  /* ------- ↔️ NATURAL SWAY ------------*/
+  const sway = isWalking
+    ? Math.sin(localFrame / 14) * 2
+    : 0;
+
+  /* -------- 👣 FOOTSTEP SCALE ----------*/
+   const stepScale = isWalking
+    ? 1 + Math.sin(localFrame / 12) * 0.015
+    : 1;
+  return (
+    <div
+      style={{
+        flex: 1,
+        position: "relative",
+        overflow: "hidden",
+      }}
+    >
+
+      {/* 👰🤵 COUPLE (BOTTOM-CENTER) */}
+      <Img
+        src={staticFile("video-images/20012026-couple-walk.png")}
+        style={{
+          position: "absolute",
+          left: "50%",
+           transform: `
+            translateX(-50%)
+            translateY(${walkY + bounce}px)
+            translateX(${sway}px)
+            scale(${stepScale})
+          `,
+          width: "60%",
+        }}
+      />
+    </div>
+  );
+};

package/src/Invitations/Elements/FlowersSide20012026.jsx

@@ -0,0 +1,143 @@
+import React from "react";
+import {
+  Img,
+  staticFile,
+  useCurrentFrame,
+  useVideoConfig,
+  interpolate,
+  Easing,
+} from "remotion";
+
+/* 🌸 FALLING EMOJI FLOWER – MULTI LINE */
+const FallingEmojiFlower = ({ index, row = 0, startAfter = 6 }) => {
+  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 (2–3 LINES) */
+  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;
+
+  // ❌ Do not render before start or after finish
+  if (localFrame < 0 || localFrame > duration) return null;
+
+  return (
+    <div
+      style={{
+        position: "absolute",
+        left: baseX,
+        top: translateY,
+        fontSize: 44,
+        opacity: 0.85,
+        transform: `translateX(${sway}px) rotate(${rotate}deg)`,
+        pointerEvents: "none",
+        userSelect: "none",
+      }}
+    >
+      {["🌸", "🌺"][index % 2]}
+    </div>
+  );
+};
+
+export const FlowersSide20012026 = ({ startAfter = 1 }) => {
+  const frame = useCurrentFrame();
+  const { fps } = useVideoConfig();
+
+  const delayFrames = fps * startAfter;
+ const revealDuration = fps * 2.5; // ⏱ 2 seconds
+
+const revealProgress = interpolate(
+  frame - delayFrames,
+  [0, revealDuration],
+  [0, 1],
+  {
+    extrapolateLeft: "clamp",
+    extrapolateRight: "clamp",
+    easing: Easing.out(Easing.cubic),
+  }
+);
+
+  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.png")}
+  style={{
+    position: "absolute",
+    left: 0,
+    bottom: 370,
+    width: "100%",
+    opacity: revealProgress,
+    transform: `
+      translateX(${interpolate(revealProgress, [0, 1], [-120, -30])}px)
+      scale(${interpolate(revealProgress, [0, 1], [0.96, 1])})
+    `,
+    pointerEvents: "none",
+  }}
+/>
+      {/* 🌸 RIGHT FLOWER DECOR */}
+     <Img
+  src={staticFile("video-images/20012026-floral-right.png")}
+  style={{
+    position: "absolute",
+    right: 0,
+    bottom: 370,
+    width: "100%",
+    opacity: revealProgress,
+    transform: `
+      translateX(${interpolate(revealProgress, [0, 1], [120, 30])}px)
+      scale(${interpolate(revealProgress, [0, 1], [0.96, 1])})
+    `,
+    pointerEvents: "none",
+  }}
+/>
+
+    </>
+  );
+};
+
+

package/src/Invitations/Elements/GroomBrideLoveScene20012026.jsx

@@ -0,0 +1,163 @@
+import React from "react";
+import {
+  Img,
+  staticFile,
+  useCurrentFrame,
+  useVideoConfig,
+  interpolate,
+  Easing,
+} from "remotion";
+
+export const GroomBrideLoveScene20012026 = ({ startAfter = 3.5}) => {
+  const frame = useCurrentFrame();
+  const { fps, width } = useVideoConfig();
+
+  /* ---------------- TIMING ---------------- */
+  const showDelay = fps * startAfter;      // when both appear
+  const walkDelay = showDelay + fps * 0.1; // groom starts walking after pause
+  const walkDuration = fps * 3.5;          // slow cinematic walk
+
+  if (frame < showDelay) return null;
+
+  /* ---------------- OPACITY (BOTH SHOW SAME TIME) ---------------- */
+  const opacity = interpolate(
+    frame,
+    [showDelay, showDelay + fps * 0.5],
+    [0, 1],
+    { extrapolateLeft: "clamp" }
+  );
+
+  /* ---------------- WALK FRAME ---------------- */
+  const walkFrame = Math.max(0, frame - walkDelay);
+  const progress = interpolate(
+    walkFrame,
+    [0, walkDuration],
+    [0, 1],
+    {
+      extrapolateLeft: "clamp",
+      extrapolateRight: "clamp",
+      easing: Easing.inOut(Easing.cubic),
+    }
+  );
+
+  /* ---------------- POSITIONS ---------------- */
+  const brideX = width - 390; // 👰 fixed right
+  const groomStartX = -140;   // 🤵 visible at left initially
+  const groomEndX = brideX - 260;
+
+  const groomX = interpolate(
+    progress,
+    [0, 1],
+    [groomStartX, groomEndX],
+    {
+      easing: Easing.inOut(Easing.cubic),
+    }
+  );
+
+  /* ---------------- 3D WALK MOTION ---------------- */
+  const footLift = Math.abs(Math.sin(walkFrame / 14)) * 8;
+  const bodySway = Math.sin(walkFrame / 26) * 6;
+  const depthScale = 1 + Math.sin(walkFrame / 18) * 0.03;
+  const rotateZ = Math.sin(walkFrame / 30) * 1.2;
+
+/* ---------------- BRIDE TURN (SAFE FLIP) ---------------- */
+const meetFrame = walkDelay + walkDuration;
+const brideTurnDuration = fps * 0.6;
+const brideFlip = interpolate(
+    frame,
+    [meetFrame, meetFrame + brideTurnDuration],
+    [1, -1], // RIGHT → LEFT
+    {
+      extrapolateLeft: "clamp",
+      extrapolateRight: "clamp",
+      easing: Easing.inOut(Easing.cubic),
+    }
+  );
+
+  /* ---------------- LOVE EMOJI ---------------- */
+    const loveStart = meetFrame + brideTurnDuration;
+  return (
+    <>
+      {/* 🤵 GROOM (SHOW → PAUSE → WALK) */}
+      <Img
+        src={staticFile("video-images/20012026-groom.png")}
+        style={{
+          position: "absolute",
+          bottom: 0,
+          width: "40%",
+          opacity,
+          transform: `
+            translateX(${groomX + bodySway}px)
+            translateY(${-footLift}px)
+            scale(${depthScale})
+            rotateZ(${rotateZ}deg)
+          `,
+          transformOrigin: "bottom center",
+        }}
+      />
+
+      {/* 👰 BRIDE (FIXED, SHOWS SAME TIME) */}
+  <Img
+  src={staticFile("video-images/20012026-bride.png")}
+  style={{
+    position: "absolute",
+    bottom: 0,
+    width: "40%",
+    opacity,
+    transform: `
+      translateX(${brideX}px)
+      scaleX(${brideFlip})
+    `,
+    transformOrigin: "bottom center",
+  }}
+/>
+      {/* ❤️ MULTIPLE FLOATING LOVE EMOJIS */}
+      {frame > loveStart &&
+        Array.from({ length: 16 }).map((_, i) => {
+          const emojiDelay = i * 8;
+          const emojiFrame = frame - loveStart - emojiDelay;
+
+          if (emojiFrame < 0) return null;
+
+          const floatY = interpolate(
+            emojiFrame,
+            [0, fps * 2.2],
+            [0, -240],
+            { extrapolateRight: "clamp" }
+          );
+
+          const emojiOpacity = interpolate(
+            emojiFrame,
+            [0, fps * 0.4, fps * 1.8],
+            [0, 1, 0],
+            { extrapolateRight: "clamp" }
+          );
+
+          const spreadX =
+            brideX + 60  + Math.sin(i * 35) * 100;
+
+          const scale = 0.7 + (i % 5) * 0.12;
+
+          return (
+            <div
+               key={i}
+              style={{
+                position: "absolute",
+                bottom: "30%",
+                left: spreadX,
+                fontSize: 66,
+                opacity: emojiOpacity,
+                transform: `
+                  translateY(${floatY}px)
+                  scale(${scale})
+                `,
+                pointerEvents: "none",
+              }}
+            >
+              💖 
+            </div>
+          );
+        })}
+    </>
+  );
+};

package/src/Invitations/Elements/InkSmokeTransition20012026.jsx

@@ -0,0 +1,72 @@
+import React from "react";
+import {
+  AbsoluteFill,
+  useCurrentFrame,
+  useVideoConfig,
+  interpolate,
+} from "remotion";
+
+export const InkSmokeTransition20012026 = () => {
+  const frame = useCurrentFrame();
+  const { fps, width, height } = useVideoConfig();
+
+  const duration = fps * 1.2;
+
+  return (
+    <AbsoluteFill
+      style={{
+        pointerEvents: "none",
+        overflow: "hidden",
+      }}
+    >
+      {Array.from({ length: 12 }).map((_, i) => {
+        const delay = i * 3;
+        const localFrame = Math.max(0, frame - delay);
+
+        const scale = interpolate(
+          localFrame,
+          [0, duration],
+          [0.3, 3.4],
+          { extrapolateRight: "clamp" }
+        );
+
+        const opacity = interpolate(
+          localFrame,
+          [0, duration * 0.4, duration],
+          [0, 0.8, 0],
+          { extrapolateRight: "clamp" }
+        );
+
+        /* 🔑 CENTER-OUT POSITIONING */
+        const angle = (i / 12) * Math.PI * 2; // circular spread
+        const radius = 120; // initial spread radius
+
+        const offsetX = Math.cos(angle) * radius;
+        const offsetY = Math.sin(angle) * radius;
+
+        return (
+          <div
+            key={i}
+            style={{
+              position: "absolute",
+              width: 320 + i * 40,
+              height: 320 + i * 40,
+              borderRadius: "50%",
+              background:
+                "radial-gradient(circle, rgba(255,210,220,0.9), rgba(255,255,255,0.4))",
+
+              /* 🎯 START FROM CENTER */
+              left: width / 2 + offsetX - (320 + i * 40) / 2,
+              top: height / 2 + offsetY - (320 + i * 40) / 2,
+
+              transform: `scale(${scale})`,
+              opacity,
+              filter: "blur(35px)",
+              mixBlendMode: "screen",
+            }}
+          />
+        );
+      })}
+    </AbsoluteFill>
+  );
+};

package/src/Invitations/Elements/OpeningGate20012026.jsx

@@ -0,0 +1,59 @@
+import React from "react";
+import { Img, interpolate, Easing, staticFile } from "remotion";
+
+export const OpeningGate20012026 = ({ frame, fps }) => {
+  // ⏱ 1 second gate opening
+  const OPEN_DURATION = fps * 1;
+
+  const progress = interpolate(
+    frame,
+    [0, OPEN_DURATION],
+    [0, 1],
+    {
+      extrapolateLeft: "clamp",
+      extrapolateRight: "clamp",
+      easing: Easing.out(Easing.ease),
+    }
+  );
+
+  const leftRotate = interpolate(progress, [0, 1], [0, -90]);
+  const rightRotate = interpolate(progress, [0, 1], [0, 90]);
+
+  return (
+    <div
+      style={{
+        position: "absolute",
+        inset: 0,
+        overflow: "hidden",
+        zIndex: 9999,
+        pointerEvents: "none",
+      }}
+    >
+      {/* 🚪 LEFT DOOR */}
+      <Img
+        src={staticFile("video-images/20012026-opening-gate.png")}
+        style={{
+          position: "absolute",
+          bottom: 0,
+          left: 0,
+          width: "100%",
+          transformOrigin: "left center",
+          transform: `perspective(9000px) rotateY(${leftRotate}deg)`,
+        }}
+      />
+
+      {/* 🚪 RIGHT DOOR */}
+      <Img
+        src={staticFile("video-images/20012026-opening-gate.png")}
+        style={{
+          position: "absolute",
+          bottom: 0,
+          right: 0,
+          width: "100%",
+          transformOrigin: "right center",
+          transform: `perspective(9000px) rotateY(${rightRotate}deg)`,
+        }}
+      />
+    </div>
+  );
+};