@contractspec/lib.video-gen 1.42.0

package/dist/compositions/primitives/animated-text.d.ts

@@ -0,0 +1,22 @@
+import React from 'react';
+import { videoTypography } from '../../design/typography';
+import type { VideoTypeStyle } from '../../design/typography';
+export interface AnimatedTextProps {
+    /** The text content to display */
+    text: string;
+    /** Typography style key or custom style */
+    variant?: keyof typeof videoTypography;
+    /** Custom style override */
+    style?: Partial<VideoTypeStyle>;
+    /** Frame at which text enters (relative to composition start) */
+    enterAt?: number;
+    /** Frame at which text exits. Omit to keep visible. */
+    exitAt?: number;
+    /** Color */
+    color?: string;
+    /** Text alignment */
+    align?: 'left' | 'center' | 'right';
+    /** Additional CSS styles */
+    className?: string;
+}
+export declare const AnimatedText: React.FC<AnimatedTextProps>;

package/dist/compositions/primitives/animated-text.js

@@ -0,0 +1,139 @@
+// @bun
+var __require = import.meta.require;
+
+// src/design/motion.ts
+import { Easing } from "remotion";
+var videoEasing = {
+  entrance: Easing.out(Easing.exp),
+  exit: Easing.in(Easing.exp),
+  emphasis: Easing.out(Easing.back(1.4)),
+  linear: Easing.linear,
+  gentle: Easing.bezier(0.25, 0.1, 0.25, 1),
+  spring: Easing.out(Easing.back(1.7))
+};
+var videoDurations = {
+  sceneTransition: 20,
+  textEntrance: 15,
+  textExit: 12,
+  codeTypingPerChar: 2,
+  sectionPause: 30,
+  emphasisPause: 15,
+  brandReveal: 25,
+  minScene: 60,
+  shortScene: 60,
+  mediumScene: 120,
+  longScene: 240
+};
+var videoTransitions = {
+  fade: { type: "fade", durationInFrames: 20 },
+  slideLeft: { type: "slide-left", durationInFrames: 20 },
+  slideRight: { type: "slide-right", durationInFrames: 20 },
+  wipe: { type: "wipe", durationInFrames: 15 },
+  none: { type: "none", durationInFrames: 0 }
+};
+
+// 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);
+};
+export {
+  AnimatedText
+};

package/dist/compositions/primitives/brand-frame.d.ts

@@ -0,0 +1,14 @@
+import React from 'react';
+import type { VideoStyleOverrides } from '@contractspec/lib.contracts-integrations/integrations/providers/video';
+export interface BrandFrameProps {
+    /** Override style tokens */
+    styleOverrides?: VideoStyleOverrides;
+    /** Show the ContractSpec logo/brand in bottom-right */
+    showBranding?: boolean;
+    /** Animate entrance */
+    animateEntrance?: boolean;
+    /** Background variant */
+    variant?: 'solid' | 'gradient' | 'dark';
+    children: React.ReactNode;
+}
+export declare const BrandFrame: React.FC<BrandFrameProps>;

package/dist/compositions/primitives/brand-frame.js

