@evatril/video-templates 2.0.0

package/src/Invitations/Elements/PeacockDance20012026.jsx

@@ -0,0 +1,68 @@
+import React from "react";
+import {
+  Img,
+  staticFile,
+  useCurrentFrame,
+  useVideoConfig,
+  interpolate,
+} from "remotion";
+
+export const PeacockDance20012026 = ({ 
+  startAfter = 0, 
+  durationInSeconds = 12 
+}) => {
+  const frame = useCurrentFrame();
+  const { fps } = useVideoConfig();
+
+  const delay = fps * startAfter;
+  
+  if (frame < delay) return null;
+
+  const movementDuration = fps * durationInSeconds;
+
+  // 1. Horizontal Movement (Right to Left)
+  const leftPos = interpolate(
+    frame,
+    [delay, delay + movementDuration],
+    [80, -100], 
+    { 
+      extrapolateLeft: "clamp",
+      extrapolateRight: "clamp" 
+    }
+  );
+
+  // 2. WALK CYCLE ANIMATION
+  const stepSpeed = 6; 
+  const walkBounce = Math.abs(Math.sin((frame - delay) / stepSpeed)) * -15;
+
+  // 3. SQUASH AND STRETCH (Adds weight to the walk)
+  const squash = interpolate(
+    Math.sin((frame - delay) / stepSpeed),
+    [-1, 1],
+    [0.95, 1.05]
+  );
+
+  const baseScale = interpolate(
+    frame,
+    [delay, delay + fps],
+    [0.85, 1],
+    { extrapolateLeft: "clamp" }
+  );
+
+  return (
+    <Img
+      src={staticFile("video-images/20012026-peacock.png")}
+      style={{
+        position: "absolute",
+        top: "55%",
+        left: `${leftPos}%`, 
+        transform: `
+          translateY(${walkBounce}px) 
+          scaleX(${baseScale}) 
+          scaleY(${baseScale * squash})
+        `,
+        width: "60%",
+      }}
+    />
+  );
+};

package/src/Invitations/Elements/SideTrees20012026.jsx

@@ -0,0 +1,104 @@
+import React from "react";
+import {
+  Img,
+  staticFile,
+  useCurrentFrame,
+  useVideoConfig,
+  interpolate,
+  Easing,
+} from "remotion";
+
+export const SideTrees20012026 = ({ startAfter = 1 }) => {
+  const frame = useCurrentFrame();
+  const { fps } = useVideoConfig();
+
+  const delay = fps * startAfter;
+  const duration = fps * 1.2;
+
+  /* ---------------- FADE IN ---------------- */
+  const opacity = interpolate(
+    frame,
+    [delay, delay + duration],
+    [0, 1],
+    {
+      extrapolateLeft: "clamp",
+      extrapolateRight: "clamp",
+      easing: Easing.out(Easing.ease),
+    }
+  );
+
+  /* ---------------- SLIDE IN ---------------- */
+  const leftTreeX = interpolate(
+    frame,
+    [delay, delay + duration],
+    [-600, -380], // hidden → edge
+    {
+      extrapolateLeft: "clamp",
+      extrapolateRight: "clamp",
+      easing: Easing.out(Easing.ease),
+    }
+  );
+
+  const rightTreeX = interpolate(
+    frame,
+    [delay, delay + duration],
+    [600, 380], // hidden → edge
+    {
+      extrapolateLeft: "clamp",
+      extrapolateRight: "clamp",
+      easing: Easing.out(Easing.ease),
+    }
+  );
+
+  /* ---------------- 🌬️ TREE SWING (WIND) ---------------- */
+  const swingSpeed = 20; // higher = slower swing
+  const swingAngle = 2;  // degrees (keep small)
+
+  const swing =
+    frame > delay
+      ? Math.sin((frame - delay) / swingSpeed) * swingAngle
+      : 0;
+
+  const swayX =
+    frame > delay
+      ? Math.sin((frame - delay) / (swingSpeed * 1.3)) * 6
+      : 0;
+
+  return (
+    <>
+      {/* 🌳 LEFT TREE */}
+      <Img
+        src={staticFile("video-images/20012026-tree-left.png")}
+        style={{
+          position: "absolute",
+          left: 0,
+          bottom: 0,
+          height: "100%",
+          opacity,
+          transform: `
+            translateX(${leftTreeX + swayX}px)
+            rotate(${swing}deg)
+          `,
+          transformOrigin: "bottom left", // 🌳 root fixed
+        }}
+      />
+
+      {/* 🌳 RIGHT TREE */}
+      <Img
+        src={staticFile("video-images/20012026-tree-right.png")}
+        style={{
+          position: "absolute",
+          right: 0,
+          bottom: 0,
+          height: "100%",
+          opacity,
+          transform: `
+            translateX(${rightTreeX - swayX}px)
+            rotate(${-swing}deg)
+          `,
+          transformOrigin: "bottom right", // 🌳 root fixed
+        }}
+      />
+    </>
+  );
+};

