@vanillaskyai/video 0.1.0

package/dist/infographic-stat-row-J7IZR6ZN.js

@@ -0,0 +1,241 @@
+import {
+  SceneBackground,
+  getMediaBackgroundProps
+} from "./chunk-IFOW65Z6.js";
+import {
+  TemplateText
+} from "./chunk-BCRUUJ6A.js";
+import "./chunk-L5BTTCZV.js";
+import {
+  TOP_TEXT_AREA_RATIO,
+  withOpacity
+} from "./chunk-ABZACD4G.js";
+import {
+  interpolate,
+  spring
+} from "./chunk-XTOXFMLM.js";
+import {
+  TOKEN_DEFAULTS,
+  resolveTokens
+} from "./chunk-FNAEQ7QO.js";
+
+// src/visual-system/primitives/typography/StatBadgeRow.tsx
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+var SPRING_STAT = { damping: 12, stiffness: 170 };
+var StatBadgeRow = ({
+  progress,
+  stats: rawStats,
+  width,
+  height,
+  font = TOKEN_DEFAULTS.font,
+  textColor = "#ffffff"
+}) => {
+  const s = Math.min(width, height) / 1080;
+  const stats = rawStats.filter((st) => st.value);
+  const isLandscape = width > height;
+  const textAreaHeight = height * TOP_TEXT_AREA_RATIO;
+  const statsAreaTop = textAreaHeight;
+  const statsAreaHeight = height - statsAreaTop;
+  const valueFontSize = isLandscape ? 72 * s : 100 * s;
+  const labelFontSize = isLandscape ? 28 * s : 38 * s;
+  const statCount = stats.length;
+  const getStatPosition = (i) => {
+    if (isLandscape) {
+      const spacing = width / (statCount + 1);
+      return {
+        x: spacing * (i + 1),
+        y: statsAreaTop + statsAreaHeight * 0.4
+      };
+    }
+    const sectionH = statsAreaHeight / (statCount + 0.5);
+    return {
+      x: width / 2,
+      y: statsAreaTop + sectionH * (i + 0.5)
+    };
+  };
+  return /* @__PURE__ */ jsx(Fragment, { children: stats.map((stat, i) => {
+    const pos = getStatPosition(i);
+    const itemStart = 0.1 + i * 0.12;
+    const statP = spring(
+      interpolate(progress, [itemStart, itemStart + 0.12], [0, 1], {
+        extrapolateLeft: "clamp",
+        extrapolateRight: "clamp"
+      }),
+      SPRING_STAT
+    );
+    const scaleVal = interpolate(statP, [0, 1], [0.5, 1]);
+    const opacity = interpolate(progress, [itemStart, itemStart + 0.06], [0, 1], {
+      extrapolateLeft: "clamp",
+      extrapolateRight: "clamp"
+    });
+    const labelDelay = itemStart + 0.06;
+    const labelOpacity = interpolate(progress, [labelDelay, labelDelay + 0.05], [0, 1], {
+      extrapolateLeft: "clamp",
+      extrapolateRight: "clamp"
+    });
+    const labelSlideY = interpolate(progress, [labelDelay, labelDelay + 0.06], [10 * s, 0], {
+      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;
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        style: {
+          position: "absolute",
+          left: pos.x,
+          top: pos.y,
+          transform: `translate(-50%, -50%) translate(${exitTranslateX}px, 0) scale(${scaleVal})`,
+          opacity: opacity * exitFade,
+          display: "flex",
+          flexDirection: "column",
+          alignItems: "center",
+          justifyContent: "center",
+          gap: isLandscape ? 12 * s : 24 * s,
+          backgroundColor: "rgba(255,255,255,0.15)",
+          border: "1.5px solid rgba(255,255,255,0.2)",
+          borderRadius: isLandscape ? 20 * s : 28 * s,
+          padding: isLandscape ? `${28 * s}px ${24 * s}px` : `${48 * s}px ${56 * s}px`,
+          width: isLandscape ? width / (statCount + 1) * 0.85 : void 0,
+          maxWidth: isLandscape ? width * 0.28 : void 0,
+          minWidth: isLandscape ? void 0 : width * 0.6
+        },
+        children: [
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              style: {
+                fontSize: valueFontSize,
+                fontWeight: 800,
+                color: textColor,
+                fontFamily: font,
+                lineHeight: 1,
+                whiteSpace: "nowrap"
+              },
+              children: stat.value
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              style: {
+                fontSize: labelFontSize,
+                fontWeight: 500,
+                color: withOpacity(textColor, 0.8),
+                fontFamily: font,
+                lineHeight: 1.2,
+                whiteSpace: isLandscape ? "normal" : "nowrap",
+                textAlign: "center",
+                textTransform: "uppercase",
+                letterSpacing: isLandscape ? 1 * s : 2 * s,
+                opacity: labelOpacity,
+                transform: `translateY(${labelSlideY}px)`
+              },
+              children: stat.label
+            }
+          )
+        ]
+      },
+      i
+    );
+  }) });
+};
+
+// src/visual-system/scene-templates/infographic-stat-row.tsx
+import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+var InfographicStatRowTemplate = ({
+  variables,
+  style,
+  progress,
+  motionProgress = progress,
+  beatIntensity,
+  width,
+  height,
+  safeZone,
+  sceneDuration,
+  backgroundEffect,
+  isPlaying = true
+}) => {
+  const { foreground, font } = resolveTokens(style);
+  const textColor = foreground;
+  const textsRaw = String(variables.texts || "");
+  const stats = [
+    { value: String(variables.stat1Value || ""), label: String(variables.stat1Label || "") },
+    { value: String(variables.stat2Value || ""), label: String(variables.stat2Label || "") },
+    { value: String(variables.stat3Value || ""), label: String(variables.stat3Label || "") }
+  ];
+  return /* @__PURE__ */ jsxs2(
+    "div",
+    {
+      style: {
+        width,
+        height,
+        backgroundColor: "#000",
+        position: "relative",
+        overflow: "hidden",
+        fontFamily: font
+      },
+      children: [
+        /* @__PURE__ */ jsx2(
+          SceneBackground,
+          {
+            style,
+            progress,
+            sceneDuration,
+            width,
+            height,
+            ...getMediaBackgroundProps(variables),
+            backgroundEffect,
+            seed: textsRaw,
+            isPlaying,
+            beatIntensity
+          }
+        ),
+        /* @__PURE__ */ jsx2(
+          TemplateText,
+          {
+            motionProgress,
+            typeTreatment: resolveTokens(style).preset.type,
+            archetype: "subtle",
+            text: String(variables.texts ?? ""),
+            progress,
+            sceneDuration: sceneDuration ?? 3,
+            width,
+            height,
+            position: "top",
+            sizeRole: "headline",
+            safeZone,
+            font,
+            color: textColor,
+            beatIntensity
+          }
+        ),
+        /* @__PURE__ */ jsx2(
+          StatBadgeRow,
+          {
+            progress: motionProgress,
+            stats,
+            width,
+            height,
+            font,
+            textColor
+          }
+        )
+      ]
+    }
+  );
+};
+export {
+  InfographicStatRowTemplate
+};

