@evatril/video-templates 2.0.6 → 2.0.7

package/package.json

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

package/src/Invitations/Frames/F20012026_01.jsx

@@ -58,18 +58,6 @@ 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")}
-        style={{
-          position: "absolute",
-          width: "100%",
-          height: "100%",
-          objectFit: "cover",
-        }}
-      />
 
       {/* ================= VISUAL LAYERS ================= */}
       <Butterflies20012026 frame={frame} fps={fps} width={width} height={height} />

package/src/Invitations/Frames/F20012026_02.jsx

@@ -13,24 +13,19 @@ 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  ================= */
-  // 🎥 VERY SMOOTH CINEMATIC ZOOM
-  const sceneScale = interpolate(
-    frame,
-    [0, fadeInDuration * 2],
-    [1.20, 1],
-    {
-      extrapolateRight: "clamp",
-      easing: Easing.out(Easing.cubic),
-    }
-  );
-
-  /* ================= SAFE DATE FORMAT ================= */
+  /* ================= DATE FORMAT ================= */
   const formatDate = (date) => {
     if (!date) return "";
     const d = new Date(date);
@@ -43,261 +38,167 @@ export const F20012026_02 = ({ firstName, secondName, firstSideNote, secondSideN
     });
   };
 
-
   const DETAILS_START = fps * 3;
 