package/src/Invitations/Elements/SmoothRevealFromTop.jsx

@@ -0,0 +1,32 @@
+import { interpolate, Easing } from "remotion";
+
+export const SmoothRevealFromTop = ({
+  frame,
+  startFrame,
+  delay = 0,
+  duration = 20,
+  fromY = -30,
+  toY = 0,
+}) => {
+  const opacity = interpolate(
+    frame,
+    [startFrame + delay, startFrame + delay + duration],
+    [0, 1],
+    { extrapolateRight: "clamp" }
+  );
+
+  const translateY = interpolate(
+    frame,
+    [startFrame + delay, startFrame + delay + duration],
+    [fromY, toY],
+    {
+      extrapolateRight: "clamp",
+      easing: Easing.out(Easing.ease),
+    }
+  );
+
+  return {
+    opacity,
+    transform: `translateY(${translateY}px)`,
+  };
+};

package/src/Invitations/Frames/F20012026_01.jsx

@@ -0,0 +1,180 @@
+import React from "react";
+import {
+  AbsoluteFill,
+  Img,
+  useCurrentFrame,
+  useVideoConfig,
+  interpolate,
+  Easing,
+  staticFile
+} from "remotion";
+
+import {  Butterflies20012026 } from "../Elements/Butterflies20012026.jsx";
+import { OpeningGate20012026 } from "../Elements/OpeningGate20012026.jsx";
+import { CoupleWalk20012026 } from "../Elements/CoupleWalk20012026.jsx";
+import {FlowersSide20012026} from "../Elements/FlowersSide20012026.jsx";
+
+export const F20012026_01 = ({
+  firstName, secondName, welcomeMessage,
+}) => {
+  /* -------------------- HOOKS (ONLY HERE) -------------------- */
+  const frame = useCurrentFrame();
+  const { fps, width, height, durationInFrames } = useVideoConfig();
+
+  /* -------------------- MESSAGE REVEAL -------------------- */
+  const messageStart = fps * 4;
+  const messageOpacity = interpolate(
+    frame,
+    [messageStart, messageStart + 15],
+    [0, 1],
+    { extrapolateRight: "clamp" }
+  );
+  const messageTranslateY = interpolate(
+    frame,
+    [messageStart, messageStart + 30],
+    [60, 0],
+    {
+      extrapolateRight: "clamp",
+      easing: Easing.out(Easing.cubic),
+    }
+  );
+  /* -------------------- NAME ANIMATIONS -------------------- */
+  const brideStart = messageStart + fps * 1;
+  const wedsStart = brideStart + fps * 0.6;
+  const groomStart = wedsStart + fps * 0.6;
+
+  const reveal = (start) => ({
+    opacity: interpolate(frame, [start, start + 20], [0, 1], {
+      extrapolateRight: "clamp",
+    }),
+    translateY: interpolate(frame, [start, start + 25], [40, 0], {
+      extrapolateRight: "clamp",
+      easing: Easing.out(Easing.cubic),
+    }),
+  });
+
+  const brideAnim = reveal(brideStart);
+  const wedsAnim = reveal(wedsStart);
+  const groomAnim = reveal(groomStart);
+  return (
+    <AbsoluteFill style={{ overflow: "hidden" }}>
+      {/* ================= BACKGROUND ================= */}
+      <Img
+        src={staticFile("video-images/20012026-bg.png")}
+        style={{
+          position: "absolute",
+          width: "100%",
+          height: "100%",
+          objectFit: "cover",
+        }}
+      />
+
+      {/* ================= VISUAL LAYERS ================= */}
+      <Butterflies20012026 frame={frame} fps={fps} width={width} height={height} />
+      <OpeningGate20012026 frame={frame} fps={fps} />
+      <CoupleWalk20012026 frame={frame} fps={fps} />
+      <FlowersSide20012026 frame={frame} fps={fps} />
+
+      {/* ================= TEXT LAYER (DIV) ================= */}
+      <div
+        style={{
+          position: "absolute",
+          inset: 0,
+          display: "flex",
+          flexDirection: "column",
+          alignItems: "center",
+          textAlign: "center",
+          pointerEvents: "none",
+          zIndex: 10,
+          marginTop: "40%",
+          gap: "30px"
+        }}
+      >
+        {/* ----------- MESSAGE ----------- */}
+        <div
+          style={{
+            width: "100%",
+            maxWidth: "70%",
+            fontSize: 60,
+            fontFamily: "Dancing Script",
+            letterSpacing: "3px",
+            color: "#6D4C6A",
+            fontWeight: "700",
+            lineHeight: 1.2,
+            opacity: messageOpacity,
+            transform: `translateY(${messageTranslateY}px)`,
+          }}
+        >
+          {welcomeMessage}
+        </div>
+
+        {/* ----------- NAMES ----------- */}
+        <div
+          style={{
+            width: "100%",
+            display: "flex",
+            flexDirection: "column",
+            alignItems: "center",
+          }}
+        >
+          <h1
+            style={{
+              width: "100%",
+              maxWidth: "80%",
+              marginTop: "10px",
+              fontFamily: "Playfair Display",
+              color: "#6B1E2E",
+              fontSize: 60,
+              fontWeight: "600",
+              lineHeight: 1.3,
+              letterSpacing: "2px",
+              textAlign: "center",
+              whiteSpace: "normal",
+              wordBreak: "break-word",
+              overflowWrap: "break-word",
+              opacity: brideAnim.opacity,
+              transform: `translateY(${brideAnim.translateY}px)`,
+            }}
+          >
+            {firstName}
+          </h1>
+
+          <h2
+            style={{
+              fontSize: 70,
+              fontFamily: "Great Vibes",
+              color: "#D4AF37",
+              margin: "10px 0",
+              opacity: wedsAnim.opacity,
+              transform: `translateY(${wedsAnim.translateY}px)`,
+            }}
+          >
+            weds
+          </h2>
+
+          <h1
+            style={{
+              width: "100%",            
+              maxWidth: "80%",
+              fontFamily: "Playfair Display",
+              color: "#6B1E2E",
+              fontSize: 60,
+              fontWeight: "600",
+              lineHeight: 1.3,
+              letterSpacing: "2px",
+              textAlign: "center",
+              whiteSpace: "normal",
+              wordBreak: "break-word",
+              overflowWrap: "break-word",
+              opacity: groomAnim.opacity,
+              transform: `translateY(${groomAnim.translateY}px)`,
+
+            }}
+          >
+            {secondName} 
+          </h1>
+        </div>
+      </div>
+    </AbsoluteFill>
+  );
+};