package/dist/infographic-steps-VSZM6F5M.js

@@ -0,0 +1,400 @@
+import {
+  parseList
+} from "./chunk-P22HHFDK.js";
+import {
+  fitTextSize,
+  stripPipe
+} from "./chunk-S7HFLYNN.js";
+import {
+  SceneBackground,
+  getMediaBackgroundProps
+} from "./chunk-IFOW65Z6.js";
+import {
+  TemplateText
+} from "./chunk-BCRUUJ6A.js";
+import {
+  Emoji
+} from "./chunk-L5BTTCZV.js";
+import {
+  TOP_TEXT_AREA_RATIO,
+  autoTextColor,
+  withOpacity
+} from "./chunk-ABZACD4G.js";
+import {
+  interpolate,
+  spring
+} from "./chunk-XTOXFMLM.js";
+import {
+  TOKEN_DEFAULTS,
+  resolveTokens
+} from "./chunk-FNAEQ7QO.js";
+
+// src/visual-system/primitives/infographic/StepsList.tsx
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+var SPRING_POP = { damping: 8, stiffness: 200 };
+var SPRING_TITLE = { damping: 18, stiffness: 200 };
+function computeStepsLayout({
+  width,
+  height,
+  labels,
+  safeZone = { top: 0, right: 0, bottom: 0, left: 0 }
+}) {
+  const stepCount = Math.max(1, Math.min(labels.length, 4));
+  const s = Math.min(width, height) / 1080;
+  const textAreaBottom = Math.max(height * TOP_TEXT_AREA_RATIO, safeZone.top);
+  if (width > height) {
+    const availableWidth = Math.max(1, width - safeZone.left - safeZone.right);
+    const sectionWidth = availableWidth / stepCount;
+    const circleRadius2 = Math.min(104 * s, sectionWidth * 0.25);
+    const y = Math.min(
+      height * 0.55,
+      height - safeZone.bottom - circleRadius2 - 86 * s
+    );
+    return {
+      mode: "landscape-row",
+      items: labels.slice(0, 4).map((label, index) => {
+        const x2 = safeZone.left + sectionWidth * (index + 0.5);
+        const labelWidth2 = sectionWidth * 0.76;
+        return {
+          x: x2,
+          y,
+          circleRadius: circleRadius2,
+          labelLeft: x2 - labelWidth2 / 2,
+          labelTop: y + circleRadius2 + 20 * s,
+          labelWidth: labelWidth2,
+          labelFontSize: fitTextSize(label, 42 * s, labelWidth2, { minScale: 0.72 })
+        };
+      })
+    };
+  }
+  const contentTop = textAreaBottom;
+  const contentBottom = Math.max(contentTop + 1, height - safeZone.bottom);
+  const rowHeight = (contentBottom - contentTop) / stepCount;
+  const circleRadius = Math.min(82 * s, rowHeight * 0.27);
+  const x = safeZone.left + circleRadius + 48 * s;
+  const labelLeft = x + circleRadius + 42 * s;
+  const labelWidth = Math.max(1, width - safeZone.right - labelLeft);
+  return {
+    mode: "portrait-timeline",
+    items: labels.slice(0, 4).map((label, index) => {
+      const y = contentTop + rowHeight * (index + 0.5);
+      return {
+        x,
+        y,
+        circleRadius,
+        labelLeft,
+        labelTop: y - circleRadius,
+        labelWidth,
+        labelFontSize: fitTextSize(label, 50 * s, labelWidth, { minScale: 0.68 })
+      };
+    })
+  };
+}
+var StepsList = ({
+  progress,
+  width,
+  height,
+  steps,
+  stepEmojis = [],
+  accent = TOKEN_DEFAULTS.primary,
+  textColor = "#ffffff",
+  font = TOKEN_DEFAULTS.font,
+  beatIntensity = 0,
+  safeZone
+}) => {
+  void beatIntensity;
+  const s = Math.min(width, height) / 1080;
+  const stepLabels = steps.slice(0, 4).map((st) => stripPipe(String(st.title || "")));
+  const hasEmojis = stepEmojis.some((e) => (e || "").length > 0);
+  const isLandscape = width > height;
+  const layout = computeStepsLayout({ width, height, labels: stepLabels, safeZone });
+  const connectorPairs = layout.items.slice(0, -1).map((item, index) => ({
+    item,
+    next: layout.items[index + 1]
+  }));
+  const lineProgress = interpolate(progress, [0.07, 0.62], [0, 1], {
+    extrapolateLeft: "clamp",
+    extrapolateRight: "clamp"
+  });
+  const firstStep = 0.08;
+  const EXIT_START = 0.78;
+  const EXIT_DURATION = 0.1;
+  const EXIT_STAGGER = 0.04;
+  const exitForIndex = (i) => {
+    const start = EXIT_START + i * EXIT_STAGGER;
+    const raw = interpolate(progress, [start, start + EXIT_DURATION], [0, 1], {
+      extrapolateLeft: "clamp",
+      extrapolateRight: "clamp"
+    });
+    const eased = raw * raw;
+    return { translateX: -90 * s * eased, fade: 1 - eased };
+  };
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    connectorPairs.map(({ item, next }, index) => {
+      const exit = exitForIndex(index);
+      const segmentProgress = interpolate(
+        lineProgress,
+        [index / connectorPairs.length, (index + 1) / connectorPairs.length],
+        [0, 1],
+        { extrapolateLeft: "clamp", extrapolateRight: "clamp" }
+      );
+      return /* @__PURE__ */ jsx(
+        "div",
+        {
+          style: layout.mode === "portrait-timeline" ? {
+            position: "absolute",
+            left: item.x - 2 * s,
+            top: item.y + item.circleRadius,
+            width: 4 * s,
+            height: Math.max(
+              0,
+              next.y - next.circleRadius - (item.y + item.circleRadius)
+            ),
+            borderRadius: 999,
+            background: `linear-gradient(to bottom, ${withOpacity(accent, 0.9)}, ${withOpacity(textColor, 0.22)})`,
+            transform: `translateX(${exit.translateX}px) scaleY(${segmentProgress})`,
+            transformOrigin: "top",
+            opacity: 0.75 * exit.fade
+          } : {
+            position: "absolute",
+            left: item.x + item.circleRadius,
+            top: item.y - 2 * s,
+            width: Math.max(
+              0,
+              next.x - next.circleRadius - (item.x + item.circleRadius)
+            ),
+            height: 4 * s,
+            borderRadius: 999,
+            background: `linear-gradient(to right, ${withOpacity(accent, 0.9)}, ${withOpacity(textColor, 0.22)})`,
+            transform: `translateX(${exit.translateX}px) scaleX(${segmentProgress})`,
+            transformOrigin: "left",
+            opacity: 0.75 * exit.fade
+          }
+        },
+        `step-connector-${index}`
+      );
+    }),
+    layout.items.map((pos, i) => {
+      const circleRadius = pos.circleRadius;
+      const circleSize = circleRadius * 2;
+      const emojiFontSize = circleRadius * (isLandscape ? 0.9 : 0.8);
+      const numberFontSize = circleRadius * 0.7;
+      const itemStart = firstStep;
+      const circleP = spring(
+        interpolate(progress, [itemStart, itemStart + 0.12], [0, 1], {
+          extrapolateLeft: "clamp",
+          extrapolateRight: "clamp"
+        }),
+        SPRING_POP
+      );
+      const circleScale = interpolate(circleP, [0, 1], [0, 1]);
+      const contentDelay = itemStart + 0.03;
+      const contentOpacity = interpolate(progress, [contentDelay, contentDelay + 0.05], [0, 1], {
+        extrapolateLeft: "clamp",
+        extrapolateRight: "clamp"
+      });
+      const titleDelay = itemStart + 0.05;
+      const titleP = spring(
+        interpolate(progress, [titleDelay, titleDelay + 0.1], [0, 1], {
+          extrapolateLeft: "clamp",
+          extrapolateRight: "clamp"
+        }),
+        SPRING_TITLE
+      );
+      const titleSlide = isLandscape ? (1 - titleP) * 40 * s : (1 - titleP) * 120 * s;
+      const titleOpacity = interpolate(progress, [titleDelay, titleDelay + 0.05], [0, 1], {
+        extrapolateLeft: "clamp",
+        extrapolateRight: "clamp"
+      });
+      const emoji = hasEmojis ? stepEmojis[i] || "" : "";
+      const glowOpacity = circleScale * 0.2;
+      const exit = exitForIndex(i);
+      return /* @__PURE__ */ jsxs(
+        "div",
+        {
+          "data-template-item": "steps",
+          style: {
+            position: "absolute",
+            top: pos.y - circleRadius,
+            left: 0,
+            width,
+            height: circleSize,
+            transform: `translateX(${exit.translateX}px)`,
+            opacity: exit.fade
+          },
+          children: [
+            /* @__PURE__ */ jsx(
+              "div",
+              {
+                style: {
+                  position: "absolute",
+                  top: -circleRadius * 0.6,
+                  left: pos.x - circleRadius * 1.75,
+                  width: circleRadius * 3.5,
+                  height: circleRadius * 3.5,
+                  borderRadius: "50%",
+                  background: `radial-gradient(circle, ${withOpacity(accent, 0.4)} 0%, transparent 70%)`,
+                  opacity: glowOpacity,
+                  pointerEvents: "none"
+                }
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              "div",
+              {
+                style: {
+                  position: "absolute",
+                  left: pos.x - circleRadius,
+                  top: 0,
+                  width: circleSize,
+                  height: circleSize,
+                  borderRadius: "50%",
+                  backgroundColor: emoji ? "rgba(255,255,255,0.15)" : accent,
+                  border: "2px solid rgba(255,255,255,0.2)",
+                  display: "flex",
+                  justifyContent: "center",
+                  alignItems: "center",
+                  transform: `scale(${circleScale})`,
+                  boxShadow: `0 0 ${20 * s}px ${withOpacity(accent, glowOpacity)}`
+                },
+                children: emoji ? /* @__PURE__ */ jsx(Emoji, { char: emoji, size: emojiFontSize, verticalAlign: "middle", style: { opacity: contentOpacity } }) : /* @__PURE__ */ jsx(
+                  "span",
+                  {
+                    style: {
+                      fontSize: numberFontSize,
+                      fontWeight: 800,
+                      color: autoTextColor(accent),
+                      fontFamily: font,
+                      lineHeight: 1,
+                      opacity: contentOpacity
+                    },
+                    children: i + 1
+                  }
+                )
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              "div",
+              {
+                style: {
+                  position: "absolute",
+                  left: pos.labelLeft,
+                  top: pos.labelTop - (pos.y - circleRadius),
+                  width: pos.labelWidth,
+                  height: isLandscape ? 80 * s : circleSize,
+                  display: "flex",
+                  alignItems: isLandscape ? "flex-start" : "center",
+                  justifyContent: isLandscape ? "center" : "flex-start",
+                  fontSize: pos.labelFontSize,
+                  fontWeight: 600,
+                  color: textColor,
+                  fontFamily: font,
+                  letterSpacing: -0.3,
+                  textAlign: isLandscape ? "center" : "left",
+                  opacity: titleOpacity,
+                  transform: isLandscape ? `translateY(${titleSlide}px)` : `translateX(${titleSlide}px)`,
+                  textShadow: "0 1px 6px rgba(0,0,0,0.1)",
+                  lineHeight: 1.12,
+                  whiteSpace: "normal"
+                },
+                children: stepLabels[i]
+              }
+            )
+          ]
+        },
+        `step-${i}`
+      );
+    })
+  ] });
+};
+
+// src/visual-system/scene-templates/infographic-steps.tsx
+import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+var InfographicStepsTemplate = ({
+  variables,
+  style,
+  progress,
+  motionProgress = progress,
+  beatIntensity,
+  width,
+  height,
+  textArchetype,
+  safeZone,
+  sceneDuration,
+  backgroundEffect,
+  isPlaying
+}) => {
+  const { primary, foreground, font } = resolveTokens(style);
+  const textColor = foreground;
+  const textsRaw = String(variables.texts || "");
+  const stepLabels = parseList(variables.steps, 3);
+  const stepEmojis = parseList(variables.stepEmojis, 3);
+  void textArchetype;
+  return /* @__PURE__ */ jsxs2(
+    "div",
+    {
+      style: {
+        width,
+        height,
+        backgroundColor: "#000",
+        position: "relative",
+        overflow: "hidden",
+        fontFamily: font
+      },
+      children: [
+        /* @__PURE__ */ jsx2(
+          SceneBackground,
+          {
+            style,
+            progress,
+            sceneDuration,
+            width,
+            height,
+            ...getMediaBackgroundProps(variables),
+            backgroundEffect,
+            seed: textsRaw,
+            isPlaying,
+            beatIntensity
+          }
+        ),
+        /* @__PURE__ */ jsx2(
+          TemplateText,
+          {
+            motionProgress,
+            typeTreatment: resolveTokens(style).preset.type,
+            archetype: "subtle",
+            text: String(variables.texts ?? ""),
+            progress,
+            sceneDuration: sceneDuration ?? 3,
+            width,
+            height,
+            position: "top",
+            sizeRole: "headline",
+            safeZone,
+            font,
+            color: textColor,
+            beatIntensity
+          }
+        ),
+        /* @__PURE__ */ jsx2(
+          StepsList,
+          {
+            progress: motionProgress,
+            width,
+            height,
+            steps: stepLabels.map((title) => ({ title })),
+            stepEmojis,
+            accent: primary,
+            textColor,
+            font,
+            beatIntensity,
+            safeZone
+          }
+        )
+      ]
+    }
+  );
+};
+export {
+  InfographicStepsTemplate
+};