@contractspec/lib.video-gen 0.0.0-canary-20260224194731

package/README.md

@@ -0,0 +1,37 @@
+# @contractspec/lib.video-gen
+
+Website: https://contractspec.io/
+
+Programmatic video generation using Remotion. Follows the same generator pattern as `@contractspec/lib.content-gen` and consumes contracts from video provider integrations. All generators work deterministically by default -- LLM integration is optional and enhances output when available.
+
+## Modules
+
+- **Types** -- `VideoBrief`, `VideoGeneratorOptions`, `GeneratedVideo`, `ScenePlan`, `PlannedScene`, plus re-exported contract types (`VideoProject`, `RenderConfig`, `VideoFormat`)
+- **Design** -- Video-specific design tokens extending the design system: color tokens, motion/easing curves, typography scale (1920x1080), and layout safe zones with format variants (landscape/square/portrait)
+- **Compositions** -- Remotion compositions for rendering video scenes:
+  - **Primitives**: `AnimatedText`, `BrandFrame`, `CodeBlock`, `ProgressBar`, `Terminal`, `SceneTransitionWrapper`
+  - **Full**: `ApiOverview` (spec to API surface visualization), `SocialClip` (marketing content, adaptive formats), `TerminalDemo` (CLI walkthrough)
+- **Generators** -- `VideoGenerator` (main orchestrator), `ScenePlanner` (breaks briefs into scenes), `ScriptGenerator` (narration with professional/casual/technical styles)
+- **Renderers** -- `LocalRenderer` wrapping `@remotion/renderer` with quality presets (draft/standard/high)
+- **Player** -- `DemoPlayer` component for embedding in React apps via `@remotion/player`
+
+Deterministic by default: every generator produces consistent output without an LLM. When an LLM is provided via the constructor, generators produce richer, more varied content. On LLM failure, the system falls back to deterministic output automatically.
+
+## Quickstart
+
+```typescript
+import { VideoGenerator } from "@contractspec/lib.video-gen/generators";
+import type { VideoBrief } from "@contractspec/lib.video-gen/types";
+
+const generator = new VideoGenerator(); // no LLM needed
+
+const brief: VideoBrief = {
+  title: "Ship APIs 10x Faster",
+  summary: "See how ContractSpec generates production-ready APIs from specs.",
+  format: "landscape",
+};
+
+const project = await generator.generate(brief);
+```
+
+Compositions are pure React components -- same props always produce the same visual output, with frame-based timing and no side effects.

package/dist/browser/compositions/api-overview.js

