@contractspec/lib.video-gen 2.7.6 → 2.7.7

package/dist/browser/remotion/Root.js

@@ -53,6 +53,109 @@ var defaultVideoTheme = {
   video: defaultVideoColors
 };
 
+// src/design/typography.ts
+var videoTypography = {
+  title: {
+    fontSize: 72,
+    lineHeight: 1.1,
+    fontWeight: 700,
+    letterSpacing: -1
+  },
+  heading: {
+    fontSize: 56,
+    lineHeight: 1.2,
+    fontWeight: 600,
+    letterSpacing: -0.5
+  },
+  subheading: {
+    fontSize: 40,
+    lineHeight: 1.25,
+    fontWeight: 500
+  },
+  body: {
+    fontSize: 32,
+    lineHeight: 1.5,
+    fontWeight: 400
+  },
+  code: {
+    fontSize: 28,
+    lineHeight: 1.6,
+    fontWeight: 400
+  },
+  caption: {
+    fontSize: 24,
+    lineHeight: 1.4,
+    fontWeight: 400
+  },
+  label: {
+    fontSize: 20,
+    lineHeight: 1.3,
+    fontWeight: 600,
+    letterSpacing: 1
+  }
+};
+function scaleTypography(style, targetWidth) {
+  const scale = targetWidth / 1920;
+  return {
+    ...style,
+    fontSize: Math.round(style.fontSize * scale),
+    letterSpacing: style.letterSpacing ? Math.round(style.letterSpacing * scale * 10) / 10 : undefined
+  };
+}
+
+// src/compositions/primitives/animated-text.tsx
+import { interpolate, useCurrentFrame, useVideoConfig } from "remotion";
+import { jsxDEV } from "react/jsx-dev-runtime";
+var AnimatedText = ({
+  text,
+  variant = "body",
+  style: styleOverride,
+  enterAt = 0,
+  exitAt,
+  color = "#ffffff",
+  align = "left"
+}) => {
+  const frame = useCurrentFrame();
+  const { width } = useVideoConfig();
+  const baseStyle = videoTypography[variant];
+  const scaled = scaleTypography(baseStyle, width);
+  const finalStyle = { ...scaled, ...styleOverride };
+  const enterProgress = interpolate(frame, [enterAt, enterAt + videoDurations.textEntrance], [0, 1], { extrapolateLeft: "clamp", extrapolateRight: "clamp" });
+  const enterOpacity = interpolate(enterProgress, [0, 1], [0, 1], {
+    easing: videoEasing.entrance
+  });
+  const enterTranslateY = interpolate(enterProgress, [0, 1], [30, 0], {
+    easing: videoEasing.entrance
+  });
+  let exitOpacity = 1;
+  let exitTranslateY = 0;
+  if (exitAt !== undefined) {
+    const exitProgress = interpolate(frame, [exitAt, exitAt + videoDurations.textExit], [0, 1], { extrapolateLeft: "clamp", extrapolateRight: "clamp" });
+    exitOpacity = interpolate(exitProgress, [0, 1], [1, 0], {
+      easing: videoEasing.exit
+    });
+    exitTranslateY = interpolate(exitProgress, [0, 1], [0, -20], {
+      easing: videoEasing.exit
+    });
+  }
+  const opacity = enterOpacity * exitOpacity;
+  const translateY = enterTranslateY + exitTranslateY;
+  return /* @__PURE__ */ jsxDEV("div", {
+    style: {
+      fontSize: finalStyle.fontSize,
+      lineHeight: finalStyle.lineHeight,
+      fontWeight: finalStyle.fontWeight,
+      letterSpacing: finalStyle.letterSpacing,
+      color,
+      textAlign: align,
+      opacity,
+      transform: `translateY(${translateY}px)`,
+      willChange: "opacity, transform"
+    },
+    children: text
+  }, undefined, false, undefined, this);
+};
+
 // src/design/layouts.ts
 import { VIDEO_FORMATS } from "@contractspec/lib.contracts-integrations/integrations/providers/video";
 var DEFAULT_FPS = 30;