-  /* ================= IMAGE ANIMATION ================= */
-  const showImageAfter = fadeInDuration * 1;
+  /* ================= CURTAIN ANIMATION ================= */
+
+  const showImageAfter = fadeInDuration;
 
   const imageOpacity = interpolate(
     frame,
     [showImageAfter, showImageAfter + fps],
     [0, 1],
-    {
-      extrapolateRight: "clamp",
-      easing: Easing.out(Easing.ease),
-    }
+    { extrapolateRight: "clamp", easing: Easing.out(Easing.ease) }
   );
 
   const imageScale = interpolate(
     frame,
     [showImageAfter, showImageAfter + fps],
     [0.92, 1],
-    {
-      extrapolateRight: "clamp",
-      easing: Easing.out(Easing.ease),
-    }
+    { extrapolateRight: "clamp", easing: Easing.out(Easing.ease) }
   );
 
   return (
-    <AbsoluteFill>
-      <AbsoluteFill style={{ backgroundColor: "#1a1a1a" }} />
-      <AbsoluteFill
+    <AbsoluteFill
+      style={{
+        overflow: "hidden",
+        willChange: "transform",
+      }}
+    >
+      {/* Curtain */}
+      <Img
+        src={staticFile("video-images/20012026-curtain-floral.png")}
         style={{
-          transform: `scale(${sceneScale})`,
-          transformOrigin: "center center",
-          overflow: "hidden",
+          position: "absolute",
+          left: "50%",
+          width: "100%",
+          opacity: imageOpacity,
+          transform: `translateX(-50%) scale(${imageScale})`,
+          willChange: "transform, opacity",
+        }}
+      />
+
+      {/* Decorations */}
+      <SideTrees20012026 startAfter={2} />
+      <PeacockDance20012026 startAfter={3} />
 
+      {/* Content */}
+      <div
+        style={{
+          position: "relative",
+          top: "26%",
+          width: "100%",
+          display: "flex",
+          flexDirection: "column",
+          alignItems: "center",
+          textAlign: "center",
+          gap: 15,
         }}
       >
-        {/* ================= BACKGROUND ================= */}
-        <Img
-          src={staticFile("video-images/20012026-bg.png")}
+        {/* Invitation */}
+        <div
           style={{
-            position: "absolute",
-            width: "100%",
-            height: "100%",
-            objectFit: "cover",
+            maxWidth: "50%",
+            fontFamily: "Dancing Script",
+            color: "#4A3A2A",
+            fontSize: 40,
+            letterSpacing: 2,
+            ...SmoothRevealFromTop({ frame, startFrame: DETAILS_START, delay: 0 }),
           }}
-        />
+        >
+          {invitationMessage}
+        </div>
 
-        <Img
-          src={staticFile("video-images/20012026-curtain-floral.png")}
+        <h1
           style={{
-            position: "absolute",
-            left: "50%",
-            width: "100%",
-            opacity: imageOpacity,
-            transform: `translateX(-50%) scale(${imageScale})`,
+            maxWidth: "70%",
+            fontFamily: "Playfair Display",
+            color: "#7A1E2E",
+            fontSize: 60,
+            letterSpacing: 3,
+            ...SmoothRevealFromTop({ frame, startFrame: DETAILS_START, delay: 25 }),
           }}
-        />
-
-        {/* ================= DECORATIONS ================= */}
-        <SideTrees20012026 startAfter={2} />
-        <PeacockDance20012026 startAfter={3} />
+        >
+          {firstName}
+        </h1>
 
         <div
           style={{
-            position: "relative",
-            top: "26%",
-            width: "100%",
-            display: "flex",
-            flexDirection: "column",
-            alignItems: "center",
-            textAlign: "center",
-            gap: "15px"
+            fontFamily: "Dancing Script",
+            color: "#B87A6A",
+            fontSize: 35,
+            maxWidth:"70%",
+            ...SmoothRevealFromTop({ frame, startFrame: DETAILS_START, delay: 50 }),
           }}
         >
-          {/* 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>
+          {firstSideNote} 
+        </div>
 
-          {/* & Symbol */}
-          <div
-            style={{
-              fontSize: 40,
-              color: "#C9A24D",
-              letterSpacing: "6px",
-              ...SmoothRevealFromTop({
-                frame,
-                startFrame: DETAILS_START,
-                delay: 70,
-              })
-            }}
-          >
-            ❁ ❁ ❁
-          </div>
+        <div
+          style={{
+            fontSize: 40,
+            color: "#C9A24D",
+            letterSpacing: 6,
+            ...SmoothRevealFromTop({ frame, startFrame: DETAILS_START, delay: 70 }),
+          }}
+        >
+          ❁ ❁ ❁
+        </div>
 
+        <h1
+          style={{
+            maxWidth: "70%",
+            fontFamily: "Playfair Display",
+            color: "#7A1E2E",
+            fontSize: 60,
+            letterSpacing: 3,
+            ...SmoothRevealFromTop({ frame, startFrame: DETAILS_START, delay: 95 }),
+          }}
+        >
+          {secondName}  
+        </h1>
 
-          {/* 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>
+        <div
+          style={{
+            fontFamily: "Dancing Script",
+            color: "#B87A6A",
+            fontSize: 35,
+            maxWidth:"70%",
+            ...SmoothRevealFromTop({ frame, startFrame: DETAILS_START, delay: 120 }),
+          }}
+        >
+          {secondSideNote} 
+        </div>
 
-          {/* Groom Side Note */}
+        <div
+          style={{
+            textAlign: "center",
+            ...SmoothRevealFromTop({ frame, startFrame: DETAILS_START, delay: 145 }),
+          }}
+        >
           <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,
-              })
+              fontWeight:"400",
+              fontFamily: "Great Vibes",
+              color: "#2F6B4F",
             }}
           >
-            {secondSideNote}
+            – Join us on this auspicious day –
           </div>
 
-          {/* Date */}
           <div
             style={{
-              maxWidth: "70%",
-              marginTop: 20,
-              textAlign: "center",
-              ...SmoothRevealFromTop({
-                frame,
-                startFrame: DETAILS_START,
-                delay: 145,
-              })
+              fontSize: 50,
+              fontFamily: "Playfair Display",
+              color: "#5A4632",
+              letterSpacing: 4,
             }}
           >
