@vanillaskyai/video 0.1.0

package/dist/social-review-stack-FDYZGZTJ.js

@@ -0,0 +1,239 @@
+import {
+  stripPipe
+} from "./chunk-S7HFLYNN.js";
+import {
+  SceneBackground,
+  getMediaBackgroundProps
+} from "./chunk-IFOW65Z6.js";
+import {
+  accessibleTextColor,
+  withOpacity
+} from "./chunk-ABZACD4G.js";
+import {
+  SPRING_SNAPPY,
+  interpolate,
+  spring
+} from "./chunk-XTOXFMLM.js";
+import {
+  lighten,
+  resolveTokens
+} from "./chunk-FNAEQ7QO.js";
+
+// src/visual-system/primitives/social/ReviewStack.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+var CLAMP = {
+  extrapolateLeft: "clamp",
+  extrapolateRight: "clamp"
+};
+var ROTATIONS = [-1.4, 0.8, -0.7, 1.1, -0.9];
+var ReviewStack = ({
+  progress,
+  width,
+  height,
+  reviews,
+  starColor = "#facc15",
+  surfaceElevated,
+  foreground,
+  muted,
+  beatIntensity = 0
+}) => {
+  const dim = Math.min(width, height);
+  const s = dim / 1080;
+  const cardBg = surfaceElevated || lighten("#0a0a0f", 0.08);
+  const borderColor = lighten("#0a0a0f", 0.15);
+  const textPrimary = accessibleTextColor(cardBg, foreground);
+  const textSecondary = accessibleTextColor(cardBg, muted);
+  const isPortrait = height > width;
+  const cardWidth = Math.min(
+    width * (isPortrait ? 0.82 : 0.64),
+    dim * (isPortrait ? 0.78 : 0.9)
+  );
+  const cardPad = dim * 0.028;
+  const rowGap = Math.min(
+    dim * 0.28,
+    height * 0.55 / Math.max(reviews.length - 1, 1)
+  );
+  const beatScale = 1 + beatIntensity * 0.01;
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      style: {
+        position: "absolute",
+        inset: 0,
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center"
+      },
+      children: reviews.map((review, i) => {
+        const cardStart = 0.02 + i * 0.1;
+        const cardEnd = cardStart + 0.16;
+        const cardP = spring(
+          interpolate(progress, [cardStart, cardEnd], [0, 1], CLAMP),
+          SPRING_SNAPPY
+        );
+        const cardScale = interpolate(cardP, [0, 1], [0.9, 1]);
+        const cardOpacity = Math.min(1, cardP);
+        const cardX = interpolate(cardP, [0, 1], [(i % 2 === 0 ? -1 : 1) * 54 * s, 0]);
+        const rotation = ROTATIONS[i % ROTATIONS.length];
+        const rowOffset = (i - (reviews.length - 1) / 2) * rowGap;
+        const stars = review.stars == null ? 5 : Math.max(0, Math.min(5, Math.round(review.stars)));
+        const title = stripPipe(review.title || review.quote || "");
+        const body = stripPipe(review.body || "");
+        const author = stripPipe(review.author || "");
+        return /* @__PURE__ */ jsxs(
+          "div",
+          {
+            "data-review-card": i,
+            style: {
+              position: "absolute",
+              width: cardWidth,
+              padding: cardPad,
+              backgroundColor: cardBg,
+              borderRadius: dim * 0.018,
+              border: `1px solid ${borderColor}`,
+              boxShadow: `0 ${dim * 0.01}px ${dim * 0.04}px rgba(0,0,0,0.4)`,
+              transform: `translateX(${cardX}px) translateY(${rowOffset}px) rotate(${rotation}deg) scale(${cardScale * beatScale})`,
+              opacity: cardOpacity,
+              zIndex: i,
+              top: "50%",
+              left: "50%",
+              marginLeft: -(cardWidth / 2),
+              marginTop: -(dim * 0.11)
+            },
+            children: [
+              /* @__PURE__ */ jsx("div", { style: { display: "flex", gap: 3 * s, marginBottom: dim * 0.011 }, children: Array.from({ length: 5 }).map((_, si) => /* @__PURE__ */ jsx(
+                "span",
+                {
+                  style: {
+                    color: si < stars ? starColor : withOpacity(textPrimary, 0.15),
+                    fontSize: dim * 0.03,
+                    lineHeight: 1
+                  },
+                  children: "\u2605"
+                },
+                si
+              )) }),
+              /* @__PURE__ */ jsx(
+                "div",
+                {
+                  style: {
+                    fontSize: dim * 0.034,
+                    fontWeight: 700,
+                    color: textPrimary,
+                    marginBottom: dim * 9e-3,
+                    lineHeight: 1.3
+                  },
+                  children: title
+                }
+              ),
+              body && /* @__PURE__ */ jsx(
+                "div",
+                {
+                  style: {
+                    fontSize: dim * 0.026,
+                    color: textSecondary,
+                    lineHeight: 1.5,
+                    marginBottom: dim * 0.014
+                  },
+                  children: body
+                }
+              ),
+              author && /* @__PURE__ */ jsx(
+                "div",
+                {
+                  style: {
+                    fontSize: dim * 0.024,
+                    color: textSecondary,
+                    fontWeight: 500
+                  },
+                  children: author
+                }
+              )
+            ]
+          },
+          i
+        );
+      })
+    }
+  );
+};
+
+// src/visual-system/scene-templates/social-review-stack.tsx
+import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+function buildReviews(variables) {
+  const reviews = [];
+  for (let i = 1; i <= 3; i++) {
+    const title = String(variables[`review${i}Title`] || "");
+    if (!title) continue;
+    reviews.push({
+      title,
+      body: String(variables[`review${i}Body`] || ""),
+      author: String(variables[`review${i}Author`] || "")
+    });
+  }
+  return reviews;
+}
+var SocialReviewStackTemplate = ({
+  variables,
+  style,
+  progress,
+  beatIntensity,
+  width,
+  height,
+  sceneDuration,
+  isPlaying = true
+}) => {
+  const { font, foreground, surfaceElevated, muted } = resolveTokens(style);
+  const starColor = "#facc15";
+  const reviews = buildReviews(variables);
+  const gradSeed = String(variables.review1Title || "review").split("").reduce((acc, c) => acc + c.charCodeAt(0), 0);
+  return /* @__PURE__ */ jsxs2(
+    "div",
+    {
+      style: {
+        width,
+        height,
+        backgroundColor: "#000",
+        position: "relative",
+        overflow: "hidden",
+        fontFamily: font,
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center"
+      },
+      children: [
+        /* @__PURE__ */ jsx2(
+          SceneBackground,
+          {
+            style,
+            progress,
+            sceneDuration,
+            width,
+            height,
+            ...getMediaBackgroundProps(variables),
+            seed: gradSeed,
+            isPlaying,
+            beatIntensity
+          }
+        ),
+        /* @__PURE__ */ jsx2(
+          ReviewStack,
+          {
+            progress,
+            width,
+            height,
+            reviews,
+            starColor,
+            surfaceElevated,
+            foreground,
+            muted,
+            beatIntensity
+          }
+        )
+      ]
+    }
+  );
+};
+export {
+  SocialReviewStackTemplate
+};

