@evatril/video-templates 2.0.7 → 2.0.9

package/src/Invitations/Frames/F05022026_02.jsx

@@ -0,0 +1,387 @@
+import React from "react";
+import {
+    AbsoluteFill,
+    useCurrentFrame,
+    useVideoConfig,
+    interpolate,
+    Easing,
+    Img,
+    staticFile,
+} from "remotion";
+import { HangingLamp05022026 } from "../Elements/HangingLamp05022026";
+import { DucksFrame05022026 } from "../Elements/DucksFrame05022026";
+import { WordReveal28012026 } from "../Elements/WordReveal28012026";
+
+export const F05022026_02 = ({
+    firstName,
+    firstSideNote,
+    secondName,
+    secondSideNote,
+    invitationMessage,
+    occasionDate
+
+}) => {
+    const frame = useCurrentFrame();
+    const { fps } = useVideoConfig();
+    const opacity = interpolate(frame, [0, 25], [0, 1], {
+        extrapolateRight: "clamp",
+    });
+
+    const translateY = interpolate(frame, [0, 25], [-40, 0], {
+        extrapolateRight: "clamp",
+        easing: Easing.out(Easing.ease),
+    });
+
+    // timing (30fps based)
+    const dividerStart = fps * 1.2;
+    const firstTextStart = fps * 1.5;
+    const divider2Start = fps * 2;
+    const secondTextStart = fps * 2.5;
+
+    const formatDate = (date) => {
+        if (!date) return { datemonth: "", year: "" };
+
+        let d;
+
+        // Handle DD-MM-YYYY
+        if (typeof date === "string" && date.includes("-")) {
+            const parts = date.split("-");
+            if (parts[0].length === 2) {
+                d = new Date(`${parts[2]}-${parts[1]}-${parts[0]}`);
+            } else {
+                d = new Date(date);
+            }
+        } else {
+            d = new Date(date);
+        }
+
+        if (isNaN(d.getTime())) return { datemonth: "", year: "" };
+        const dayMonth = d.toLocaleDateString("en-IN", {
+            day: "numeric",
+            month: "long",
+        });
+        const year = d.getFullYear();
+
+        // return d.toLocaleDateString("en-IN", {
+        //     day: "numeric",
+        //     month: "long",
+        //     year: "numeric",
+        // });
+        return {
+            datemonth: dayMonth,
+            year: year.toString(),
+        };
+    };
+
+    const dateParts = formatDate(occasionDate);
+
+    // DIVIDER
+    const dividerX = interpolate(
+        frame,
+        [dividerStart, dividerStart + 20],
+        [-30, 0],
+        {
+            extrapolateRight: "clamp",
+            easing: Easing.out(Easing.ease),
+        }
+    );
+    const dividerOpacity = interpolate(
+        frame,
+        [dividerStart, dividerStart + 10],
+        [0, 1],
+        { extrapolateRight: "clamp" }
+    );
+
+    // FIRST TEXT
+    const firstTextX = interpolate(
+        frame,
+        [firstTextStart, firstTextStart + 20],
+        [-60, 0],
+        {
+            extrapolateRight: "clamp",
+            easing: Easing.out(Easing.ease),
+        }
+    );
+
+    const firstTextOpacity = interpolate(
+        frame,
+        [firstTextStart, firstTextStart + 10],
+        [0, 1],
+        { extrapolateRight: "clamp" }
+    );
+
+    // DIVIDER
+    const divider2X = interpolate(
+        frame,
+        [divider2Start, divider2Start + 20],
+        [-30, 0],
+        {
+            extrapolateRight: "clamp",
+            easing: Easing.out(Easing.ease),
+        }
+    );
+    const divider2Opacity = interpolate(
+        frame,
+        [divider2Start, divider2Start + 10],
+        [0, 1],
+        { extrapolateRight: "clamp" }
+    );
+
+    // SECOND TEXT
+    const secondTextX = interpolate(
+        frame,
+        [secondTextStart, secondTextStart + 20],
+        [60, 0], // 👉 from RIGHT to center
+        {
+            extrapolateRight: "clamp",
+            easing: Easing.out(Easing.ease),
+        }
+    );
+
+    const secondTextOpacity = interpolate(
+        frame,
+        [secondTextStart, secondTextStart + 10],
+        [0, 1],
+        { extrapolateRight: "clamp" }
+    );
+
+    const totalFrames = fps * 7;
+
+    const exitStart = totalFrames - fps * 1;
+
+    const exitOpacity = interpolate(
+        frame,
+        [exitStart, totalFrames],
+        [1, 0],
+        { extrapolateLeft: "clamp", extrapolateRight: "clamp" }
+    );
+    const exitTopY = interpolate(
+        frame,
+        [exitStart, totalFrames],
+        [0, -35],
+        {
+            extrapolateLeft: "clamp",
+            extrapolateRight: "clamp",
+            easing: Easing.bezier(0.22, 1, 0.36, 1),
+        }
+    );
+    const exitLeftX = interpolate(
+        frame,
+        [exitStart, totalFrames],
+        [0, -60],
+        {
+            extrapolateLeft: "clamp",
+            extrapolateRight: "clamp",
+            easing: Easing.in(Easing.ease),
+        }
+    );
+    const exitRightX = interpolate(
+        frame,
+        [exitStart, totalFrames],
+        [0, 60],
+        {
+            extrapolateLeft: "clamp",
+            extrapolateRight: "clamp",
+            easing: Easing.in(Easing.ease),
+        }
+    );
+
+    return (
+        <AbsoluteFill
+            style={{
+                overflow: "hidden",
+            }}
+        >
+            {/* LEFT CORNER LAMP */}
+            <HangingLamp05022026 side="left" offset={-200} />
+            <HangingLamp05022026 side="left" offset={-100} />
+            {/* Right CORNER LAMP */}
+            <HangingLamp05022026 side="right" offset={-200} />
+            <HangingLamp05022026 side="right" offset={-100} />
+
+            <DucksFrame05022026 />
+            <div
+                style={{
+                    display: "flex",
+                    flexDirection: "column",
+                    alignItems: "center",
+                    gap: 10,
+                    justifyContent: "flex-start",
+                    paddingTop: "18%",
+                    alignItems: "center",
+                }}
+            >
+
+                {/* INVITATION */}
+                <h1
+                    style={{
+                        maxWidth: "60%",
+                        textAlign: "center",
+                        opacity: opacity * exitOpacity,
+                        transform: `translateY(${translateY + exitTopY}px)`,
+                    }}
+                >
+                    <WordReveal28012026
+                        text={invitationMessage}
+                        start={20}
+                        fontSize={50}
+                        color="#2F6B4F"
+                        fontFamily="Dancing Script"
+                        letterSpacing="3px"
+                        lineHeight="1.2"
+                        fontWeight="800"
+                    />
+                </h1>
+                <div
+                    style={{
+                        color: "#D4AF37",
+                        fontSize: 40,
+                        textAlign: "center",
+                        opacity: dividerOpacity * exitOpacity,
+                        transform: `translateY(${dividerX + exitTopY}px)`,
+                    }}>
+                    ༺━━✦━━༻
+                </div>
+
+                {/* FIRST PERSON */}
+                <div
+                    style={{
+                        display: "flex",
+                        flexDirection: "column",
+                        textAlign: "center",
+                        transform: `translateX(${firstTextX + exitLeftX}px)`,
+                        opacity: firstTextOpacity * exitOpacity,
+                        marginTop: "2%",
+                        gap: "10px"
+                    }}
+                >
+                    <h1
+                        style={{
+                            fontFamily: "Dancing Script",
+                            color: "#1F5E3B",
+                            fontSize: 60,
+                            fontWeight: 600,
+                            maxWidth: "70%",
+                            margin: "0 auto",
+                            textAlign: "center",
+                            wordWrap: "break-word",
+                            lineHeight: "1.2",
+                            letterSpacing: "2px"
+                        }}>
+                        {firstName}
+                    </h1>
+
+                    <div
+                        style={{
+                            fontFamily: "Playfair Display",
+                            color: "#3B4A2F",
+                            fontSize: 32,
+                            maxWidth: "60%",
+                            fontWeight: 600,
+                            margin: "0 auto",
+                            textAlign: "center",
+                            wordWrap: "break-word",
+                            lineHeight: "1.3",
+                            letterSpacing: "2px"
+                        }}>
+                        {firstSideNote}
+                    </div>
+                </div>
+
+                <div
+                    style={{
+                        fontSize: 40,
+                        textAlign: "center",
+                        marginTop: "10px",
+                        transform: `translateX(${divider2X + exitTopY}px)`,
+                        opacity: divider2Opacity * exitOpacity,
+                    }} >
+                    🌿🌿🌿🌿
+                </div>
+
+                {/* SECOND PERSON */}
+                <div
+                    style={{
+                        display: "flex",
+                        flexDirection: "column",
+                        gap: "10px",
+                        textAlign: "center",
+                        transform: `translateX(${secondTextX + exitRightX}px)`,
+                        opacity: secondTextOpacity * exitOpacity,
+                    }}
+                >
+                    <h1
+                        style={{
+                            fontFamily: "Dancing Script",
+                            color: "#1F5E3B",
+                            fontSize: 60,
+                            fontWeight: 600,
+                            maxWidth: "70%",
+                            margin: "0 auto",
+                            textAlign: "center",
+                            wordWrap: "break-word",
+                            lineHeight: "1.2",
+                            letterSpacing: "2px"
+                        }}>
+                        {secondName}
+                    </h1>
+
+
+
+                    <div
+                        style={{
+                            fontFamily: "Playfair Display",
+                            fontSize: 32,
+                            color: "#3B4A2F",
+                            maxWidth: "60%",
+                            fontWeight: 600,
+                            margin: "0 auto",
+                            textAlign: "center",
+                            wordWrap: "break-word",
+                            lineHeight: "1.3",
+                            letterSpacing: "2px"
+                        }}>
+                        {secondSideNote}
+                    </div>
+                </div>
+
+            </div>
+            {/* OCCASION DATE – BOTTOM LEFT */}
+            <div
+                style={{
+                    position: "absolute",
+                    bottom: 50,
+                    left: "13%",
+                    lineHeight: 1.2,
+                    whiteSpace: "nowrap",
+                    // opacity: exitOpacity,
+                    // transform: `translateY(${exitTopY}px)`,
+                }}
+            >
+                <WordReveal28012026
+                    text={dateParts.datemonth}
+                    start={50}
+                    fontSize={55}
+                    color="#C9A24D"
+                    fontFamily="Playfair Display"
+                    letterSpacing="2px"
+                    lineHeight="1.2"
+                    fontWeight="600"
+                />
+                <WordReveal28012026
+                    text={dateParts.year}
+                    start={70}
+                    fontSize={50}
+                    color="#C9A24D"
+                    fontFamily="Playfair Display"
+                    letterSpacing="4px"
+                    lineHeight="1"
+                    fontWeight="600"
+                />
+            </div>
+
+        </AbsoluteFill>
+    );
+
+
+};