-            {/* -------- 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>
+            {formatDate(occasionDate)}
           </div>
-
-
         </div>
-
-
-      </AbsoluteFill>
+      </div>
     </AbsoluteFill>
   );
 };

package/src/Invitations/Frames/F20012026_03.jsx

@@ -10,7 +10,7 @@ import {
 } from "remotion";
 
 import { GroomBrideLoveScene20012026 } from "../Elements/GroomBrideLoveScene20012026.jsx";
-import{ SmoothRevealFromTop} from "../Elements/SmoothRevealFromTop.jsx"
+import { SmoothRevealFromTop } from "../Elements/SmoothRevealFromTop.jsx"
 
 export const F20012026_03 = ({
   eventDateTime,
@@ -22,18 +22,6 @@ export const F20012026_03 = ({
   const frame = useCurrentFrame();
   const { fps } = useVideoConfig();
 
-  /* ================= SCENE REVEAL (SMOKE FOLLOW-UP) ================= */
-  // 🎥 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: "" };
@@ -58,7 +46,7 @@ export const F20012026_03 = ({
   const { day, month, year, time } = getDateParts(eventDateTime);
 
   const DETAILS_START = fps * 4;
- 
+
   /* ================= IMAGE ANIMATION ================= */
   const showImageAfter = fadeInDuration * 2;
 
@@ -92,26 +80,12 @@ export const F20012026_03 = ({
   );
 
   return (
-     <AbsoluteFill>
-    <AbsoluteFill style={{ backgroundColor: "#1a1a1a" }} />
     <AbsoluteFill
       style={{
-        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={{
@@ -200,10 +174,10 @@ export const F20012026_03 = ({
             wordBreak: "break-word",
             overflowWrap: "break-word",
             ...SmoothRevealFromTop({
-  frame,
-  startFrame: DETAILS_START,
-  delay: 50,
-})
+              frame,
+              startFrame: DETAILS_START,
+              delay: 50,
+            })
 
           }}
         >
@@ -223,11 +197,11 @@ export const F20012026_03 = ({
             whiteSpace: "normal",
             wordBreak: "break-word",
             overflowWrap: "break-word",
-           ...SmoothRevealFromTop({
-  frame,
-  startFrame: DETAILS_START,
-  delay: 70,
-})
+            ...SmoothRevealFromTop({
+              frame,
+              startFrame: DETAILS_START,
+              delay: 70,
+            })
 
           }}
         >
@@ -247,10 +221,10 @@ export const F20012026_03 = ({
             wordBreak: "break-word",
             overflowWrap: "break-word",
             ...SmoothRevealFromTop({
-  frame,
-  startFrame: DETAILS_START,
-  delay: 95,
-})
+              frame,
+              startFrame: DETAILS_START,
+              delay: 95,
+            })
 
           }}
         >
@@ -268,10 +242,10 @@ export const F20012026_03 = ({
             wordBreak: "break-word",
             overflowWrap: "break-word",
             ...SmoothRevealFromTop({
-  frame,
-  startFrame: DETAILS_START,
-  delay: 115,
-})
+              frame,
+              startFrame: DETAILS_START,
+              delay: 115,
+            })
 
           }}
         >
@@ -292,10 +266,10 @@ export const F20012026_03 = ({
             wordBreak: "break-word",
             overflowWrap: "break-word",
             ...SmoothRevealFromTop({
-  frame,
-  startFrame: DETAILS_START,
-  delay: 125,
-})
+              frame,
+              startFrame: DETAILS_START,
+              delay: 125,
+            })
 
           }}
         >
@@ -304,7 +278,5 @@ export const F20012026_03 = ({
       </div>
 
     </AbsoluteFill>
-    
-    </AbsoluteFill>
   );
 };

package/src/Invitations/Themes/T20012026_01.jsx

@@ -5,6 +5,8 @@ import {
   Audio,
   staticFile,
   AbsoluteFill,
+  useCurrentFrame,
+  Img,
 } from "remotion";
 
 import { F20012026_01 } from "../Frames/F20012026_01.jsx";
@@ -24,6 +26,7 @@ export const T20012026_01 = ({
   familyMember,
 }) => {
   const { durationInFrames } = useVideoConfig();
+  const frame = useCurrentFrame();
 
   /* ---------------- SAFE DATA ---------------- */
 
@@ -96,60 +99,81 @@ export const T20012026_01 = ({
   return (
     <AbsoluteFill>
 
-      {/* 🔒 GLOBAL BACKGROUND (never unmounts) */}
-      <AbsoluteFill style={{ backgroundColor: "#1a1a1a" }} />
-
       {/* 🎵 MUSIC */}
       <Audio
         src={staticFile("video-images/wedding.mp3")}
-        startFrom={30}
-        endAt={900}
+        startFrom={0}
+        endAt={durationInFrames}
         volume={0.4}
       />
 
-      {/* -------- SCENE 1 -------- */}
+
+      {/* ================= SCENE 1 ================= */}
       <Sequence from={0} durationInFrames={framesPerPage + 2}>
-        <F20012026_01
-          firstName={firstName}
-          secondName={secondName}
-          welcomeMessage={welcomeMessage}
-          eventDateTime={eventDateTime}
-        />
+        <>
+          <Img
+            src={staticFile("video-images/20012026-bg.png")}
+            style={{ position: "absolute", width: "100%", height: "100%", objectFit: "cover" }}
+          />
+          <F20012026_01
+            firstName={firstName}
+            secondName={secondName}
+            welcomeMessage={welcomeMessage}
+          />
+        </>
       </Sequence>
 
-      {/* -------- SCENE 2 -------- */}
+      {/* ================= SCENE 2 ================= */}
       <Sequence from={framesPerPage - 2} durationInFrames={framesPerPage + 2}>
-        <F20012026_02
-          firstName={firstName}
-          secondName={secondName}
-          firstSideNote={firstSideNote}
-          secondSideNote={secondSideNote}
-          invitationMessage={invitationMessage}
-          occasionDate={occasionDate}
-          fadeInDuration={transitionDuration}
-        />
+        <>
+          <Img
+            src={staticFile("video-images/20012026-bg.png")}
+            style={{ position: "absolute", width: "100%", height: "100%", objectFit: "cover" }}
+          />
+          <F20012026_02
+            firstName={firstName}
+            secondName={secondName}
+            firstSideNote={firstSideNote}
+            secondSideNote={secondSideNote}
+            invitationMessage={invitationMessage}
+            occasionDate={occasionDate}
+            fadeInDuration={transitionDuration}
+          />
+        </>
       </Sequence>
 
       {/* ☁️ TRANSITION 1 → 2 */}
-      <Sequence from={framesPerPage - 2} durationInFrames={transitionDuration + 2}>
+      <Sequence
+        from={framesPerPage - 2}
+        durationInFrames={transitionDuration + 2}
+      >
         <InkSmokeTransition20012026 />
       </Sequence>
 
-      {/* -------- SCENE 3 -------- */}
+      {/* ================= SCENE 3 ================= */}
       <Sequence from={framesPerPage * 2 - 2} durationInFrames={framesPerPage + 2}>
-        <F20012026_03
-          eventDateTime={eventDateTime}
-          venueName={venueName}
-          venueAddress={venueAddress}
-          familyMember={familyMember}
-        />
+        <>
+          <Img
+            src={staticFile("video-images/20012026-bg.png")}
+            style={{ position: "absolute", width: "100%", height: "100%", objectFit: "cover" }}
+          />
+          <F20012026_03
+            eventDateTime={eventDateTime}
+            venueName={venueName}
+            venueAddress={venueAddress}
+            familyMember={familyMember}
+          />
+        </>
       </Sequence>
 
       {/* ☁️ TRANSITION 2 → 3 */}
-      <Sequence from={framesPerPage * 2 - 2} durationInFrames={transitionDuration + 2}>
+      <Sequence
+        from={framesPerPage * 2 - 2}
+        durationInFrames={transitionDuration + 2}
+      >
         <InkSmokeTransition20012026 />
       </Sequence>
 
     </AbsoluteFill>
   );
-};
+};

package/src/compositions.jsx

@@ -1,19 +1,18 @@
 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}
+        component={T20012026_01}
+        fps={24}
+        durationInFrames={24 * 30}
         width={1080}
         height={1920}
       />
     </>
   );
 };
-