@evatril/video-templates 2.0.11 → 2.0.14

package/src/Invitations/Themes/T28012026_01.jsx

@@ -3,7 +3,6 @@ import {
   Sequence,
   useVideoConfig,
   Audio,
-  staticFile,
   AbsoluteFill,
   useCurrentFrame,
   interpolate,
@@ -17,7 +16,7 @@ import { F28012026_04 } from "../Frames/F28012026_04.jsx";
 import { F28012026_05 } from "../Frames/F28012026_05.jsx";
 
 import { usePreloadImages } from "../hooks/usePreloadImages.js";
-import { PageFlipTransition } from "../Elements/PageFlipTransition.jsx";
+import { PageFlipTransition28012026 } from "../Elements/PageFlipTransition28012026.jsx";
 
 export const T28012026_01 = ({
   event,
@@ -45,8 +44,13 @@ export const T28012026_01 = ({
     }
   );
 
-  const firstSceneDuration = fps * 5;
-  const otherSceneDuration = fps * 8;
+  const sceneDurations = [
+    fps * 6,  // Scene 1
+    fps * 7,  // Scene 2
+    fps * 8,  // Scene 3
+    fps * 8,  // Scene 4
+    fps * 8,  // Scene 5
+  ];
 
   const flipDuration = fps * 1;
 
@@ -107,18 +111,26 @@ export const T28012026_01 = ({
 
   /* ---------------- PRELOAD IMAGES ---------------- */
 
+  const S3_BASE = "https://evatril-images.s3.ap-south-1.amazonaws.com/video-themes/hindu-wedding-1/v1/";
   const imagesToPreload = useMemo(
     () => [
-      staticFile("video-images/28012026-bg.webp"),
-      staticFile("video-images/28012026-TopRightFlower.webp"),
-      staticFile("video-images/28012026-BottomLeftFlower.webp"),
-      staticFile("video-images/28012026-Ganesh.webp"),
-      staticFile("video-images/28012026-FlowerBorder.webp"),
-      staticFile("video-images/28012026-TopBorder.webp"),
-      staticFile("video-images/28012026-TopLeftFlower.webp"),
-      staticFile("video-images/28012026-BottomRightFlower.webp"),
-      staticFile("video-images/28012026-frame.webp"),
-      staticFile("video-images/28012026-border.webp"),
+      `${S3_BASE}28012026-bg.webp`,
+
+      `${S3_BASE}28012026-TopRightFlower.webp`,
+      `${S3_BASE}28012026-BottomLeftFlower.webp`,
+      `${S3_BASE}28012026-Ganesh.webp`,
+      `${S3_BASE}28012026-FlowerBorder.webp`,
+      `${S3_BASE}28012026-PinkLeaf.webp`,
+
+      `${S3_BASE}28012026-TopLeftFlower.webp`,
+      `${S3_BASE}28012026-BottomRightFlower.webp`,
+
+      `${S3_BASE}28012026-TopBorder.webp`,
+      `${S3_BASE}28012026-border.webp`,
+      `${S3_BASE}28012026-Heart.webp`,
+
+      `${S3_BASE}28012026-frame.webp`,
+      `${S3_BASE}05022026-HangingJumar.webp`,
     ],
     []
   );
@@ -134,7 +146,7 @@ export const T28012026_01 = ({
       >
         {/* Background */}
         <img
-          src={staticFile("video-images/28012026-bg.webp")}
+          src={`${S3_BASE}28012026-bg.webp`}
           style={{
             position: "absolute",
             inset: 0,
@@ -182,11 +194,6 @@ export const T28012026_01 = ({
     />,
   ];
 
-  /* 🧮 Dynamic Timing */
-  const sceneDurations = scenes.map((_, i) =>
-    i === 0 ? firstSceneDuration : otherSceneDuration
-  );
-
   const sceneStartTimes = sceneDurations.reduce((acc, dur, i) => {
     acc.push(i === 0 ? 0 : acc[i - 1] + sceneDurations[i - 1]);
     return acc;
@@ -195,7 +202,7 @@ export const T28012026_01 = ({
   const PageBackground = () => (
     <AbsoluteFill>
       <img
-        src={staticFile("video-images/28012026-bg.webp")}
+        src={`${S3_BASE}28012026-bg.webp`}
         style={{
           position: "absolute",
           inset: 0,
@@ -210,7 +217,7 @@ export const T28012026_01 = ({
   return (
     <AbsoluteFill>
       <Audio
-        src={staticFile("video-images/wedding2.mp3")}
+       src={`${S3_BASE}wedding2.mp3`}
         volume={musicVolume}
       />
 
@@ -223,14 +230,14 @@ export const T28012026_01 = ({
             {i === scenes.length - 1 ? (
               <Page>{Scene}</Page>
             ) : (
-              <PageFlipTransition
+              <PageFlipTransition28012026
                 sceneDuration={duration}
                 flipDuration={flipDuration}
                 background={<PageBackground />}
                 direction={i % 2 === 0 ? "left" : "right"}
               >
                 <Page>{Scene}</Page>
-              </PageFlipTransition>
+              </PageFlipTransition28012026>
             )}
           </Sequence>
         );
@@ -239,4 +246,4 @@ export const T28012026_01 = ({
   );
 }
 
-T28012026_01.duration = 24 * 37;
+T28012026_01.duration = 30 * (6 + 7 + 8 + 8 + 8);

package/src/compositions.jsx

@@ -11,32 +11,32 @@ export const VideoCompositions = () => {
       <Composition
         id="T20012026-01"
         component={T20012026_01}
-        fps={24}
-        durationInFrames={24 * 30}
+        fps={30}
+        durationInFrames={30 * 32.5}
         width={1080}
         height={1920}
       />
        <Composition
         id="T28012026-01"
         component={T28012026_01}
-        fps={24}
-        durationInFrames={24 * 37}
+        fps={30}
+        durationInFrames={30 * 37}
         width={1080}
         height={1920}
       />
       <Composition
         id="T03022026-01"
         component={T03022026_01}
-        fps={24}
-        durationInFrames={24 * 38}
+        fps={30}
+        durationInFrames={30 * 38}
         width={1080}
         height={1920}
       />
       <Composition
         id="T05022026-01"
         component={T05022026_01}
-        fps={24}
-        durationInFrames={24 * 30}
+        fps={30}
+        durationInFrames={30 * 30}
         width={1080}
         height={1920}
       />

package/src/Invitations/Elements/GaneshGoldenHalo.jsx

@@ -1,90 +0,0 @@
-import React from "react";
-import {
-  Img,
-  staticFile,
-  useCurrentFrame,
-  useVideoConfig,
-  interpolate,
-  Easing,
-} from "remotion";
-
-export const GaneshGoldenHalo = () => {
-  const frame = useCurrentFrame();
-  const { fps } = useVideoConfig();
-
-  /* 🌸 HALO BLOOM FIRST */
-  const haloProgress = interpolate(frame, [0, fps * 2], [0, 1], {
-    extrapolateLeft: "clamp",
-    extrapolateRight: "clamp",
-    easing: Easing.inOut(Easing.cubic),
-  });
-
-  const haloScale = interpolate(haloProgress, [0, 1], [0, 1]);
-
-  /* 🕉 GANESH APPEARS AFTER HALO */
-  const ganeshDelay = fps * 1;
-
-  const ganeshProgress = interpolate(frame - ganeshDelay, [0, fps * 2], [0, 1], {
-    extrapolateLeft: "clamp",
-    extrapolateRight: "clamp",
-    easing: Easing.inOut(Easing.cubic),
-  });
-
-  const ganeshScale = interpolate(ganeshProgress, [0, 1], [0.45, 1]);
-  const ganeshOpacity = ganeshProgress;
-
-  /* 🌿 HALO ROTATION (LOCKED CENTER) */
-  const rotate = frame * 0.15;
-
-  return (
-    <div
-      style={{
-        position: "absolute",
-        inset: 0,
-        display: "flex",
-        justifyContent: "center",
-        alignItems: "center",
-        pointerEvents: "none",
-        zIndex: 2,
-      }}
-    >
-      <div style={{ position: "relative", width: "100%", height: "100%" }}>
-        {/* 🌸 HALO (isolated rotation container) */}
-        <div
-          style={{
-            position: "absolute",
-            left: "50%",
-            top: "45%",
-            transform: "translate(-50%, -50%)",
-          }}
-        >
-          <Img
-            src={staticFile("video-images/30012026-Ganesh_golden_halo2.png")}
-            style={{
-              width: "100%",
-              transformOrigin: "50% 50%",
-              transform: `scale(${haloScale}) rotate(${rotate}deg)`,
-            }}
-          />
-        </div>
-
-        {/* 🕉 GANESH */}
-        <Img
-          src={staticFile("video-images/28012026-Ganesh.png")}
-          style={{
-            position: "absolute",
-            left: "50%",
-            top: "55%",
-            width: "55%",
-            opacity: ganeshOpacity,
-            transformOrigin: "50% 50%",
-            transform: `
-              translate(-47%, -50%)
-              scale(${ganeshScale})
-            `,
-          }}
-        />
-      </div>
-    </div>
-  );
-};

package/src/Invitations/Elements/PageFlipTransition.jsx

@@ -1,180 +0,0 @@
-// import React from "react";
-// import {
-//   AbsoluteFill,
-//   useCurrentFrame,
-//   interpolate,
-//   Easing,
-//   staticFile,
-// } from "remotion";
-
-// export const PageFlipTransition = ({
-//   children,
-//   background,
-//   sceneDuration = 192,
-//   flipDuration = 24,
-// }) => {
-//   const frame = useCurrentFrame();
-
-//   const flipStart = sceneDuration - flipDuration;
-
-//   const rotateY = interpolate(
-//     frame,
-//     [flipStart + flipDuration * 0.35, sceneDuration],
-//     [0, 90],
-//     {
-//       extrapolateLeft: "clamp",
-//       extrapolateRight: "clamp",
-//       easing: Easing.inOut(Easing.ease),
-//     }
-//   );
-
-//   // reveal next page only at end
-//   const bgOpacity = interpolate(
-//   frame,
-//   [flipStart + flipDuration * 0.5, sceneDuration],
-//   [0, 1],
-//   {
-//     extrapolateLeft: "clamp",
-//     extrapolateRight: "clamp",
-//   }
-// );
-
-
-//   return (
-//     <AbsoluteFill style={{ perspective: 2500 }}>
-
-//       {/* FAKE BACK OF PAGE (prevents black void) */}
-//       <AbsoluteFill>
-//         <img
-//           src={staticFile("video-images/28012026-bg.png")}
-//           style={{
-//             position: "absolute",
-//             inset: 0,
-//             width: "100%",
-//             height: "100%",
-//             objectFit: "cover",
-//           }}
-//         />
-//       </AbsoluteFill>
-
-//       {/* REAL NEXT PAGE (appears only after flip) */}
-//       <AbsoluteFill style={{ opacity: bgOpacity }}>
-//         {background}
-//       </AbsoluteFill>
-
-//       {/* CURRENT PAGE */}
-//       <AbsoluteFill
-//         style={{
-//           transformOrigin: "left center",
-//           transformStyle: "preserve-3d",
-//           backfaceVisibility: "hidden",
-//           transform: `rotateY(-${rotateY}deg)`,
-//           boxShadow: "20px 0 40px rgba(0,0,0,0.25)",
-//         }}
-//       >
-//         {children}
-//       </AbsoluteFill>
-
-//     </AbsoluteFill>
-//   );
-// };
-
-
-
-
-
-import React from "react";
-import {
-  AbsoluteFill,
-  useCurrentFrame,
-  interpolate,
-  Easing,
-  staticFile,
-} from "remotion";
-
-export const PageFlipTransition = ({
-  children,
-  background,
-  sceneDuration = 192,
-  flipDuration = 30,
-  direction = "left", // "left" | "right"
-}) => {
-  const frame = useCurrentFrame();
-
-  const flipStart = sceneDuration - flipDuration;
-
-  // const rotate = interpolate(
-  //   frame,
-  //   [flipStart + flipDuration * 0.35, sceneDuration],
-  //   [0, 100],
-  //   {
-  //     extrapolateLeft: "clamp",
-  //     extrapolateRight: "clamp",
-  //     easing: Easing.inOut(Easing.ease),
-  //   }
-  // );
-  const rotate = interpolate(
-  frame,
-  [flipStart, sceneDuration],
-  [0, 80],
-  {
-    extrapolateLeft: "clamp",
-    extrapolateRight: "clamp",
-    easing: Easing.inOut(Easing.cubic),
-  }
-);
-
-  const signedRotate = direction === "left" ? -rotate : rotate;
-
-  const bgOpacity = interpolate(
-    frame,
-    [flipStart + flipDuration * 0.5, sceneDuration],
-    [0, 1],
-    {
-      extrapolateLeft: "clamp",
-      extrapolateRight: "clamp",
-    }
-  );
-
-  return (
-    <AbsoluteFill style={{ perspective: 2500 }}>
-
-      {/* Fake back of page */}
-      <AbsoluteFill>
-        <img
-          src={staticFile("video-images/28012026-bg.png")}
-          style={{
-            position: "absolute",
-            inset: 0,
-            width: "100%",
-            height: "100%",
-            objectFit: "cover",
-          }}
-        />
-      </AbsoluteFill>
-
-      {/* Next page */}
-      <AbsoluteFill style={{ opacity: bgOpacity }}>
-        {background}
-      </AbsoluteFill>
-
-      {/* Current page */}
-      <AbsoluteFill
-        style={{
-          transformOrigin:
-            direction === "left" ? "left center" : "right center",
-          transformStyle: "preserve-3d",
-          backfaceVisibility: "hidden",
-          transform: `rotateY(${signedRotate}deg)`,
-          boxShadow:
-            direction === "left"
-              ? "20px 0 40px rgba(0,0,0,0.25)"
-              : "-20px 0 40px rgba(0,0,0,0.25)",
-        }}
-      >
-        {children}
-      </AbsoluteFill>
-
-    </AbsoluteFill>
-  );
-};