@vanillaskyai/video 0.8.8 → 0.9.0

package/dist/compose-video-2NFH4DZY.js

@@ -1,13 +0,0 @@
-import {
-  createVideo
-} from "./chunk-3VRMKFM7.js";
-import "./chunk-E7CL7UPB.js";
-import "./chunk-2OKB27TG.js";
-import "./chunk-MMUXVA47.js";
-import "./chunk-2DOLF4QN.js";
-import "./chunk-AOWSXU2K.js";
-import "./chunk-3O7OMMMF.js";
-import "./chunk-XGRA2MUV.js";
-export {
-  createVideo
-};

package/dist/cta-logo-YR7LYUR5.js

@@ -1,212 +0,0 @@
-import {
-  fitTextSize
-} from "./chunk-S7HFLYNN.js";
-import {
-  SceneBackground,
-  getMediaBackgroundProps
-} from "./chunk-MXZSDGZQ.js";
-import "./chunk-FRN6WKHA.js";
-import "./chunk-W3VDIBGR.js";
-import {
-  SPRING_SMOOTH,
-  interpolate,
-  spring
-} from "./chunk-XTOXFMLM.js";
-import "./chunk-224QNWRA.js";
-import "./chunk-5CDAM24P.js";
-import {
-  TOKEN_DEFAULTS,
-  resolveTokens
-} from "./chunk-XWWLKRNU.js";
-
-// src/visual-system/primitives/typography/WordmarkReveal.tsx
-import { jsx, jsxs } from "react/jsx-runtime";
-var WordmarkReveal = ({
-  progress,
-  brandName,
-  url = "",
-  cta = "",
-  logoUrl = "",
-  width,
-  height,
-  font = TOKEN_DEFAULTS.font,
-  textColor = "#ffffff"
-}) => {
-  const s = Math.min(width, height) / 1080;
-  const actionText = cta.trim();
-  const addressText = url.trim();
-  const landP = spring(
-    interpolate(progress, [0, 0.85], [0, 1], {
-      extrapolateLeft: "clamp",
-      extrapolateRight: "clamp"
-    }),
-    SPRING_SMOOTH
-  );
-  const logoZoom = 0.94 + 0.14 * landP;
-  const itemOpacity = interpolate(progress, [0, 0.3], [0, 1], {
-    extrapolateLeft: "clamp",
-    extrapolateRight: "clamp"
-  });
-  const wordmarkTracking = `${interpolate(landP, [0, 1], [0.4, -0.02])}em`;
-  const actionTracking = `${interpolate(landP, [0, 1], [0.12, -0.01])}em`;
-  const urlTracking = `${interpolate(landP, [0, 1], [0.2, 0.01])}em`;
-  const logoWidth = width * 0.6;
-  const logoMaxHeight = height * 0.3;
-  const wordmarkSize = fitTextSize(brandName, 96 * s, width * 0.9);
-  const actionFontSize = fitTextSize(actionText, 48 * s, width * 0.9);
-  const urlFontSize = fitTextSize(addressText, actionText ? 34 * s : 48 * s, width * 0.9);
-  const bottomGap = 48 * s;
-  return /* @__PURE__ */ jsxs(
-    "div",
-    {
-      style: {
-        position: "absolute",
-        inset: 0,
-        display: "flex",
-        flexDirection: "column",
-        alignItems: "center",
-        justifyContent: "center",
-        gap: bottomGap,
-        padding: `0 ${48 * s}px`,
-        fontFamily: font
-      },
-      children: [
-        logoUrl ? /* @__PURE__ */ jsx(
-          "img",
-          {
-            src: logoUrl,
-            alt: brandName,
-            style: {
-              width: logoWidth,
-              maxHeight: logoMaxHeight,
-              objectFit: "contain",
-              transform: `scale(${logoZoom})`,
-              transformOrigin: "center center",
-              opacity: itemOpacity,
-              display: "block"
-            }
-          }
-        ) : /* @__PURE__ */ jsx(
-          "div",
-          {
-            style: {
-              fontSize: wordmarkSize,
-              fontWeight: 800,
-              color: textColor,
-              letterSpacing: wordmarkTracking,
-              lineHeight: 1.05,
-              textAlign: "center",
-              transform: `scale(${logoZoom})`,
-              transformOrigin: "center center",
-              opacity: itemOpacity,
-              textShadow: "0 1px 6px rgba(0,0,0,0.25)"
-            },
-            children: brandName
-          }
-        ),
-        (actionText || addressText) && /* @__PURE__ */ jsxs(
-          "div",
-          {
-            style: {
-              display: "flex",
-              flexDirection: "column",
-              alignItems: "center",
-              gap: 12 * s,
-              opacity: itemOpacity * 0.92,
-              transform: `scale(${0.96 + 0.04 * landP})`,
-              transformOrigin: "center center"
-            },
-            children: [
-              actionText && /* @__PURE__ */ jsx("div", { style: {
-                fontSize: actionFontSize,
-                fontWeight: 700,
-                color: textColor,
-                textAlign: "center",
-                letterSpacing: actionTracking,
-                textShadow: "0 1px 6px rgba(0,0,0,0.25)"
-              }, children: actionText }),
-              addressText && /* @__PURE__ */ jsx("div", { style: {
-                fontSize: urlFontSize,
-                fontWeight: 500,
-                color: textColor,
-                textAlign: "center",
-                letterSpacing: urlTracking,
-                opacity: actionText ? 0.78 : 1,
-                textShadow: "0 1px 6px rgba(0,0,0,0.25)"
-              }, children: addressText })
-            ]
-          }
-        )
-      ]
-    }
-  );
-};
-
-// src/visual-system/scene-templates/cta-logo.tsx
-import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
-var CtaLogoTemplate = ({
-  variables,
-  style,
-  progress,
-  motionProgress = progress,
-  width,
-  height,
-  sceneDuration,
-  isPlaying
-}) => {
-  const { foreground, font } = resolveTokens(style);
-  const textColor = foreground;
-  const brandName = style.brand.name ?? "";
-  const url = String(variables.url || "");
-  const cta = String(variables.cta || "");
-  const logoUrl = style.brand.logoUrl ?? "";
-  const mediaUrl = String(variables.mediaUrl || "");
-  const mediaType = String(variables.mediaType || "auto");
-  return /* @__PURE__ */ jsxs2(
-    "div",
-    {
-      style: {
-        width,
-        height,
-        backgroundColor: "var(--vanillasky-template-surface, #000)",
-        position: "relative",
-        overflow: "hidden",
-        fontFamily: font
-      },
-      children: [
-        /* @__PURE__ */ jsx2(
-          SceneBackground,
-          {
-            style,
-            progress,
-            sceneDuration,
-            width,
-            height,
-            ...getMediaBackgroundProps(variables),
-            mediaUrl,
-            mediaType,
-            seed: brandName,
-            isPlaying
-          }
-        ),
-        /* @__PURE__ */ jsx2(
-          WordmarkReveal,
-          {
-            progress: motionProgress,
-            brandName,
-            url,
-            cta,
-            logoUrl,
-            width,
-            height,
-            font,
-            textColor
-          }
-        )
-      ]
-    }
-  );
-};
-export {
-  CtaLogoTemplate
-};

