@vanillaskyai/video 0.1.0

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

@@ -0,0 +1,266 @@
+import {
+  parseList
+} from "./chunk-P22HHFDK.js";
+import {
+  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 "./chunk-ABZACD4G.js";
+import {
+  interpolate,
+  spring
+} from "./chunk-XTOXFMLM.js";
+import {
+  TOKEN_DEFAULTS,
+  resolveTokens
+} from "./chunk-FNAEQ7QO.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: "#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,
+      {
+        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-7NURJANA.js

@@ -0,0 +1,340 @@
+import {
+  stripPipe
+} from "./chunk-S7HFLYNN.js";
+import {
+  SceneBackground,
+  getMediaBackgroundProps
+} from "./chunk-IFOW65Z6.js";
+import {
+  smoothSize
+} from "./chunk-BCRUUJ6A.js";
+import "./chunk-L5BTTCZV.js";
+import "./chunk-ABZACD4G.js";
+import {
+  interpolate,
+  spring
+} from "./chunk-XTOXFMLM.js";
+import {
+  TOKEN_DEFAULTS,
+  resolveTokens
+} from "./chunk-FNAEQ7QO.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: "#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
+};