@@ -0,0 +1,176 @@
+// @bun
+var __require = import.meta.require;
+
+// src/design/motion.ts
+import { Easing } from "remotion";
+var videoEasing = {
+  entrance: Easing.out(Easing.exp),
+  exit: Easing.in(Easing.exp),
+  emphasis: Easing.out(Easing.back(1.4)),
+  linear: Easing.linear,
+  gentle: Easing.bezier(0.25, 0.1, 0.25, 1),
+  spring: Easing.out(Easing.back(1.7))
+};
+var videoDurations = {
+  sceneTransition: 20,
+  textEntrance: 15,
+  textExit: 12,
+  codeTypingPerChar: 2,
+  sectionPause: 30,
+  emphasisPause: 15,
+  brandReveal: 25,
+  minScene: 60,
+  shortScene: 60,
+  mediumScene: 120,
+  longScene: 240
+};
+var videoTransitions = {
+  fade: { type: "fade", durationInFrames: 20 },
+  slideLeft: { type: "slide-left", durationInFrames: 20 },
+  slideRight: { type: "slide-right", durationInFrames: 20 },
+  wipe: { type: "wipe", durationInFrames: 15 },
+  none: { type: "none", durationInFrames: 0 }
+};
+
+// src/design/tokens.ts
+import { defaultTokens } from "@contractspec/lib.design-system";
+var defaultVideoColors = {
+  canvasBackground: defaultTokens.colors.background,
+  codeBackground: "#1e1e2e",
+  terminalBackground: "#0d1117",
+  terminalForeground: "#c9d1d9",
+  highlight: defaultTokens.colors.accent,
+  gradientStart: defaultTokens.colors.primary,
+  gradientEnd: defaultTokens.colors.accent
+};
+var defaultVideoTheme = {
+  ...defaultTokens,
+  video: defaultVideoColors
+};
+
+// src/design/layouts.ts
+import { VIDEO_FORMATS } from "@contractspec/lib.contracts-integrations/integrations/providers/video";
+var DEFAULT_FPS = 30;
+var videoSafeZone = {
+  horizontal: 120,
+  vertical: 80,
+  contentWidth: 1680,
+  contentHeight: 920
+};
+function scaleSafeZone(format) {
+  const scaleX = format.width / 1920;
+  const scaleY = format.height / 1080;
+  return {
+    horizontal: Math.round(videoSafeZone.horizontal * scaleX),
+    vertical: Math.round(videoSafeZone.vertical * scaleY),
+    contentWidth: Math.round(videoSafeZone.contentWidth * scaleX),
+    contentHeight: Math.round(videoSafeZone.contentHeight * scaleY)
+  };
+}
+var videoPositions = {
+  center: { x: 960, y: 540 },
+  topLeft: { x: 120, y: 80 },
+  topRight: { x: 1800, y: 80 },
+  bottomLeft: { x: 120, y: 1000 },
+  bottomRight: { x: 1800, y: 1000 },
+  bottomCenter: { x: 960, y: 960 }
+};
+function getAllFormatVariants() {
+  return [
+    VIDEO_FORMATS.landscape,
+    VIDEO_FORMATS.square,
+    VIDEO_FORMATS.portrait
+  ];
+}
+
+// src/compositions/primitives/brand-frame.tsx
+import { interpolate, useCurrentFrame, useVideoConfig } from "remotion";
+import { jsxDEV } from "react/jsx-dev-runtime";
+var BrandFrame = ({
+  styleOverrides,
+  showBranding = true,
+  animateEntrance = true,
+  variant = "gradient",
+  children
+}) => {
+  const frame = useCurrentFrame();
+  const { width, height } = useVideoConfig();
+  const theme = defaultVideoTheme;
+  const safeZone = scaleSafeZone({ type: "custom", width, height });
+  const primaryColor = styleOverrides?.primaryColor ?? theme.colors.primary;
+  const _accentColor = styleOverrides?.accentColor ?? theme.colors.accent;
+  const isDark = styleOverrides?.darkMode ?? true;
+  let background;
+  switch (variant) {
+    case "solid":
+      background = isDark ? "#0a0a0a" : theme.colors.background;
+      break;
+    case "gradient":
+      background = isDark ? `linear-gradient(135deg, #0a0a14 0%, #0f172a 50%, #0a0a14 100%)` : `linear-gradient(135deg, ${theme.colors.background} 0%, ${theme.colors.muted} 100%)`;
+      break;
+    case "dark":
+      background = "#000000";
+      break;
+  }
+  const entranceOpacity = animateEntrance ? interpolate(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], {
+    extrapolateLeft: "clamp",
+    extrapolateRight: "clamp"
+  }) : 0;
+  return /* @__PURE__ */ jsxDEV("div", {
+    style: {
+      width,
+      height,
+      background,
+      position: "relative",
+      overflow: "hidden",
+      opacity: entranceOpacity
+    },
+    children: [
+      variant === "gradient" && /* @__PURE__ */ jsxDEV("div", {
+        style: {
+          position: "absolute",
+          top: "-20%",
+          right: "-10%",
+          width: "50%",
+          height: "50%",
+          background: `radial-gradient(circle, ${primaryColor}15 0%, transparent 70%)`,
+          borderRadius: "50%",
+          pointerEvents: "none"
+        }
+      }, undefined, false, undefined, this),
+      /* @__PURE__ */ jsxDEV("div", {
+        style: {
+          position: "absolute",
+          left: safeZone.horizontal,
+          top: safeZone.vertical,
+          width: safeZone.contentWidth,
+          height: safeZone.contentHeight,
+          display: "flex",
+          flexDirection: "column"
+        },
+        children
+      }, undefined, false, undefined, this),
+      showBranding && /* @__PURE__ */ jsxDEV("div", {
+        style: {
+          position: "absolute",
+          bottom: safeZone.vertical / 2,
+          right: safeZone.horizontal,
+          opacity: brandOpacity,
+          color: isDark ? "#ffffff" : "#000000",
+          fontSize: Math.round(16 * (width / 1920)),
+          fontWeight: 500,
+          letterSpacing: 1
+        },
+        children: "ContractSpec"
+      }, undefined, false, undefined, this)
+    ]
+  }, undefined, true, undefined, this);
+};
+export {
+  BrandFrame
+};

