npm - @evatril/video-templates - Versions diffs - 2.0.4 → 2.0.6 - Mend

@evatril/video-templates 2.0.4 → 2.0.6

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (5) hide show

package/package.json +1 -1
package/src/Invitations/Frames/F20012026_01.jsx +7 -5
package/src/Invitations/Frames/F20012026_02.jsx +203 -211
package/src/Invitations/Frames/F20012026_03.jsx +4 -11
package/src/Invitations/Themes/T20012026_01.jsx +13 -17

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@evatril/video-templates",
-  "version": "2.0.4",
+  "version": "2.0.6",
   "description": "",
   "main": "src/index.js",
   "remotion": {

package/src/Invitations/Frames/F20012026_01.jsx CHANGED Viewed

@@ -9,17 +9,17 @@ import {
   staticFile
 } from "remotion";
-import {  Butterflies20012026 } from "../Elements/Butterflies20012026.jsx";
+import { Butterflies20012026 } from "../Elements/Butterflies20012026.jsx";
 import { OpeningGate20012026 } from "../Elements/OpeningGate20012026.jsx";
 import { CoupleWalk20012026 } from "../Elements/CoupleWalk20012026.jsx";
-import {FlowersSide20012026} from "../Elements/FlowersSide20012026.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();
+  const { fps, width, height } = useVideoConfig();
   /* -------------------- MESSAGE REVEAL -------------------- */
   const messageStart = fps * 4;
@@ -58,6 +58,8 @@ export const F20012026_01 = ({
   const groomAnim = reveal(groomStart);
   return (
     <AbsoluteFill style={{ overflow: "hidden" }}>
+      <AbsoluteFill style={{ backgroundColor: "#1a1a1a" }} />
       {/* ================= BACKGROUND ================= */}
       <Img
         src={staticFile("video-images/20012026-bg.png")}
@@ -154,7 +156,7 @@ export const F20012026_01 = ({
           <h1
             style={{
-              width: "100%",
+              width: "100%",
               maxWidth: "80%",
               fontFamily: "Playfair Display",
               color: "#6B1E2E",
@@ -171,7 +173,7 @@ export const F20012026_01 = ({
             }}
           >
-            {secondName}
+            {secondName}
           </h1>
         </div>
       </div>

package/src/Invitations/Frames/F20012026_02.jsx CHANGED Viewed

@@ -13,22 +13,12 @@ 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,
+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,
@@ -42,19 +32,19 @@ export const F20012026_02 = ({ firstName, secondName,firstSideNote,secondSideNot
   /* ================= SAFE DATE FORMAT ================= */
   const formatDate = (date) => {
-  if (!date) return "";
-  const d = new Date(date);
-  if (isNaN(d.getTime())) return "";
+    if (!date) return "";
+    const d = new Date(date);
+    if (isNaN(d.getTime())) return "";
-  return d.toLocaleDateString("en-IN", {
-    day: "numeric",
-    month: "long",
-    year: "numeric",
-  });
-};
+    return d.toLocaleDateString("en-IN", {
+      day: "numeric",
+      month: "long",
+      year: "numeric",
+    });
+  };
-   const DETAILS_START = fps * 3;
+  const DETAILS_START = fps * 3;
   /* ================= IMAGE ANIMATION ================= */
   const showImageAfter = fadeInDuration * 1;
@@ -80,232 +70,234 @@ export const F20012026_02 = ({ firstName, secondName,firstSideNote,secondSideNot
   );
   return (
-    <AbsoluteFill
-      style={{
-        opacity: sceneOpacity,
-        transform: `scale(${sceneScale})`,
-        transformOrigin: "center center",
-        overflow: "hidden",
-      }}
-    >
-      {/* ================= BACKGROUND ================= */}
-      <Img
-        src={staticFile("video-images/20012026-bg.png")}
+    <AbsoluteFill>
+      <AbsoluteFill style={{ backgroundColor: "#1a1a1a" }} />
+      <AbsoluteFill
         style={{
-          position: "absolute",
-          width: "100%",
-          height: "100%",
-          objectFit: "cover",
-        }}
-      />
+          transform: `scale(${sceneScale})`,
+          transformOrigin: "center center",
+          overflow: "hidden",
-      <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
+        {/* ================= BACKGROUND ================= */}
+        <Img
+          src={staticFile("video-images/20012026-bg.png")}
           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,
-            })
+            position: "absolute",
+            width: "100%",
+            height: "100%",
+            objectFit: "cover",
           }}
-        >
-          {firstName}
-        </h1>
+        />
-        {/* Bride Side Note */}
-        <div
+        <Img
+          src={staticFile("video-images/20012026-curtain-floral.png")}
           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,
-            })
+            position: "absolute",
+            left: "50%",
+            width: "100%",
+            opacity: imageOpacity,
+            transform: `translateX(-50%) scale(${imageScale})`,
           }}
-        >
-          {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>
+        {/* ================= DECORATIONS ================= */}
+        <SideTrees20012026 startAfter={2} />
+        <PeacockDance20012026 startAfter={3} />
-        {/* Date */}
         <div
           style={{
-            maxWidth: "70%",
-            marginTop: 20,
+            position: "relative",
+            top: "26%",
+            width: "100%",
+            display: "flex",
+            flexDirection: "column",
+            alignItems: "center",
             textAlign: "center",
-            ...SmoothRevealFromTop({
-              frame,
-              startFrame: DETAILS_START,
-              delay: 145,
-            })
+            gap: "15px"
           }}
         >
-          {/* -------- Message Line -------- */}
+          {/* Invitation Message */}
           <div
             style={{
-              fontSize: 45,
-              fontFamily:"Great Vibes",
+              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",
-              color: "#2F6B4F",
+              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,
-              marginBottom: 8,
-              whiteSpace: "nowrap",
+              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,
+              })
             }}
           >
-            – Join us on this auspicious day –
+            ❁ ❁ ❁
           </div>
-          {/* -------- Date Line -------- */}
+          {/* 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={{
-              fontSize: 55,
-              fontFamily:"Playfair Display",
-              fontWeight: "400",
-              color: "#5A4632",
+              maxWidth: "70%",
+              fontFamily: "Dancing Script",
+              color: "#B87A6A",
+              fontSize: 40,
+              fontWeight: "600",
               lineHeight: 1.2,
-              letterSpacing: "4px",
-              whiteSpace: "nowrap", // 🔥 force single line
+              letterSpacing: "2px",
+              whiteSpace: "normal",
+              wordBreak: "break-word",
+              overflowWrap: "break-word",
+              ...SmoothRevealFromTop({
+                frame,
+                startFrame: DETAILS_START,
+                delay: 120,
+              })
             }}
           >
-            {formatDate(occasionDate)}
+            {secondSideNote}
           </div>
-        </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>
-      </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>
     </AbsoluteFill>
   );
 };

package/src/Invitations/Frames/F20012026_03.jsx CHANGED Viewed

@@ -23,16 +23,6 @@ export const F20012026_03 = ({
   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,
@@ -102,9 +92,10 @@ export const F20012026_03 = ({
   );
   return (
+     <AbsoluteFill>
+    <AbsoluteFill style={{ backgroundColor: "#1a1a1a" }} />
     <AbsoluteFill
       style={{
-        opacity: sceneOpacity,
         transform: `scale(${sceneScale})`,
         transformOrigin: "center center",
         overflow: "hidden",
@@ -313,5 +304,7 @@ export const F20012026_03 = ({
       </div>
     </AbsoluteFill>
+    </AbsoluteFill>
   );
 };

package/src/Invitations/Themes/T20012026_01.jsx CHANGED Viewed

@@ -68,7 +68,7 @@ export const T20012026_01 = ({
   const framesPerPage = Math.floor(durationInFrames / 3);
   const transitionDuration = Math.floor(framesPerPage * 0.25);
-  /* ---------------- PRELOAD IMAGES (MEMOIZED) ---------------- */
+  /* ---------------- PRELOAD IMAGES ---------------- */
   const imagesToPreload = useMemo(
     () => [
@@ -94,8 +94,12 @@ export const T20012026_01 = ({
   /* ---------------- RENDER ---------------- */
   return (
-    <AbsoluteFill style={{ backgroundColor: "#1a1a1a" }}>
-      {/* 🎵 Background Music */}
+    <AbsoluteFill>
+      {/* 🔒 GLOBAL BACKGROUND (never unmounts) */}
+      <AbsoluteFill style={{ backgroundColor: "#1a1a1a" }} />
+      {/* 🎵 MUSIC */}
       <Audio
         src={staticFile("video-images/wedding.mp3")}
         startFrom={30}
@@ -104,7 +108,7 @@ export const T20012026_01 = ({
       />
       {/* -------- SCENE 1 -------- */}
-      <Sequence from={0} durationInFrames={framesPerPage + 1}>
+      <Sequence from={0} durationInFrames={framesPerPage + 2}>
         <F20012026_01
           firstName={firstName}
           secondName={secondName}
@@ -114,7 +118,7 @@ export const T20012026_01 = ({
       </Sequence>
       {/* -------- SCENE 2 -------- */}
-      <Sequence from={framesPerPage} durationInFrames={framesPerPage + 1}>
+      <Sequence from={framesPerPage - 2} durationInFrames={framesPerPage + 2}>
         <F20012026_02
           firstName={firstName}
           secondName={secondName}
@@ -127,18 +131,12 @@ export const T20012026_01 = ({
       </Sequence>
       {/* ☁️ TRANSITION 1 → 2 */}
-      <Sequence
-        from={framesPerPage - 1}
-        durationInFrames={transitionDuration + 2}
-      >
+      <Sequence from={framesPerPage - 2} durationInFrames={transitionDuration + 2}>
         <InkSmokeTransition20012026 />
       </Sequence>
       {/* -------- SCENE 3 -------- */}
-      <Sequence
-        from={framesPerPage * 2}
-        durationInFrames={framesPerPage + 1}
-      >
+      <Sequence from={framesPerPage * 2 - 2} durationInFrames={framesPerPage + 2}>
         <F20012026_03
           eventDateTime={eventDateTime}
           venueName={venueName}
@@ -148,12 +146,10 @@ export const T20012026_01 = ({
       </Sequence>
       {/* ☁️ TRANSITION 2 → 3 */}
-      <Sequence
-        from={framesPerPage * 2 - 1}
-        durationInFrames={transitionDuration + 2}
-      >
+      <Sequence from={framesPerPage * 2 - 2} durationInFrames={transitionDuration + 2}>
         <InkSmokeTransition20012026 />
       </Sequence>
     </AbsoluteFill>
   );
 };