@vanillaskyai/video 0.1.0

package/dist/showcase-terminal-MGAEQWPR.js

@@ -0,0 +1,306 @@
+import {
+  parseList
+} from "./chunk-P22HHFDK.js";
+import {
+  fitTextSize
+} from "./chunk-S7HFLYNN.js";
+import {
+  SceneBackground,
+  getMediaBackgroundProps
+} from "./chunk-IFOW65Z6.js";
+import {
+  TemplateText
+} 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/devices/TerminalOutput.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+var SPRING_TERMINAL = { damping: 20, stiffness: 100 };
+var CLAMP = { extrapolateLeft: "clamp", extrapolateRight: "clamp" };
+var MONO_CHAR_RATIO = 0.63;
+var MONO_MIN_SCALE = 0.68;
+var MONO_FONT = "'Fira Code', 'SF Mono', 'Cascadia Code', Menlo, monospace";
+var CHROME_FONT = "'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif";
+var TerminalOutput = ({
+  progress,
+  command,
+  outputLines,
+  promptPrefix = "$",
+  width,
+  height,
+  accent = TOKEN_DEFAULTS.primary,
+  beatIntensity = 0
+}) => {
+  const s = Math.min(width, height) / 1080;
+  const termWidth = Math.min(width * 0.85, height * 0.55 * (16 / 9));
+  const chromeHeight = 44 * s;
+  const contentHeight = termWidth * (9 / 16);
+  const termHeight = chromeHeight + contentHeight;
+  const borderRadius = 12 * s;
+  const termBg = "#1e1e2e";
+  const termText = "#cdd6f4";
+  const promptColor = accent;
+  const contentAvailWidth = termWidth - 48 * s;
+  const baseFontSize = Math.max(18, 26 * s);
+  const promptChars = promptPrefix.length + 1;
+  const commandLineChars = promptChars + command.length + 1;
+  const longestLineChars = outputLines.reduce(
+    (m, l) => Math.max(m, l.length),
+    Math.max(commandLineChars, 1)
+  );
+  const fontSize = fitTextSize("M".repeat(longestLineChars), baseFontSize, contentAvailWidth, {
+    minScale: MONO_MIN_SCALE,
+    charWidthRatio: MONO_CHAR_RATIO
+  });
+  const atFloor = fontSize <= baseFontSize * MONO_MIN_SCALE + 0.01;
+  const maxLineChars = atFloor ? Math.max(4, Math.floor(contentAvailWidth / (fontSize * MONO_CHAR_RATIO))) : Infinity;
+  const ellipsize = (l) => l.length > maxLineChars ? `${l.slice(0, maxLineChars - 1).trimEnd()}\u2026` : l;
+  const displayCommand = commandLineChars > maxLineChars ? `${command.slice(0, Math.max(1, maxLineChars - promptChars - 2)).trimEnd()}\u2026` : command;
+  const displayOutputLines = outputLines.map(ellipsize);
+  const lineHeight = fontSize * 1.7;
+  const slideProgress = interpolate(progress, [0.02, 0.15], [0, 1], CLAMP);
+  const springVal = spring(slideProgress, SPRING_TERMINAL);
+  const termY = (1 - springVal) * 200 * s;
+  const termOpacity = interpolate(slideProgress, [0, 0.08], [0, 1], CLAMP);
+  const typeProgress = interpolate(progress, [0.1, 0.48], [0, 1], CLAMP);
+  const charsVisible = Math.floor(typeProgress * displayCommand.length);
+  const typedText = displayCommand.slice(0, charsVisible);
+  const isTyping = typeProgress > 0 && typeProgress < 1;
+  const cursorCycle = Math.floor(progress * 25);
+  const cursorVisible = isTyping || cursorCycle % 2 === 0;
+  const outputStartP = 0.55;
+  const outputEndP = 0.88;
+  const outputSlice = displayOutputLines.length > 0 ? (outputEndP - outputStartP) / displayOutputLines.length : 0;
+  const beatScale = 1 + beatIntensity * 0.01;
+  const dotSize = 12 * s;
+  const dotGap = 8 * s;
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      style: {
+        position: "absolute",
+        top: height * 0.35,
+        left: (width - termWidth) / 2,
+        width: termWidth,
+        height: termHeight,
+        transform: `translateY(${termY}px) scale(${beatScale})`,
+        opacity: termOpacity
+      },
+      children: /* @__PURE__ */ jsxs(
+        "div",
+        {
+          style: {
+            width: termWidth,
+            height: termHeight,
+            borderRadius,
+            overflow: "hidden",
+            position: "relative",
+            boxShadow: `0 ${20 * s}px ${60 * s}px rgba(0,0,0,0.35)`
+          },
+          children: [
+            /* @__PURE__ */ jsxs(
+              "div",
+              {
+                style: {
+                  width: "100%",
+                  height: chromeHeight,
+                  backgroundColor: "#313244",
+                  display: "flex",
+                  alignItems: "center",
+                  paddingLeft: 16 * s,
+                  paddingRight: 16 * s
+                },
+                children: [
+                  /* @__PURE__ */ jsxs("div", { style: { display: "flex", gap: dotGap, flexShrink: 0 }, children: [
+                    /* @__PURE__ */ jsx("div", { style: { width: dotSize, height: dotSize, borderRadius: "50%", backgroundColor: "#ff5f57" } }),
+                    /* @__PURE__ */ jsx("div", { style: { width: dotSize, height: dotSize, borderRadius: "50%", backgroundColor: "#febc2e" } }),
+                    /* @__PURE__ */ jsx("div", { style: { width: dotSize, height: dotSize, borderRadius: "50%", backgroundColor: "#28c840" } })
+                  ] }),
+                  /* @__PURE__ */ jsx(
+                    "div",
+                    {
+                      style: {
+                        flex: 1,
+                        textAlign: "center",
+                        fontSize: 13 * s,
+                        fontFamily: CHROME_FONT,
+                        color: "#a6adc8",
+                        whiteSpace: "nowrap"
+                      },
+                      children: "Terminal"
+                    }
+                  ),
+                  /* @__PURE__ */ jsx("div", { style: { width: dotSize * 3 + dotGap * 2, flexShrink: 0 } })
+                ]
+              }
+            ),
+            /* @__PURE__ */ jsxs(
+              "div",
+              {
+                style: {
+                  width: "100%",
+                  height: contentHeight,
+                  backgroundColor: termBg,
+                  padding: `${20 * s}px ${24 * s}px`,
+                  overflow: "hidden"
+                },
+                children: [
+                  /* @__PURE__ */ jsxs(
+                    "div",
+                    {
+                      style: {
+                        fontFamily: MONO_FONT,
+                        fontSize,
+                        lineHeight: `${lineHeight}px`,
+                        whiteSpace: "nowrap"
+                      },
+                      children: [
+                        /* @__PURE__ */ jsx("span", { style: { color: promptColor, fontWeight: 700 }, children: promptPrefix }),
+                        /* @__PURE__ */ jsxs("span", { style: { color: termText }, children: [
+                          " ",
+                          typedText
+                        ] }),
+                        /* @__PURE__ */ jsx(
+                          "span",
+                          {
+                            style: {
+                              display: "inline-block",
+                              width: fontSize * 0.55,
+                              height: fontSize * 1.1,
+                              backgroundColor: cursorVisible ? termText : "transparent",
+                              verticalAlign: "text-bottom",
+                              marginLeft: 1
+                            }
+                          }
+                        )
+                      ]
+                    }
+                  ),
+                  displayOutputLines.map((line, i) => {
+                    const lineStart = outputStartP + i * outputSlice;
+                    const lineOpacity = interpolate(progress, [lineStart, lineStart + 0.03], [0, 1], CLAMP);
+                    const lineSlideY = interpolate(progress, [lineStart, lineStart + 0.05], [8 * s, 0], CLAMP);
+                    return /* @__PURE__ */ jsx(
+                      "div",
+                      {
+                        style: {
+                          fontFamily: MONO_FONT,
+                          fontSize,
+                          lineHeight: `${lineHeight}px`,
+                          color: termText,
+                          opacity: lineOpacity,
+                          transform: `translateY(${lineSlideY}px)`,
+                          marginTop: i === 0 ? lineHeight * 0.5 : 0,
+                          whiteSpace: "nowrap"
+                        },
+                        children: line
+                      },
+                      i
+                    );
+                  })
+                ]
+              }
+            )
+          ]
+        }
+      )
+    }
+  );
+};
+
+// src/visual-system/scene-templates/showcase-terminal.tsx
+import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+var ShowcaseTerminalTemplate = ({
+  variables,
+  style,
+  progress,
+  motionProgress = progress,
+  beatIntensity,
+  width,
+  height,
+  safeZone,
+  sceneDuration,
+  backgroundEffect,
+  isPlaying = true
+}) => {
+  const { primary, foreground, font } = resolveTokens(style);
+  const textColor = foreground;
+  const textsRaw = String(variables.texts || "");
+  const command = String(variables.command || "");
+  const promptPrefix = String(variables.promptPrefix || "$");
+  const outputLines = parseList(variables.output);
+  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: textsRaw,
+            isPlaying,
+            beatIntensity
+          }
+        ),
+        /* @__PURE__ */ jsx2(
+          TemplateText,
+          {
+            motionProgress,
+            typeTreatment: resolveTokens(style).preset.type,
+            archetype: "subtle",
+            text: String(variables.texts ?? ""),
+            progress,
+            sceneDuration: sceneDuration ?? 3,
+            width,
+            height,
+            position: "top",
+            sizeRole: "headline",
+            safeZone,
+            font,
+            color: textColor,
+            beatIntensity
+          }
+        ),
+        /* @__PURE__ */ jsx2(
+          TerminalOutput,
+          {
+            progress,
+            command,
+            outputLines,
+            promptPrefix,
+            width,
+            height,
+            accent: primary,
+            beatIntensity
+          }
+        )
+      ]
+    }
+  );
+};
+export {
+  ShowcaseTerminalTemplate
+};