@@ -89,8 +192,8 @@ function getAllFormatVariants() {
 }
 
 // src/compositions/primitives/brand-frame.tsx
-import { interpolate, useCurrentFrame, useVideoConfig } from "remotion";
-import { jsxDEV } from "react/jsx-dev-runtime";
+import { interpolate as interpolate2, useCurrentFrame as useCurrentFrame2, useVideoConfig as useVideoConfig2 } from "remotion";
+import { jsxDEV as jsxDEV2 } from "react/jsx-dev-runtime";
 var BrandFrame = ({
   styleOverrides,
   showBranding = true,
@@ -98,8 +201,8 @@ var BrandFrame = ({
   variant = "gradient",
   children
 }) => {
-  const frame = useCurrentFrame();
-  const { width, height } = useVideoConfig();
+  const frame = useCurrentFrame2();
+  const { width, height } = useVideoConfig2();
   const theme = defaultVideoTheme;
   const safeZone = scaleSafeZone({ type: "custom", width, height });
   const primaryColor = styleOverrides?.primaryColor ?? theme.colors.primary;
@@ -117,16 +220,16 @@ var BrandFrame = ({
       background = "#000000";
       break;
   }
-  const entranceOpacity = animateEntrance ? interpolate(frame, [0, 15], [0, 1], {
+  const entranceOpacity = animateEntrance ? interpolate2(frame, [0, 15], [0, 1], {
     extrapolateLeft: "clamp",
     extrapolateRight: "clamp",
     easing: videoEasing.entrance
   }) : 1;
-  const brandOpacity = showBranding ? interpolate(frame, [videoDurations.brandReveal, videoDurations.brandReveal + 15], [0, 0.3], {
+  const brandOpacity = showBranding ? interpolate2(frame, [videoDurations.brandReveal, videoDurations.brandReveal + 15], [0, 0.3], {
     extrapolateLeft: "clamp",
     extrapolateRight: "clamp"
   }) : 0;
-  return /* @__PURE__ */ jsxDEV("div", {
+  return /* @__PURE__ */ jsxDEV2("div", {
     style: {
       width,
       height,
@@ -136,7 +239,7 @@ var BrandFrame = ({
       opacity: entranceOpacity
     },
     children: [
-      variant === "gradient" && /* @__PURE__ */ jsxDEV("div", {
+      variant === "gradient" && /* @__PURE__ */ jsxDEV2("div", {
         style: {
           position: "absolute",
           top: "-20%",
@@ -148,7 +251,7 @@ var BrandFrame = ({
           pointerEvents: "none"
         }
       }, undefined, false, undefined, this),
-      /* @__PURE__ */ jsxDEV("div", {
+      /* @__PURE__ */ jsxDEV2("div", {
         style: {
           position: "absolute",
           left: safeZone.horizontal,
@@ -160,7 +263,7 @@ var BrandFrame = ({
         },
         children
       }, undefined, false, undefined, this),
-      showBranding && /* @__PURE__ */ jsxDEV("div", {
+      showBranding && /* @__PURE__ */ jsxDEV2("div", {
         style: {
           position: "absolute",
           bottom: safeZone.vertical / 2,
@@ -177,109 +280,6 @@ var BrandFrame = ({
   }, undefined, true, undefined, this);
 };
 
-// src/design/typography.ts
-var videoTypography = {
-  title: {
-    fontSize: 72,
-    lineHeight: 1.1,
-    fontWeight: 700,
-    letterSpacing: -1
-  },
-  heading: {
-    fontSize: 56,
-    lineHeight: 1.2,
-    fontWeight: 600,
-    letterSpacing: -0.5
-  },
-  subheading: {
-    fontSize: 40,
-    lineHeight: 1.25,
-    fontWeight: 500
-  },
-  body: {
-    fontSize: 32,
-    lineHeight: 1.5,
-    fontWeight: 400
-  },
-  code: {
-    fontSize: 28,
-    lineHeight: 1.6,
-    fontWeight: 400
-  },
-  caption: {
-    fontSize: 24,
-    lineHeight: 1.4,
-    fontWeight: 400
-  },
-  label: {
-    fontSize: 20,
-    lineHeight: 1.3,
-    fontWeight: 600,
-    letterSpacing: 1
-  }
-};
-function scaleTypography(style, targetWidth) {
-  const scale = targetWidth / 1920;
-  return {
-    ...style,
-    fontSize: Math.round(style.fontSize * scale),
-    letterSpacing: style.letterSpacing ? Math.round(style.letterSpacing * scale * 10) / 10 : undefined
-  };
-}
-
-// src/compositions/primitives/animated-text.tsx
-import { interpolate as interpolate2, useCurrentFrame as useCurrentFrame2, useVideoConfig as useVideoConfig2 } from "remotion";
-import { jsxDEV as jsxDEV2 } from "react/jsx-dev-runtime";
-var AnimatedText = ({
-  text,
-  variant = "body",
-  style: styleOverride,
-  enterAt = 0,
-  exitAt,
-  color = "#ffffff",
-  align = "left"
-}) => {
-  const frame = useCurrentFrame2();
-  const { width } = useVideoConfig2();
-  const baseStyle = videoTypography[variant];
-  const scaled = scaleTypography(baseStyle, width);
-  const finalStyle = { ...scaled, ...styleOverride };
-  const enterProgress = interpolate2(frame, [enterAt, enterAt + videoDurations.textEntrance], [0, 1], { extrapolateLeft: "clamp", extrapolateRight: "clamp" });
-  const enterOpacity = interpolate2(enterProgress, [0, 1], [0, 1], {
-    easing: videoEasing.entrance
-  });
-  const enterTranslateY = interpolate2(enterProgress, [0, 1], [30, 0], {
-    easing: videoEasing.entrance
-  });
-  let exitOpacity = 1;
-  let exitTranslateY = 0;
-  if (exitAt !== undefined) {
-    const exitProgress = interpolate2(frame, [exitAt, exitAt + videoDurations.textExit], [0, 1], { extrapolateLeft: "clamp", extrapolateRight: "clamp" });
-    exitOpacity = interpolate2(exitProgress, [0, 1], [1, 0], {
-      easing: videoEasing.exit
-    });
-    exitTranslateY = interpolate2(exitProgress, [0, 1], [0, -20], {
-      easing: videoEasing.exit
-    });
-  }
-  const opacity = enterOpacity * exitOpacity;
-  const translateY = enterTranslateY + exitTranslateY;
-  return /* @__PURE__ */ jsxDEV2("div", {
-    style: {
-      fontSize: finalStyle.fontSize,
-      lineHeight: finalStyle.lineHeight,
-      fontWeight: finalStyle.fontWeight,
-      letterSpacing: finalStyle.letterSpacing,
-      color,
-      textAlign: align,
-      opacity,
-      transform: `translateY(${translateY}px)`,
-      willChange: "opacity, transform"
-    },
-    children: text
-  }, undefined, false, undefined, this);
-};
-
 // src/compositions/primitives/code-block.tsx
 import { interpolate as interpolate3, useCurrentFrame as useCurrentFrame3, useVideoConfig as useVideoConfig3 } from "remotion";
 import { jsxDEV as jsxDEV3 } from "react/jsx-dev-runtime";
@@ -435,8 +435,8 @@ var ProgressBar = ({
 // src/compositions/api-overview.tsx
 import {
   AbsoluteFill,
-  Sequence,
   interpolate as interpolate4,
+  Sequence,
   useCurrentFrame as useCurrentFrame5,
   useVideoConfig as useVideoConfig5
 } from "remotion";
@@ -802,8 +802,8 @@ var Terminal = ({
 // src/compositions/social-clip.tsx
 import {
   AbsoluteFill as AbsoluteFill2,
-  Sequence as Sequence2,
   interpolate as interpolate6,
+  Sequence as Sequence2,
   useCurrentFrame as useCurrentFrame7,
   useVideoConfig as useVideoConfig7
 } from "remotion";

package/dist/browser/remotion/index.js

@@ -53,6 +53,109 @@ var defaultVideoTheme = {
   video: defaultVideoColors
 };
 
+// src/design/typography.ts
+var videoTypography = {
+  title: {
+    fontSize: 72,
+    lineHeight: 1.1,
+    fontWeight: 700,
+    letterSpacing: -1
+  },
+  heading: {
+    fontSize: 56,
+    lineHeight: 1.2,
+    fontWeight: 600,
+    letterSpacing: -0.5
+  },
+  subheading: {
+    fontSize: 40,
+    lineHeight: 1.25,
+    fontWeight: 500
+  },
+  body: {
+    fontSize: 32,
+    lineHeight: 1.5,
+    fontWeight: 400
+  },
+  code: {
+    fontSize: 28,
+    lineHeight: 1.6,
+    fontWeight: 400
+  },
+  caption: {
+    fontSize: 24,
+    lineHeight: 1.4,
+    fontWeight: 400
+  },
+  label: {
+    fontSize: 20,
+    lineHeight: 1.3,
+    fontWeight: 600,
+    letterSpacing: 1
+  }
+};
+function scaleTypography(style, targetWidth) {
+  const scale = targetWidth / 1920;
+  return {
+    ...style,
+    fontSize: Math.round(style.fontSize * scale),
+    letterSpacing: style.letterSpacing ? Math.round(style.letterSpacing * scale * 10) / 10 : undefined
+  };
+}
+
+// src/compositions/primitives/animated-text.tsx
+import { interpolate, useCurrentFrame, useVideoConfig } from "remotion";
+import { jsxDEV } from "react/jsx-dev-runtime";
+var AnimatedText = ({
+  text,
+  variant = "body",
+  style: styleOverride,
+  enterAt = 0,
+  exitAt,
+  color = "#ffffff",
+  align = "left"
+}) => {
+  const frame = useCurrentFrame();
+  const { width } = useVideoConfig();
+  const baseStyle = videoTypography[variant];
+  const scaled = scaleTypography(baseStyle, width);
+  const finalStyle = { ...scaled, ...styleOverride };
+  const enterProgress = interpolate(frame, [enterAt, enterAt + videoDurations.textEntrance], [0, 1], { extrapolateLeft: "clamp", extrapolateRight: "clamp" });
+  const enterOpacity = interpolate(enterProgress, [0, 1], [0, 1], {
+    easing: videoEasing.entrance
+  });
+  const enterTranslateY = interpolate(enterProgress, [0, 1], [30, 0], {
+    easing: videoEasing.entrance
+  });
+  let exitOpacity = 1;
+  let exitTranslateY = 0;
+  if (exitAt !== undefined) {
+    const exitProgress = interpolate(frame, [exitAt, exitAt + videoDurations.textExit], [0, 1], { extrapolateLeft: "clamp", extrapolateRight: "clamp" });
+    exitOpacity = interpolate(exitProgress, [0, 1], [1, 0], {
+      easing: videoEasing.exit
+    });
+    exitTranslateY = interpolate(exitProgress, [0, 1], [0, -20], {
+      easing: videoEasing.exit
+    });
+  }
+  const opacity = enterOpacity * exitOpacity;
+  const translateY = enterTranslateY + exitTranslateY;
+  return /* @__PURE__ */ jsxDEV("div", {
+    style: {
+      fontSize: finalStyle.fontSize,
+      lineHeight: finalStyle.lineHeight,
+      fontWeight: finalStyle.fontWeight,
+      letterSpacing: finalStyle.letterSpacing,
+      color,
+      textAlign: align,
+      opacity,
+      transform: `translateY(${translateY}px)`,
+      willChange: "opacity, transform"
+    },
+    children: text
+  }, undefined, false, undefined, this);
+};
+
 // src/design/layouts.ts
 import { VIDEO_FORMATS } from "@contractspec/lib.contracts-integrations/integrations/providers/video";
 var DEFAULT_FPS = 30;
@@ -89,8 +192,8 @@ function getAllFormatVariants() {
 }
 
 // src/compositions/primitives/brand-frame.tsx
-import { interpolate, useCurrentFrame, useVideoConfig } from "remotion";
-import { jsxDEV } from "react/jsx-dev-runtime";
+import { interpolate as interpolate2, useCurrentFrame as useCurrentFrame2, useVideoConfig as useVideoConfig2 } from "remotion";
+import { jsxDEV as jsxDEV2 } from "react/jsx-dev-runtime";
 var BrandFrame = ({
   styleOverrides,
   showBranding = true,
@@ -98,8 +201,8 @@ var BrandFrame = ({
   variant = "gradient",
   children
 }) => {
-  const frame = useCurrentFrame();
-  const { width, height } = useVideoConfig();
+  const frame = useCurrentFrame2();
+  const { width, height } = useVideoConfig2();
   const theme = defaultVideoTheme;
   const safeZone = scaleSafeZone({ type: "custom", width, height });
   const primaryColor = styleOverrides?.primaryColor ?? theme.colors.primary;
@@ -117,16 +220,16 @@ var BrandFrame = ({
       background = "#000000";
       break;
   }
-  const entranceOpacity = animateEntrance ? interpolate(frame, [0, 15], [0, 1], {
+  const entranceOpacity = animateEntrance ? interpolate2(frame, [0, 15], [0, 1], {
     extrapolateLeft: "clamp",
     extrapolateRight: "clamp",
     easing: videoEasing.entrance
   }) : 1;
-  const brandOpacity = showBranding ? interpolate(frame, [videoDurations.brandReveal, videoDurations.brandReveal + 15], [0, 0.3], {
+  const brandOpacity = showBranding ? interpolate2(frame, [videoDurations.brandReveal, videoDurations.brandReveal + 15], [0, 0.3], {
     extrapolateLeft: "clamp",
     extrapolateRight: "clamp"
   }) : 0;
-  return /* @__PURE__ */ jsxDEV("div", {
+  return /* @__PURE__ */ jsxDEV2("div", {
     style: {
       width,
       height,
@@ -136,7 +239,7 @@ var BrandFrame = ({
       opacity: entranceOpacity
     },
     children: [
-      variant === "gradient" && /* @__PURE__ */ jsxDEV("div", {
+      variant === "gradient" && /* @__PURE__ */ jsxDEV2("div", {
         style: {
           position: "absolute",
           top: "-20%",
@@ -148,7 +251,7 @@ var BrandFrame = ({
           pointerEvents: "none"
         }
       }, undefined, false, undefined, this),
-      /* @__PURE__ */ jsxDEV("div", {
+      /* @__PURE__ */ jsxDEV2("div", {
         style: {
           position: "absolute",
           left: safeZone.horizontal,
@@ -160,7 +263,7 @@ var BrandFrame = ({
         },
         children
       }, undefined, false, undefined, this),
-      showBranding && /* @__PURE__ */ jsxDEV("div", {
+      showBranding && /* @__PURE__ */ jsxDEV2("div", {
         style: {
           position: "absolute",
           bottom: safeZone.vertical / 2,
@@ -177,109 +280,6 @@ var BrandFrame = ({
   }, undefined, true, undefined, this);
 };
 
-// src/design/typography.ts
-var videoTypography = {
-  title: {
-    fontSize: 72,
-    lineHeight: 1.1,
-    fontWeight: 700,
-    letterSpacing: -1
-  },
-  heading: {
-    fontSize: 56,
-    lineHeight: 1.2,
-    fontWeight: 600,
-    letterSpacing: -0.5
-  },
-  subheading: {
-    fontSize: 40,
-    lineHeight: 1.25,
-    fontWeight: 500
-  },
-  body: {
-    fontSize: 32,
-    lineHeight: 1.5,
-    fontWeight: 400
-  },
-  code: {
-    fontSize: 28,
-    lineHeight: 1.6,
-    fontWeight: 400
-  },
-  caption: {
-    fontSize: 24,
-    lineHeight: 1.4,
-    fontWeight: 400
-  },
-  label: {
-    fontSize: 20,
-    lineHeight: 1.3,
-    fontWeight: 600,
-    letterSpacing: 1
-  }
-};
-function scaleTypography(style, targetWidth) {
-  const scale = targetWidth / 1920;
-  return {
-    ...style,
-    fontSize: Math.round(style.fontSize * scale),
-    letterSpacing: style.letterSpacing ? Math.round(style.letterSpacing * scale * 10) / 10 : undefined
-  };
-}
-
-// src/compositions/primitives/animated-text.tsx
-import { interpolate as interpolate2, useCurrentFrame as useCurrentFrame2, useVideoConfig as useVideoConfig2 } from "remotion";
-import { jsxDEV as jsxDEV2 } from "react/jsx-dev-runtime";
-var AnimatedText = ({
-  text,
-  variant = "body",
-  style: styleOverride,
-  enterAt = 0,
-  exitAt,
-  color = "#ffffff",
-  align = "left"
-}) => {
-  const frame = useCurrentFrame2();
-  const { width } = useVideoConfig2();
-  const baseStyle = videoTypography[variant];
-  const scaled = scaleTypography(baseStyle, width);
-  const finalStyle = { ...scaled, ...styleOverride };
-  const enterProgress = interpolate2(frame, [enterAt, enterAt + videoDurations.textEntrance], [0, 1], { extrapolateLeft: "clamp", extrapolateRight: "clamp" });
-  const enterOpacity = interpolate2(enterProgress, [0, 1], [0, 1], {
-    easing: videoEasing.entrance
-  });
-  const enterTranslateY = interpolate2(enterProgress, [0, 1], [30, 0], {
-    easing: videoEasing.entrance
-  });
-  let exitOpacity = 1;
-  let exitTranslateY = 0;
-  if (exitAt !== undefined) {
-    const exitProgress = interpolate2(frame, [exitAt, exitAt + videoDurations.textExit], [0, 1], { extrapolateLeft: "clamp", extrapolateRight: "clamp" });
-    exitOpacity = interpolate2(exitProgress, [0, 1], [1, 0], {
-      easing: videoEasing.exit
-    });
-    exitTranslateY = interpolate2(exitProgress, [0, 1], [0, -20], {
-      easing: videoEasing.exit
-    });
-  }
-  const opacity = enterOpacity * exitOpacity;
-  const translateY = enterTranslateY + exitTranslateY;
-  return /* @__PURE__ */ jsxDEV2("div", {
-    style: {
-      fontSize: finalStyle.fontSize,
-      lineHeight: finalStyle.lineHeight,
-      fontWeight: finalStyle.fontWeight,
-      letterSpacing: finalStyle.letterSpacing,
-      color,
-      textAlign: align,
-      opacity,
-      transform: `translateY(${translateY}px)`,
-      willChange: "opacity, transform"
-    },
-    children: text
-  }, undefined, false, undefined, this);
-};
-
 // src/compositions/primitives/code-block.tsx
 import { interpolate as interpolate3, useCurrentFrame as useCurrentFrame3, useVideoConfig as useVideoConfig3 } from "remotion";
 import { jsxDEV as jsxDEV3 } from "react/jsx-dev-runtime";
@@ -435,8 +435,8 @@ var ProgressBar = ({
 // src/compositions/api-overview.tsx
 import {
   AbsoluteFill,
-  Sequence,
   interpolate as interpolate4,
+  Sequence,
   useCurrentFrame as useCurrentFrame5,
   useVideoConfig as useVideoConfig5
 } from "remotion";
@@ -802,8 +802,8 @@ var Terminal = ({
 // src/compositions/social-clip.tsx
 import {
   AbsoluteFill as AbsoluteFill2,
-  Sequence as Sequence2,
   interpolate as interpolate6,
+  Sequence as Sequence2,
   useCurrentFrame as useCurrentFrame7,
   useVideoConfig as useVideoConfig7
 } from "remotion";