package/src/Invitations/Frames/F05022026_03.jsx

@@ -0,0 +1,328 @@
+import React from "react";
+import {
+  AbsoluteFill,
+  useCurrentFrame,
+  useVideoConfig,
+  interpolate,
+  Easing,
+  Img,
+  staticFile,
+} from "remotion";
+import { HangingJumar05022026 } from "../Elements/HangingJumar05022026";
+import { FloatingFlowersBottom } from "../Elements/FloatingFlowersBottom";
+
+export const F05022026_03 = ({
+  eventDateTime, venueName, venueAddress
+}) => {
+  const frame = useCurrentFrame();
+  const { fps } = useVideoConfig();
+
+  const getDateParts = (iso) => {
+    if (!iso) return { day: "", month: "", year: "", time: "" };
+
+    const d = new Date(iso);
+
+    return {
+      day: d.getDate(),
+      month: d.toLocaleString("en-US", { month: "long" }),
+      year: d.getFullYear(),
+      time: d.toLocaleTimeString("en-US", {
+        hour: "2-digit",
+        minute: "2-digit",
+        hour12: true,
+      }),
+    };
+  };
+
+  const { day, month, year, time } = getDateParts(eventDateTime);
+
+  const wedStart = fps * 1;
+  const dateStart = fps * 1.5;
+  const venueStart = fps * 2;
+  const addressStart = fps * 2.5;
+
+  const wedX = interpolate(
+    frame,
+    [wedStart, wedStart + fps * 2],
+    [-200, 0],
+    {
+      extrapolateRight: "clamp",
+      easing: Easing.out(Easing.cubic),
+    }
+  );
+
+  const wedOpacity = interpolate(
+    frame,
+    [wedStart, wedStart + 10],
+    [0, 1],
+    { extrapolateRight: "clamp" }
+  );
+
+  // FIRST TEXT
+  const venueX = interpolate(
+    frame,
+    [venueStart, venueStart + fps * 2],
+    [-200, 0],
+    {
+      extrapolateRight: "clamp",
+      easing: Easing.out(Easing.ease),
+    }
+  );
+
+  const venueOpacity = interpolate(
+    frame,
+    [venueStart, venueStart + 10],
+    [0, 1],
+    { extrapolateRight: "clamp" }
+  );
+
+  // SECOND PHOTO (from right)
+  const dateX = interpolate(
+    frame,
+    [dateStart, dateStart + fps * 2],
+    [200, 0],
+    {
+      extrapolateRight: "clamp",
+      easing: Easing.out(Easing.cubic),
+    }
+  );
+
+  const dateOpacity = interpolate(
+    frame,
+    [dateStart, dateStart + 10],
+    [0, 1],
+    { extrapolateRight: "clamp" }
+  );
+
+  // SECOND TEXT
+  const addressX = interpolate(
+    frame,
+    [addressStart, addressStart + 20],
+    [60, 0], // 👉 from RIGHT to center
+    {
+      extrapolateRight: "clamp",
+      easing: Easing.out(Easing.ease),
+    }
+  );
+
+  const addressOpacity = interpolate(
+    frame,
+    [addressStart, addressStart + 10],
+    [0, 1],
+    { extrapolateRight: "clamp" }
+  );
+
+  const totalFrames = fps * 7;
+
+  const exitStart = totalFrames - fps * 1;
+
+  const exitOpacity = interpolate(
+    frame,
+    [exitStart, totalFrames],
+    [1, 0],
+    { extrapolateLeft: "clamp", extrapolateRight: "clamp" }
+  );
+  const exitLeftX = interpolate(
+    frame,
+    [exitStart, totalFrames],
+    [0, -60],
+    {
+      extrapolateLeft: "clamp",
+      extrapolateRight: "clamp",
+      easing: Easing.in(Easing.ease),
+    }
+  );
+  const exitRightX = interpolate(
+    frame,
+    [exitStart, totalFrames],
+    [0, 60],
+    {
+      extrapolateLeft: "clamp",
+      extrapolateRight: "clamp",
+      easing: Easing.in(Easing.ease),
+    }
+  );
+
+  const coupleStart = fps * 1;
+  const coupleEnd = fps * 6;
+
+  const coupleScale = interpolate(
+    frame,
+    [coupleStart, coupleEnd],
+    [2, 1], 
+    {
+      extrapolateLeft: "clamp",
+      extrapolateRight: "clamp",
+      easing: Easing.out(Easing.ease),
+    }
+  );
+
+  const coupleY = interpolate(
+  frame,
+  [coupleStart, coupleEnd],
+  [20, 0], 
+  {
+    extrapolateLeft: "clamp",
+    extrapolateRight: "clamp",
+  }
+);
+
+  const walkBob = Math.sin(frame / 6) * 2;
+
+  const coupleOpacity = interpolate(
+    frame,
+    [coupleStart, coupleStart + 10],
+    [0, 1],
+    { extrapolateRight: "clamp" }
+  );
+
+
+  return (
+    <AbsoluteFill
+      style={{
+        overflow: "hidden",
+      }}
+    >
+      <FloatingFlowersBottom/>
+
+      <Img
+        src={staticFile("video-images/20012026-couple-walk.webp")}
+        style={{
+          position: "absolute",
+          left: "50%",
+          bottom: "-2%",
+          width: "50%",
+          opacity: coupleOpacity,
+          transform: `
+      translateX(-50%)
+      translateY(${coupleY + walkBob}px)
+      scale(${coupleScale})
+    `,
+        }}
+      />
+
+      <HangingJumar05022026 side="left" offset={-40} />
+      <HangingJumar05022026 side="right" offset={-40} />
+
+      <div
+        style={{
+          display: "flex",
+          flexDirection: "column",
+          justifyContent: "flex-start",
+          alignItems: "center",
+          textAlign: "center",
+          paddingTop: "20%",
+          gap: 20,
+        }}>
+
+        {/* Wedding */}
+        <h1
+          style={{
+            color: "#A11C2F",
+            fontFamily: "Dancing Script",
+            letterSpacing: 2,
+            lineHeight: 1,
+            fontWeight: 600,
+            fontSize: 140,
+            margin: 0,
+            transform: `translateX(${wedX + exitLeftX}px)`,
+            opacity: wedOpacity * exitOpacity,
+          }}
+        >
+          Wedding
+        </h1>
+
+        {/* Date */}
+        <div
+          style={{
+            fontSize: 60,
+            color: "#4A2C1A",
+            letterSpacing: 3,
+            fontFamily: "Playfair Display",
+            transform: `translateX(${dateX + exitRightX}px)`,
+            opacity: dateOpacity * exitOpacity,
+          }}
+        >
+          {day}-{month}-{year},
+        </div>
+
+        {/* Time */}
+        <div
+          style={{
+            fontSize: 60,
+            color: "#B11226",
+            fontFamily: "Playfair Display",
+            transform: `translateX(${dateX + exitRightX}px)`,
+            opacity: dateOpacity * exitOpacity,
+          }}
+        >
+          At {time}
+        </div>
+        {/* Wedding */}
+        <h1
+          style={{
+            color: "#A11C2F",
+            fontFamily: "Dancing Script",
+            letterSpacing: 2,
+            lineHeight: 1,
+            fontWeight: 600,
+            fontSize: 140,
+            margin: 0,
+            transform: `translateX(${venueX + exitLeftX}px)`,
+            opacity: venueOpacity * exitOpacity,
+          }}
+        >
+          Venue:
+        </h1>
+
+        {/* Venue Name */}
+        <div
+          style={{
+            fontSize: 55,
+            color: "#4A2C1A",
+            fontFamily: "Playfair Display",
+            width: "80%",
+            maxWidth: "80%",
+            lineHeight: 1.2,
+            letterSpacing: 2,
+            textAlign: "center",
+            wordBreak: "break-word",
+            overflowWrap: "anywhere",
+            marginLeft: "auto",
+            marginRight: "auto",
+            transform: `translateX(${addressX + exitRightX}px)`,
+            opacity: addressOpacity * exitOpacity,
+          }}
+        >
+          {venueName} 
+        </div>
+
+        {/* Venue Address */}
+        <div
+          style={{
+            fontSize: 50,
+            color: "#4A2C1A",
+            fontFamily: "Playfair Display",
+            width: "80%",
+            maxWidth: "70%",
+            lineHeight: 1.2,
+            letterSpacing: 2,
+            textAlign: "center",
+            wordBreak: "break-word",
+            overflowWrap: "anywhere",
+            marginLeft: "auto",
+            marginRight: "auto",
+            marginTop: "10px",
+            transform: `translateX(${addressX + exitRightX}px)`,
+            opacity: addressOpacity * exitOpacity,
+          }}
+        >
+          {venueAddress}  
+        </div>
+
+
+      </div>
+
+    </AbsoluteFill>
+  );
+};