@vanillaskyai/video 0.8.7 → 0.9.0

package/dist/bg-emoji-VU4UZYZN.js

@@ -1,150 +0,0 @@
-import {
-  getCelebrationParticleTiming
-} from "./chunk-QAAO7OAY.js";
-import {
-  TemplateText
-} from "./chunk-YJJC4N4D.js";
-import {
-  Emoji
-} from "./chunk-L5BTTCZV.js";
-import {
-  BrandGradientOverlay
-} from "./chunk-W3VDIBGR.js";
-import "./chunk-XTOXFMLM.js";
-import {
-  resolveTokens
-} from "./chunk-XWWLKRNU.js";
-
-// src/visual-system/scene-templates/bg-emoji.tsx
-import { jsx, jsxs } from "react/jsx-runtime";
-function seededRandom(seed) {
-  const x = Math.sin(seed * 12.9898 + seed * 78.233) * 43758.5453;
-  return x - Math.floor(x);
-}
-var EMOJI_LIST = [
-  "\u2764\uFE0F",
-  // red heart
-  "\u2B50",
-  // star
-  "\u{1F389}",
-  // party popper
-  "\u{1F984}",
-  // unicorn
-  "\u{1F525}",
-  // fire
-  "\u2728",
-  // sparkles
-  "\u{1F680}",
-  // rocket
-  "\u{1F49C}"
-  // purple heart
-];
-var PARTICLE_COUNT = 100;
-function easeOutQuad(p) {
-  return 1 - (1 - p) * (1 - p);
-}
-var BgEmojiTemplate = ({
-  variables,
-  style,
-  progress,
-  motionProgress = progress,
-  beatIntensity,
-  width,
-  height,
-  textArchetype,
-  safeZone,
-  sceneDuration
-}) => {
-  const s = Math.min(width, height) / 1080;
-  const BURST_RADIUS = Math.max(width, height) * 0.95;
-  const { foreground, font } = resolveTokens(style);
-  const textColor = foreground;
-  return /* @__PURE__ */ jsxs(
-    "div",
-    {
-      style: {
-        width,
-        height,
-        backgroundColor: "var(--vanillasky-template-surface, #000)",
-        position: "relative",
-        overflow: "hidden",
-        fontFamily: font
-      },
-      children: [
-        /* @__PURE__ */ jsx(BrandGradientOverlay, { style, progress, sceneDuration, seed: String(variables.texts || "").split("").reduce((acc, c) => acc + c.charCodeAt(0), 0) }),
-        Array.from({ length: PARTICLE_COUNT }, (_, i) => {
-          const seed = i + 1;
-          const angle = i / PARTICLE_COUNT * Math.PI * 2;
-          const forceFactor = 0.75 + seededRandom(seed * 1) * 0.5;
-          const durationFactor = 1.1 + seededRandom(seed * 3) * 0.6;
-          const emoji = EMOJI_LIST[i % EMOJI_LIST.length];
-          const startRot = seededRandom(seed * 5) * 60 - 30;
-          const rotSpeed = (seededRandom(seed * 6) - 0.5) * 540;
-          const sizeJitter = 0.7 + seededRandom(seed * 7) * 0.7;
-          const timing = getCelebrationParticleTiming(motionProgress, i, durationFactor);
-          if (!timing) return null;
-          const p = timing.progress;
-          const reach = BURST_RADIUS * forceFactor;
-          const radialP = easeOutQuad(p);
-          const gravity = height * 0.08 * p * p;
-          const x = width * 0.5 + Math.cos(angle) * reach * radialP;
-          const y = height * 0.5 + Math.sin(angle) * reach * radialP + gravity;
-          const baseSize = (28 + seededRandom(seed * 11) * 24) * s;
-          const size = baseSize * sizeJitter;
-          const popScale = Math.min(1, p * 30);
-          const particleOpacity = p < 0.85 ? 1 : Math.max(0, 1 - (p - 0.85) / 0.15);
-          const opacity = particleOpacity * timing.opacity;
-          const beatPulse = 1 + beatIntensity * 0.2;
-          const rot = startRot + rotSpeed * p;
-          if (opacity <= 0) return null;
-          if (y > height + 100 || y < -100 || x < -100 || x > width + 100) return null;
-          return /* @__PURE__ */ jsx(
-            "div",
-            {
-              style: {
-                position: "absolute",
-                left: x - size / 2,
-                top: y - size / 2,
-                width: size,
-                height: size,
-                fontSize: size * 0.8,
-                lineHeight: 1,
-                textAlign: "center",
-                opacity,
-                transform: `rotate(${rot}deg) scale(${popScale * beatPulse})`,
-                pointerEvents: "none",
-                display: "flex",
-                alignItems: "center",
-                justifyContent: "center"
-              },
-              children: /* @__PURE__ */ jsx(Emoji, { char: emoji, size: size * 0.8, verticalAlign: "baseline" })
-            },
-            i
-          );
-        }),
-        /* @__PURE__ */ jsx(
-          TemplateText,
-          {
-            motionProgress,
-            typeTreatment: resolveTokens(style).preset.type,
-            archetype: textArchetype ?? "subtle",
-            text: String(variables.texts ?? ""),
-            progress,
-            sceneDuration: sceneDuration ?? 3,
-            width,
-            height,
-            position: "center",
-            sizeRole: "headline",
-            safeZone,
-            font,
-            color: textColor,
-            beatIntensity
-          }
-        )
-      ]
-    }
-  );
-};
-export {
-  BgEmojiTemplate
-};

