@vanillaskyai/video 0.8.8 → 0.9.0

package/dist/prompt-input-MHX4O42G.js

@@ -1,239 +0,0 @@
-import {
-  stripPipe
-} from "./chunk-S7HFLYNN.js";
-import {
-  SceneBackground,
-  getMediaBackgroundProps
-} from "./chunk-MXZSDGZQ.js";
-import "./chunk-FRN6WKHA.js";
-import "./chunk-W3VDIBGR.js";
-import {
-  SPRING_BOUNCY,
-  SPRING_SMOOTH,
-  interpolate,
-  spring
-} from "./chunk-XTOXFMLM.js";
-import "./chunk-224QNWRA.js";
-import "./chunk-5CDAM24P.js";
-import {
-  resolveTokens
-} from "./chunk-XWWLKRNU.js";
-
-// src/visual-system/primitives/typography/PromptInputPill.tsx
-import { jsx, jsxs } from "react/jsx-runtime";
-var CLAMP = {
-  extrapolateLeft: "clamp",
-  extrapolateRight: "clamp"
-};
-var SparklesIcon = ({ size, gradientId }) => /* @__PURE__ */ jsxs("svg", { width: size, height: size, viewBox: "0 0 16 16", fill: "none", children: [
-  /* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsxs("linearGradient", { id: gradientId, x1: "0%", y1: "0%", x2: "100%", y2: "100%", children: [
-    /* @__PURE__ */ jsx("stop", { offset: "0%", stopColor: "#7C3AED" }),
-    /* @__PURE__ */ jsx("stop", { offset: "50%", stopColor: "#3B82F6" }),
-    /* @__PURE__ */ jsx("stop", { offset: "100%", stopColor: "#06B6D4" })
-  ] }) }),
-  /* @__PURE__ */ jsx(
-    "path",
-    {
-      d: "M7.657 6.247c.11-.33.576-.33.686 0l.645 1.937a2.89 2.89 0 0 0 1.829 1.828l1.936.645c.33.11.33.576 0 .686l-1.937.645a2.89 2.89 0 0 0-1.828 1.829l-.645 1.936a.361.361 0 0 1-.686 0l-.645-1.937a2.89 2.89 0 0 0-1.828-1.828l-1.937-.645a.361.361 0 0 1 0-.686l1.937-.645a2.89 2.89 0 0 0 1.828-1.828zM3.794 1.148a.217.217 0 0 1 .412 0l.387 1.162c.173.518.579.924 1.097 1.097l1.162.387a.217.217 0 0 1 0 .412l-1.162.387A1.73 1.73 0 0 0 4.593 5.69l-.387 1.162a.217.217 0 0 1-.412 0L3.407 5.69A1.73 1.73 0 0 0 2.31 4.593l-1.162-.387a.217.217 0 0 1 0-.412l1.162-.387A1.73 1.73 0 0 0 3.407 2.31zM10.863.099a.145.145 0 0 1 .274 0l.258.774c.115.346.386.617.732.732l.774.258a.145.145 0 0 1 0 .274l-.774.258a1.16 1.16 0 0 0-.732.732l-.258.774a.145.145 0 0 1-.274 0l-.258-.774a1.16 1.16 0 0 0-.732-.732L9.1 2.137a.145.145 0 0 1 0-.274l.774-.258c.346-.115.617-.386.732-.732z",
-      fill: `url(#${gradientId})`
-    }
-  )
-] });
-var PromptInputPill = ({
-  progress,
-  sceneDuration,
-  promptText: rawText,
-  pillBg = "#FFFFFF",
-  pillTextColor = "#374151",
-  width,
-  height
-}) => {
-  const dim = Math.min(width, height);
-  const promptText = stripPipe(rawText || "");
-  const seed = promptText.split("").reduce((acc, c) => acc + c.charCodeAt(0), 0);
-  const pillHeight = dim * 0.13;
-  const pillTargetWidth = Math.min(width * 0.86, dim * 0.95);
-  const pillCircleWidth = pillHeight;
-  const pillRadius = pillHeight / 2;
-  const iconSize = pillHeight * 0.46;
-  const padLeft = pillHeight * 0.3;
-  const fontSizeDefault = pillHeight * 0.42;
-  const availableTextWidth = pillTargetWidth - padLeft * 3 - iconSize;
-  const naturalTextWidth = promptText.length * fontSizeDefault * 0.55 * 1.06;
-  const shrinkFactor = naturalTextWidth > availableTextWidth ? Math.max(0.45, availableTextWidth / naturalTextWidth) : 1;
-  const fontSize = fontSizeDefault * shrinkFactor;
-  const enterSpring = spring(
-    interpolate(progress, [0, 0.1], [0, 1], CLAMP),
-    SPRING_BOUNCY
-  );
-  const enterScale = 0.7 + 0.3 * enterSpring;
-  const enterOpacity = interpolate(progress, [0, 0.08], [0, 1], CLAMP);
-  const widthProgress = spring(
-    interpolate(progress, [0.1, 0.3], [0, 1], CLAMP),
-    SPRING_SMOOTH
-  );
-  const pillWidth = pillCircleWidth + (pillTargetWidth - pillCircleWidth) * widthProgress;
-  const typeStart = 0.3;
-  const typeEnd = 0.68;
-  const charsRevealed = Math.max(
-    0,
-    Math.floor(
-      interpolate(progress, [typeStart, typeEnd], [0, promptText.length], CLAMP)
-    )
-  );
-  const visibleText = promptText.slice(0, charsRevealed);
-  const realT = progress * sceneDuration;
-  const cursorVisible = progress >= typeStart * 0.9 && Math.sin(realT * Math.PI * 2.4) > 0;
-  return /* @__PURE__ */ jsx(
-    "div",
-    {
-      style: {
-        position: "absolute",
-        top: "50%",
-        left: "50%",
-        transform: `translate(-50%, -50%) scale(${enterScale})`,
-        opacity: enterOpacity
-      },
-      children: /* @__PURE__ */ jsxs(
-        "div",
-        {
-          style: {
-            width: pillWidth,
-            height: pillHeight,
-            backgroundColor: pillBg,
-            borderRadius: pillRadius,
-            display: "flex",
-            alignItems: "center",
-            paddingLeft: padLeft,
-            paddingRight: padLeft,
-            // Clip at the pill border — even after the 0.45× shrink floor,
-            // pathologically long prompts can still exceed the pill width.
-            // Clipping at the rounded border looks cleaner than letting text
-            // bleed past the right edge.
-            overflow: "hidden",
-            boxShadow: [
-              `inset 0 ${1 * (dim / 1080)}px 0 rgba(255,255,255,0.85)`,
-              `0 ${8 * (dim / 1080)}px ${24 * (dim / 1080)}px ${-8 * (dim / 1080)}px rgba(110,80,200,0.10)`,
-              `0 ${2 * (dim / 1080)}px ${8 * (dim / 1080)}px ${-4 * (dim / 1080)}px rgba(0,0,0,0.05)`
-            ].join(", "),
-            whiteSpace: "nowrap"
-          },
-          children: [
-            /* @__PURE__ */ jsx(
-              "div",
-              {
-                style: {
-                  flexShrink: 0,
-                  display: "flex",
-                  alignItems: "center",
-                  justifyContent: "center",
-                  width: iconSize,
-                  height: iconSize
-                },
-                children: /* @__PURE__ */ jsx(SparklesIcon, { size: iconSize, gradientId: `prompt-input-grad-${seed}` })
-              }
-            ),
-            /* @__PURE__ */ jsxs(
-              "div",
-              {
-                style: {
-                  marginLeft: padLeft,
-                  fontSize,
-                  lineHeight: 1.4,
-                  color: pillTextColor,
-                  fontWeight: 500,
-                  letterSpacing: -0.5,
-                  minWidth: 0,
-                  display: "flex",
-                  alignItems: "center"
-                },
-                children: [
-                  /* @__PURE__ */ jsx("span", { children: visibleText }),
-                  /* @__PURE__ */ jsx(
-                    "span",
-                    {
-                      style: {
-                        display: "inline-block",
-                        width: fontSize * 0.06,
-                        height: fontSize * 0.95,
-                        backgroundColor: pillTextColor,
-                        marginLeft: fontSize * 0.08,
-                        opacity: cursorVisible ? 0.85 : 0,
-                        borderRadius: fontSize * 0.03
-                      }
-                    }
-                  )
-                ]
-              }
-            )
-          ]
-        }
-      )
-    }
-  );
-};
-
-// src/visual-system/scene-templates/prompt-input.tsx
-import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
-var PromptInputTemplate = ({
-  variables,
-  style,
-  progress,
-  beatIntensity,
-  width,
-  height,
-  sceneDuration,
-  isPlaying = true,
-  backgroundEffect
-}) => {
-  const { font } = resolveTokens(style);
-  const promptText = stripPipe(String(variables.promptText || "Make a launch video for our app"));
-  const pillBg = "#FFFFFF";
-  const pillTextColor = "#374151";
-  const seed = promptText.split("").reduce((acc, c) => acc + c.charCodeAt(0), 0);
-  return /* @__PURE__ */ jsxs2(
-    "div",
-    {
-      style: {
-        width,
-        height,
-        position: "relative",
-        overflow: "hidden",
-        backgroundColor: "var(--vanillasky-template-surface, #000)",
-        fontFamily: font
-      },
-      children: [
-        /* @__PURE__ */ jsx2(
-          SceneBackground,
-          {
-            style,
-            progress,
-            sceneDuration,
-            width,
-            height,
-            ...getMediaBackgroundProps(variables),
-            backgroundEffect,
-            seed,
-            isPlaying,
-            beatIntensity
-          }
-        ),
-        /* @__PURE__ */ jsx2(
-          PromptInputPill,
-          {
-            progress,
-            sceneDuration: sceneDuration ?? 4,
-            promptText,
-            pillBg,
-            pillTextColor,
-            width,
-            height
-          }
-        )
-      ]
-    }
-  );
-};
-export {
-  PromptInputTemplate
-};