package/dist/showcase-web-Y4W2HVRJ.js

@@ -0,0 +1,390 @@
+import {
+  ProductSurface,
+  WebScreenFill,
+  resolveProductSurfaceMotion
+} from "./chunk-FSG2PYWG.js";
+import {
+  stripPipe
+} from "./chunk-S7HFLYNN.js";
+import {
+  SceneBackground,
+  getMediaBackgroundProps
+} from "./chunk-IFOW65Z6.js";
+import {
+  TemplateText
+} from "./chunk-BCRUUJ6A.js";
+import "./chunk-L5BTTCZV.js";
+import "./chunk-ABZACD4G.js";
+import {
+  SPRING_SMOOTH,
+  interpolate,
+  spring
+} from "./chunk-XTOXFMLM.js";
+import {
+  TOKEN_DEFAULTS,
+  resolveTokens
+} from "./chunk-FNAEQ7QO.js";
+
+// src/visual-system/primitives/devices/WebMockup.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+var CLAMP = { extrapolateLeft: "clamp", extrapolateRight: "clamp" };
+var WebMockup = ({
+  progress,
+  width,
+  height,
+  frame = "browser",
+  screenMediaUrl = "",
+  screens = [],
+  addressBarUrl = "yourapp.com",
+  font = TOKEN_DEFAULTS.font,
+  accent = TOKEN_DEFAULTS.primary,
+  secondary = "#00b5e5",
+  bg,
+  beatIntensity = 0,
+  screenFit = "cover",
+  screenFocusX = 50,
+  screenFocusY = 50,
+  screenMotion = "pushIn",
+  screenCalloutText = "",
+  screenCalloutX = 70,
+  screenCalloutY = 35
+}) => {
+  const s = Math.min(width, height) / 1080;
+  const isBrowser = frame !== "tablet";
+  const addressBarUrlClean = stripPipe(String(addressBarUrl || "yourapp.com"));
+  const slidesMode = screens.length > 0;
+  const deviceWidth = Math.min(width * 0.85, height * 0.55 * (16 / 9));
+  const chromeHeight = isBrowser ? 44 * s : 0;
+  const contentHeight = deviceWidth * (9 / 16);
+  const deviceHeight = chromeHeight + contentHeight;
+  const borderRadius = isBrowser ? 12 * s : 24 * s;
+  const borderWidth = isBrowser ? 0 : 6 * s;
+  const enterRange = slidesMode ? [0.02, 0.35] : [0.02, 0.85];
+  const enterP = spring(
+    interpolate(progress, enterRange, [0, 1], CLAMP),
+    { damping: 28, stiffness: 80 }
+  );
+  const rotateX = (1 - enterP) * 70;
+  const deviceY = (1 - enterP) * 150 * s;
+  const deviceScale = interpolate(enterP, [0, 1], [0.85, 1]);
+  const deviceOpacity = interpolate(progress, [0.02, 0.1], [0, 1], CLAMP);
+  const slideCount = screens.length;
+  let slideOffset = 0;
+  if (slidesMode && slideCount >= 2) {
+    const transitionWidth = 0.1;
+    let totalSlides = 0;
+    for (let i = 1; i < slideCount; i++) {
+      const boundary = i / slideCount;
+      const start = boundary - transitionWidth / 2;
+      const end = boundary + transitionWidth / 2;
+      totalSlides += spring(
+        interpolate(progress, [start, end], [0, 1], CLAMP),
+        SPRING_SMOOTH
+      );
+    }
+    slideOffset = -totalSlides * deviceWidth;
+  }
+  const beatScale = slidesMode ? 1 + beatIntensity * 0.01 : 1 + beatIntensity * 0.015;
+  const dotSize = 12 * s;
+  const dotGap = 8 * s;
+  const placeholder = /* @__PURE__ */ jsx(
+    WebScreenFill,
+    {
+      accent,
+      secondary,
+      bg,
+      font,
+      s,
+      w: deviceWidth,
+      h: contentHeight,
+      progress
+    }
+  );
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      style: {
+        position: "absolute",
+        top: height * 0.35,
+        left: (width - deviceWidth) / 2,
+        width: deviceWidth,
+        height: deviceHeight,
+        perspective: `${1200 * s}px`
+      },
+      children: /* @__PURE__ */ jsx(
+        "div",
+        {
+          style: {
+            width: deviceWidth,
+            height: deviceHeight,
+            transform: `rotateX(${rotateX}deg) translateY(${deviceY}px) scale(${deviceScale * beatScale})`,
+            transformOrigin: "center bottom",
+            opacity: deviceOpacity
+          },
+          children: /* @__PURE__ */ jsxs(
+            "div",
+            {
+              style: {
+                width: deviceWidth,
+                height: deviceHeight,
+                borderRadius,
+                overflow: "hidden",
+                position: "relative",
+                boxShadow: `0 ${20 * s}px ${60 * s}px rgba(0,0,0,0.35)`
+              },
+              children: [
+                isBrowser && /* @__PURE__ */ jsxs(
+                  "div",
+                  {
+                    style: {
+                      width: "100%",
+                      height: 44 * s,
+                      backgroundColor: "#e8e8e8",
+                      display: "flex",
+                      alignItems: "center",
+                      paddingLeft: 16 * s,
+                      paddingRight: 16 * s,
+                      gap: 0,
+                      position: "relative",
+                      zIndex: 2
+                    },
+                    children: [
+                      /* @__PURE__ */ jsxs("div", { style: { display: "flex", gap: dotGap, flexShrink: 0 }, children: [
+                        /* @__PURE__ */ jsx("div", { style: { width: dotSize, height: dotSize, borderRadius: "50%", backgroundColor: "#ff5f57" } }),
+                        /* @__PURE__ */ jsx("div", { style: { width: dotSize, height: dotSize, borderRadius: "50%", backgroundColor: "#febc2e" } }),
+                        /* @__PURE__ */ jsx("div", { style: { width: dotSize, height: dotSize, borderRadius: "50%", backgroundColor: "#28c840" } })
+                      ] }),
+                      /* @__PURE__ */ jsxs(
+                        "div",
+                        {
+                          style: {
+                            flex: 1,
+                            marginLeft: 16 * s,
+                            height: 28 * s,
+                            backgroundColor: "#ffffff",
+                            borderRadius: 6 * s,
+                            display: "flex",
+                            alignItems: "center",
+                            paddingLeft: 12 * s,
+                            paddingRight: 12 * s,
+                            overflow: "hidden"
+                          },
+                          children: [
+                            /* @__PURE__ */ jsxs(
+                              "svg",
+                              {
+                                width: 14 * s,
+                                height: 14 * s,
+                                viewBox: "0 0 14 14",
+                                fill: "none",
+                                style: { flexShrink: 0, marginRight: 6 * s },
+                                children: [
+                                  /* @__PURE__ */ jsx("rect", { x: "2", y: "6", width: "10", height: "7", rx: "1.5", fill: "#999" }),
+                                  /* @__PURE__ */ jsx("path", { d: "M4.5 6V4.5a2.5 2.5 0 015 0V6", stroke: "#999", strokeWidth: "1.5", fill: "none", strokeLinecap: "round" })
+                                ]
+                              }
+                            ),
+                            /* @__PURE__ */ jsx(
+                              "span",
+                              {
+                                style: {
+                                  fontSize: 13 * s,
+                                  fontFamily: "-apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif",
+                                  color: "#666",
+                                  whiteSpace: "nowrap",
+                                  overflow: "hidden",
+                                  textOverflow: "ellipsis"
+                                },
+                                children: addressBarUrlClean
+                              }
+                            )
+                          ]
+                        }
+                      )
+                    ]
+                  }
+                ),
+                !isBrowser && /* @__PURE__ */ jsx(
+                  "div",
+                  {
+                    style: {
+                      position: "absolute",
+                      inset: 0,
+                      borderRadius,
+                      border: `${borderWidth * 1.5}px solid rgba(220,220,220,0.6)`,
+                      pointerEvents: "none",
+                      zIndex: 2
+                    }
+                  }
+                ),
+                slidesMode ? /* @__PURE__ */ jsx(
+                  "div",
+                  {
+                    style: {
+                      position: "absolute",
+                      top: chromeHeight,
+                      left: 0,
+                      width: deviceWidth * screens.length,
+                      height: contentHeight,
+                      display: "flex",
+                      transform: `translateX(${slideOffset}px)`
+                    },
+                    children: screens.map((url, i) => /* @__PURE__ */ jsx(
+                      "div",
+                      {
+                        style: {
+                          width: deviceWidth,
+                          height: contentHeight,
+                          flexShrink: 0
+                        },
+                        children: /* @__PURE__ */ jsx(
+                          ProductSurface,
+                          {
+                            mediaUrl: url,
+                            progress,
+                            width: deviceWidth,
+                            height: contentHeight,
+                            fit: screenFit,
+                            focusX: screenFocusX,
+                            focusY: screenFocusY,
+                            motion: "still",
+                            accent,
+                            font,
+                            placeholder
+                          }
+                        )
+                      },
+                      i
+                    ))
+                  }
+                ) : /* @__PURE__ */ jsx("div", { style: { position: "absolute", top: chromeHeight, left: 0, width: deviceWidth, height: contentHeight }, children: /* @__PURE__ */ jsx(
+                  ProductSurface,
+                  {
+                    mediaUrl: screenMediaUrl,
+                    progress,
+                    width: deviceWidth,
+                    height: contentHeight,
+                    fit: screenFit,
+                    focusX: screenFocusX,
+                    focusY: screenFocusY,
+                    motion: screenMotion,
+                    calloutText: screenCalloutText,
+                    calloutX: screenCalloutX,
+                    calloutY: screenCalloutY,
+                    accent,
+                    font,
+                    placeholder
+                  }
+                ) })
+              ]
+            }
+          )
+        }
+      )
+    }
+  );
+};
+
+// src/visual-system/scene-templates/showcase-web.tsx
+import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+var ShowcaseWebTemplate = ({
+  variables,
+  style,
+  progress,
+  motionProgress = progress,
+  beatIntensity,
+  width,
+  height,
+  textArchetype,
+  safeZone,
+  sceneDuration,
+  backgroundEffect,
+  isPlaying
+}) => {
+  const tokens = resolveTokens(style);
+  const { primary, secondary, foreground, font, background } = tokens;
+  const textColor = foreground;
+  const screenMediaUrl = String(variables.screenMediaUrl || "");
+  const extraScreens = [
+    String(variables.screen1Url || ""),
+    String(variables.screen2Url || "")
+  ].filter(Boolean);
+  const screens = extraScreens.length > 0 && screenMediaUrl ? [screenMediaUrl, ...extraScreens] : extraScreens;
+  const frame = String(variables.frame || "browser").toLowerCase() === "tablet" ? "tablet" : "browser";
+  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: String(variables.texts || ""),
+            isPlaying,
+            beatIntensity
+          }
+        ),
+        /* @__PURE__ */ jsx2(
+          TemplateText,
+          {
+            motionProgress,
+            typeTreatment: tokens.preset.type,
+            archetype: textArchetype ?? "subtle",
+            text: String(variables.texts ?? ""),
+            progress,
+            sceneDuration: sceneDuration ?? 3,
+            width,
+            height,
+            position: "top",
+            sizeRole: "headline",
+            safeZone,
+            font,
+            color: textColor,
+            beatIntensity
+          }
+        ),
+        /* @__PURE__ */ jsx2(
+          WebMockup,
+          {
+            progress,
+            width,
+            height,
+            frame,
+            screenMediaUrl,
+            screens,
+            addressBarUrl: String(variables.addressBarUrl || ""),
+            font,
+            accent: primary,
+            secondary,
+            bg: background.type === "solid" ? background.color : void 0,
+            beatIntensity,
+            screenFit: variables.screenFit === "contain" ? "contain" : "cover",
+            screenFocusX: Number(variables.screenFocusX ?? 50),
+            screenFocusY: Number(variables.screenFocusY ?? 50),
+            screenMotion: resolveProductSurfaceMotion(variables.screenMotion),
+            screenCalloutText: String(variables.screenCalloutText || ""),
+            screenCalloutX: Number(variables.screenCalloutX ?? 70),
+            screenCalloutY: Number(variables.screenCalloutY ?? 35)
+          }
+        )
+      ]
+    }
+  );
+};
+export {
+  ShowcaseWebTemplate
+};