@vanillaskyai/video 0.8.7 → 0.9.0

package/dist/infographic-feature-list-E7MGUDAN.js

@@ -1,272 +0,0 @@
-import {
-  parseList
-} from "./chunk-P22HHFDK.js";
-import {
-  stripPipe
-} from "./chunk-S7HFLYNN.js";
-import {
-  SceneBackground,
-  getMediaBackgroundProps
-} from "./chunk-MXZSDGZQ.js";
-import {
-  TemplateText
-} from "./chunk-YJJC4N4D.js";
-import {
-  Emoji
-} from "./chunk-L5BTTCZV.js";
-import "./chunk-FRN6WKHA.js";
-import "./chunk-W3VDIBGR.js";
-import {
-  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/infographic/FeatureList.tsx
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-var SPRING_ROW = { damping: 14, stiffness: 170 };
-var SPRING_EMOJI = { damping: 8, stiffness: 200 };
-var FeatureList = ({
-  progress,
-  width,
-  height,
-  features,
-  textColor = "#ffffff",
-  font = TOKEN_DEFAULTS.font,
-  beatIntensity = 0
-}) => {
-  void beatIntensity;
-  const s = Math.min(width, height) / 1080;
-  const itemLabels = features.slice(0, 3).map((f) => stripPipe(String(f.title || f.description || "")));
-  const itemEmojis = features.slice(0, 3).map((f) => String(f.icon || ""));
-  const itemCount = itemLabels.length;
-  if (itemCount === 0) return null;
-  const isLandscape = width > height;
-  const contentAreaTop = height * (isLandscape ? 0.28 : 0.25);
-  const contentAreaHeight = height * (isLandscape ? 0.65 : 0.7);
-  const sidePadding = 40 * s;
-  const gap = 20 * s;
-  const borderRadius = 20 * s;
-  let cardWidth;
-  let cardHeight;
-  let emojiFontSize;
-  let labelFontSize;
-  let listLeft;
-  if (isLandscape) {
-    const totalWidth = width * 0.9;
-    cardWidth = (totalWidth - gap * (itemCount - 1)) / itemCount;
-    cardHeight = Math.min(cardWidth, contentAreaHeight * 0.85);
-    emojiFontSize = Math.min(cardHeight * 0.35, 110 * s);
-    labelFontSize = Math.min(cardHeight * 0.16, 48 * s);
-    listLeft = (width - (cardWidth * itemCount + gap * (itemCount - 1))) / 2;
-  } else {
-    cardWidth = width - sidePadding * 2;
-    const maxRowHeight = 260 * s;
-    cardHeight = Math.min((contentAreaHeight - gap * (itemCount - 1)) / itemCount, maxRowHeight);
-    emojiFontSize = Math.min(cardHeight * 0.35, 64 * s);
-    labelFontSize = Math.min(cardHeight * 0.25, 44 * s);
-    listLeft = sidePadding;
-  }
-  const totalHeight = isLandscape ? cardHeight : cardHeight * itemCount + gap * (itemCount - 1);
-  const verticalAnchor = isLandscape ? 0.5 : 0.25;
-  const listTop = contentAreaTop + (contentAreaHeight - totalHeight) * verticalAnchor;
-  const cardBg = "rgba(255,255,255,0.15)";
-  const cardBorder = "rgba(255,255,255,0.2)";
-  const firstRow = 0.08;
-  return /* @__PURE__ */ jsx(Fragment, { children: itemLabels.map((label, i) => {
-    const x = isLandscape ? listLeft + i * (cardWidth + gap) : listLeft;
-    const y = isLandscape ? listTop : listTop + i * (cardHeight + gap);
-    const itemStart = firstRow;
-    const rowP = spring(
-      interpolate(progress, [itemStart, itemStart + 0.12], [0, 1], {
-        extrapolateLeft: "clamp",
-        extrapolateRight: "clamp"
-      }),
-      SPRING_ROW
-    );
-    const cardScale = isLandscape ? interpolate(rowP, [0, 1], [0.6, 1]) : 1;
-    const rowX = isLandscape ? 0 : (1 - rowP) * -120 * s;
-    const rowOpacity = interpolate(progress, [itemStart, itemStart + 0.05], [0, 1], {
-      extrapolateLeft: "clamp",
-      extrapolateRight: "clamp"
-    });
-    const emojiDelay = itemStart + 0.04;
-    const emojiP = spring(
-      interpolate(progress, [emojiDelay, emojiDelay + 0.08], [0, 1], {
-        extrapolateLeft: "clamp",
-        extrapolateRight: "clamp"
-      }),
-      SPRING_EMOJI
-    );
-    const emojiScale = interpolate(emojiP, [0, 1], [0, 1]);
-    const textDelay = itemStart + 0.06;
-    const textOpacity = interpolate(progress, [textDelay, textDelay + 0.05], [0, 1], {
-      extrapolateLeft: "clamp",
-      extrapolateRight: "clamp"
-    });
-    const EXIT_START = 0.78;
-    const EXIT_DURATION = 0.1;
-    const EXIT_STAGGER = 0.04;
-    const exitStart = EXIT_START + i * EXIT_STAGGER;
-    const exitEnd = exitStart + EXIT_DURATION;
-    const exitRaw = interpolate(progress, [exitStart, exitEnd], [0, 1], {
-      extrapolateLeft: "clamp",
-      extrapolateRight: "clamp"
-    });
-    const exitEased = exitRaw * exitRaw;
-    const exitTranslateX = -90 * s * exitEased;
-    const exitFade = 1 - exitEased;
-    const emoji = itemEmojis[i] || "\u2726";
-    const transform = isLandscape ? `translate(${exitTranslateX}px, 0) scale(${cardScale})` : `translateX(${rowX + exitTranslateX}px)`;
-    return /* @__PURE__ */ jsxs(
-      "div",
-      {
-        "data-template-item": "cardList",
-        style: {
-          position: "absolute",
-          left: x,
-          top: y,
-          width: cardWidth,
-          height: cardHeight,
-          borderRadius,
-          backgroundColor: cardBg,
-          border: `1.5px solid ${cardBorder}`,
-          display: "flex",
-          flexDirection: isLandscape ? "column" : "row",
-          alignItems: "center",
-          justifyContent: isLandscape ? "center" : void 0,
-          gap: isLandscape ? 32 * s : 0,
-          opacity: rowOpacity * exitFade,
-          transform,
-          transformOrigin: "center center"
-        },
-        children: [
-          /* @__PURE__ */ jsx(
-            "div",
-            {
-              style: {
-                width: isLandscape ? void 0 : Math.min(cardHeight * 0.7, 130 * s),
-                height: isLandscape ? void 0 : cardHeight,
-                display: "flex",
-                alignItems: "center",
-                justifyContent: "center",
-                flexShrink: 0
-              },
-              children: /* @__PURE__ */ jsx(
-                Emoji,
-                {
-                  char: emoji,
-                  size: emojiFontSize,
-                  verticalAlign: "middle",
-                  style: { transform: `scale(${emojiScale})`, display: "block" }
-                }
-              )
-            }
-          ),
-          /* @__PURE__ */ jsx(
-            "div",
-            {
-              style: {
-                flex: isLandscape ? void 0 : 1,
-                fontSize: labelFontSize,
-                fontWeight: 600,
-                color: textColor,
-                fontFamily: font,
-                lineHeight: 1.25,
-                letterSpacing: -0.3,
-                opacity: textOpacity,
-                textAlign: isLandscape ? "center" : void 0,
-                padding: isLandscape ? `0 ${16 * s}px` : `0 ${20 * s}px 0 0`,
-                textShadow: "0 1px 6px rgba(0,0,0,0.1)"
-              },
-              children: label
-            }
-          )
-        ]
-      },
-      i
-    );
-  }) });
-};
-
-// src/visual-system/scene-templates/infographic-feature-list.tsx
-import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
-var InfographicFeatureListTemplate = ({
-  variables,
-  style,
-  progress,
-  motionProgress = progress,
-  beatIntensity,
-  width,
-  height,
-  safeZone,
-  sceneDuration,
-  backgroundEffect,
-  isPlaying = true
-}) => {
-  const { foreground, font } = resolveTokens(style);
-  const textColor = foreground;
-  const text = String(variables.texts || "");
-  const labels = parseList(variables.items, 3);
-  const emojis = parseList(variables.itemEmojis);
-  const features = labels.map((title, index) => ({ title, icon: emojis[index] || "\u2726" }));
-  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: text,
-        isPlaying,
-        beatIntensity
-      }
-    ),
-    /* @__PURE__ */ jsx2(
-      TemplateText,
-      {
-        overMedia: hasSceneMedia(variables),
-        motionProgress,
-        typeTreatment: resolveTokens(style).preset.type,
-        archetype: "subtle",
-        text,
-        progress,
-        sceneDuration: sceneDuration ?? 3,
-        width,
-        height,
-        position: "top",
-        sizeRole: "headline",
-        safeZone,
-        font,
-        color: textColor,
-        beatIntensity
-      }
-    ),
-    /* @__PURE__ */ jsx2(
-      FeatureList,
-      {
-        progress: motionProgress,
-        width,
-        height,
-        features,
-        textColor,
-        font,
-        beatIntensity
-      }
-    )
-  ] });
-};
-export {
-  InfographicFeatureListTemplate
-};

