@contractspec/lib.video-gen 1.42.0

package/dist/compositions/primitives/progress-bar.js

@@ -0,0 +1,54 @@
+// @bun
+var __require = import.meta.require;
+
+// 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/compositions/primitives/progress-bar.tsx
+import { useCurrentFrame, useVideoConfig } from "remotion";
+import { jsxDEV } from "react/jsx-dev-runtime";
+var ProgressBar = ({
+  height = 4,
+  color = defaultVideoTheme.colors.primary,
+  backgroundColor = "rgba(255,255,255,0.1)",
+  position = "bottom"
+}) => {
+  const frame = useCurrentFrame();
+  const { durationInFrames, width } = useVideoConfig();
+  const progress = frame / durationInFrames;
+  return /* @__PURE__ */ jsxDEV("div", {
+    style: {
+      position: "absolute",
+      [position]: 0,
+      left: 0,
+      width,
+      height,
+      backgroundColor,
+      zIndex: 100
+    },
+    children: /* @__PURE__ */ jsxDEV("div", {
+      style: {
+        width: `${progress * 100}%`,
+        height: "100%",
+        backgroundColor: color,
+        transition: "none"
+      }
+    }, undefined, false, undefined, this)
+  }, undefined, false, undefined, this);
+};
+export {
+  ProgressBar
+};

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

@@ -0,0 +1,24 @@
+import React from 'react';
+export interface TerminalLine {
+    /** The text content */
+    text: string;
+    /** Line type determines styling */
+    type: 'command' | 'output' | 'error' | 'success' | 'comment';
+    /** Delay in frames before this line appears (relative to previous line end) */
+    delay?: number;
+}
+export interface TerminalProps {
+    /** Lines to display in sequence */
+    lines: TerminalLine[];
+    /** Frame at which the terminal appears */
+    startAt?: number;
+    /** Terminal prompt string */
+    prompt?: string;
+    /** Terminal title */
+    title?: string;
+    /** Background color */
+    backgroundColor?: string;
+    /** Typing speed in frames per character (for command lines) */
+    typingSpeed?: number;
+}
+export declare const Terminal: React.FC<TerminalProps>;

package/dist/compositions/primitives/terminal.js

@@ -0,0 +1,260 @@
+// @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/terminal.tsx
+import { interpolate, useCurrentFrame, useVideoConfig } from "remotion";
+import { jsxDEV } from "react/jsx-dev-runtime";
+var LINE_TYPE_COLORS = {
+  command: "#c9d1d9",
+  output: "#8b949e",
+  error: "#f85149",
+  success: "#3fb950",
+  comment: "#6e7681"
+};
+var Terminal = ({
+  lines,
+  startAt = 0,
+  prompt = "$ ",
+  title = "Terminal",
+  backgroundColor = defaultVideoColors.terminalBackground,
+  typingSpeed = videoDurations.codeTypingPerChar
+}) => {
+  const frame = useCurrentFrame();
+  const { width } = useVideoConfig();
+  const codeStyle = scaleTypography(videoTypography.code, width);
+  const lineTimings = [];
+  let currentFrame = startAt;
+  for (const line of lines) {
+    const delay = line.delay ?? 10;
+    const lineStart = currentFrame + delay;
+    if (line.type === "command") {
+      const typeDuration = line.text.length * typingSpeed;
+      lineTimings.push({
+        startFrame: lineStart,
+        endFrame: lineStart + typeDuration
+      });
+      currentFrame = lineStart + typeDuration;
+    } else {
+      lineTimings.push({ startFrame: lineStart, endFrame: lineStart + 5 });
+      currentFrame = lineStart + 5;
+    }
+  }
+  const opacity = interpolate(frame, [startAt, startAt + 10], [0, 1], {
+    extrapolateLeft: "clamp",
+    extrapolateRight: "clamp",
+    easing: videoEasing.entrance
+  });
+  return /* @__PURE__ */ jsxDEV("div", {
+    style: {
+      backgroundColor,
+      borderRadius: 16,
+      overflow: "hidden",
+      opacity,
+      boxShadow: "0 8px 32px rgba(0,0,0,0.3)"
+    },
+    children: [
+      /* @__PURE__ */ jsxDEV("div", {
+        style: {
+          display: "flex",
+          alignItems: "center",
+          padding: "12px 20px",
+          backgroundColor: "rgba(255,255,255,0.05)",
+          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: "#484f58",
+              fontSize: codeStyle.fontSize * 0.7,
+              fontFamily: "monospace"
+            },
+            children: title
+          }, undefined, false, undefined, this)
+        ]
+      }, undefined, true, undefined, this),
+      /* @__PURE__ */ jsxDEV("div", {
+        style: { padding: "24px 32px", minHeight: 200 },
+        children: lines.map((line, i) => {
+          const timing = lineTimings[i];
+          if (!timing || frame < timing.startFrame)
+            return null;
+          const isCommand = line.type === "command";
+          const lineColor = LINE_TYPE_COLORS[line.type];
+          let visibleText = line.text;
+          if (isCommand) {
+            const typingProgress = interpolate(frame, [timing.startFrame, timing.endFrame], [0, line.text.length], { extrapolateLeft: "clamp", extrapolateRight: "clamp" });
+            visibleText = line.text.slice(0, Math.floor(typingProgress));
+          }
+          const lineOpacity = isCommand ? 1 : interpolate(frame, [timing.startFrame, timing.startFrame + 5], [0, 1], {
+            extrapolateLeft: "clamp",
+            extrapolateRight: "clamp"
+          });
+          const isTyping = isCommand && frame >= timing.startFrame && frame <= timing.endFrame;
+          const showCursor = isTyping && frame % 16 < 10;
+          return /* @__PURE__ */ jsxDEV("div", {
+            style: {
+              fontFamily: "'SF Mono', 'Fira Code', 'JetBrains Mono', monospace",
+              fontSize: codeStyle.fontSize,
+              lineHeight: 1.8,
+              color: lineColor,
+              opacity: lineOpacity,
+              whiteSpace: "pre-wrap"
+            },
+            children: [
+              isCommand && /* @__PURE__ */ jsxDEV("span", {
+                style: { color: "#3fb950" },
+                children: prompt
+              }, undefined, false, undefined, this),
+              line.type === "comment" && /* @__PURE__ */ jsxDEV("span", {
+                style: { color: LINE_TYPE_COLORS.comment },
+                children: "# "
+              }, undefined, false, undefined, this),
+              visibleText,
+              showCursor && /* @__PURE__ */ jsxDEV("span", {
+                style: {
+                  backgroundColor: "#c9d1d9",
+                  width: "2px",
+                  display: "inline-block",
+                  height: "1.2em",
+                  verticalAlign: "text-bottom"
+                },
+                children: "\xA0"
+              }, undefined, false, undefined, this)
+            ]
+          }, `${i}-${line.text.slice(0, 20)}`, true, undefined, this);
+        })
+      }, undefined, false, undefined, this)
+    ]
+  }, undefined, true, undefined, this);
+};
+export {
+  Terminal
+};

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

