@evatril/video-templates 2.0.0

package/src/Invitations/Frames/F20012026_03.jsx

@@ -0,0 +1,317 @@
+import React from "react";
+import {
+  AbsoluteFill,
+  useCurrentFrame,
+  useVideoConfig,
+  interpolate,
+  Easing,
+  Img,
+  staticFile,
+} from "remotion";
+
+import { GroomBrideLoveScene20012026 } from "../Elements/GroomBrideLoveScene20012026.jsx";
+import{ SmoothRevealFromTop} from "../Elements/SmoothRevealFromTop.jsx"
+
+export const F20012026_03 = ({
+  eventDateTime,
+  venueName,
+  venueAddress,
+  familyMember,
+  fadeInDuration = 30,
+}) => {
+  const frame = useCurrentFrame();
+  const { fps } = useVideoConfig();
+
+  /* ================= SCENE REVEAL (SMOKE FOLLOW-UP) ================= */
+  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),
+    }
+  );
+
+  /* ---------------- DATE UTILS ---------------- */
+  const getDateParts = (iso) => {
+    if (!iso) return { day: "", month: "", year: "", time: "" };
+
+    const d = new Date(iso);
+    if (isNaN(d.getTime())) {
+      return { day: "", month: "", year: "", time: "" };
+    }
+
+    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 DETAILS_START = fps * 4;
+ 
+  /* ================= IMAGE ANIMATION ================= */
+  const showImageAfter = fadeInDuration * 2;
+
+  const imageOpacity = interpolate(
+    frame,
+    [showImageAfter, showImageAfter + fps * 1.2],
+    [0, 1],
+    {
+      extrapolateRight: "clamp",
+      easing: Easing.out(Easing.ease),
+    }
+  );
+
+  const imageScale = interpolate(
+    frame,
+    [showImageAfter, showImageAfter + fps * 1.2],
+    [0.95, 1],
+    {
+      extrapolateRight: "clamp",
+      easing: Easing.out(Easing.cubic),
+    }
+  );
+  const imageTranslateY = interpolate(
+    frame,
+    [showImageAfter, showImageAfter + fps * 1.2],
+    [-200, 0], // 🔥 starts above and comes down
+    {
+      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-wedding-gate.png")}
+        style={{
+          position: "absolute",
+          top: 0,
+          left: "50%",
+          width: "100%",
+          height: "100%",
+          opacity: imageOpacity,
+          transform: `
+      translateX(-50%)
+      translateY(${imageTranslateY}px)
+      scale(${imageScale})
+    `,
+        }}
+      />
+
+      <GroomBrideLoveScene20012026 startAfter={3.5} />
+
+      <div
+        style={{
+          position: "absolute",
+          top: "24%",
+          width: "100%",
+          display: "flex",
+          flexDirection: "column",
+          alignItems: "center",
+          textAlign: "center",
+          zIndex: 5,
+          gap: "30px"
+        }}
+      >
+        <div
+          style={{
+            maxWidth: "50%",
+            fontFamily: "Playfair Display",
+            fontSize: 55,
+            fontWeight: "600",
+            color: "#3B2F2F",
+            lineHeight: 1.2,
+            letterSpacing: "2px",
+            whiteSpace: "normal",
+            wordBreak: "break-word",
+            overflowWrap: "break-word",
+            ...SmoothRevealFromTop({
+              frame,
+              startFrame: DETAILS_START,
+              delay: 0,
+            })
+          }}
+        >
+          {venueName}
+        </div>
+
+        <div
+          style={{
+            maxWidth: "80%",
+            fontFamily: "Playfair Display",
+            fontSize: 50,
+            fontWeight: "600",
+            color: "#5A4A42",
+            lineHeight: 1.2,
+            letterSpacing: "2px",
+            whiteSpace: "normal",
+            wordBreak: "break-word",
+            overflowWrap: "break-word",
+            ...SmoothRevealFromTop({
+              frame,
+              startFrame: DETAILS_START,
+              delay: 25,
+            })
+
+          }}
+        >
+          {venueAddress}
+        </div>
+        <div
+          style={{
+            fontFamily: "Great Vibes",
+            fontSize: 55,
+            fontWeight: "600",
+            color: "#6B1E2E",
+            lineHeight: 1.2,
+            letterSpacing: "3px",
+            whiteSpace: "normal",
+            wordBreak: "break-word",
+            overflowWrap: "break-word",
+            ...SmoothRevealFromTop({
+  frame,
+  startFrame: DETAILS_START,
+  delay: 50,
+})
+
+          }}
+        >
+          On the joyous occasion
+        </div>
+        <div
+          style={{
+            maxWidth: "80%",
+            display: "flex",
+            gap: 18,
+            fontFamily: "Playfair Display",
+            fontSize: 50,
+            fontWeight: "600",
+            color: "#6B1E2E",
+            lineHeight: 1.2,
+            letterSpacing: "2px",
+            whiteSpace: "normal",
+            wordBreak: "break-word",
+            overflowWrap: "break-word",
+           ...SmoothRevealFromTop({
+  frame,
+  startFrame: DETAILS_START,
+  delay: 70,
+})
+
+          }}
+        >
+          <span>{day}</span>
+          <span>{month}</span>
+          <span>{year}</span>
+        </div>
+        <div
+          style={{
+            fontFamily: "Great Vibes",
+            fontSize: 55,
+            fontWeight: "600",
+            color: "#4B3A28",
+            lineHeight: 1.2,
+            letterSpacing: "2px",
+            whiteSpace: "normal",
+            wordBreak: "break-word",
+            overflowWrap: "break-word",
+            ...SmoothRevealFromTop({
+  frame,
+  startFrame: DETAILS_START,
+  delay: 95,
+})
+
+          }}
+        >
+          Wedding Time
+        </div>
+        <div
+          style={{
+            fontSize: 50,
+            fontWeight: "600",
+            color: "#4B3A28",
+            fontFamily: "Playfair Display",
+            lineHeight: 1.2,
+            letterSpacing: "2px",
+            whiteSpace: "normal",
+            wordBreak: "break-word",
+            overflowWrap: "break-word",
+            ...SmoothRevealFromTop({
+  frame,
+  startFrame: DETAILS_START,
+  delay: 115,
+})
+
+          }}
+        >
+          {time}
+        </div>
+
+        <div
+          style={{
+            maxWidth: "70%",
+            fontFamily: "Playfair Display",
+            fontSize: 40,
+            fontWeight: "600",
+            lineHeight: 1.2,
+            color: "#7A5C3E",
+            lineHeight: 1.2,
+            letterSpacing: "2px",
+            whiteSpace: "normal",
+            wordBreak: "break-word",
+            overflowWrap: "break-word",
+            ...SmoothRevealFromTop({
+  frame,
+  startFrame: DETAILS_START,
+  delay: 125,
+})
+
+          }}
+        >
+          {familyMember}
+        </div>
+      </div>
+
+    </AbsoluteFill>
+  );
+};

package/src/Invitations/Themes/T20012026_01.jsx

@@ -0,0 +1,125 @@
+import React from "react";
+import { Sequence, useVideoConfig, Audio, staticFile } from "remotion";
+import { F20012026_01 } from "../Frames/F20012026_01.jsx";
+import { F20012026_02 } from "../Frames/F20012026_02.jsx";
+import { F20012026_03 } from "../Frames/F20012026_03.jsx";
+import { InkSmokeTransition20012026 } from "../Elements/InkSmokeTransition20012026.jsx";
+
+export const T20012026_01 = ({
+  event,
+  formData,
+  eventDateTime,
+  occasionDate,
+  venue,
+  welcomeMessage,
+  invitationMessage,
+  familyMember,
+}) => {
+  const { durationInFrames } = useVideoConfig();
+
+ // Detect creator safely
+const whoIsCreating =
+  event?.occasion_data?.who_is_creating ??
+  event?.who_is_creating;
+
+const isBrideCreating =
+  whoIsCreating === "Bride" || !whoIsCreating;
+
+// Names
+const brideName =
+  event?.occasion_data?.bride_name ??
+  event?.bride_name ??
+  formData?.bride_name ??
+  "";
+
+const groomName =
+  event?.occasion_data?.groom_name ??
+  event?.groom_name ??
+  formData?.groom_name ??
+  "";
+
+const firstName = isBrideCreating ? brideName : groomName;
+const secondName = isBrideCreating ? groomName : brideName;
+
+// Side notes (safe)
+const firstSideNote = isBrideCreating
+  ? formData?.bride_side_note || ""
+  : formData?.groom_side_note || "";
+
+const secondSideNote = isBrideCreating
+  ? formData?.groom_side_note || ""
+  : formData?.bride_side_note || "";
+
+// Venue (safe)
+const venueName =
+  venue?.name || formData?.venue_name || "";
+
+const venueAddress =
+  venue?.address || formData?.venue_address || "";
+
+
+  const framesPerPage = Math.floor(durationInFrames / 3);
+  const transitionDuration = Math.floor(framesPerPage * 0.25); // ~1 sec
+
+  return (
+    <>
+      {/* 🎵 Background Music */}
+      <Audio
+        src={staticFile("video-images/wedding.mp3")}
+        startFrom={30}
+        endAt={900}
+        volume={0.4}
+      />
+      <Sequence from={0} durationInFrames={framesPerPage}>
+        <F20012026_01
+          firstName={firstName}
+          secondName={secondName}
+          welcomeMessage={welcomeMessage}
+          eventDateTime={eventDateTime}
+        />
+      </Sequence>
+
+      <Sequence
+        from={framesPerPage}
+        durationInFrames={framesPerPage}
+      >
+        <F20012026_02
+          firstName={firstName}
+          secondName={secondName}
+          firstSideNote={firstSideNote}
+          secondSideNote={secondSideNote}
+          invitationMessage={invitationMessage}
+          occasionDate={occasionDate}
+          fadeInDuration={transitionDuration}
+        />
+      </Sequence>
+
+      {/* 🎨 INK / SMOKE TRANSITION OVERLAY */}
+      <Sequence
+        from={framesPerPage}
+        durationInFrames={transitionDuration}
+      >
+        <InkSmokeTransition20012026 />
+      </Sequence>
+
+      <Sequence from={framesPerPage * 2} durationInFrames={framesPerPage}>
+        <F20012026_03
+          eventDateTime={eventDateTime}
+          venueName={venueName}
+          venueAddress={venueAddress}
+          familyMember={familyMember}
+        />
+      </Sequence>
+
+      {/* ☁️ SMOKE TRANSITION: SCENE 2 ➜ SCENE 3 */}
+      <Sequence
+        from={framesPerPage * 2}
+        durationInFrames={transitionDuration}
+      >
+        <InkSmokeTransition20012026 />
+      </Sequence>
+
+
+    </>
+  );
+};

package/src/compositions.jsx

@@ -0,0 +1,19 @@
+import React from "react";
+import { Composition } from "remotion";
+import { T20012026_01 } from "./Invitations/Themes/T20012026_01.jsx";
+ 
+export const VideoCompositions = () => {
+  return (
+    <>
+      <Composition
+        id="T20012026_01"
+       component={T20012026_01}
+        durationInFrames={30 * 30} 
+        fps={30}
+        width={1080}
+        height={1920}
+      />
+    </>
+  );
+};
+ 

package/src/fonts/index.js

@@ -0,0 +1,3 @@
+import { registerFonts } from "./registerFonts";
+
+registerFonts();

package/src/fonts/registerFonts.js

@@ -0,0 +1,46 @@
+
+import { staticFile } from "remotion";
+
+let registered = false;
+
+export const registerFonts = () => {
+  if (registered) return;
+  registered = true;
+
+   const fonts = [
+    {
+      family: "Great Vibes",
+      url: staticFile("Fonts/GreatVibes-Regular.ttf"),
+      format: "truetype",
+      weight: "400",
+    },
+    {
+      family: "Dancing Script",
+      url: staticFile("Fonts/DancingScript-VariableFont_wght.ttf"
+      ),
+      format: "truetype",
+      weight: "100 700",
+    },
+    {
+      family: "Playfair Display",
+      url: staticFile("Fonts/PlayfairDisplay-Italic-VariableFont_wght.ttf"
+      ),
+      format: "truetype",
+      weight: "100 900",
+    },
+  ];
+
+  Promise.allSettled(
+    fonts.map(async (font) => {
+      const fontFace = new FontFace(
+        font.family,
+        `url('${font.url}') format('${font.format}')`,
+        { weight: font.weight }
+      );
+      await fontFace.load();
+      document.fonts.add(fontFace);
+    })
+  ).catch(() => {
+    // Ignore font loading errors; rendering should continue.
+  });
+};

package/src/index.js

@@ -0,0 +1,2 @@
+// Preview-only exports (PURE components)
+export { T20012026_01 } from "./Invitations/Themes/T20012026_01.jsx";

package/src/remotionRoot.jsx

@@ -0,0 +1,5 @@
+import { registerRoot } from "remotion";
+import { VideoCompositions } from "./compositions.jsx";
+import "./fonts";
+
+registerRoot(VideoCompositions);