@evatril/video-templates 2.0.6 → 2.0.8

package/src/Invitations/Frames/F28012026_04.jsx

@@ -0,0 +1,275 @@
+import React from "react";
+import {
+  AbsoluteFill,
+  useCurrentFrame,
+  useVideoConfig,
+  interpolate,
+  Easing,
+  Img,
+  staticFile,
+} from "remotion";
+import { HeartFlight28012026 } from "../Elements/HeartFlight28012026";
+
+export const F28012026_04 = ({
+  secondName,
+  secondSideNote,
+  secondPhoto,
+
+}) => {
+  const frame = useCurrentFrame();
+  const { fps } = useVideoConfig();
+
+  const topBorderStart = fps * 0;
+
+  const topBorderOpacity = interpolate(
+    frame,
+    [topBorderStart, topBorderStart + 20],
+    [0, 1],
+    {
+      extrapolateRight: "clamp",
+      easing: Easing.out(Easing.ease),
+    }
+  );
+
+  const topBorderTranslate = interpolate(
+    frame,
+    [topBorderStart, topBorderStart + 20],
+    [-60, 0], // slides DOWN from top
+    {
+      extrapolateRight: "clamp",
+    }
+  );
+
+  const borderStart = fps * 1; // border at 1s
+  const photoStart = borderStart + 20; // photo after border
+
+  const borderOpacity = interpolate(frame, [borderStart, borderStart + 25], [0, 1], {
+    extrapolateRight: "clamp",
+    easing: Easing.out(Easing.ease),
+  });
+
+  const borderScale = interpolate(frame, [borderStart, borderStart + 25], [0.7, 1], {
+    extrapolateRight: "clamp",
+  });
+
+  const photoOpacity = interpolate(frame, [photoStart, photoStart + 25], [0, 1], {
+    extrapolateRight: "clamp",
+  });
+
+  const photoScale = interpolate(frame, [photoStart, photoStart + 25], [0.7, 1], {
+    extrapolateRight: "clamp",
+  });
+
+  const nameStart = fps * 2.5; // adjust timing if needed
+
+  const nameOpacity = interpolate(frame, [nameStart, nameStart + 20], [0, 1], {
+    extrapolateRight: "clamp",
+    easing: Easing.out(Easing.ease),
+  });
+
+
+const nameTranslateX = interpolate(
+  frame,
+  [
+    nameStart,
+    nameStart + fps * 2,
+    nameStart + fps * 2.3,
+  ],
+  [-600, 10, 0],
+  {
+    extrapolateLeft: "clamp",
+    extrapolateRight: "clamp",
+    easing: Easing.inOut(Easing.cubic),
+  }
+);
+
+   const emojiStart = nameStart + 20;
+  
+    const emojiOpacity = interpolate(frame, [emojiStart, emojiStart + 20], [0, 1], {
+      extrapolateRight: "clamp",
+      easing: Easing.out(Easing.ease),
+    });
+  
+   const emojiTranslateX = interpolate(
+  frame,
+  [
+    emojiStart,
+    emojiStart + fps * 2,
+    emojiStart + fps * 2.3,
+  ],
+  [-600, 10, 0],
+  {
+    extrapolateLeft: "clamp",
+    extrapolateRight: "clamp",
+    easing: Easing.inOut(Easing.cubic),
+  }
+);
+
+  
+  const sideNoteStart = nameStart + fps * 1.5; // appears ~0.8s after name
+
+  const sideOpacity = interpolate(frame, [sideNoteStart, sideNoteStart + 20], [0, 1], {
+    extrapolateRight: "clamp",
+    easing: Easing.out(Easing.ease),
+  });
+
+   const sideTranslateX = interpolate(
+   frame,
+   [
+     sideNoteStart,
+     sideNoteStart + fps * 2,
+     sideNoteStart + fps * 2.3,
+   ],
+   [-600, 10, 0],
+   {
+     extrapolateLeft: "clamp",
+     extrapolateRight: "clamp",
+     easing: Easing.inOut(Easing.cubic),
+   }
+ );
+
+
+  return (
+    <AbsoluteFill
+      style={{
+        overflow: "hidden",
+      }}
+    >
+      {/* <MultiHeartFloat28012026 startAfter={3} count={18} emoji="💖" /> */}
+      <HeartFlight28012026 emoji="💗" />
+
+      {/* Top Border */}
+      <div
+        style={{
+          position: "absolute",
+          top: 0,
+          left: 10,
+          width: "100%",
+          display: "flex",
+          justifyContent: "center",
+        }}
+      >
+        <Img
+          src={staticFile("video-images/28012026-TopBorder.webp")}
+          style={{
+            width: "90%",
+            transform: `translateY(${topBorderTranslate}px) scale(1.2)`,
+            opacity: topBorderOpacity,
+          }}
+        />
+      </div>
+
+      {secondPhoto && (
+        <div
+          style={{
+            position: "absolute",
+            top: "12%",
+            left: "50%",
+            transform: "translateX(-50%)",
+            width: 860,
+            height: 860,
+            pointerEvents: "none",
+            zIndex: 2,
+          }}
+        >
+          {/* BORDER */}
+          <Img
+            src={staticFile("video-images/28012026-border.webp")}
+            style={{
+              position: "absolute",
+              inset: 0,
+              width: "100%",
+              height: "100%",
+              opacity: borderOpacity,
+              transform: `scale(${borderScale})`,
+              zIndex: 1
+            }}
+          />
+
+          {/* BRIDE PHOTO */}
+          <Img
+            src={secondPhoto}
+            style={{
+              position: "absolute",
+              inset: 0,
+              margin: "auto",
+              width: "72%",
+              height: "70%",
+              bottom: "15%",
+              objectFit: "cover",
+              borderRadius: "50%",
+              opacity: photoOpacity,
+              transform: `scale(${photoScale})`,
+            }}
+          />
+        </div>
+      )}
+
+      {/* NAME + SIDE NOTE UNDER IMAGE */}
+      <div
+        style={{
+          position: "absolute",
+          top: "60%",
+          width: "100%",
+          textAlign: "center",
+          opacity: nameOpacity,
+
+        }}
+      >
+        <h1
+          style={{
+            fontFamily: "Dancing Script",
+            color: "#C94A6A",
+            fontSize: 100,
+            letterSpacing: 3,
+            margin: "0 auto 35px auto",
+            maxWidth: "80%",
+            lineHeight: "1.3",
+            fontWeight: "600",
+             opacity: nameOpacity,
+            transform: `translateX(${nameTranslateX}px)`,
+          }}
+        >
+          {secondName}
+
+        </h1>
+
+         <div
+          style={{
+            display: "flex",
+            justifyContent: "center",
+            alignItems: "center",
+            gap: 12,
+            fontSize: 60,
+            marginBottom: 25,
+            opacity: emojiOpacity,
+            transform: `translateX(${emojiTranslateX}px)`,
+          }}
+        >
+           ✨  ✨ 
+        </div>
+
+        <div
+          style={{
+            fontFamily: "Playfair Display",
+            color: "#8A7A5A",
+            fontSize: 50,
+            letterSpacing: 3,
+            margin: "0 auto",
+            maxWidth: "80%",
+            lineHeight: "1.3",
+            fontWeight: "600",
+            opacity: sideOpacity,
+            transform: `translateX(${sideTranslateX}px)`,
+          }}
+        >
+          {secondSideNote}
+        </div>
+      </div>
+
+
+
+
+    </AbsoluteFill>
+  );
+};

