@evatril/video-templates 2.0.7 → 2.0.8

package/src/Invitations/Elements/HoldSlide.jsx

@@ -0,0 +1,103 @@
+// import React from "react";
+// import { AbsoluteFill, useCurrentFrame, interpolate } from "remotion";
+
+// export const HoldSlide = ({
+//   children,
+//   nextChildren,
+//   contentDuration,
+//   slideDuration,
+// }) => {
+//   const frame = useCurrentFrame();
+
+//   const progress = interpolate(
+//     frame,
+//     [contentDuration, contentDuration + slideDuration],
+//     [0, 1],
+//     {
+//       extrapolateLeft: "clamp",
+//       extrapolateRight: "clamp",
+//     }
+//   );
+
+//   const width = 100;
+
+//   return (
+//     <AbsoluteFill style={{ overflow: "hidden" }}>
+//       {/* CURRENT */}
+//       <AbsoluteFill
+//         style={{
+//           transform: `translateX(${-progress * width}%)`,
+//         }}
+//       >
+//         {children}
+//       </AbsoluteFill>
+
+//       {/* NEXT */}
+//       {nextChildren && (
+//         <AbsoluteFill
+//           style={{
+//             transform: `translateX(${100 - progress * width}%)`,
+//           }}
+//         >
+//           {nextChildren}
+//         </AbsoluteFill>
+//       )}
+//     </AbsoluteFill>
+//   );
+// };
+
+
+import React from "react";
+import { AbsoluteFill, Img, useCurrentFrame, interpolate } from "remotion";
+
+export const HoldSlide = ({
+  children,
+  nextBg,
+  contentDuration,
+  slideDuration,
+}) => {
+  const frame = useCurrentFrame();
+
+  const progress = interpolate(
+    frame,
+    [contentDuration, contentDuration + slideDuration],
+    [0, 1],
+    {
+      extrapolateLeft: "clamp",
+      extrapolateRight: "clamp",
+    }
+  );
+
+  return (
+    <AbsoluteFill style={{ overflow: "hidden" }}>
+      {/* CURRENT */}
+      <AbsoluteFill
+        style={{
+          transform: `translateX(${-progress * 100}%)`,
+        }}
+      >
+        {children}
+      </AbsoluteFill>
+
+      {/* NEXT BACKGROUND */}
+      {nextBg && (
+        <AbsoluteFill
+          style={{
+            transform: `translateX(${100 - progress * 100}%)`,
+          }}
+        >
+          <Img
+            src={nextBg}
+            style={{
+              position: "absolute",
+              inset: 0,
+              width: "100%",
+              height: "100%",
+              objectFit: "cover",
+            }}
+          />
+        </AbsoluteFill>
+      )}
+    </AbsoluteFill>
+  );
+};

package/src/Invitations/Elements/LetterReveal28012026.jsx

@@ -0,0 +1,47 @@
+import React from "react";
+import { useCurrentFrame, interpolate } from "remotion";
+
+export const LetterReveal28012026 = ({
+  text = "",
+  start = 0,
+  stagger = 4, // frames between letters
+}) => {
+  const frame = useCurrentFrame();
+
+  return (
+    <>
+      {text.split("").map((char, i) => {
+        const appear = interpolate(
+          frame,
+          [start + i * stagger, start + i * stagger + 10],
+          [0, 1],
+          {
+            extrapolateRight: "clamp",
+          }
+        );
+
+        const y = interpolate(
+          frame,
+          [start + i * stagger, start + i * stagger + 10],
+          [15, 0],
+          {
+            extrapolateRight: "clamp",
+          }
+        );
+
+        return (
+          <span
+            key={i}
+            style={{
+              display: "inline-block",
+              opacity: appear,
+              transform: `translateY(${y}px)`,
+            }}
+          >
+            {char === " " ? "\u00A0" : char}
+          </span>
+        );
+      })}
+    </>
+  );
+};

package/src/Invitations/Elements/PageFlipTransition.jsx

@@ -0,0 +1,180 @@
+// 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>
+  );
+};

package/src/Invitations/Elements/{SmoothRevealFromTop.jsx → SmoothRevealFromTop20012026.jsx}

@@ -1,6 +1,6 @@
 import { interpolate, Easing } from "remotion";
 