@@ -0,0 +1,14 @@
+import React from 'react';
+import type { SceneTransitionType } from '@contractspec/lib.contracts-integrations/integrations/providers/video';
+export interface SceneTransitionProps {
+    /** Transition type */
+    type: SceneTransitionType;
+    /** Duration of the transition in frames */
+    durationInFrames: number;
+    /** 'in' = entering, 'out' = exiting */
+    direction: 'in' | 'out';
+    /** Frame at which the transition starts (relative to sequence) */
+    startAt?: number;
+    children: React.ReactNode;
+}
+export declare const SceneTransitionWrapper: React.FC<SceneTransitionProps>;

package/dist/compositions/primitives/transition.js

@@ -0,0 +1,93 @@
+// @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/compositions/primitives/transition.tsx
+import { interpolate, useCurrentFrame } from "remotion";
+import { jsxDEV, Fragment } from "react/jsx-dev-runtime";
+var SceneTransitionWrapper = ({
+  type,
+  durationInFrames,
+  direction,
+  startAt = 0,
+  children
+}) => {
+  const frame = useCurrentFrame();
+  if (type === "none" || durationInFrames === 0) {
+    return /* @__PURE__ */ jsxDEV(Fragment, {
+      children
+    }, undefined, false, undefined, this);
+  }
+  const progress = interpolate(frame, [startAt, startAt + durationInFrames], direction === "in" ? [0, 1] : [1, 0], { extrapolateLeft: "clamp", extrapolateRight: "clamp" });
+  const styles = getTransitionStyles(type, progress);
+  return /* @__PURE__ */ jsxDEV("div", {
+    style: styles,
+    children
+  }, undefined, false, undefined, this);
+};
+function getTransitionStyles(type, progress) {
+  const eased = videoEasing.entrance(progress);
+  switch (type) {
+    case "fade":
+      return {
+        opacity: eased,
+        width: "100%",
+        height: "100%"
+      };
+    case "slide-left":
+      return {
+        opacity: eased,
+        transform: `translateX(${(1 - eased) * 100}%)`,
+        width: "100%",
+        height: "100%"
+      };
+    case "slide-right":
+      return {
+        opacity: eased,
+        transform: `translateX(${(1 - eased) * -100}%)`,
+        width: "100%",
+        height: "100%"
+      };
+    case "wipe":
+      return {
+        clipPath: `inset(0 ${(1 - eased) * 100}% 0 0)`,
+        width: "100%",
+        height: "100%"
+      };
+    default:
+      return { width: "100%", height: "100%" };
+  }
+}
+export {
+  SceneTransitionWrapper
+};

package/dist/compositions/social-clip.d.ts

@@ -0,0 +1,16 @@
+import React from 'react';
+export interface SocialClipProps {
+    /** Hook line -- the attention grabber (first 3 seconds) */
+    hook: string;
+    /** Main message / value proposition */
+    message: string;
+    /** Supporting points (shown as a list) */
+    points?: string[];
+    /** Call to action */
+    cta?: string;
+    /** CTA URL (displayed, not clickable in video) */
+    ctaUrl?: string;
+    /** Accent color override */
+    accentColor?: string;
+}
+export declare const SocialClip: React.FC<SocialClipProps>;