@vanillaskyai/video 0.1.0

package/dist/social-milestone-XI2QE5BO.js

@@ -0,0 +1,292 @@
+import {
+  stripPipe
+} from "./chunk-S7HFLYNN.js";
+import {
+  SceneBackground,
+  getMediaBackgroundProps
+} from "./chunk-IFOW65Z6.js";
+import {
+  ConfettiLayer
+} from "./chunk-CJ7F2CE6.js";
+import "./chunk-QAAO7OAY.js";
+import {
+  Emoji,
+  renderWithEmoji
+} from "./chunk-L5BTTCZV.js";
+import {
+  accessibleTextColor,
+  withOpacity
+} from "./chunk-ABZACD4G.js";
+import {
+  SPRING_BOUNCY,
+  SPRING_SMOOTH,
+  interpolate,
+  spring
+} from "./chunk-XTOXFMLM.js";
+import {
+  TOKEN_DEFAULTS,
+  resolveTokens
+} from "./chunk-FNAEQ7QO.js";
+
+// src/visual-system/primitives/social/MilestoneBadge.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+var CLAMP = {
+  extrapolateLeft: "clamp",
+  extrapolateRight: "clamp"
+};
+var MilestoneBadge = ({
+  progress,
+  width,
+  height,
+  targetNumber,
+  label: rawLabel,
+  prefix = "",
+  suffix = "",
+  startNumber,
+  badgeText: rawBadgeText = "",
+  badgeEmoji = "\u{1F389}",
+  accent = TOKEN_DEFAULTS.primary,
+  hasMedia = false,
+  foreground = TOKEN_DEFAULTS.foreground,
+  surfaceElevated = TOKEN_DEFAULTS.surfaceElevated,
+  beatIntensity = 0,
+  confettiBgColor
+}) => {
+  const dim = Math.min(width, height);
+  const s = dim / 1080;
+  const label = stripPipe(rawLabel || "");
+  const badgeText = stripPipe(rawBadgeText || "");
+  const safeTarget = Number.isFinite(targetNumber) ? targetNumber : 0;
+  const safeStart = startNumber != null && Number.isFinite(startNumber) ? startNumber : Math.max(0, Math.round(safeTarget * 0.98));
+  const mainTextColor = hasMedia ? "#FFFFFF" : foreground;
+  const pillTextColor = accessibleTextColor(surfaceElevated, foreground);
+  const mediaTextShadow = hasMedia ? "0 2px 8px rgba(0,0,0,0.55), 0 6px 16px rgba(0,0,0,0.35)" : void 0;
+  const followerCount = Math.round(
+    interpolate(progress, [0.056, 0.556], [safeStart, safeTarget], CLAMP)
+  );
+  const hasHitTarget = followerCount >= safeTarget;
+  const numberScale = spring(
+    interpolate(progress, [0, 0.25], [0, 1], CLAMP),
+    SPRING_SMOOTH
+  );
+  const glowIntensity = interpolate(progress, [0.33, 0.556], [0, 1], CLAMP);
+  const labelOpacity = interpolate(progress, [0, 0.167], [0, 1], CLAMP);
+  const badgeP = hasHitTarget ? spring(
+    interpolate(progress, [0.556, 0.85], [0, 1], CLAMP),
+    SPRING_BOUNCY
+  ) : 0;
+  const badgeScale = interpolate(badgeP, [0, 0.5, 1], [0, 1.2, 1], CLAMP);
+  const badgeOpacity = badgeP;
+  const confettiActive = hasHitTarget;
+  const confettiProgress = confettiActive ? Math.max(0, (progress - 0.556) / 0.444) : 0;
+  const beatScale = 1 + beatIntensity * 0.02;
+  const numberDisplay = `${prefix}${followerCount.toLocaleString()}${suffix}`;
+  const fontSize = numberDisplay.length > 9 ? dim * 0.09 : numberDisplay.length > 6 ? dim * 0.12 : dim * 0.16;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      style: {
+        position: "absolute",
+        inset: 0,
+        display: "flex",
+        justifyContent: "center",
+        alignItems: "center"
+      },
+      children: [
+        confettiActive && /* @__PURE__ */ jsx(
+          ConfettiLayer,
+          {
+            progress: confettiProgress,
+            width,
+            height,
+            beatIntensity,
+            bgColor: hasMedia ? void 0 : confettiBgColor || accent
+          }
+        ),
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            style: {
+              display: "flex",
+              flexDirection: "column",
+              alignItems: "center",
+              gap: dim * 0.015,
+              transform: `scale(${numberScale * beatScale})`,
+              position: "relative",
+              zIndex: 1,
+              width: "100%"
+            },
+            children: [
+              label && /* @__PURE__ */ jsx(
+                "div",
+                {
+                  style: {
+                    color: mainTextColor,
+                    fontSize: dim * 0.032,
+                    fontWeight: 500,
+                    textTransform: "uppercase",
+                    letterSpacing: dim * 4e-3,
+                    opacity: labelOpacity,
+                    textAlign: "center",
+                    ...mediaTextShadow ? { textShadow: mediaTextShadow } : {}
+                  },
+                  children: label
+                }
+              ),
+              /* @__PURE__ */ jsxs(
+                "div",
+                {
+                  style: {
+                    color: mainTextColor,
+                    fontSize,
+                    fontWeight: 800,
+                    letterSpacing: dim * -4e-3,
+                    lineHeight: 1,
+                    position: "relative",
+                    maxWidth: "90%",
+                    textAlign: "center",
+                    ...mediaTextShadow ? { textShadow: mediaTextShadow } : {}
+                  },
+                  children: [
+                    /* @__PURE__ */ jsx(
+                      "div",
+                      {
+                        style: {
+                          position: "absolute",
+                          top: "50%",
+                          left: "50%",
+                          transform: "translate(-50%, -50%)",
+                          width: dim * 0.5,
+                          height: dim * 0.2,
+                          borderRadius: "50%",
+                          background: `radial-gradient(ellipse, ${withOpacity(accent, glowIntensity * 0.2)} 0%, ${withOpacity(accent, glowIntensity * 0.05)} 50%, transparent 70%)`,
+                          pointerEvents: "none"
+                        }
+                      }
+                    ),
+                    /* @__PURE__ */ jsx("span", { style: { position: "relative" }, children: numberDisplay })
+                  ]
+                }
+              ),
+              badgeText && /* @__PURE__ */ jsxs(
+                "div",
+                {
+                  style: {
+                    position: "absolute",
+                    top: "100%",
+                    left: "50%",
+                    transform: `translateX(-50%) scale(${badgeScale})`,
+                    opacity: badgeOpacity,
+                    backgroundColor: surfaceElevated,
+                    border: "1px solid rgba(255,255,255,0.15)",
+                    borderRadius: 100 * s,
+                    padding: `${dim * 0.015}px ${dim * 0.037}px`,
+                    display: "flex",
+                    alignItems: "center",
+                    justifyContent: "center",
+                    gap: dim * 0.011,
+                    whiteSpace: "nowrap",
+                    marginTop: dim * 0.02
+                  },
+                  children: [
+                    /* @__PURE__ */ jsx(Emoji, { char: badgeEmoji, size: dim * 0.045, verticalAlign: "middle" }),
+                    /* @__PURE__ */ jsx(
+                      "span",
+                      {
+                        style: {
+                          color: pillTextColor,
+                          fontSize: dim * 0.036,
+                          fontWeight: 700,
+                          letterSpacing: dim * 5e-4
+                        },
+                        children: renderWithEmoji(badgeText, dim * 0.036)
+                      }
+                    )
+                  ]
+                }
+              )
+            ]
+          }
+        )
+      ]
+    }
+  );
+};
+
+// src/visual-system/scene-templates/social-milestone.tsx
+import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+var SocialMilestoneTemplate = ({
+  variables,
+  style,
+  progress,
+  beatIntensity,
+  width,
+  height,
+  sceneDuration,
+  isPlaying = true,
+  backgroundEffect
+}) => {
+  const { primary, secondary, foreground, surfaceElevated, font } = resolveTokens(style);
+  const label = stripPipe(String(variables.label || "Followers"));
+  const gradSeed = label.split("").reduce((acc, c) => acc + c.charCodeAt(0), 0);
+  const targetNumber = Number(variables.targetNumber) || 1e4;
+  const rawStart = variables.startNumber != null ? Number(variables.startNumber) : void 0;
+  const badgeText = stripPipe(String(variables.badgeText || ""));
+  const badgeEmoji = String(variables.badgeEmoji || "\u{1F389}");
+  const hasMedia = !!String(variables.mediaUrl || "").trim() && String(variables.mediaType || "auto") !== "gradient";
+  return /* @__PURE__ */ jsxs2(
+    "div",
+    {
+      style: {
+        width,
+        height,
+        backgroundColor: "#000",
+        position: "relative",
+        overflow: "hidden",
+        fontFamily: font,
+        display: "flex",
+        justifyContent: "center",
+        alignItems: "center"
+      },
+      children: [
+        /* @__PURE__ */ jsx2(
+          SceneBackground,
+          {
+            style,
+            progress,
+            sceneDuration,
+            width,
+            height,
+            ...getMediaBackgroundProps(variables),
+            backgroundEffect,
+            seed: gradSeed,
+            isPlaying,
+            beatIntensity
+          }
+        ),
+        /* @__PURE__ */ jsx2(
+          MilestoneBadge,
+          {
+            progress,
+            width,
+            height,
+            targetNumber,
+            label,
+            startNumber: rawStart,
+            badgeText,
+            badgeEmoji,
+            accent: primary,
+            hasMedia,
+            foreground,
+            surfaceElevated,
+            beatIntensity,
+            confettiBgColor: secondary
+          }
+        )
+      ]
+    }
+  );
+};
+export {
+  SocialMilestoneTemplate
+};