package/dist/reaction-SLEGR3BE.js

@@ -1,122 +0,0 @@
-import {
-  SceneBackground
-} 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 "./chunk-224QNWRA.js";
-import "./chunk-5CDAM24P.js";
-import {
-  resolveTokens
-} from "./chunk-XWWLKRNU.js";
-
-// src/visual-system/scene-templates/reaction.tsx
-import { jsx, jsxs } from "react/jsx-runtime";
-var REACTION_TAGS = [
-  "launch",
-  "productLaunch",
-  "goLive",
-  "shipIt",
-  "wow",
-  "excited",
-  "happy",
-  "success",
-  "done",
-  "panic",
-  "waiting",
-  "celebration",
-  "cheers",
-  "applause",
-  "highFive",
-  "teamwork",
-  "fail",
-  "confused",
-  "thinking",
-  "thanks",
-  "letsGo",
-  "manual",
-  "office",
-  "meeting",
-  "deadline",
-  "coding",
-  "debugging",
-  "computer",
-  "startup",
-  "presentation",
-  "sales",
-  "growth",
-  "money"
-];
-var ReactionTemplate = ({
-  variables,
-  style,
-  progress,
-  motionProgress = progress,
-  beatIntensity,
-  width,
-  height,
-  textArchetype,
-  safeZone,
-  sceneDuration,
-  isPlaying = true
-}) => {
-  const { font, foreground } = resolveTokens(style);
-  const color = foreground;
-  const mediaUrl = String(variables.mediaUrl || "");
-  const hasClip = mediaUrl.trim().length > 0;
-  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,
-        mediaUrl,
-        mediaType: hasClip ? "video" : "gradient",
-        mediaPoster: String(variables.mediaPoster || ""),
-        backgroundEffect: "slow-zoom-in",
-        seed: String(variables.texts || ""),
-        isPlaying,
-        beatIntensity
-      }
-    ),
-    /* @__PURE__ */ jsx(
-      "div",
-      {
-        style: {
-          position: "absolute",
-          inset: 0,
-          background: "linear-gradient(180deg, rgba(0,0,0,.18), rgba(0,0,0,.08) 45%, rgba(0,0,0,.5))",
-          pointerEvents: "none"
-        }
-      }
-    ),
-    /* @__PURE__ */ jsx(
-      TemplateText,
-      {
-        motionProgress,
-        typeTreatment: resolveTokens(style).preset.type,
-        archetype: textArchetype || "slam",
-        text: String(variables.texts || "Still editing manually?"),
-        progress,
-        width,
-        height,
-        safeZone,
-        font,
-        color,
-        sceneDuration: sceneDuration ?? 3,
-        beatIntensity
-      }
-    )
-  ] });
-};
-export {
-  REACTION_TAGS,
-  ReactionTemplate
-};

package/dist/scene-video-backdrop-XFPX4O3I.js

@@ -1,10 +0,0 @@
-import {
-  SceneVideoBackdrop
-} from "./chunk-FRN6WKHA.js";
-import "./chunk-W3VDIBGR.js";
-import "./chunk-XTOXFMLM.js";
-import "./chunk-5CDAM24P.js";
-import "./chunk-XWWLKRNU.js";
-export {
-  SceneVideoBackdrop
-};