@evatril/video-templates 2.0.4 → 2.0.7

package/package.json

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

package/src/Invitations/Frames/F20012026_01.jsx

@@ -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,16 +58,6 @@ export const F20012026_01 = ({
   const groomAnim = reveal(groomStart);
   return (
     <AbsoluteFill style={{ overflow: "hidden" }}>
-      {/* ================= 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} />
@@ -154,7 +144,7 @@ export const F20012026_01 = ({
 
           <h1
             style={{
-              width: "100%",            
+              width: "100%",
               maxWidth: "80%",
               fontFamily: "Playfair Display",
               color: "#6B1E2E",
@@ -171,7 +161,7 @@ export const F20012026_01 = ({
 
             }}
           >
-            {secondName} 
+            {secondName}
           </h1>
         </div>
       </div>

package/src/Invitations/Frames/F20012026_02.jsx

@@ -13,93 +13,59 @@ 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,
-    [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);
-  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;
+  /* ================= CURTAIN ANIMATION ================= */
 
-  /* ================= IMAGE ANIMATION ================= */
-  const showImageAfter = fadeInDuration * 1;
+  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
       style={{
-        opacity: sceneOpacity,
-        transform: `scale(${sceneScale})`,
-        transformOrigin: "center center",
         overflow: "hidden",
-
+        willChange: "transform",
       }}
     >
-      {/* ================= BACKGROUND ================= */}
-      <Img
-        src={staticFile("video-images/20012026-bg.png")}
-        style={{
-          position: "absolute",
-          width: "100%",
-          height: "100%",
-          objectFit: "cover",
-        }}
-      />
-
+      {/* Curtain */}
       <Img
         src={staticFile("video-images/20012026-curtain-floral.png")}
         style={{
@@ -108,13 +74,15 @@ export const F20012026_02 = ({ firstName, secondName,firstSideNote,secondSideNot
           width: "100%",
           opacity: imageOpacity,
           transform: `translateX(-50%) scale(${imageScale})`,
+          willChange: "transform, opacity",
         }}
       />
 
-      {/* ================= DECORATIONS ================= */}
+      {/* Decorations */}
       <SideTrees20012026 startAfter={2} />
       <PeacockDance20012026 startAfter={3} />
 
+      {/* Content */}
       <div
         style={{
           position: "relative",
@@ -124,188 +92,113 @@ export const F20012026_02 = ({ firstName, secondName,firstSideNote,secondSideNot
           flexDirection: "column",
           alignItems: "center",
           textAlign: "center",
-          gap: "15px"
+          gap: 15,
         }}
       >
-        {/* Invitation Message */}
+        {/* Invitation */}
         <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,
-            })
+            letterSpacing: 2,
+            ...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,
-            })
+            letterSpacing: 3,
+            ...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,
-            })
+            fontSize: 35,
+            maxWidth:"70%",
+            ...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,
-            })
+            letterSpacing: 6,
+            ...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,
-            })
+            letterSpacing: 3,
+            ...SmoothRevealFromTop({ frame, startFrame: DETAILS_START, delay: 95 }),
           }}
         >
-          {secondName} 
+          {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,
-            })
+            fontSize: 35,
+            maxWidth:"70%",
+            ...SmoothRevealFromTop({ frame, startFrame: DETAILS_START, delay: 120 }),
           }}
         >
           {secondSideNote} 
         </div>
 
-        {/* Date */}
         <div
           style={{
-            maxWidth: "70%",
-            marginTop: 20,
             textAlign: "center",
-            ...SmoothRevealFromTop({
-              frame,
-              startFrame: DETAILS_START,
-              delay: 145,
-            })
+            ...SmoothRevealFromTop({ frame, startFrame: DETAILS_START, delay: 145 }),
           }}
         >
-          {/* -------- Message Line -------- */}
           <div
             style={{
-              fontSize: 45,
-              fontFamily:"Great Vibes",
-              fontWeight: "500",
-              letterSpacing: "3px",
+              fontSize: 40,
+              fontWeight:"400",
+              fontFamily: "Great Vibes",
               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",
+              fontSize: 50,
+              fontFamily: "Playfair Display",
               color: "#5A4632",
-              lineHeight: 1.2,
-              letterSpacing: "4px",
-              whiteSpace: "nowrap", // 🔥 force single line
+              letterSpacing: 4,
             }}
           >
             {formatDate(occasionDate)}
           </div>
         </div>
-
-
       </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,28 +22,6 @@ export const F20012026_03 = ({
   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: "" };
@@ -68,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;
 
@@ -104,23 +82,10 @@ export const F20012026_03 = ({
   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={{
@@ -209,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,
+            })
 
           }}
         >
@@ -232,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,
+            })
 
           }}
         >
@@ -256,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,
+            })
 
           }}
         >
@@ -277,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,
+            })
 
           }}
         >
@@ -301,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,
+            })
 
           }}
         >

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 ---------------- */
 
@@ -68,7 +71,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,66 +97,83 @@ export const T20012026_01 = ({
   /* ---------------- RENDER ---------------- */
 
   return (
-    <AbsoluteFill style={{ backgroundColor: "#1a1a1a" }}>
-      {/* 🎵 Background Music */}
+    <AbsoluteFill>
+
+      {/* 🎵 MUSIC */}
       <Audio
         src={staticFile("video-images/wedding.mp3")}
-        startFrom={30}
-        endAt={900}
+        startFrom={0}
+        endAt={durationInFrames}
         volume={0.4}
       />
 
-      {/* -------- SCENE 1 -------- */}
-      <Sequence from={0} durationInFrames={framesPerPage + 1}>
-        <F20012026_01
-          firstName={firstName}
-          secondName={secondName}
-          welcomeMessage={welcomeMessage}
-          eventDateTime={eventDateTime}
-        />
+
+      {/* ================= SCENE 1 ================= */}
+      <Sequence from={0} durationInFrames={framesPerPage + 2}>
+        <>
+          <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 -------- */}
-      <Sequence from={framesPerPage} durationInFrames={framesPerPage + 1}>
-        <F20012026_02
-          firstName={firstName}
-          secondName={secondName}
-          firstSideNote={firstSideNote}
-          secondSideNote={secondSideNote}
-          invitationMessage={invitationMessage}
-          occasionDate={occasionDate}
-          fadeInDuration={transitionDuration}
-        />
+      {/* ================= SCENE 2 ================= */}
+      <Sequence from={framesPerPage - 2} durationInFrames={framesPerPage + 2}>
+        <>
+          <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 - 1}
+        from={framesPerPage - 2}
         durationInFrames={transitionDuration + 2}
       >
         <InkSmokeTransition20012026 />
       </Sequence>
 
-      {/* -------- SCENE 3 -------- */}
-      <Sequence
-        from={framesPerPage * 2}
-        durationInFrames={framesPerPage + 1}
-      >
-        <F20012026_03
-          eventDateTime={eventDateTime}
-          venueName={venueName}
-          venueAddress={venueAddress}
-          familyMember={familyMember}
-        />
+      {/* ================= SCENE 3 ================= */}
+      <Sequence from={framesPerPage * 2 - 2} durationInFrames={framesPerPage + 2}>
+        <>
+          <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 - 1}
+        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}
       />
     </>
   );
 };
-