package/src/Invitations/Frames/F28012026_05.jsx

@@ -0,0 +1,179 @@
+import React from "react";
+import {
+  AbsoluteFill,
+  Img,
+  useCurrentFrame,
+  useVideoConfig,
+  interpolate,
+  Easing,
+  staticFile,
+} from "remotion";
+import { WordReveal28012026 } from "../Elements/WordReveal28012026";
+
+export const F28012026_05 = ({
+  eventDateTime,
+  venueName,
+  venueAddress,
+  familyMember,
+}) => {
+  const frame = useCurrentFrame();
+  const { fps, height } = useVideoConfig();
+
+  // 🔥 Start animation immediately
+  const safeFrame = frame;
+
+  // 🌿 Slow elegant downward slide (3 seconds)
+  const frameY = interpolate(
+    safeFrame,
+    [0, fps * 3],
+    [-height, 0],
+    {
+      extrapolateLeft: "clamp",
+      extrapolateRight: "clamp",
+      easing: Easing.out(Easing.cubic),
+    }
+  );
+
+  // ✨ Gentle fade in
+  const opacity = interpolate(
+    safeFrame,
+    [0, fps * 1.5],
+    [0, 1],
+    {
+      extrapolateLeft: "clamp",
+      extrapolateRight: "clamp",
+    }
+  );
+
+  // Text start timing
+  const frameStart = fps * 0.5;
+
+  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 textWrapper = {
+    maxWidth: "70%",
+    textAlign: "center",
+    margin: "0 auto",
+  };
+
+  return (
+    <AbsoluteFill style={{ overflow: "hidden" }}>
+      {/* Background Frame */}
+      <Img
+        src={staticFile("video-images/28012026-frame.webp")}
+        style={{
+          position: "absolute",
+          inset: 0,
+          width: "100%",
+          height: "100%",
+          objectFit: "cover",
+          transform: `translateY(${frameY}px)`,
+          opacity,
+        }}
+      />
+
+      {/* Text Content */}
+      <div
+        style={{
+          position: "absolute",
+          inset: 0,
+          display: "flex",
+          flexDirection: "column",
+          justifyContent: "start",
+          alignItems: "center",
+          paddingTop: "40%",
+          gap: 30,
+          zIndex: 5,
+        }}
+      >
+        <div style={textWrapper}>
+          <WordReveal28012026
+            text={venueName}
+            start={frameStart + 40}
+            fontSize={70}
+            color="#7B1E3A"
+            fontFamily="Playfair Display"
+          />
+        </div>
+
+        <div style={textWrapper}>
+          <WordReveal28012026
+            text={venueAddress}
+            start={frameStart + 50}
+            fontSize={60}
+            color="#4A3A2A"
+            fontFamily="Playfair Display"
+          />
+        </div>
+
+        <div style={textWrapper}>
+          <WordReveal28012026
+            text="On the joyous occasion"
+            start={frameStart + 60}
+            fontSize={70}
+            color="#6B1E2E"
+            fontFamily="Dancing Script"
+          />
+        </div>
+
+        <div style={textWrapper}>
+          <WordReveal28012026
+            text={`${day} ${month} ${year}`}
+            start={frameStart + 80}
+            fontSize={60}
+            color="#8A6A3F"
+            fontFamily="Great Vibes"
+            letterSpacing={6}
+          />
+        </div>
+
+        <div style={textWrapper}>
+          <WordReveal28012026
+            text="Wedding Time"
+            start={frameStart + 100}
+            fontSize={60}
+            color="#7B1E3A"
+            fontFamily="Dancing Script"
+          />
+        </div>
+
+        <div style={textWrapper}>
+          <WordReveal28012026
+            text={time}
+            start={frameStart + 110}
+            fontSize={60}
+            color="#4B3A28"
+            fontFamily="Dancing Script"
+          />
+        </div>
+
+        <div style={textWrapper}>
+          <WordReveal28012026
+            text={familyMember}
+            start={frameStart + 130}
+            fontSize={50}
+            color="#B2455D"
+            fontFamily="Playfair Display"
+          />
+        </div>
+      </div>
+    </AbsoluteFill>
+  );
+};