@@ -0,0 +1,645 @@
+var __require = /* @__PURE__ */ ((x) => typeof require !== "undefined" ? require : typeof Proxy !== "undefined" ? new Proxy(x, {
+  get: (a, b) => (typeof require !== "undefined" ? require : a)[b]
+}) : x)(function(x) {
+  if (typeof require !== "undefined")
+    return require.apply(this, arguments);
+  throw Error('Dynamic require of "' + x + '" is not supported');
+});
+
+// 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);
+};
+
+// 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";
+var CodeBlock = ({
+  code,
+  language = "typescript",
+  startAt = 0,
+  typeAnimation = true,
+  backgroundColor = defaultVideoColors.codeBackground,
+  textColor = "#abb2bf",
+  filename
+}) => {
+  const frame = useCurrentFrame3();
+  const { width } = useVideoConfig3();
+  const codeStyle = scaleTypography(videoTypography.code, width);
+  const totalChars = code.length;
+  const typingDuration = totalChars * videoDurations.codeTypingPerChar;
+  const charsVisible = typeAnimation ? Math.floor(interpolate3(frame, [startAt, startAt + typingDuration], [0, totalChars], {
+    extrapolateLeft: "clamp",
+    extrapolateRight: "clamp"
+  })) : totalChars;
+  const visibleCode = code.slice(0, charsVisible);
+  const opacity = interpolate3(frame, [startAt, startAt + 10], [0, 1], {
+    extrapolateLeft: "clamp",
+    extrapolateRight: "clamp",
+    easing: videoEasing.entrance
+  });
+  const showCursor = typeAnimation && charsVisible < totalChars && frame % 16 < 10;
+  return /* @__PURE__ */ jsxDEV3("div", {
+    style: {
+      backgroundColor,
+      borderRadius: 16,
+      padding: 0,
+      opacity,
+      overflow: "hidden",
+      boxShadow: "0 8px 32px rgba(0,0,0,0.3)"
+    },
+    children: [
+      /* @__PURE__ */ jsxDEV3("div", {
+        style: {
+          display: "flex",
+          alignItems: "center",
+          padding: "12px 20px",
+          backgroundColor: "rgba(0,0,0,0.2)",
+          gap: 8
+        },
+        children: [
+          /* @__PURE__ */ jsxDEV3("div", {
+            style: { display: "flex", gap: 8 },
+            children: [
+              /* @__PURE__ */ jsxDEV3("div", {
+                style: {
+                  width: 12,
+                  height: 12,
+                  borderRadius: "50%",
+                  backgroundColor: "#ff5f57"
+                }
+              }, undefined, false, undefined, this),
+              /* @__PURE__ */ jsxDEV3("div", {
+                style: {
+                  width: 12,
+                  height: 12,
+                  borderRadius: "50%",
+                  backgroundColor: "#febc2e"
+                }
+              }, undefined, false, undefined, this),
+              /* @__PURE__ */ jsxDEV3("div", {
+                style: {
+                  width: 12,
+                  height: 12,
+                  borderRadius: "50%",
+                  backgroundColor: "#28c840"
+                }
+              }, undefined, false, undefined, this)
+            ]
+          }, undefined, true, undefined, this),
+          /* @__PURE__ */ jsxDEV3("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__ */ jsxDEV3("div", {
+        style: { padding: "24px 32px" },
+        children: /* @__PURE__ */ jsxDEV3("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__ */ jsxDEV3("span", {
+              style: {
+                backgroundColor: textColor,
+                width: "2px",
+                display: "inline-block",
+                height: "1.2em",
+                verticalAlign: "text-bottom"
+              },
+              children: " "
+            }, undefined, false, undefined, this)
+          ]
+        }, undefined, true, undefined, this)
+      }, undefined, false, undefined, this)
+    ]
+  }, undefined, true, undefined, this);
+};
+
+// src/compositions/primitives/progress-bar.tsx
+import { useCurrentFrame as useCurrentFrame4, useVideoConfig as useVideoConfig4 } from "remotion";
+import { jsxDEV as jsxDEV4 } from "react/jsx-dev-runtime";
+var ProgressBar = ({
+  height = 4,
+  color = defaultVideoTheme.colors.primary,
+  backgroundColor = "rgba(255,255,255,0.1)",
+  position = "bottom"
+}) => {
+  const frame = useCurrentFrame4();
+  const { durationInFrames, width } = useVideoConfig4();
+  const progress = frame / durationInFrames;
+  return /* @__PURE__ */ jsxDEV4("div", {
+    style: {
+      position: "absolute",
+      [position]: 0,
+      left: 0,
+      width,
+      height,
+      backgroundColor,
+      zIndex: 100
+    },
+    children: /* @__PURE__ */ jsxDEV4("div", {
+      style: {
+        width: `${progress * 100}%`,
+        height: "100%",
+        backgroundColor: color,
+        transition: "none"
+      }
+    }, undefined, false, undefined, this)
+  }, undefined, false, undefined, this);
+};
+
+// src/compositions/api-overview.tsx
+import {
+  AbsoluteFill,
+  Sequence,
+  interpolate as interpolate4,
+  useCurrentFrame as useCurrentFrame5,
+  useVideoConfig as useVideoConfig5
+} from "remotion";
+import { jsxDEV as jsxDEV5 } from "react/jsx-dev-runtime";
+var ApiOverview = ({
+  specName,
+  method = "POST",
+  endpoint = "/api/users",
+  specCode,
+  generatedOutputs = [
+    "REST Endpoint",
+    "GraphQL Mutation",
+    "Prisma Model",
+    "TypeScript SDK",
+    "MCP Tool",
+    "OpenAPI Spec"
+  ],
+  tagline = "One spec. Every surface."
+}) => {
+  const { durationInFrames } = useVideoConfig5();
+  const theme = defaultVideoTheme;
+  const INTRO_END = 60;
+  const CODE_START = 45;
+  const CODE_END = INTRO_END + 150;
+  const OUTPUTS_START = CODE_END - 30;
+  const TAGLINE_START = durationInFrames - 90;
+  return /* @__PURE__ */ jsxDEV5(AbsoluteFill, {
+    children: [
+      /* @__PURE__ */ jsxDEV5(BrandFrame, {
+        variant: "gradient",
+        showBranding: true,
+        children: [
+          /* @__PURE__ */ jsxDEV5(Sequence, {
+            from: 0,
+            durationInFrames: CODE_END,
+            children: /* @__PURE__ */ jsxDEV5("div", {
+              style: {
+                flex: 1,
+                display: "flex",
+                flexDirection: "column",
+                gap: 16
+              },
+              children: [
+                /* @__PURE__ */ jsxDEV5("div", {
+                  style: { display: "flex", alignItems: "center", gap: 16 },
+                  children: [
+                    /* @__PURE__ */ jsxDEV5(MethodBadge, {
+                      method,
+                      enterAt: 10
+                    }, undefined, false, undefined, this),
+                    /* @__PURE__ */ jsxDEV5(AnimatedText, {
+                      text: endpoint,
+                      variant: "subheading",
+                      enterAt: 15,
+                      color: theme.colors.mutedForeground
+                    }, undefined, false, undefined, this)
+                  ]
+                }, undefined, true, undefined, this),
+                /* @__PURE__ */ jsxDEV5(AnimatedText, {
+                  text: specName,
+                  variant: "title",
+                  enterAt: 5,
+                  color: "#ffffff"
+                }, undefined, false, undefined, this),
+                /* @__PURE__ */ jsxDEV5("div", {
+                  style: { flex: 1, marginTop: 24 },
+                  children: /* @__PURE__ */ jsxDEV5(CodeBlock, {
+                    code: specCode,
+                    language: "typescript",
+                    filename: `${specName.toLowerCase()}.contract.ts`,
+                    startAt: CODE_START,
+                    typeAnimation: true
+                  }, undefined, false, undefined, this)
+                }, undefined, false, undefined, this)
+              ]
+            }, undefined, true, undefined, this)
+          }, undefined, false, undefined, this),
+          /* @__PURE__ */ jsxDEV5(Sequence, {
+            from: OUTPUTS_START,
+            durationInFrames: durationInFrames - OUTPUTS_START,
+            children: /* @__PURE__ */ jsxDEV5("div", {
+              style: {
+                flex: 1,
+                display: "flex",
+                flexDirection: "column",
+                justifyContent: "center",
+                alignItems: "center",
+                gap: 24
+              },
+              children: [
+                /* @__PURE__ */ jsxDEV5(AnimatedText, {
+                  text: "Generates:",
+                  variant: "heading",
+                  enterAt: 0,
+                  color: "#ffffff",
+                  align: "center"
+                }, undefined, false, undefined, this),
+                /* @__PURE__ */ jsxDEV5("div", {
+                  style: {
+                    display: "flex",
+                    flexWrap: "wrap",
+                    gap: 16,
+                    justifyContent: "center",
+                    maxWidth: "80%",
+                    marginTop: 32
+                  },
+                  children: generatedOutputs.map((output, i) => /* @__PURE__ */ jsxDEV5(OutputChip, {
+                    label: output,
+                    index: i,
+                    startFrame: 20 + i * 8
+                  }, output, false, undefined, this))
+                }, undefined, false, undefined, this),
+                /* @__PURE__ */ jsxDEV5(Sequence, {
+                  from: TAGLINE_START - OUTPUTS_START,
+                  children: /* @__PURE__ */ jsxDEV5("div", {
+                    style: { marginTop: 48 },
+                    children: /* @__PURE__ */ jsxDEV5(AnimatedText, {
+                      text: tagline,
+                      variant: "heading",
+                      enterAt: 0,
+                      color: theme.colors.accent,
+                      align: "center"
+                    }, undefined, false, undefined, this)
+                  }, undefined, false, undefined, this)
+                }, undefined, false, undefined, this)
+              ]
+            }, undefined, true, undefined, this)
+          }, undefined, false, undefined, this)
+        ]
+      }, undefined, true, undefined, this),
+      /* @__PURE__ */ jsxDEV5(ProgressBar, {}, undefined, false, undefined, this)
+    ]
+  }, undefined, true, undefined, this);
+};
+var MethodBadge = ({
+  method,
+  enterAt
+}) => {
+  const frame = useCurrentFrame5();
+  const opacity = interpolate4(frame, [enterAt, enterAt + 10], [0, 1], {
+    extrapolateLeft: "clamp",
+    extrapolateRight: "clamp",
+    easing: videoEasing.entrance
+  });
+  const scale = interpolate4(frame, [enterAt, enterAt + 12], [0.8, 1], {
+    extrapolateLeft: "clamp",
+    extrapolateRight: "clamp",
+    easing: videoEasing.emphasis
+  });
+  const methodColors = {
+    GET: "#61afef",
+    POST: "#98c379",
+    PUT: "#e5c07b",
+    PATCH: "#d19a66",
+    DELETE: "#e06c75"
+  };
+  return /* @__PURE__ */ jsxDEV5("div", {
+    style: {
+      opacity,
+      transform: `scale(${scale})`,
+      backgroundColor: methodColors[method] ?? "#61afef",
+      color: "#000",
+      padding: "8px 20px",
+      borderRadius: 8,
+      fontSize: 24,
+      fontWeight: 700,
+      fontFamily: "monospace",
+      letterSpacing: 1
+    },
+    children: method
+  }, undefined, false, undefined, this);
+};
+var OutputChip = ({ label, startFrame }) => {
+  const frame = useCurrentFrame5();
+  const opacity = interpolate4(frame, [startFrame, startFrame + 12], [0, 1], {
+    extrapolateLeft: "clamp",
+    extrapolateRight: "clamp"
+  });
+  const translateY = interpolate4(frame, [startFrame, startFrame + 15], [20, 0], {
+    extrapolateLeft: "clamp",
+    extrapolateRight: "clamp",
+    easing: videoEasing.emphasis
+  });
+  const scale = interpolate4(frame, [startFrame, startFrame + 15], [0.9, 1], {
+    extrapolateLeft: "clamp",
+    extrapolateRight: "clamp",
+    easing: videoEasing.emphasis
+  });
+  return /* @__PURE__ */ jsxDEV5("div", {
+    style: {
+      opacity,
+      transform: `translateY(${translateY}px) scale(${scale})`,
+      backgroundColor: "rgba(255,255,255,0.08)",
+      border: "1px solid rgba(255,255,255,0.15)",
+      color: "#ffffff",
+      padding: "16px 32px",
+      borderRadius: 12,
+      fontSize: 28,
+      fontWeight: 500
+    },
+    children: label
+  }, undefined, false, undefined, this);
+};
+export {
+  ApiOverview
+};