@vanillaskyai/video 0.1.0

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

@@ -0,0 +1,460 @@
+import {
+  parseList
+} from "./chunk-P22HHFDK.js";
+import {
+  stripPipe
+} from "./chunk-S7HFLYNN.js";
+import {
+  smoothSize
+} from "./chunk-BCRUUJ6A.js";
+import {
+  Emoji,
+  renderWithEmoji
+} from "./chunk-L5BTTCZV.js";
+import {
+  gradientBackground
+} from "./chunk-ABZACD4G.js";
+import {
+  interpolate,
+  spring
+} from "./chunk-XTOXFMLM.js";
+import {
+  TOKEN_DEFAULTS,
+  resolveTokens
+} from "./chunk-FNAEQ7QO.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: "#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
+};