package/dist/infographic-problem-solution-3S6NGO5N.js

@@ -1,343 +0,0 @@
-import {
-  stripPipe
-} from "./chunk-S7HFLYNN.js";
-import {
-  SceneBackground,
-  getMediaBackgroundProps
-} from "./chunk-MXZSDGZQ.js";
-import {
-  smoothSize
-} from "./chunk-YJJC4N4D.js";
-import "./chunk-L5BTTCZV.js";
-import "./chunk-FRN6WKHA.js";
-import "./chunk-W3VDIBGR.js";
-import {
-  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/infographic/ProblemSolution.tsx
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-var SPRING_TEXT = { damping: 10, stiffness: 150 };
-var ProblemSolution = ({
-  progress,
-  width,
-  height,
-  problemText: rawProblemText,
-  solutionText: rawSolutionText,
-  problemLabel = "THE PROBLEM",
-  solutionLabel = "THE SOLUTION",
-  textColor = "#ffffff",
-  font = TOKEN_DEFAULTS.font,
-  beatIntensity = 0
-}) => {
-  void beatIntensity;
-  const s = Math.min(width, height) / 1080;
-  const problemText = stripPipe(String(rawProblemText || ""));
-  const solutionText = stripPipe(String(rawSolutionText || ""));
-  const problemColor = "#ef4444";
-  const solutionColor = "#22c55e";
-  const isLandscape = width > height;
-  const pillTop = height * (isLandscape ? 0.3 : 0.38);
-  const textTop = height * (isLandscape ? 0.45 : 0.46);
-  const labelFontSize = 32 * s;
-  const longerChars = Math.max(problemText.length, solutionText.length, 1);
-  const mainSize = smoothSize(longerChars, 70, 88, 60) * s;
-  const CLAMP = { extrapolateLeft: "clamp", extrapolateRight: "clamp" };
-  const problemLabelOpacity = interpolate(progress, [0.03, 0.1], [0, 1], CLAMP);
-  const problemPillP = spring(interpolate(progress, [0.03, 0.15], [0, 1], CLAMP), { damping: 9, stiffness: 220 });
-  const problemPillScale = interpolate(problemPillP, [0, 1], [0.55, 1]);
-  const problemTextP = spring(interpolate(progress, [0.1, 0.25], [0, 1], CLAMP), SPRING_TEXT);
-  const problemTextScale = interpolate(problemTextP, [0, 1], [1.4, 1]);
-  const problemTextOpacity = interpolate(progress, [0.1, 0.2], [0, 1], CLAMP);
-  const tremorActive = progress > 0.2 && progress < 0.4;
-  const tremorX = tremorActive ? Math.sin(progress * 90) * 3 * s : 0;
-  const problemFadeOut = interpolate(progress, [0.4, 0.48], [1, 0], CLAMP);
-  const problemFallY = interpolate(progress, [0.4, 0.5], [0, height * 0.35], CLAMP);
-  const solutionOverall = interpolate(progress, [0.5, 0.55], [0, 1], CLAMP);
-  const SOLUTION_LAND = [0.55, 0.7];
-  const solutionLandP = spring(
-    interpolate(progress, [SOLUTION_LAND[0], SOLUTION_LAND[1]], [0, 1], CLAMP),
-    { damping: 9, stiffness: 220 }
-  );
-  const solutionLandScale = interpolate(solutionLandP, [0, 1], [0.7, 1]);
-  const solutionLandRiseY = interpolate(solutionLandP, [0, 1], [40 * s, 0]);
-  const solutionLandOpacity = interpolate(
-    progress,
-    [SOLUTION_LAND[0], SOLUTION_LAND[0] + 0.05],
-    [0, 1],
-    CLAMP
-  );
-  const solutionLabelOpacity = solutionLandOpacity;
-  const solutionPillScale = solutionLandScale;
-  const solutionTextOpacity = solutionLandOpacity;
-  const solutionTextScale = solutionLandScale;
-  const solutionTextRiseY = solutionLandRiseY;
-  const CONFETTI_COUNT = 14;
-  const CONFETTI_ANGLE_JITTER = [-12, 8, -5, 14, -7, 11, -16, 6, -9, 13, -4, 10, -11, 7];
-  const CONFETTI_DISTANCE = [60, 230, 100, 180, 130, 260, 80, 210, 50, 240, 150, 90, 220, 170];
-  const CONFETTI_ROTATION = [-180, 220, -140, 260, -200, 180, -240, 200, -160, 240, -200, 280, -180, 220];
-  const CONFETTI_COLORS = [
-    "#22c55e",
-    "#4ade80",
-    "#86efac",
-    "#bbf7d0",
-    "#dcfce7",
-    "#f0fdf4"
-  ];
-  const CONFETTI_TINT_INDEX = [0, 1, 2, 0, 3, 1, 4, 0, 2, 1, 5, 0, 3, 2];
-  const confettiRaw = interpolate(progress, [0.55, 0.7], [0, 1], CLAMP);
-  const confettiActive = confettiRaw > 0 && confettiRaw < 1;
-  const confettiDist = 1 - Math.pow(1 - confettiRaw, 2.5);
-  return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsxs(
-      "div",
-      {
-        style: {
-          position: "absolute",
-          inset: 0,
-          opacity: problemFadeOut,
-          transform: `translateY(${problemFallY}px)`
-        },
-        children: [
-          /* @__PURE__ */ jsx(
-            "div",
-            {
-              style: {
-                position: "absolute",
-                top: pillTop,
-                left: 0,
-                right: 0,
-                display: "flex",
-                justifyContent: "center"
-              },
-              children: /* @__PURE__ */ jsx(
-                "div",
-                {
-                  style: {
-                    fontSize: labelFontSize,
-                    fontWeight: 700,
-                    color: problemColor,
-                    letterSpacing: 3 * s,
-                    textTransform: "uppercase",
-                    whiteSpace: "nowrap",
-                    opacity: problemLabelOpacity,
-                    transform: `scale(${problemPillScale})`,
-                    transformOrigin: "center center",
-                    fontFamily: font,
-                    backgroundColor: "rgba(0,0,0,0.3)",
-                    border: "1px solid rgba(255,255,255,0.15)",
-                    borderRadius: 100 * s,
-                    padding: `${14 * s}px ${36 * s}px`,
-                    textShadow: "0 1px 6px rgba(0,0,0,0.1)"
-                  },
-                  children: problemLabel
-                }
-              )
-            }
-          ),
-          /* @__PURE__ */ jsx(
-            "div",
-            {
-              style: {
-                position: "absolute",
-                top: textTop,
-                left: 0,
-                right: 0,
-                fontSize: mainSize,
-                fontWeight: 800,
-                color: textColor,
-                textAlign: "center",
-                padding: `0 ${60 * s}px`,
-                lineHeight: 1.2,
-                letterSpacing: -1,
-                opacity: problemTextOpacity,
-                transform: `translateX(${tremorX}px) scale(${problemTextScale})`,
-                fontFamily: font,
-                textShadow: "0 2px 12px rgba(0,0,0,0.15)"
-              },
-              children: problemText
-            }
-          )
-        ]
-      }
-    ),
-    /* @__PURE__ */ jsxs(
-      "div",
-      {
-        style: {
-          position: "absolute",
-          inset: 0,
-          opacity: solutionOverall
-        },
-        children: [
-          confettiActive && Array.from({ length: CONFETTI_COUNT }, (_, i) => {
-            const baseAngle = 200 + i / (CONFETTI_COUNT - 1) * 140 + CONFETTI_ANGLE_JITTER[i];
-            const angleRad = baseAngle * Math.PI / 180;
-            const distance = confettiDist * CONFETTI_DISTANCE[i] * s;
-            const gravity = confettiRaw * confettiRaw * 35 * s;
-            const dx = Math.cos(angleRad) * distance;
-            const dy = Math.sin(angleRad) * distance + gravity;
-            const rot = confettiRaw * CONFETTI_ROTATION[i];
-            const op = interpolate(confettiRaw, [0, 0.08, 0.7, 1], [0, 1, 1, 0]);
-            const particleSize = 9 * s;
-            const originX = width / 2;
-            const originY = pillTop - 6 * s;
-            const tint = CONFETTI_COLORS[CONFETTI_TINT_INDEX[i]];
-            return /* @__PURE__ */ jsx(
-              "div",
-              {
-                style: {
-                  position: "absolute",
-                  left: originX - particleSize / 2,
-                  top: originY - particleSize / 2 * 1.6,
-                  width: particleSize,
-                  height: particleSize * 1.6,
-                  backgroundColor: tint,
-                  borderRadius: 1 * s,
-                  transform: `translate(${dx}px, ${dy}px) rotate(${rot}deg)`,
-                  opacity: op,
-                  pointerEvents: "none",
-                  boxShadow: `0 0 ${4 * s}px ${tint}66`
-                }
-              },
-              `confetti-${i}`
-            );
-          }),
-          /* @__PURE__ */ jsx(
-            "div",
-            {
-              style: {
-                position: "absolute",
-                top: pillTop,
-                left: 0,
-                right: 0,
-                display: "flex",
-                justifyContent: "center"
-              },
-              children: /* @__PURE__ */ jsx(
-                "div",
-                {
-                  style: {
-                    fontSize: labelFontSize,
-                    fontWeight: 700,
-                    color: solutionColor,
-                    letterSpacing: 3 * s,
-                    textTransform: "uppercase",
-                    whiteSpace: "nowrap",
-                    opacity: solutionLabelOpacity,
-                    transform: `scale(${solutionPillScale})`,
-                    transformOrigin: "center center",
-                    fontFamily: font,
-                    backgroundColor: "rgba(0,0,0,0.3)",
-                    border: "1px solid rgba(255,255,255,0.15)",
-                    borderRadius: 100 * s,
-                    padding: `${14 * s}px ${36 * s}px`,
-                    textShadow: "0 1px 6px rgba(0,0,0,0.1)"
-                  },
-                  children: solutionLabel
-                }
-              )
-            }
-          ),
-          /* @__PURE__ */ jsx(
-            "div",
-            {
-              style: {
-                position: "absolute",
-                top: textTop,
-                left: 0,
-                right: 0,
-                fontSize: mainSize,
-                fontWeight: 800,
-                color: textColor,
-                textAlign: "center",
-                padding: `0 ${60 * s}px`,
-                lineHeight: 1.2,
-                letterSpacing: -1,
-                opacity: solutionTextOpacity,
-                transform: `translateY(${solutionTextRiseY}px) scale(${solutionTextScale})`,
-                fontFamily: font,
-                textShadow: "0 2px 12px rgba(0,0,0,0.15)"
-              },
-              children: solutionText
-            }
-          )
-        ]
-      }
-    )
-  ] });
-};
-
-// src/visual-system/scene-templates/infographic-problem-solution.tsx
-import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
-var InfographicProblemSolutionTemplate = ({
-  variables,
-  style,
-  progress,
-  beatIntensity,
-  width,
-  height,
-  sceneDuration,
-  backgroundEffect,
-  isPlaying = true
-}) => {
-  const { foreground, font } = resolveTokens(style);
-  const textColor = foreground;
-  const problemText = String(variables.problemText || "");
-  const solutionText = String(variables.solutionText || "");
-  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: `${problemText}${solutionText}`,
-            isPlaying,
-            beatIntensity
-          }
-        ),
-        /* @__PURE__ */ jsx2(
-          ProblemSolution,
-          {
-            progress,
-            width,
-            height,
-            problemLabel: String(variables.problemLabel || "THE PROBLEM"),
-            problemText,
-            solutionLabel: String(variables.solutionLabel || "THE SOLUTION"),
-            solutionText,
-            textColor,
-            font,
-            beatIntensity
-          }
-        )
-      ]
-    }
-  );
-};
-export {
-  InfographicProblemSolutionTemplate
-};