package/src/Invitations/Frames/F20012026_02.jsx

@@ -0,0 +1,311 @@
+import React from "react";
+import {
+  AbsoluteFill,
+  useCurrentFrame,
+  useVideoConfig,
+  interpolate,
+  Easing,
+  Img,
+  staticFile,
+} from "remotion";
+
+import { SideTrees20012026 } from "../Elements/SideTrees20012026.jsx";
+import { PeacockDance20012026 } from "../Elements/PeacockDance20012026.jsx";
+import { SmoothRevealFromTop } from "../Elements/SmoothRevealFromTop.jsx";
+
+export const F20012026_02 = ({ firstName, secondName,firstSideNote,secondSideNote, invitationMessage ,occasionDate,fadeInDuration = 30,
+}) => {
+  const frame = useCurrentFrame();
+  const { fps } = useVideoConfig();
+
+  /* ================= SCENE FADE + ZOOM  ================= */
+  const sceneOpacity = interpolate(
+    frame,
+    [0, fadeInDuration],
+    [0, 1],
+    {
+      extrapolateRight: "clamp",
+      easing: Easing.out(Easing.ease),
+    }
+  );
+
+  // 🎥 VERY SMOOTH CINEMATIC ZOOM
+  const sceneScale = interpolate(
+    frame,
+    [0, fadeInDuration * 2],
+    [1.20, 1],
+    {
+      extrapolateRight: "clamp",
+      easing: Easing.out(Easing.cubic),
+    }
+  );
+
+  /* ================= SAFE DATE FORMAT ================= */
+  const formatDate = (date) => {
+  if (!date) return "";
+  const d = new Date(date);
+  if (isNaN(d.getTime())) return "";
+
+  return d.toLocaleDateString("en-IN", {
+    day: "numeric",
+    month: "long",
+    year: "numeric",
+  });
+};
+
+
+   const DETAILS_START = fps * 3;
+
+  /* ================= IMAGE ANIMATION ================= */
+  const showImageAfter = fadeInDuration * 1;
+
+  const imageOpacity = interpolate(
+    frame,
+    [showImageAfter, showImageAfter + fps],
+    [0, 1],
+    {
+      extrapolateRight: "clamp",
+      easing: Easing.out(Easing.ease),
+    }
+  );
+
+  const imageScale = interpolate(
+    frame,
+    [showImageAfter, showImageAfter + fps],
+    [0.92, 1],
+    {
+      extrapolateRight: "clamp",
+      easing: Easing.out(Easing.ease),
+    }
+  );
+
+  return (
+    <AbsoluteFill
+      style={{
+        opacity: sceneOpacity,
+        transform: `scale(${sceneScale})`,
+        transformOrigin: "center center",
+        overflow: "hidden",
+
+      }}
+    >
+      {/* ================= BACKGROUND ================= */}
+      <Img
+        src={staticFile("video-images/20012026-bg.png")}
+        style={{
+          position: "absolute",
+          width: "100%",
+          height: "100%",
+          objectFit: "cover",
+        }}
+      />
+
+      <Img
+        src={staticFile("video-images/20012026-curtain-floral.png")}
+        style={{
+          position: "absolute",
+          left: "50%",
+          width: "100%",
+          opacity: imageOpacity,
+          transform: `translateX(-50%) scale(${imageScale})`,
+        }}
+      />
+
+      {/* ================= DECORATIONS ================= */}
+      <SideTrees20012026 startAfter={2} />
+      <PeacockDance20012026 startAfter={3} />
+
+      <div
+        style={{
+          position: "relative",
+          top: "26%",
+          width: "100%",
+          display: "flex",
+          flexDirection: "column",
+          alignItems: "center",
+          textAlign: "center",
+          gap: "15px"
+        }}
+      >
+        {/* Invitation Message */}
+        <div
+          style={{
+            maxWidth: "50%",
+            fontFamily: "Dancing Script",
+            color: "#4A3A2A",
+            fontSize: 40,
+            fontWeight: "500",
+            lineHeight: 1.2,
+            letterSpacing: "2px",
+            ...SmoothRevealFromTop({
+              frame,
+              startFrame: DETAILS_START,
+              delay: 0,
+            })
+          }}
+        >
+          {invitationMessage}
+        </div>
+
+        {/* Bride Name */}
+        <h1
+          style={{
+            maxWidth: "70%",
+            fontFamily: "Playfair Display",
+            color: "#7A1E2E",
+            fontSize: 60,
+            fontWeight: "600",
+            lineHeight: 1.2,
+            letterSpacing: "3px",
+            whiteSpace: "normal",
+            wordBreak: "break-word",
+            overflowWrap: "break-word",
+            ...SmoothRevealFromTop({
+              frame,
+              startFrame: DETAILS_START,
+              delay: 25,
+            })
+          }}
+        >
+          {firstName}
+        </h1>
+
+        {/* Bride Side Note */}
+        <div
+          style={{
+            maxWidth: "60%",
+            fontFamily: "Dancing Script",
+            color: "#B87A6A",
+            fontSize: 40,
+            fontWeight: "600",
+            lineHeight: 1.2,
+            letterSpacing: "2px",
+            whiteSpace: "normal",
+            wordBreak: "break-word",
+            overflowWrap: "break-word",
+            ...SmoothRevealFromTop({
+              frame,
+              startFrame: DETAILS_START,
+              delay: 50,
+            })
+          }}
+        >
+          {firstSideNote} 
+        </div>
+
+        {/* & Symbol */}
+        <div
+          style={{
+            fontSize: 40,
+            color: "#C9A24D",
+            letterSpacing: "6px",
+            ...SmoothRevealFromTop({
+              frame,
+              startFrame: DETAILS_START,
+              delay: 70,
+            })
+          }}
+        >
+          ❁ ❁ ❁
+        </div>
+
+
+        {/* Groom Name */}
+        <h1
+          style={{
+            maxWidth: "70%",
+            fontFamily: "Playfair Display",
+            color: "#7A1E2E",
+            fontSize: 60,
+            fontWeight: "600",
+            lineHeight: 1.2,
+            letterSpacing: "3px",
+            whiteSpace: "normal",
+            wordBreak: "break-word",
+            overflowWrap: "break-word",
+            ...SmoothRevealFromTop({
+              frame,
+              startFrame: DETAILS_START,
+              delay: 95,
+            })
+          }}
+        >
+          {secondName} 
+        </h1>
+
+        {/* Groom Side Note */}
+        <div
+          style={{
+            maxWidth: "70%",
+            fontFamily: "Dancing Script",
+            color: "#B87A6A",
+            fontSize: 40,
+            fontWeight: "600",
+            lineHeight: 1.2,
+            letterSpacing: "2px",
+            whiteSpace: "normal",
+            wordBreak: "break-word",
+            overflowWrap: "break-word",
+            ...SmoothRevealFromTop({
+              frame,
+              startFrame: DETAILS_START,
+              delay: 120,
+            })
+          }}
+        >
+          {secondSideNote} 
+        </div>
+
+        {/* Date */}
+        <div
+          style={{
+            maxWidth: "70%",
+            marginTop: 20,
+            textAlign: "center",
+            ...SmoothRevealFromTop({
+              frame,
+              startFrame: DETAILS_START,
+              delay: 145,
+            })
+          }}
+        >
+          {/* -------- Message Line -------- */}
+          <div
+            style={{
+              fontSize: 45,
+              fontFamily:"Great Vibes",
+              fontWeight: "500",
+              letterSpacing: "3px",
+              color: "#2F6B4F",
+              lineHeight: 1.2,
+              marginBottom: 8,
+              whiteSpace: "nowrap", 
+
+            }}
+          >
+            – Join us on this auspicious day –
+          </div>
+
+          {/* -------- Date Line -------- */}
+          <div
+            style={{
+              fontSize: 55,
+              fontFamily:"Playfair Display",
+              fontWeight: "400",
+              color: "#5A4632",
+              lineHeight: 1.2,
+              letterSpacing: "4px",
+              whiteSpace: "nowrap", // 🔥 force single line
+            }}
+          >
+            {formatDate(occasionDate)}
+          </div>
+        </div>
+
+
+      </div>
+
+
+    </AbsoluteFill>
+  );
+};