package/dist/social-testimonial-OQ7N52GJ.js

@@ -0,0 +1,284 @@
+import {
+  stripPipe
+} from "./chunk-S7HFLYNN.js";
+import {
+  SceneBackground,
+  getMediaBackgroundProps
+} from "./chunk-IFOW65Z6.js";
+import {
+  accessibleTextColor,
+  autoTextColor,
+  withOpacity
+} from "./chunk-ABZACD4G.js";
+import {
+  SPRING_SMOOTH,
+  SPRING_SNAPPY,
+  interpolate,
+  spring
+} from "./chunk-XTOXFMLM.js";
+import {
+  TOKEN_DEFAULTS,
+  lighten,
+  resolveTokens
+} from "./chunk-FNAEQ7QO.js";
+
+// src/visual-system/primitives/social/TestimonialCard.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+var CLAMP = { extrapolateLeft: "clamp", extrapolateRight: "clamp" };
+var TestimonialCard = ({
+  progress,
+  quote: rawQuote,
+  authorName: rawAuthorName,
+  authorRole: rawAuthorRole = "",
+  avatarColor = "#ec4899",
+  accent = TOKEN_DEFAULTS.primary,
+  surfaceElevated,
+  foreground,
+  muted,
+  width,
+  height,
+  beatIntensity = 0
+}) => {
+  const dim = Math.min(width, height);
+  const s = dim / 1080;
+  const quote = stripPipe(rawQuote || "");
+  const authorName = stripPipe(rawAuthorName || "");
+  const authorRole = stripPipe(rawAuthorRole || "");
+  const initialChar = authorName.charAt(0).toUpperCase();
+  const cardBg = surfaceElevated || lighten("#0a0a0f", 0.08);
+  const borderColor = lighten("#0a0a0f", 0.15);
+  const textPrimary = accessibleTextColor(cardBg, foreground);
+  const textSecondary = accessibleTextColor(cardBg, muted);
+  const quoteMarkP = spring(interpolate(progress, [0.02, 0.2], [0, 1], CLAMP), SPRING_SNAPPY);
+  const quoteMarkScale = interpolate(quoteMarkP, [0, 1], [0.3, 1]);
+  const quoteMarkOpacity = quoteMarkP;
+  const lineWidth = interpolate(progress, [0.35, 0.55], [0, 100], CLAMP);
+  const authorP = spring(interpolate(progress, [0.45, 0.7], [0, 1], CLAMP), SPRING_SMOOTH);
+  const authorY = interpolate(authorP, [0, 1], [20 * s, 0]);
+  const authorOpacity = authorP;
+  const cardWidth = Math.min(width * 0.75, dim * 0.85);
+  const cardPad = dim * 0.045;
+  const avatarSize = dim * 0.055;
+  const cardP = spring(interpolate(progress, [0, 0.15], [0, 1], CLAMP), SPRING_SMOOTH);
+  const cardScale = interpolate(cardP, [0, 1], [0.92, 1]);
+  const cardOpacity = interpolate(cardP, [0, 1], [0, 1]);
+  const beatScale = 1 + beatIntensity * 0.01;
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      style: {
+        position: "absolute",
+        inset: 0,
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center"
+      },
+      children: /* @__PURE__ */ jsxs(
+        "div",
+        {
+          style: {
+            width: cardWidth,
+            padding: cardPad,
+            backgroundColor: cardBg,
+            borderRadius: dim * 0.02,
+            border: `1px solid ${borderColor}`,
+            boxShadow: `0 ${dim * 0.01}px ${dim * 0.04}px rgba(0,0,0,0.4)`,
+            position: "relative",
+            zIndex: 1,
+            transform: `scale(${cardScale * beatScale})`,
+            opacity: cardOpacity
+          },
+          children: [
+            /* @__PURE__ */ jsx(
+              "div",
+              {
+                style: {
+                  fontSize: dim * 0.08,
+                  lineHeight: 0.8,
+                  color: accent,
+                  fontWeight: 700,
+                  marginBottom: dim * 0.018,
+                  transform: `scale(${quoteMarkScale})`,
+                  opacity: quoteMarkOpacity,
+                  transformOrigin: "left top"
+                },
+                children: "\u201C"
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              "div",
+              {
+                style: {
+                  fontSize: dim * 0.038,
+                  lineHeight: 1.6,
+                  color: textPrimary,
+                  fontWeight: 500,
+                  marginBottom: dim * 0.032,
+                  display: "flex",
+                  flexWrap: "wrap",
+                  gap: `0 ${dim * 7e-3}px`
+                },
+                children: quote.split(/\s+/).filter(Boolean).map((word, i, arr) => {
+                  const wStart = 0.2 + i * (0.3 / Math.max(arr.length, 1));
+                  const wEnd = Math.min(wStart + 0.08, 0.55);
+                  const wordOpacity = interpolate(progress, [wStart, wEnd], [0, 1], CLAMP);
+                  const wordY = interpolate(progress, [wStart, wEnd], [8 * s, 0], CLAMP);
+                  return /* @__PURE__ */ jsx(
+                    "span",
+                    {
+                      style: {
+                        opacity: wordOpacity,
+                        transform: `translateY(${wordY}px)`,
+                        display: "inline-block"
+                      },
+                      children: word
+                    },
+                    i
+                  );
+                })
+              }
+            ),
+            /* @__PURE__ */ jsx("div", { style: { display: "flex", justifyContent: "center", marginBottom: dim * 0.028 }, children: /* @__PURE__ */ jsx("div", { style: { height: 1, width: `${lineWidth}%`, backgroundColor: borderColor } }) }),
+            /* @__PURE__ */ jsxs(
+              "div",
+              {
+                style: {
+                  display: "flex",
+                  alignItems: "center",
+                  gap: dim * 0.016,
+                  opacity: authorOpacity,
+                  transform: `translateY(${authorY}px)`
+                },
+                children: [
+                  /* @__PURE__ */ jsx(
+                    "div",
+                    {
+                      style: {
+                        width: avatarSize,
+                        height: avatarSize,
+                        borderRadius: "50%",
+                        backgroundColor: avatarColor,
+                        display: "flex",
+                        alignItems: "center",
+                        justifyContent: "center",
+                        fontSize: avatarSize * 0.45,
+                        fontWeight: 700,
+                        color: autoTextColor(avatarColor),
+                        flexShrink: 0
+                      },
+                      children: initialChar
+                    }
+                  ),
+                  /* @__PURE__ */ jsxs("div", { children: [
+                    /* @__PURE__ */ jsx(
+                      "div",
+                      {
+                        style: {
+                          fontSize: dim * 0.032,
+                          fontWeight: 600,
+                          color: textPrimary,
+                          marginBottom: dim * 3e-3
+                        },
+                        children: authorName
+                      }
+                    ),
+                    authorRole && /* @__PURE__ */ jsx("div", { style: { fontSize: dim * 0.024, color: textSecondary }, children: authorRole })
+                  ] })
+                ]
+              }
+            )
+          ]
+        }
+      )
+    }
+  );
+};
+
+// src/visual-system/scene-templates/social-testimonial.tsx
+import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+var SocialTestimonialTemplate = ({
+  variables,
+  style,
+  progress,
+  beatIntensity,
+  width,
+  height,
+  sceneDuration,
+  isPlaying = true
+}) => {
+  const dim = Math.min(width, height);
+  const { primary, foreground, font, surfaceElevated, muted } = resolveTokens(style);
+  const quote = stripPipe(String(variables.quote || ""));
+  const gradSeed = quote.split("").reduce((acc, c) => acc + c.charCodeAt(0), 0);
+  const authorName = String(variables.authorName || "Jessica Torres");
+  const authorRole = String(variables.authorRole || "");
+  const avatarBg = primary;
+  return /* @__PURE__ */ jsxs2(
+    "div",
+    {
+      style: {
+        width,
+        height,
+        backgroundColor: "#000",
+        position: "relative",
+        overflow: "hidden",
+        fontFamily: font,
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center"
+      },
+      children: [
+        /* @__PURE__ */ jsx2(
+          SceneBackground,
+          {
+            style,
+            progress,
+            sceneDuration,
+            width,
+            height,
+            ...getMediaBackgroundProps(variables),
+            seed: gradSeed,
+            isPlaying,
+            beatIntensity
+          }
+        ),
+        /* @__PURE__ */ jsx2(
+          "div",
+          {
+            style: {
+              position: "absolute",
+              width: dim * 0.9,
+              height: dim * 0.7,
+              borderRadius: "50%",
+              background: `radial-gradient(ellipse, ${withOpacity(primary, 0.15)} 0%, ${withOpacity(primary, 0.05)} 40%, transparent 70%)`,
+              top: "50%",
+              left: "50%",
+              transform: "translate(-50%, -50%)",
+              pointerEvents: "none"
+            }
+          }
+        ),
+        /* @__PURE__ */ jsx2(
+          TestimonialCard,
+          {
+            progress,
+            quote,
+            authorName,
+            authorRole,
+            avatarColor: avatarBg,
+            accent: primary,
+            surfaceElevated,
+            foreground,
+            muted,
+            width,
+            height,
+            beatIntensity
+          }
+        )
+      ]
+    }
+  );
+};
+export {
+  SocialTestimonialTemplate
+};