package/src/Invitations/Themes/T03022026_01.jsx

@@ -0,0 +1,269 @@
+import React, { useMemo } from "react";
+import {
+    Sequence,
+    useVideoConfig,
+    Audio,
+    staticFile,
+    AbsoluteFill,
+    Img,
+    useCurrentFrame,
+    interpolate,
+    Easing,
+} from "remotion";
+
+import { usePreloadImages } from "../hooks/usePreloadImages.js";
+import { F03022026_01 } from "../Frames/F03022026_01.jsx";
+import { F03022026_02 } from "../Frames/F03022026_02.jsx";
+import { F03022026_03 } from "../Frames/F03022026_03.jsx";
+import { F03022026_04 } from "../Frames/F03022026_04.jsx";
+import { F03022026_05 } from "../Frames/F03022026_05.jsx";
+import { HoldSlide } from "../Elements/HoldSlide.jsx";
+
+export const T03022026_01 = ({
+    event,
+    formData,
+    eventDateTime,
+    occasionDate,
+    venue,
+    welcomeMessage,
+    invitationMessage,
+    familyMember,
+}) => {
+    const frame = useCurrentFrame();
+    const { fps, durationInFrames } = useVideoConfig();
+
+    /* ---------------- MUSIC FADE ---------------- */
+    const fadeDuration = 2 * fps;
+    const fadeOutStart = durationInFrames - fadeDuration;
+    const musicVolume = interpolate(
+        frame,
+        [0, fadeOutStart, durationInFrames],
+        [0.4, 0.4, 0],
+        {
+            easing: Easing.inOut(Easing.ease),
+            extrapolateLeft: "clamp",
+            extrapolateRight: "clamp",
+        }
+    );
+    const slideDuration = 1 * fps;
+
+    const firstSceneContent = 5 * fps;
+    const secondSceneContent = 6 * fps;
+    const thirdSceneContent = 7 * fps;
+    const fourSceneContent = 7 * fps;
+    const fiveSceneContent = 9 * fps;
+    const firstSceneDuration = firstSceneContent + slideDuration;
+    const secondSceneDuration = secondSceneContent + slideDuration;
+    const thirdSceneDuration = thirdSceneContent + slideDuration;
+    const fourSceneDuration = fourSceneContent + slideDuration;
+    const fiveSceneDuration = fiveSceneContent + slideDuration;
+
+    /* ---------------- SAFE DATA ---------------- */
+    const whoIsCreating =
+        event?.eventData?.occasion_data?.who_is_creating ??
+        event?.occasion_data?.who_is_creating ??
+        event?.who_is_creating;
+
+    const isBrideCreating =
+        whoIsCreating === "Bride" || !whoIsCreating;
+
+    const brideName =
+        event?.eventData?.occasion_data?.bride_name ??
+        event?.occasion_data?.bride_name ??
+        formData?.bride_name ??
+        "";
+
+    const groomName =
+        event?.eventData?.occasion_data?.groom_name ??
+        event?.occasion_data?.groom_name ??
+        formData?.groom_name ??
+        "";
+
+    const bridePhoto =
+        event?.eventData?.occasion_data?.bride_photo?.url ??
+        event?.occasion_data?.bride_photo?.url ??
+        formData?.bride_photo ??
+        "";
+
+    const groomPhoto =
+        event?.eventData?.occasion_data?.groom_photo?.url ??
+        event?.occasion_data?.groom_photo?.url ??
+        formData?.groom_photo ??
+        "";
+
+    const firstName = isBrideCreating ? brideName : groomName;
+    const secondName = isBrideCreating ? groomName : brideName;
+
+    const firstPhoto = isBrideCreating ? bridePhoto : groomPhoto;
+    const secondPhoto = isBrideCreating ? groomPhoto : bridePhoto;
+
+
+    const firstSideNote = isBrideCreating
+        ? formData?.bride_side_note || ""
+        : formData?.groom_side_note || "";
+
+    const secondSideNote = isBrideCreating
+        ? formData?.groom_side_note || ""
+        : formData?.bride_side_note || "";
+
+    const venueName =
+        venue?.name || formData?.venue_name || "";
+
+    const venueAddress =
+        venue?.address || formData?.venue_address || "";
+
+    /* ---------------- PRELOAD IMAGES ---------------- */
+
+    const imagesToPreload = useMemo(
+        () => [
+            staticFile("video-images/03022026-bg.webp"),
+            staticFile("video-images/03022026-bg-2.webp"),
+            staticFile("video-images/03022026-bg-3.webp"),
+            staticFile("video-images/03022026-bg-4.webp"),
+            staticFile("video-images/03022026-bg-5.webp"),
+            staticFile("video-images/03022026-krishnaradha.webp"),
+            staticFile("video-images/03022026-krishnaradha-2.webp"),
+            staticFile("video-images/03022026-krishnaradha-4.webp"),
+            staticFile("video-images/03022026-krishnaradha-5.webp"),
+        ],
+        []
+    );
+
+    usePreloadImages(imagesToPreload);
+
+    const Page = ({ bg, children }) => (
+        <AbsoluteFill>
+            <Img
+                src={bg}
+                style={{
+                    position: "absolute",
+                    inset: 0,
+                    width: "100%",
+                    height: "100%",
+                    objectFit: "cover",
+                }}
+            />
+            {children}
+        </AbsoluteFill>
+    );
+
+    const backgrounds = useMemo(
+        () => [
+            staticFile("video-images/03022026-bg.webp"),
+            staticFile("video-images/03022026-bg-2.webp"),
+            staticFile("video-images/03022026-bg-3.webp"),
+            staticFile("video-images/03022026-bg-4.webp"),
+            staticFile("video-images/03022026-bg-5.webp"),
+        ],
+        []
+    );
+
+    return (
+        <AbsoluteFill>
+            {/* 🎵 MUSIC */}
+            <Audio
+                src={staticFile("video-images/wedding2.mp3")}
+                volume={musicVolume}
+            />
+
+            {/* 🌸 SCENE 1 (0–10s) */}
+            <Sequence from={0} durationInFrames={firstSceneDuration}>
+                <HoldSlide
+                    contentDuration={firstSceneContent}
+                    slideDuration={slideDuration}
+                    nextBg={backgrounds[1]}
+                >
+                    <Page bg={backgrounds[0]}>
+                        <F03022026_01 />
+                    </Page>
+                </HoldSlide>
+            </Sequence>
+
+            {/* 🌸 SCENE 2 (10–20s) */}
+            <Sequence from={firstSceneDuration} durationInFrames={secondSceneDuration}>
+                <HoldSlide
+                    contentDuration={secondSceneContent}
+                    slideDuration={slideDuration}
+                    nextBg={backgrounds[2]}
+                >
+                    <Page bg={backgrounds[1]}>
+                        <F03022026_02
+                            firstName={firstName}
+                            secondName={secondName}
+                            welcomeMessage={welcomeMessage}
+                            occasionDate={occasionDate}
+                        />
+                    </Page>
+                </HoldSlide>
+            </Sequence>
+
+            {/* 🌸 SCENE 3 (20–30s) */}
+            <Sequence
+                from={firstSceneDuration + secondSceneDuration}
+                durationInFrames={thirdSceneDuration}
+            >
+                <HoldSlide
+                    contentDuration={thirdSceneContent}
+                    slideDuration={slideDuration}
+                    nextBg={backgrounds[3]}
+
+                >
+                    <Page bg={backgrounds[2]}>
+                        <F03022026_03
+                            firstName={firstName}
+                            firstPhoto={firstPhoto}
+                            firstSideNote={firstSideNote}
+                            secondName={secondName}
+                            secondPhoto={secondPhoto}
+                            secondSideNote={secondSideNote}
+                            invitationMessage={invitationMessage}
+                        />
+                    </Page>
+                </HoldSlide>
+            </Sequence>
+
+            {/* SCENE 4 */}
+            <Sequence
+                from={firstSceneDuration + secondSceneDuration + thirdSceneDuration}
+                durationInFrames={fourSceneDuration}
+            >
+                <HoldSlide
+                    contentDuration={fourSceneContent}
+                    slideDuration={slideDuration}
+                    nextBg={backgrounds[4]}
+                >
+                    <Page bg={backgrounds[3]}>
+                        <F03022026_04
+                            eventDateTime={eventDateTime}
+                            venueName={venueName}
+                            venueAddress={venueAddress}
+                        />
+                    </Page>
+                </HoldSlide>
+            </Sequence>
+
+            {/* SCENE 5 */}
+            <Sequence
+                from={
+                    firstSceneDuration +
+                    secondSceneDuration +
+                    thirdSceneDuration +
+                    fourSceneDuration
+                }
+                durationInFrames={fiveSceneDuration}
+            >
+                <HoldSlide
+                    contentDuration={fiveSceneContent}
+                    slideDuration={slideDuration}
+                >
+                    <Page bg={backgrounds[4]}>
+                        <F03022026_05 familyMember={familyMember} />
+                    </Page>
+                </HoldSlide>
+            </Sequence>
+
+        </AbsoluteFill>
+    );
+};
+
+T03022026_01.duration = 30 * 38;