@vanillaskyai/video 0.8.8 → 0.9.0

package/dist/infographic-before-after-ROS52GOW.js

@@ -1,460 +0,0 @@
-import {
-  parseList
-} from "./chunk-P22HHFDK.js";
-import {
-  stripPipe
-} from "./chunk-S7HFLYNN.js";
-import {
-  smoothSize
-} from "./chunk-YJJC4N4D.js";
-import {
-  Emoji,
-  renderWithEmoji
-} from "./chunk-L5BTTCZV.js";
-import {
-  gradientBackground
-} from "./chunk-W3VDIBGR.js";
-import {
-  interpolate,
-  spring
-} from "./chunk-XTOXFMLM.js";
-import {
-  TOKEN_DEFAULTS,
-  resolveTokens
-} from "./chunk-XWWLKRNU.js";
-
-// src/visual-system/primitives/infographic/BeforeAfterSplit.tsx
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-var SPRING_POP = { damping: 6, stiffness: 250 };
-var SPRING_HAPPY = { damping: 9, stiffness: 220 };
-var SPRING_TEXT = { damping: 10, stiffness: 150 };
-var POSITIONS = [
-  { x: 0.06, y: 0.06 },
-  { x: 0.3, y: 0.1 },
-  { x: 0.62, y: 0.07 },
-  { x: 0.92, y: 0.09 },
-  { x: 0.08, y: 0.26 },
-  { x: 0.92, y: 0.24 },
-  { x: 0.04, y: 0.4 },
-  { x: 0.96, y: 0.42 },
-  { x: 0.04, y: 0.62 },
-  { x: 0.96, y: 0.6 },
-  { x: 0.1, y: 0.78 },
-  { x: 0.34, y: 0.82 },
-  { x: 0.66, y: 0.8 },
-  { x: 0.9, y: 0.78 },
-  { x: 0.22, y: 0.92 },
-  { x: 0.78, y: 0.94 }
-];
-var ROTATIONS = [-12, 8, -5, 15, -8, 10, -15, 6, -10, 12, -6, 14, -9, 7, -13, 11];
-var POP_ORDER = [7, 12, 3, 9, 0, 14, 5, 11, 2, 8, 15, 4, 10, 1, 13, 6];
-var FALL_SWAY = [0.7, -1, 0.4, -0.6, 0.9, -0.3, 0.5, -0.8, 0.6, -0.5, 0.3, -0.9, 0.8, -0.4, 0.2, -0.7];
-var BeforeAfterSplit = ({
-  progress,
-  width,
-  height,
-  problemHeadline: rawProblemHeadline,
-  solutionHeadline: rawSolutionHeadline,
-  problemEmojis: rawProblemEmojis = [],
-  solutionEmojis: rawSolutionEmojis = [],
-  showEmojis = true,
-  beforeLabel = "BEFORE",
-  afterLabel = "AFTER",
-  beforeUrl,
-  afterUrl,
-  textColor = "#ffffff",
-  font = TOKEN_DEFAULTS.font,
-  beatIntensity = 0
-}) => {
-  const s = Math.min(width, height) / 1080;
-  const problemLabel = String(beforeLabel || "BEFORE").toUpperCase();
-  const solutionLabel = String(afterLabel || "AFTER").toUpperCase();
-  const problemHeadline = stripPipe(String(rawProblemHeadline || ""));
-  const solutionHeadline = stripPipe(String(rawSolutionHeadline || ""));
-  const problemTypes = showEmojis ? rawProblemEmojis.filter((e) => (e || "").length > 0) : [];
-  const solutionTypes = showEmojis ? rawSolutionEmojis.filter((e) => (e || "").length > 0) : [];
-  if (showEmojis && problemTypes.length === 0) problemTypes.push("\u{1F4C5}", "\u{1F630}");
-  if (showEmojis && solutionTypes.length === 0) solutionTypes.push("\u2728", "\u2705");
-  const beforeColor = "#ef4444";
-  const afterColor = "#22c55e";
-  const SLOT_COUNT = POSITIONS.length;
-  const problemEmojis = showEmojis ? Array.from({ length: SLOT_COUNT }, (_, i) => problemTypes[POP_ORDER[i] % problemTypes.length]) : [];
-  const solutionEmojis = showEmojis ? Array.from({ length: SLOT_COUNT }, (_, i) => solutionTypes[POP_ORDER[i] % solutionTypes.length]) : [];
-  const PROBLEM_BASE = 0.05;
-  const PROBLEM_STAGGER = 0.01;
-  const FALL_START = 0.35;
-  const FALL_END = 0.5;
-  const HEADLINE_FADE = [0.4, 0.5];
-  const SOLUTION_BASE = 0.5;
-  const SOLUTION_STAGGER = 8e-3;
-  const problemHeadlineMask = 1 - interpolate(progress, [HEADLINE_FADE[0], HEADLINE_FADE[1]], [0, 1], {
-    extrapolateLeft: "clamp",
-    extrapolateRight: "clamp"
-  });
-  const solutionHeadlineMask = interpolate(progress, [HEADLINE_FADE[0] + 0.05, HEADLINE_FADE[1] + 0.05], [0, 1], {
-    extrapolateLeft: "clamp",
-    extrapolateRight: "clamp"
-  });
-  const emojiFontSize = Math.min(72 * s, width * 0.085);
-  const emojiHalf = emojiFontSize / 2;
-  const padX = emojiHalf + 8 * s;
-  const padY = emojiHalf + 8 * s;
-  const zoneTop = padY;
-  const zoneLeft = padX;
-  const zoneWidth = width - padX * 2;
-  const zoneHeight = height - padY * 2;
-  const labelFontSize = 32 * s;
-  const pillTop = height * 0.38;
-  const textTop = height * 0.46;
-  const longerChars = Math.max(problemHeadline.length, solutionHeadline.length, 1);
-  const mainSize = smoothSize(longerChars, 70, 88, 60) * s;
-  const problemTextP = spring(
-    interpolate(progress, [0.1, 0.25], [0, 1], { extrapolateLeft: "clamp", extrapolateRight: "clamp" }),
-    SPRING_TEXT
-  );
-  const problemTextScale = interpolate(problemTextP, [0, 1], [1.4, 1]);
-  const problemTextOpacity = interpolate(progress, [0.1, 0.2], [0, 1], { extrapolateLeft: "clamp", extrapolateRight: "clamp" });
-  const solutionTextP = spring(
-    interpolate(progress, [0.55, 0.7], [0, 1], { extrapolateLeft: "clamp", extrapolateRight: "clamp" }),
-    SPRING_TEXT
-  );
-  const solutionTextScale = interpolate(solutionTextP, [0, 1], [1.4, 1]);
-  const solutionTextOpacity = interpolate(progress, [0.55, 0.65], [0, 1], { extrapolateLeft: "clamp", extrapolateRight: "clamp" });
-  return /* @__PURE__ */ jsxs(Fragment, { children: [
-    beforeUrl ? /* @__PURE__ */ jsx(
-      "div",
-      {
-        style: {
-          position: "absolute",
-          inset: 0,
-          opacity: problemHeadlineMask * 0.6,
-          backgroundImage: `url(${beforeUrl})`,
-          backgroundSize: "cover",
-          backgroundPosition: "center",
-          pointerEvents: "none"
-        }
-      }
-    ) : null,
-    afterUrl ? /* @__PURE__ */ jsx(
-      "div",
-      {
-        style: {
-          position: "absolute",
-          inset: 0,
-          opacity: solutionHeadlineMask * 0.6,
-          backgroundImage: `url(${afterUrl})`,
-          backgroundSize: "cover",
-          backgroundPosition: "center",
-          pointerEvents: "none"
-        }
-      }
-    ) : null,
-    problemEmojis.map((emoji, i) => {
-      const pos = POSITIONS[i];
-      const rotation = ROTATIONS[i];
-      const popRank = POP_ORDER[i];
-      const sway = FALL_SWAY[i];
-      const cx = zoneLeft + pos.x * zoneWidth;
-      const cy = zoneTop + pos.y * zoneHeight;
-      const popDelay = PROBLEM_BASE + popRank * PROBLEM_STAGGER;
-      const popP = spring(
-        interpolate(progress, [popDelay, popDelay + 0.1], [0, 1], {
-          extrapolateLeft: "clamp",
-          extrapolateRight: "clamp"
-        }),
-        SPRING_POP
-      );
-      const emojiScale = interpolate(popP, [0, 1], [0, 1]);
-      const settled = popP > 0.5;
-      const inFall = progress >= FALL_START;
-      const shakePhase = progress * 50;
-      const shakeX = settled && !inFall ? Math.sin(shakePhase + i * 1.7) * 7 * s : 0;
-      const shakeY = settled && !inFall ? Math.cos(shakePhase + i * 2.3) * 5 * s : 0;
-      const shakeRotate = settled && !inFall ? rotation + Math.sin(shakePhase * 0.7 + i * 3.1) * 9 : rotation;
-      const fallProgress = interpolate(progress, [FALL_START, FALL_END], [0, 1], {
-        extrapolateLeft: "clamp",
-        extrapolateRight: "clamp"
-      });
-      const fallY = fallProgress * fallProgress * height * 1.3;
-      const fallSwayX = Math.sin(fallProgress * Math.PI * 2 + i * 0.7) * 30 * s * sway;
-      const fallRotate = fallProgress * (180 + i % 5 * 60) * (i % 2 === 0 ? 1 : -1);
-      const fadeOut = interpolate(progress, [FALL_END - 0.02, FALL_END + 0.02], [1, 0], {
-        extrapolateLeft: "clamp",
-        extrapolateRight: "clamp"
-      });
-      const beatPulse = 1 + beatIntensity * 0.04 * (i % 2 === 0 ? 1 : -0.5);
-      return /* @__PURE__ */ jsx(
-        "div",
-        {
-          style: {
-            position: "absolute",
-            left: cx - emojiHalf,
-            top: cy - emojiHalf,
-            width: emojiFontSize,
-            height: emojiFontSize,
-            fontSize: emojiFontSize,
-            lineHeight: 1,
-            display: "flex",
-            alignItems: "center",
-            justifyContent: "center",
-            opacity: fadeOut,
-            transform: `translate(${shakeX + fallSwayX}px, ${shakeY + fallY}px) rotate(${shakeRotate + fallRotate}deg) scale(${emojiScale * beatPulse})`,
-            transformOrigin: "center center",
-            pointerEvents: "none"
-          },
-          children: /* @__PURE__ */ jsx(Emoji, { char: emoji, size: emojiFontSize, verticalAlign: "baseline" })
-        },
-        `problem-${i}`
-      );
-    }),
-    solutionEmojis.map((emoji, i) => {
-      const pos = POSITIONS[i];
-      const popRank = POP_ORDER[i];
-      const cx = zoneLeft + pos.x * zoneWidth;
-      const cy = zoneTop + pos.y * zoneHeight;
-      const popDelay = SOLUTION_BASE + popRank * SOLUTION_STAGGER;
-      const popP = spring(
-        interpolate(progress, [popDelay, popDelay + 0.14], [0, 1], {
-          extrapolateLeft: "clamp",
-          extrapolateRight: "clamp"
-        }),
-        SPRING_HAPPY
-      );
-      const emojiScale = interpolate(popP, [0, 1], [0, 1]);
-      const liftY = (1 - Math.min(1, popP)) * 14 * s;
-      const settled = popP > 0.95;
-      const breathe = settled ? 1 + Math.sin(progress * Math.PI * 4 + i * 0.9) * 0.015 : 1;
-      const exitP = interpolate(progress, [0.9, 1], [0, 1], {
-        extrapolateLeft: "clamp",
-        extrapolateRight: "clamp"
-      });
-      const exitFade = 1 - exitP;
-      const exitLift = exitP * -20 * s;
-      const exitShrink = 1 - exitP * 0.06;
-      const beatPulse = 1 + beatIntensity * 0.03;
-      const opacity = interpolate(popP, [0, 0.3], [0, 1], {
-        extrapolateLeft: "clamp",
-        extrapolateRight: "clamp"
-      }) * exitFade;
-      return /* @__PURE__ */ jsx(
-        "div",
-        {
-          style: {
-            position: "absolute",
-            left: cx - emojiHalf,
-            top: cy - emojiHalf,
-            width: emojiFontSize,
-            height: emojiFontSize,
-            fontSize: emojiFontSize,
-            lineHeight: 1,
-            display: "flex",
-            alignItems: "center",
-            justifyContent: "center",
-            opacity,
-            transform: `translateY(${liftY + exitLift}px) scale(${emojiScale * breathe * beatPulse * exitShrink})`,
-            transformOrigin: "center center",
-            pointerEvents: "none"
-          },
-          children: /* @__PURE__ */ jsx(Emoji, { char: emoji, size: emojiFontSize, verticalAlign: "baseline" })
-        },
-        `solution-${i}`
-      );
-    }),
-    /* @__PURE__ */ jsxs("div", { style: { position: "absolute", inset: 0, opacity: problemHeadlineMask, pointerEvents: "none" }, 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: beforeColor,
-                letterSpacing: 3 * s,
-                textTransform: "uppercase",
-                whiteSpace: "nowrap",
-                transform: `scale(${interpolate(spring(interpolate(progress, [0.03, 0.18], [0, 1], { extrapolateLeft: "clamp", extrapolateRight: "clamp" }), { damping: 9, stiffness: 220 }), [0, 1], [0.55, 1])})`,
-                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,
-            opacity: problemTextOpacity,
-            transform: `scale(${problemTextScale})`,
-            fontFamily: font
-          },
-          children: renderWithEmoji(problemHeadline, mainSize)
-        }
-      )
-    ] }),
-    /* @__PURE__ */ jsxs("div", { style: { position: "absolute", inset: 0, opacity: solutionHeadlineMask, pointerEvents: "none" }, 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: afterColor,
-                letterSpacing: 3 * s,
-                textTransform: "uppercase",
-                whiteSpace: "nowrap",
-                transform: `scale(${interpolate(spring(interpolate(progress, [0.5, 0.65], [0, 1], { extrapolateLeft: "clamp", extrapolateRight: "clamp" }), { damping: 9, stiffness: 220 }), [0, 1], [0.55, 1])})`,
-                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,
-            opacity: solutionTextOpacity,
-            transform: `scale(${solutionTextScale})`,
-            fontFamily: font
-          },
-          children: renderWithEmoji(solutionHeadline, mainSize)
-        }
-      )
-    ] })
-  ] });
-};
-
-// src/visual-system/scene-templates/infographic-before-after.tsx
-import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
-var InfographicBeforeAfterTemplate = ({
-  variables,
-  style,
-  progress,
-  beatIntensity,
-  width,
-  height,
-  textArchetype,
-  safeZone,
-  sceneDuration
-}) => {
-  const { background, foreground, font } = resolveTokens(style);
-  const textColor = foreground;
-  const problemHeadline = String(variables.problemHeadline || "");
-  const solutionHeadline = String(variables.solutionHeadline || "");
-  const problemTypes = parseList(variables.problemEmojis);
-  const solutionTypes = parseList(variables.solutionEmojis);
-  const showEmojis = variables.showEmojis !== false && String(variables.showEmojis ?? "true").toLowerCase() !== "false";
-  const gradSeed = (problemHeadline + solutionHeadline).split("").reduce((acc, c) => acc + c.charCodeAt(0), 0);
-  void textArchetype;
-  void safeZone;
-  return /* @__PURE__ */ jsxs2(
-    "div",
-    {
-      style: {
-        width,
-        height,
-        backgroundColor: "var(--vanillasky-template-surface, #000)",
-        position: "relative",
-        overflow: "hidden",
-        fontFamily: font
-      },
-      children: [
-        /* @__PURE__ */ jsx2(
-          "div",
-          {
-            style: {
-              position: "absolute",
-              inset: 0,
-              background: gradientBackground({
-                colorA: background.type === "solid" ? background.color : background.colors[0],
-                colorB: background.type === "solid" ? background.color : background.colors[1],
-                solidBg: background.type === "solid" ? background.color : void 0,
-                progress,
-                sceneDuration,
-                seed: gradSeed,
-                family: resolveTokens(style).preset.background
-              }),
-              pointerEvents: "none"
-            }
-          }
-        ),
-        /* @__PURE__ */ jsx2(
-          BeforeAfterSplit,
-          {
-            progress,
-            width,
-            height,
-            problemHeadline,
-            solutionHeadline,
-            problemEmojis: problemTypes,
-            solutionEmojis: solutionTypes,
-            showEmojis,
-            beforeLabel: String(variables.problemLabel || ""),
-            afterLabel: String(variables.solutionLabel || ""),
-            textColor,
-            font,
-            beatIntensity
-          }
-        )
-      ]
-    }
-  );
-};
-export {
-  InfographicBeforeAfterTemplate
-};