-export const SmoothRevealFromTop = ({
+export const SmoothRevealFromTop20012026 = ({
   frame,
   startFrame,
   delay = 0,

package/src/Invitations/Elements/WordReveal28012026.jsx

@@ -0,0 +1,92 @@
+import React from "react";
+import {
+  useCurrentFrame,
+  useVideoConfig,
+  interpolate,
+  Easing,
+} from "remotion";
+
+export const WordReveal28012026 = ({
+  text = "",
+  start = 0,
+  fontSize = 80,
+  color = "#000",
+  fontFamily = "Dancing Script",
+  letterSpacing = 2,
+}) => {
+  const frame = useCurrentFrame();
+  const { fps } = useVideoConfig();
+
+  const words = text.split(" ");
+
+  const wordDelay = fps * 0.15;   // ⏱ 150ms between words
+  const animDuration = fps * 0.4; // ⏱ 400ms animation
+
+  return (
+    <div
+      style={{
+        display: "flex",
+        flexWrap: "wrap",
+        justifyContent: "center",
+        width: "100%",
+        textAlign: "center",
+      }}
+    >
+      {words.map((word, i) => {
+        const delay = start + i * wordDelay;
+
+        const opacity = interpolate(
+          frame,
+          [delay, delay + animDuration],
+          [0, 1],
+          {
+            extrapolateLeft: "clamp",
+            extrapolateRight: "clamp",
+            easing: Easing.out(Easing.cubic),
+          }
+        );
+
+        const translateY = interpolate(
+          frame,
+          [delay, delay + animDuration],
+          [30, 0],
+          {
+            extrapolateLeft: "clamp",
+            extrapolateRight: "clamp",
+            easing: Easing.out(Easing.cubic),
+          }
+        );
+
+        const scale = interpolate(
+          frame,
+          [delay, delay + animDuration],
+          [0.95, 1],
+          {
+            extrapolateLeft: "clamp",
+            extrapolateRight: "clamp",
+          }
+        );
+
+        return (
+          <span
+            key={i}
+            style={{
+              opacity,
+              transform: `translateY(${translateY}px) scale(${scale})`,
+              margin: "0 12px 8px 0",
+              fontSize,
+              color,
+              fontFamily,
+              letterSpacing,
+              lineHeight: 1.3,
+              fontWeight: 600,
+              display: "inline-block",
+            }}
+          >
+            {word}
+          </span>
+        );
+      })}
+    </div>
+  );
+};

package/src/Invitations/Frames/F03022026_01.jsx

@@ -0,0 +1,214 @@
+import React from "react";
+import {
+  AbsoluteFill,
+  Img,
+  staticFile,
+  useCurrentFrame,
+  useVideoConfig,
+  interpolate,
+  Easing
+} from "remotion";
+import { FlowerReveal_TL_BR_28012026 } from "../Elements/FlowerReveal_TL_BR_28012026";
+
+export const F03022026_01 = () => {
+  const frame = useCurrentFrame();
+  const { fps } = useVideoConfig();
+
+  const moveDuration = fps * 3;
+  const moveX = interpolate(
+    frame,
+    [0, moveDuration],
+    [-80, 80],
+    {
+      easing: Easing.inOut(Easing.ease),
+      extrapolateRight: "clamp",
+    }
+  );
+
+  const start = fps * 0.8;
+
+  // Image animation (same timing as Wedding)
+  const imageOpacity = interpolate(frame, [start, start + 25], [0, 1], {
+    extrapolateLeft: "clamp",
+    extrapolateRight: "clamp",
+    easing: Easing.out(Easing.cubic),
+  });
+
+  // Wedding animation
+  const weddingOpacity = interpolate(frame, [start, start + 20], [0, 1], {
+    extrapolateLeft: "clamp",
+    extrapolateRight: "clamp",
+    easing: Easing.out(Easing.cubic),
+  });
+
+  const weddingY = interpolate(frame, [start, start + 20], [60, 0], {
+    extrapolateLeft: "clamp",
+    extrapolateRight: "clamp",
+  });
+
+  // Invitation animation (slightly delayed)
+  const inviteStart = start + 10;
+
+  const inviteOpacity = interpolate(frame, [inviteStart, inviteStart + 20], [0, 1], {
+    extrapolateLeft: "clamp",
+    extrapolateRight: "clamp",
+    easing: Easing.out(Easing.cubic),
+  });
+
+  const inviteY = interpolate(frame, [inviteStart, inviteStart + 20], [60, 0], {
+    extrapolateLeft: "clamp",
+    extrapolateRight: "clamp",
+  });
+
+
+  // Scene timing
+  const sceneDuration = fps * 5;
+
+  // Exit starts near end
+  const exitStart = sceneDuration - fps * 1;
+
+  // Wedding exit
+  const weddingExitOpacity = interpolate(
+    frame,
+    [exitStart, exitStart + 25],
+    [1, 0],
+    {
+      extrapolateLeft: "clamp",
+      extrapolateRight: "clamp",
+      easing: Easing.out(Easing.cubic),
+    }
+  );
+
+  const weddingExitY = interpolate(
+    frame,
+    [exitStart, exitStart + 25],
+    [0, -80], // moves UP
+    {
+      extrapolateLeft: "clamp",
+      extrapolateRight: "clamp",
+    }
+  );
+
+  // Invitation exit (slightly delayed)
+  const inviteExitStart = exitStart;
+
+  const inviteExitOpacity = interpolate(
+    frame,
+    [inviteExitStart, inviteExitStart + 25],
+    [1, 0],
+    {
+      extrapolateLeft: "clamp",
+      extrapolateRight: "clamp",
+      easing: Easing.out(Easing.cubic),
+    }
+  );
+
+  const inviteExitY = interpolate(
+    frame,
+    [inviteExitStart, inviteExitStart + 25],
+    [0, -80],
+    {
+      extrapolateLeft: "clamp",
+      extrapolateRight: "clamp",
+    }
+  );
+
+  // Image exit (same timing as Wedding but slower for elegance)
+  const imageExitOpacity = interpolate(
+    frame,
+    [exitStart, exitStart + 35],
+    [1, 0],
+    {
+      extrapolateLeft: "clamp",
+      extrapolateRight: "clamp",
+      easing: Easing.out(Easing.cubic),
+    }
+  );
+
+  const imageExitY = interpolate(
+    frame,
+    [exitStart, exitStart + 35],
+    [0, -120], // image moves UP more
+    {
+      extrapolateLeft: "clamp",
+      extrapolateRight: "clamp",
+    }
+  );
+
+  return (
+    <AbsoluteFill
+      style={{
+        overflow: "hidden",
+      }}
+    >
+      <div
+        style={{
+          position: "absolute",
+          bottom: 0,
+          width: "100%",
+          height: "100%",
+          overflow: "hidden",
+        }}
+      >
+        <Img
+          src={staticFile("video-images/03022026-krishnaradha.webp")}
+          style={{
+            position: "absolute",
+            top: "32%",
+            left: "50%",
+            width: "170%",
+            objectFit: "cover",
+            opacity: imageOpacity * imageExitOpacity,
+            transform: `translateX(${moveX}px) translateX(-50%) translateY(${imageExitY}px)`,
+          }}
+        />
+      </div>
+
+      <FlowerReveal_TL_BR_28012026 />
+
+      <div
+        style={{
+          position: "absolute",
+          top: "30%",
+          left: "50%",
+          transform: "translate(-50%, -50%)",
+          textAlign: "center",
+        }}
+      >
+        <h1
+          style={{
+            fontFamily: "Dancing Script",
+            color: "#C47A8A",
+            letterSpacing: 3,
+            lineHeight: 1.3,
+            fontWeight: 600,
+            fontSize: 150,
+            margin: 0,
+            opacity: weddingOpacity * weddingExitOpacity,
+            transform: `translateY(${weddingY + weddingExitY}px)`,
+          }}
+        >
+          Wedding
+        </h1>
+
+        <h1
+          style={{
+            fontFamily: "Dancing Script",
+            color: "#C47A8A",
+            letterSpacing: 3,
+            lineHeight: 1.3,
+            fontWeight: 600,
+            fontSize: 150,
+            margin: 0,
+            opacity: inviteOpacity * inviteExitOpacity,
+            transform: `translateY(${inviteY + inviteExitY}px)`,
+          }}
+        >
+          Invitation
+        </h1>
+      </div>
+
+
+    </AbsoluteFill>
+  );
+};