package/dist/compositions/primitives/code-block.d.ts

@@ -0,0 +1,18 @@
+import React from 'react';
+export interface CodeBlockProps {
+    /** Code string to display */
+    code: string;
+    /** Language label shown in the top bar */
+    language?: string;
+    /** Frame at which typing starts */
+    startAt?: number;
+    /** Whether to animate typing or show all at once */
+    typeAnimation?: boolean;
+    /** Background color */
+    backgroundColor?: string;
+    /** Text color */
+    textColor?: string;
+    /** Filename to show in the title bar */
+    filename?: string;
+}
+export declare const CodeBlock: React.FC<CodeBlockProps>;

package/dist/compositions/primitives/code-block.js

@@ -0,0 +1,221 @@
+// @bun
+var __require = import.meta.require;
+
+// src/design/motion.ts
+import { Easing } from "remotion";
+var videoEasing = {
+  entrance: Easing.out(Easing.exp),
+  exit: Easing.in(Easing.exp),
+  emphasis: Easing.out(Easing.back(1.4)),
+  linear: Easing.linear,
+  gentle: Easing.bezier(0.25, 0.1, 0.25, 1),
+  spring: Easing.out(Easing.back(1.7))
+};
+var videoDurations = {
+  sceneTransition: 20,
+  textEntrance: 15,
+  textExit: 12,
+  codeTypingPerChar: 2,
+  sectionPause: 30,
+  emphasisPause: 15,
+  brandReveal: 25,
+  minScene: 60,
+  shortScene: 60,
+  mediumScene: 120,
+  longScene: 240
+};
+var videoTransitions = {
+  fade: { type: "fade", durationInFrames: 20 },
+  slideLeft: { type: "slide-left", durationInFrames: 20 },
+  slideRight: { type: "slide-right", durationInFrames: 20 },
+  wipe: { type: "wipe", durationInFrames: 15 },
+  none: { type: "none", durationInFrames: 0 }
+};
+
+// src/design/tokens.ts
+import { defaultTokens } from "@contractspec/lib.design-system";
+var defaultVideoColors = {
+  canvasBackground: defaultTokens.colors.background,
+  codeBackground: "#1e1e2e",
+  terminalBackground: "#0d1117",
+  terminalForeground: "#c9d1d9",
+  highlight: defaultTokens.colors.accent,
+  gradientStart: defaultTokens.colors.primary,
+  gradientEnd: defaultTokens.colors.accent
+};
+var defaultVideoTheme = {
+  ...defaultTokens,
+  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/code-block.tsx
+import { interpolate, useCurrentFrame, useVideoConfig } from "remotion";
+import { jsxDEV } from "react/jsx-dev-runtime";
+var CodeBlock = ({
+  code,
+  language = "typescript",
+  startAt = 0,
+  typeAnimation = true,
+  backgroundColor = defaultVideoColors.codeBackground,
+  textColor = "#abb2bf",
+  filename
+}) => {
+  const frame = useCurrentFrame();
+  const { width } = useVideoConfig();
+  const codeStyle = scaleTypography(videoTypography.code, width);
+  const totalChars = code.length;
+  const typingDuration = totalChars * videoDurations.codeTypingPerChar;
+  const charsVisible = typeAnimation ? Math.floor(interpolate(frame, [startAt, startAt + typingDuration], [0, totalChars], {
+    extrapolateLeft: "clamp",
+    extrapolateRight: "clamp"
+  })) : totalChars;
+  const visibleCode = code.slice(0, charsVisible);
+  const opacity = interpolate(frame, [startAt, startAt + 10], [0, 1], {
+    extrapolateLeft: "clamp",
+    extrapolateRight: "clamp",
+    easing: videoEasing.entrance
+  });
+  const showCursor = typeAnimation && charsVisible < totalChars && frame % 16 < 10;
+  return /* @__PURE__ */ jsxDEV("div", {
+    style: {
+      backgroundColor,
+      borderRadius: 16,
+      padding: 0,
+      opacity,
+      overflow: "hidden",
+      boxShadow: "0 8px 32px rgba(0,0,0,0.3)"
+    },
+    children: [
+      /* @__PURE__ */ jsxDEV("div", {
+        style: {
+          display: "flex",
+          alignItems: "center",
+          padding: "12px 20px",
+          backgroundColor: "rgba(0,0,0,0.2)",
+          gap: 8
+        },
+        children: [
+          /* @__PURE__ */ jsxDEV("div", {
+            style: { display: "flex", gap: 8 },
+            children: [
+              /* @__PURE__ */ jsxDEV("div", {
+                style: {
+                  width: 12,
+                  height: 12,
+                  borderRadius: "50%",
+                  backgroundColor: "#ff5f57"
+                }
+              }, undefined, false, undefined, this),
+              /* @__PURE__ */ jsxDEV("div", {
+                style: {
+                  width: 12,
+                  height: 12,
+                  borderRadius: "50%",
+                  backgroundColor: "#febc2e"
+                }
+              }, undefined, false, undefined, this),
+              /* @__PURE__ */ jsxDEV("div", {
+                style: {
+                  width: 12,
+                  height: 12,
+                  borderRadius: "50%",
+                  backgroundColor: "#28c840"
+                }
+              }, undefined, false, undefined, this)
+            ]
+          }, undefined, true, undefined, this),
+          /* @__PURE__ */ jsxDEV("div", {
+            style: {
+              flex: 1,
+              textAlign: "center",
+              color: "#666",
+              fontSize: codeStyle.fontSize * 0.7,
+              fontFamily: "monospace"
+            },
+            children: filename ?? language
+          }, undefined, false, undefined, this)
+        ]
+      }, undefined, true, undefined, this),
+      /* @__PURE__ */ jsxDEV("div", {
+        style: { padding: "24px 32px" },
+        children: /* @__PURE__ */ jsxDEV("pre", {
+          style: {
+            margin: 0,
+            fontFamily: "'SF Mono', 'Fira Code', 'JetBrains Mono', monospace",
+            fontSize: codeStyle.fontSize,
+            lineHeight: codeStyle.lineHeight,
+            color: textColor,
+            whiteSpace: "pre-wrap",
+            wordBreak: "break-word"
+          },
+          children: [
+            visibleCode,
+            showCursor && /* @__PURE__ */ jsxDEV("span", {
+              style: {
+                backgroundColor: textColor,
+                width: "2px",
+                display: "inline-block",
+                height: "1.2em",
+                verticalAlign: "text-bottom"
+              },
+              children: "\xA0"
+            }, undefined, false, undefined, this)
+          ]
+        }, undefined, true, undefined, this)
+      }, undefined, false, undefined, this)
+    ]
+  }, undefined, true, undefined, this);
+};
+export {
+  CodeBlock
+};

package/dist/compositions/primitives/index.d.ts

@@ -0,0 +1,12 @@
+export { AnimatedText } from './animated-text';
+export type { AnimatedTextProps } from './animated-text';
+export { CodeBlock } from './code-block';
+export type { CodeBlockProps } from './code-block';
+export { Terminal } from './terminal';
+export type { TerminalProps, TerminalLine } from './terminal';
+export { SceneTransitionWrapper } from './transition';
+export type { SceneTransitionProps } from './transition';
+export { BrandFrame } from './brand-frame';
+export type { BrandFrameProps } from './brand-frame';
+export { ProgressBar } from './progress-bar';
+export type { ProgressBarProps } from './progress-bar';