package/dist/cta-media-DQJBKUO2.js

@@ -1,221 +0,0 @@
-import {
-  fitTextSize,
-  stripPipe
-} from "./chunk-S7HFLYNN.js";
-import {
-  SceneBackground,
-  getMediaBackgroundProps
-} from "./chunk-MXZSDGZQ.js";
-import {
-  TemplateText
-} from "./chunk-YJJC4N4D.js";
-import "./chunk-L5BTTCZV.js";
-import "./chunk-FRN6WKHA.js";
-import "./chunk-W3VDIBGR.js";
-import {
-  SPRING_SMOOTH,
-  interpolate,
-  spring
-} from "./chunk-XTOXFMLM.js";
-import {
-  hasSceneMedia
-} from "./chunk-224QNWRA.js";
-import "./chunk-5CDAM24P.js";
-import {
-  TOKEN_DEFAULTS,
-  resolveTokens
-} from "./chunk-XWWLKRNU.js";
-
-// src/visual-system/primitives/typography/CtaMediaClose.tsx
-import { jsx, jsxs } from "react/jsx-runtime";
-var CLAMP = { extrapolateLeft: "clamp", extrapolateRight: "clamp" };
-var CtaMediaClose = ({
-  progress,
-  motionProgress = progress,
-  width,
-  height,
-  brandName: rawBrandName,
-  logoUrl = "",
-  url: rawUrl = "",
-  cta: rawCta = "",
-  font = TOKEN_DEFAULTS.font,
-  textColor = "#ffffff",
-  safeZone = { left: 0, right: 0 }
-}) => {
-  const s = Math.min(width, height) / 1080;
-  const brandName = stripPipe(String(rawBrandName || ""));
-  const url = stripPipe(String(rawUrl || ""));
-  const cta = stripPipe(String(rawCta || ""));
-  const fadeP = interpolate(motionProgress, [0, 0.3], [0, 1], CLAMP);
-  const scaleSpring = spring(fadeP, SPRING_SMOOTH);
-  const itemOpacity = fadeP;
-  const itemScale = 0.94 + 0.06 * scaleSpring;
-  const landP = spring(
-    interpolate(motionProgress, [0, 0.85], [0, 1], CLAMP),
-    SPRING_SMOOTH
-  );
-  const logoZoom = 0.94 + 0.14 * landP;
-  const logoWidth = width * 0.6;
-  const logoMaxHeight = height * 0.22;
-  const logoTop = height * 0.13;
-  const wordmarkFontSize = Math.min(width * 0.1, height * 0.1);
-  const bottomMaxWidth = width - Math.max(safeZone.left, safeZone.right) * 2;
-  const ctaFontSize = fitTextSize(cta, 48 * s, bottomMaxWidth);
-  const urlFontSize = fitTextSize(url, cta ? 34 * s : 48 * s, bottomMaxWidth);
-  const bottomOffset = height * 0.18;
-  return /* @__PURE__ */ jsxs(
-    "div",
-    {
-      style: {
-        position: "absolute",
-        inset: 0,
-        pointerEvents: "none",
-        fontFamily: font
-      },
-      children: [
-        logoUrl ? /* @__PURE__ */ jsx(
-          "img",
-          {
-            src: logoUrl,
-            alt: brandName || "logo",
-            style: {
-              position: "absolute",
-              top: logoTop,
-              left: "50%",
-              width: logoWidth,
-              maxHeight: logoMaxHeight,
-              objectFit: "contain",
-              transform: `translateX(-50%) scale(${logoZoom})`,
-              transformOrigin: "center center",
-              opacity: itemOpacity
-            }
-          }
-        ) : brandName && /* @__PURE__ */ jsx(
-          "div",
-          {
-            style: {
-              position: "absolute",
-              top: logoTop,
-              left: 0,
-              right: 0,
-              textAlign: "center",
-              color: textColor,
-              fontSize: wordmarkFontSize,
-              fontWeight: 700,
-              letterSpacing: -0.5,
-              transform: `scale(${logoZoom})`,
-              transformOrigin: "center center",
-              opacity: itemOpacity,
-              textShadow: "0 2px 12px rgba(0,0,0,0.32)"
-            },
-            children: brandName
-          }
-        ),
-        (cta || url) && /* @__PURE__ */ jsxs(
-          "div",
-          {
-            style: {
-              position: "absolute",
-              left: 0,
-              right: 0,
-              bottom: bottomOffset,
-              display: "flex",
-              flexDirection: "column",
-              alignItems: "center",
-              gap: 12 * s,
-              textAlign: "center",
-              color: textColor,
-              opacity: itemOpacity * 0.92,
-              transform: `scale(${itemScale})`,
-              transformOrigin: "center center",
-              textShadow: "0 1px 4px rgba(0,0,0,0.35)"
-            },
-            children: [
-              cta && /* @__PURE__ */ jsx("div", { style: { fontSize: ctaFontSize, fontWeight: 700, letterSpacing: -0.3 }, children: cta }),
-              url && /* @__PURE__ */ jsx("div", { style: { fontSize: urlFontSize, fontWeight: 500, letterSpacing: 0.5, opacity: cta ? 0.78 : 1 }, children: url })
-            ]
-          }
-        )
-      ]
-    }
-  );
-};
-
-// src/visual-system/scene-templates/cta-media.tsx
-import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
-var CtaMediaTemplate = ({
-  variables,
-  style,
-  progress,
-  motionProgress = progress,
-  width,
-  height,
-  sceneDuration,
-  beatIntensity,
-  textArchetype,
-  safeZone,
-  isPlaying = true,
-  backgroundEffect
-}) => {
-  const { primary, foreground, font } = resolveTokens(style);
-  const textColor = foreground;
-  const headline = String(variables.headline || "");
-  return /* @__PURE__ */ jsxs2("div", { style: { width, height, backgroundColor: "var(--vanillasky-template-surface, #000)", position: "relative", overflow: "hidden", fontFamily: font }, children: [
-    /* @__PURE__ */ jsx2(
-      SceneBackground,
-      {
-        style,
-        progress,
-        sceneDuration,
-        width,
-        height,
-        ...getMediaBackgroundProps(variables),
-        backgroundEffect,
-        seed: headline,
-        isPlaying,
-        beatIntensity
-      }
-    ),
-    /* @__PURE__ */ jsx2(
-      TemplateText,
-      {
-        overMedia: hasSceneMedia(variables),
-        motionProgress,
-        typeTreatment: resolveTokens(style).preset.type,
-        archetype: textArchetype || "subtle",
-        text: headline,
-        progress,
-        sceneDuration: sceneDuration ?? 4,
-        width,
-        height,
-        position: "center",
-        sizeRole: "headline",
-        safeZone,
-        font,
-        color: textColor,
-        beatIntensity
-      }
-    ),
-    /* @__PURE__ */ jsx2(
-      CtaMediaClose,
-      {
-        progress,
-        motionProgress,
-        width,
-        height,
-        brandName: style.brand.name ?? "",
-        logoUrl: style.brand.logoUrl ?? "",
-        url: String(variables.url || ""),
-        cta: String(variables.cta || ""),
-        font,
-        textColor,
-        accent: primary,
-        beatIntensity,
-        safeZone: { left: safeZone.left, right: safeZone.right }
-      }
-    )
-  ] });
-};
-export {
-  CtaMediaTemplate
-};