package/dist/social-notification-2UOHQCUY.js

@@ -0,0 +1,244 @@
+import {
+  stripPipe
+} from "./chunk-S7HFLYNN.js";
+import {
+  SceneBackground,
+  getMediaBackgroundProps
+} from "./chunk-IFOW65Z6.js";
+import {
+  Emoji,
+  renderWithEmoji
+} from "./chunk-L5BTTCZV.js";
+import "./chunk-ABZACD4G.js";
+import {
+  SPRING_SMOOTH,
+  interpolate,
+  spring
+} from "./chunk-XTOXFMLM.js";
+import {
+  resolveTokens
+} from "./chunk-FNAEQ7QO.js";
+
+// src/visual-system/primitives/social/NotificationCard.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+var CLAMP = { extrapolateLeft: "clamp", extrapolateRight: "clamp" };
+var NotificationCard = ({
+  progress,
+  motionProgress = progress,
+  appName: rawAppName,
+  appIcon: rawAppIcon,
+  message: rawMessage,
+  width,
+  height,
+  beatIntensity = 0
+}) => {
+  const dim = Math.min(width, height);
+  const appName = stripPipe(rawAppName);
+  const appIcon = (rawAppIcon || "\u{1F514}").trim() || "\u{1F514}";
+  const message = rawMessage;
+  const presentationProgress = Math.max(progress, motionProgress);
+  const cardSpring = spring(interpolate(presentationProgress, [0.05, 0.2], [0, 1], CLAMP), SPRING_SMOOTH);
+  const cardOpacity = interpolate(presentationProgress, [0.05, 0.15], [0, 1], CLAMP);
+  const cardScale = interpolate(cardSpring, [0, 1], [0.95, 1]);
+  const cardLift = (1 - cardSpring) * 12;
+  const headerOpacity = interpolate(presentationProgress, [0.18, 0.3], [0, 1], CLAMP);
+  const words = message.split(/\s+/).filter(Boolean);
+  const wordStart = 0.3;
+  const wordEnd = 0.7;
+  const wordSlice = (wordEnd - wordStart) / Math.max(words.length, 1);
+  const cardW = Math.min(width * 0.88, dim * 0.9);
+  const cardPad = dim * 0.038;
+  const cardRadius = dim * 0.025;
+  const iconSize = dim * 0.045;
+  const iconRadius = iconSize * 0.28;
+  const iconFont = iconSize * 0.66;
+  const appFontSize = dim * 0.03;
+  const timeFontSize = dim * 0.026;
+  const msgFontSize = dim * 0.04;
+  const beatGlow = 1 + beatIntensity * 0.3;
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-notification-card": "true",
+      style: {
+        position: "absolute",
+        top: "50%",
+        left: (width - cardW) / 2,
+        width: cardW,
+        transform: `translateY(calc(-50% + ${cardLift}px))`,
+        opacity: cardOpacity
+      },
+      children: /* @__PURE__ */ jsxs(
+        "div",
+        {
+          style: {
+            backgroundColor: "rgba(245,242,238,0.92)",
+            borderRadius: cardRadius,
+            padding: cardPad,
+            boxShadow: `0 ${dim * 0.012}px ${dim * 0.05 * beatGlow}px rgba(0,0,0,0.18)`,
+            transform: `scale(${cardScale})`,
+            transformOrigin: "center top",
+            display: "flex",
+            flexDirection: "column",
+            gap: dim * 0.018
+          },
+          children: [
+            /* @__PURE__ */ jsxs(
+              "div",
+              {
+                "data-notification-header": "true",
+                style: {
+                  display: "flex",
+                  alignItems: "center",
+                  gap: dim * 0.014,
+                  opacity: headerOpacity
+                },
+                children: [
+                  /* @__PURE__ */ jsx(
+                    "div",
+                    {
+                      style: {
+                        width: iconSize,
+                        height: iconSize,
+                        borderRadius: iconRadius,
+                        backgroundColor: "rgba(0,0,0,0.06)",
+                        display: "flex",
+                        alignItems: "center",
+                        justifyContent: "center",
+                        lineHeight: 1,
+                        fontSize: iconFont
+                      },
+                      children: /* @__PURE__ */ jsx(Emoji, { char: appIcon, size: iconFont, verticalAlign: "middle" })
+                    }
+                  ),
+                  /* @__PURE__ */ jsx(
+                    "span",
+                    {
+                      style: {
+                        fontSize: appFontSize,
+                        fontWeight: 600,
+                        color: "rgba(0,0,0,0.65)",
+                        letterSpacing: 0.2
+                      },
+                      children: appName
+                    }
+                  ),
+                  /* @__PURE__ */ jsx(
+                    "span",
+                    {
+                      style: {
+                        fontSize: timeFontSize,
+                        color: "rgba(0,0,0,0.4)",
+                        marginLeft: "auto"
+                      },
+                      children: "now"
+                    }
+                  )
+                ]
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              "div",
+              {
+                style: {
+                  fontSize: msgFontSize,
+                  fontWeight: 400,
+                  color: "#1c1c1e",
+                  lineHeight: 1.28,
+                  display: "flex",
+                  flexWrap: "wrap",
+                  gap: `0 ${dim * 9e-3}px`
+                },
+                children: words.map((word, wi) => {
+                  const wordP = interpolate(
+                    presentationProgress,
+                    [wordStart + wi * wordSlice, wordStart + wi * wordSlice + wordSlice * 0.6],
+                    [0, 1],
+                    CLAMP
+                  );
+                  return /* @__PURE__ */ jsx(
+                    "span",
+                    {
+                      style: {
+                        opacity: wordP,
+                        transform: `translateY(${(1 - wordP) * 4}px)`,
+                        display: "inline-block"
+                      },
+                      children: renderWithEmoji(word, msgFontSize)
+                    },
+                    wi
+                  );
+                })
+              }
+            )
+          ]
+        }
+      )
+    }
+  );
+};
+
+// src/visual-system/scene-templates/social-notification.tsx
+import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+var SocialNotificationTemplate = ({
+  variables,
+  style,
+  progress,
+  motionProgress = progress,
+  beatIntensity,
+  width,
+  height,
+  sceneDuration,
+  isPlaying = true,
+  backgroundEffect
+}) => {
+  const { font } = resolveTokens(style);
+  const message = String(variables.message || "");
+  const gradSeed = message.split("").reduce((acc, c) => acc + c.charCodeAt(0), 0);
+  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: gradSeed,
+            isPlaying,
+            beatIntensity
+          }
+        ),
+        /* @__PURE__ */ jsx2(
+          NotificationCard,
+          {
+            progress,
+            motionProgress,
+            appName: String(variables.appName || "Reminder"),
+            appIcon: String(variables.appIcon || "\u{1F514}"),
+            message,
+            width,
+            height,
+            beatIntensity
+          }
+        )
+      ]
+    }
+  );
+};
+export {
+  SocialNotificationTemplate
+};