package/dist/bg-media-L34PDQXJ.js

@@ -1,106 +0,0 @@
-import {
-  ConfettiLayer
-} from "./chunk-CJ7F2CE6.js";
-import "./chunk-QAAO7OAY.js";
-import {
-  SceneBackground,
-  getMediaBackgroundProps
-} from "./chunk-MXZSDGZQ.js";
-import {
-  TemplateText
-} from "./chunk-YJJC4N4D.js";
-import "./chunk-L5BTTCZV.js";
-import "./chunk-FRN6WKHA.js";
-import "./chunk-W3VDIBGR.js";
-import "./chunk-XTOXFMLM.js";
-import {
-  hasSceneMedia
-} from "./chunk-224QNWRA.js";
-import "./chunk-5CDAM24P.js";
-import {
-  resolveTokens
-} from "./chunk-XWWLKRNU.js";
-
-// src/visual-system/scene-templates/bg-media.tsx
-import { jsx, jsxs } from "react/jsx-runtime";
-var BgMediaTemplate = ({
-  variables,
-  style,
-  progress,
-  motionProgress = progress,
-  beatIntensity,
-  width,
-  height,
-  textArchetype,
-  backgroundEffect,
-  safeZone,
-  sceneDuration,
-  isPlaying = true
-}) => {
-  const { font, foreground, background } = resolveTokens(style);
-  const text = foreground;
-  return /* @__PURE__ */ jsxs(
-    "div",
-    {
-      style: {
-        width,
-        height,
-        backgroundColor: "var(--vanillasky-template-surface, #000)",
-        position: "relative",
-        overflow: "hidden",
-        fontFamily: font
-      },
-      children: [
-        /* @__PURE__ */ jsx(
-          SceneBackground,
-          {
-            style,
-            progress,
-            sceneDuration,
-            width,
-            height,
-            ...getMediaBackgroundProps(variables),
-            textAnchor: "center",
-            backgroundEffect,
-            seed: String(variables.texts || ""),
-            isPlaying,
-            beatIntensity
-          }
-        ),
-        variables.confetti === true && /* @__PURE__ */ jsx(
-          ConfettiLayer,
-          {
-            progress: motionProgress,
-            width,
-            height,
-            beatIntensity,
-            bgColor: String(variables.mediaUrl || "").trim() === "" ? background.type === "solid" ? background.color : background.colors[1] : void 0
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          TemplateText,
-          {
-            overMedia: hasSceneMedia(variables),
-            motionProgress,
-            typeTreatment: resolveTokens(style).preset.type,
-            archetype: textArchetype ?? "subtle",
-            text: String(variables.texts ?? ""),
-            progress,
-            sceneDuration: sceneDuration ?? 3,
-            width,
-            height,
-            position: "center",
-            sizeRole: "headline",
-            safeZone,
-            font,
-            color: text,
-            beatIntensity
-          }
-        )
-      ]
-    }
-  );
-};
-export {
-  BgMediaTemplate
-};

package/dist/brand-message-FUJ4STFO.js

@@ -1,256 +0,0 @@
-import {
-  stripPipe
-} from "./chunk-S7HFLYNN.js";
-import {
-  SceneBackground,
-  getMediaBackgroundProps
-} from "./chunk-MXZSDGZQ.js";
-import {
-  renderWithEmoji
-} from "./chunk-L5BTTCZV.js";
-import "./chunk-FRN6WKHA.js";
-import "./chunk-W3VDIBGR.js";
-import {
-  interpolate
-} from "./chunk-XTOXFMLM.js";
-import "./chunk-224QNWRA.js";
-import "./chunk-5CDAM24P.js";
-import "./chunk-XWWLKRNU.js";
-
-// src/visual-system/primitives/typography/BrandMessageBubble.tsx
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-var CLAMP = { extrapolateLeft: "clamp", extrapolateRight: "clamp" };
-var BUBBLE_BG = "rgba(245,242,238,0.92)";
-var BUBBLE_TEXT = "#1c1c1e";
-var DOT_COLOR = "#8C8C92";
-function easeOutBack(t) {
-  const c1 = 1.70158;
-  const c3 = c1 + 1;
-  return 1 + c3 * Math.pow(t - 1, 3) + c1 * Math.pow(t - 1, 2);
-}
-var TAIL_WITH_EMOJI = /(\S+)(\s+)([\p{Extended_Pictographic}\p{Emoji_Modifier}\u{FE0E}\u{FE0F}\u{200D}]+)\s*$/u;
-function renderMessageWithEmojiTail(text, fontSizePx) {
-  const match = TAIL_WITH_EMOJI.exec(text);
-  if (!match || match.index === void 0) {
-    return renderWithEmoji(text, fontSizePx);
-  }
-  const [, lastWord, space, emoji] = match;
-  const leading = text.slice(0, match.index);
-  return /* @__PURE__ */ jsxs(Fragment, { children: [
-    renderWithEmoji(leading, fontSizePx),
-    /* @__PURE__ */ jsxs("span", { style: { whiteSpace: "nowrap" }, children: [
-      lastWord,
-      space,
-      renderWithEmoji(emoji, fontSizePx)
-    ] })
-  ] });
-}
-function popIn(t, start, dur = 0.4) {
-  if (t <= start) return 0;
-  if (t >= start + dur) return 1;
-  return easeOutBack((t - start) / dur);
-}
-var BrandMessageBubble = ({
-  progress,
-  sceneDuration,
-  brandName: rawBrandName,
-  message: rawMessage,
-  width,
-  height,
-  safeZone
-}) => {
-  const isLandscape = width > height;
-  const s = isLandscape ? Math.min(width, height) / 534 * 1.3 : width / 534;
-  const brandName = stripPipe(rawBrandName);
-  const message = stripPipe(rawMessage);
-  const realTimeSeconds = progress * sceneDuration;
-  const typingStart = 0.1;
-  const bubbleStart = 0.38;
-  const typingPop = popIn(progress, typingStart, 0.1);
-  const typingFade = interpolate(progress, [bubbleStart - 0.06, bubbleStart], [1, 0], CLAMP);
-  const showTyping = progress >= typingStart && progress < bubbleStart;
-  const bubblePop = popIn(progress, bubbleStart, 0.18);
-  const showBubble = progress >= bubbleStart;
-  const topPad = Math.max(safeZone.top, height * 0.25);
-  const sidePad = Math.max(safeZone.left, width * 0.06);
-  return /* @__PURE__ */ jsxs(
-    "div",
-    {
-      style: {
-        position: "absolute",
-        top: topPad,
-        left: sidePad,
-        right: sidePad,
-        display: "flex",
-        justifyContent: "flex-end"
-      },
-      children: [
-        showTyping && /* @__PURE__ */ jsx(
-          "div",
-          {
-            style: {
-              opacity: typingPop * typingFade,
-              transform: `translateY(${(1 - typingPop) * 8 * s}px)`,
-              background: BUBBLE_BG,
-              borderRadius: 18 * s,
-              padding: `${12 * s}px ${16 * s}px`,
-              display: "flex",
-              gap: 5 * s,
-              alignItems: "center",
-              boxShadow: `0 ${1 * s}px ${4 * s}px rgba(0,0,0,0.10)`
-            },
-            children: [0, 1, 2].map((j) => {
-              const phase = (realTimeSeconds * 1.6 + j * 0.2) % 1;
-              const y = Math.sin(phase * Math.PI * 2) * 2.5 * s;
-              const op = 0.45 + 0.55 * Math.max(0, Math.sin(phase * Math.PI));
-              return /* @__PURE__ */ jsx(
-                "div",
-                {
-                  style: {
-                    width: 7 * s,
-                    height: 7 * s,
-                    borderRadius: 3.5 * s,
-                    background: DOT_COLOR,
-                    transform: `translateY(${-y}px)`,
-                    opacity: op
-                  }
-                },
-                j
-              );
-            })
-          }
-        ),
-        showBubble && /* @__PURE__ */ jsxs(
-          "div",
-          {
-            style: {
-              // `width: max-content` forces the bubble to size to its
-              // natural one-line content width up to `maxWidth`. Without
-              // this, modern-screenshot's foreignObject text shaping (the
-              // export path) was using an intrinsic width well below
-              // `maxWidth`, breaking text that would have fit on one line
-              // in the live DOM — even after the NBSP fix glued the
-              // trailing emoji to the last word. With `max-content` +
-              // `maxWidth`, the bubble grows up to the cap on a single
-              // line, then wraps naturally inside the cap for genuinely
-              // long messages.
-              width: "max-content",
-              maxWidth: width * 0.86,
-              // Render with native system fonts in BOTH paths. The export
-              // pipeline turns the iframe DOM into an SVG and loads it via
-              // <img src="data:image/svg+xml,…">, and SVG-as-image is a
-              // sandboxed graphics context that does NOT load @font-face
-              // resources (data: or otherwise — this is a browser security
-              // model, not a CSP issue). Inter therefore never resolves in
-              // the export; the SVG falls back to Helvetica/Helvetica Neue,
-              // which is wider at the same point size, and "We built this
-              // for you ❤️" wraps inside the pinned bubble box even though
-              // the iframe's Inter rendering fit on one line. Naming the
-              // system font explicitly here makes the iframe ALSO use that
-              // same OS-native font, so preview and export compute identical
-              // widths and both fit on one line. See PRs #598/#599/#604 for
-              // the months of font-embed work that this finally closes out.
-              fontFamily: '"Helvetica Neue", Helvetica, Arial, sans-serif',
-              background: BUBBLE_BG,
-              color: BUBBLE_TEXT,
-              borderRadius: `${22 * s}px ${22 * s}px 0 ${22 * s}px`,
-              padding: `${14 * s}px ${18 * s}px ${12 * s}px`,
-              fontSize: 23 * s,
-              lineHeight: `${29 * s}px`,
-              fontWeight: 400,
-              opacity: bubblePop,
-              transform: `translateY(${(1 - bubblePop) * 8 * s}px) scale(${0.96 + 0.04 * bubblePop})`,
-              transformOrigin: "right top",
-              boxShadow: `0 ${2 * s}px ${10 * s}px rgba(0,0,0,0.14)`
-            },
-            children: [
-              /* @__PURE__ */ jsx(
-                "div",
-                {
-                  style: {
-                    fontSize: 14 * s,
-                    fontStyle: "italic",
-                    fontWeight: 400,
-                    color: "rgba(0,0,0,0.45)",
-                    lineHeight: 1.2,
-                    marginBottom: 6 * s
-                  },
-                  children: brandName
-                }
-              ),
-              renderMessageWithEmojiTail(message, 23 * s)
-            ]
-          }
-        )
-      ]
-    }
-  );
-};
-
-// src/visual-system/scene-templates/brand-message.tsx
-import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
-var BrandMessageTemplate = ({
-  variables,
-  style,
-  progress,
-  beatIntensity,
-  width,
-  height,
-  sceneDuration,
-  isPlaying = true,
-  safeZone,
-  backgroundEffect
-}) => {
-  const brandName = stripPipe(style.brand.name ?? "Your brand");
-  const message = stripPipe(String(variables.message || ""));
-  const seed = (brandName + message).split("").reduce((acc, c) => acc + c.charCodeAt(0), 0);
-  return /* @__PURE__ */ jsxs2(
-    "div",
-    {
-      style: {
-        width,
-        height,
-        backgroundColor: "var(--vanillasky-template-surface, #000)",
-        position: "relative",
-        overflow: "hidden",
-        // System fonts only — see BrandMessageBubble for the why
-        // (SVG-as-image can't load @font-face data: URLs, so the only
-        // way to get preview/export parity is to use a font the OS
-        // already has natively).
-        fontFamily: '"Helvetica Neue", Helvetica, Arial, sans-serif'
-      },
-      children: [
-        /* @__PURE__ */ jsx2(
-          SceneBackground,
-          {
-            style,
-            progress,
-            sceneDuration,
-            width,
-            height,
-            ...getMediaBackgroundProps(variables),
-            backgroundEffect,
-            seed,
-            isPlaying,
-            beatIntensity
-          }
-        ),
-        /* @__PURE__ */ jsx2(
-          BrandMessageBubble,
-          {
-            progress,
-            sceneDuration: sceneDuration ?? 4,
-            brandName,
-            message,
-            width,
-            height,
-            safeZone
-          }
-        )
-      ]
-    }
-  );
-};
-export {
-  BrandMessageTemplate
-};