@make-pictures/kits 0.0.0-stage → 2.0.1

package/dist/chunk-AHA23PHC.mjs

@@ -0,0 +1,678 @@
+// packages/kits/src/kinetic-typography/WordByWordStage.tsx
+import { useMemo } from "react";
+import {
+  AbsoluteFill,
+  interpolate,
+  spring,
+  useCurrentFrame,
+  useVideoConfig
+} from "remotion";
+import {
+  FONTS,
+  SPRING_PRESETS,
+  STUDIO_THEME,
+  THEME,
+  useStudioFontsReady
+} from "@make-pictures/core";
+import { getSceneVoiceover } from "@make-pictures/core";
+import { jsx, jsxs } from "react/jsx-runtime";
+function buildFallbackWords(text, fps, durationInFrames) {
+  const tokens = text.trim().split(/\s+/).filter(Boolean);
+  if (tokens.length === 0) return [];
+  const usableStart = Math.min(12, Math.floor(durationInFrames * 0.08));
+  const usableSpan = Math.max(tokens.length * 6, durationInFrames - usableStart - 16);
+  const perWord = usableSpan / tokens.length;
+  return tokens.map((token, idx) => {
+    const sf = Math.round(usableStart + idx * perWord);
+    const ef = Math.max(sf + 4, Math.round(usableStart + (idx + 0.86) * perWord));
+    return {
+      word: token,
+      normalizedWord: token.replace(/^[.,!?;:"'()[\]{}—–-]+|[.,!?;:"'()[\]{}—–-]+$/g, "").toLowerCase(),
+      start: sf / fps,
+      end: ef / fps,
+      startFrame: sf,
+      endFrame: ef
+    };
+  });
+}
+function groupWordsIntoBeats(words, wordsPerBeat = 4, fps = 60) {
+  if (!words.length) return [];
+  const maxWords = Math.max(2, Math.min(7, Math.round(wordsPerBeat)));
+  const pauseThresholdFrames = Math.round(fps * 0.36);
+  const beats = [];
+  let bucket = [];
+  const flush = () => {
+    if (!bucket.length) return;
+    beats.push({
+      words: bucket,
+      startFrame: bucket[0].startFrame,
+      endFrame: bucket[bucket.length - 1].endFrame
+    });
+    bucket = [];
+  };
+  for (let i = 0; i < words.length; i++) {
+    const curr = words[i];
+    const prev = bucket[bucket.length - 1];
+    if (prev && curr.startFrame - prev.endFrame >= pauseThresholdFrames && bucket.length >= 2) {
+      flush();
+    }
+    bucket.push(curr);
+    const endsSentence = /[.!?;:—]$/.test(curr.word);
+    const endsClause = /[,–]$/.test(curr.word) && bucket.length >= 3;
+    if (bucket.length >= maxWords || endsSentence && bucket.length >= 2 || endsClause) {
+      flush();
+    }
+  }
+  flush();
+  return beats;
+}
+var WordByWordStage = ({
+  words,
+  sceneId,
+  voiceoverManifest,
+  fallbackText,
+  sceneStartFrame = 0,
+  wordsPerBeat = 4,
+  accentColor = STUDIO_THEME.colors.brand[600],
+  variant = "transparent",
+  eyebrow,
+  fontSize,
+  safeBox9x16 = true,
+  enterFrame,
+  startFrame,
+  style
+}) => {
+  const frame = useCurrentFrame();
+  const { fps, width, height, durationInFrames } = useVideoConfig();
+  useStudioFontsReady();
+  const resolvedWords = useMemo(() => {
+    if (words && words.length > 0) return words;
+    if (sceneId) {
+      const vo = getSceneVoiceover(sceneId, voiceoverManifest);
+      if (vo && vo.words.length > 0) return vo.words;
+      if (vo?.text) return buildFallbackWords(vo.text, fps, durationInFrames);
+    }
+    if (fallbackText) {
+      return buildFallbackWords(fallbackText, fps, durationInFrames);
+    }
+    return [];
+  }, [words, sceneId, voiceoverManifest, fallbackText, fps, durationInFrames]);
+  const beats = useMemo(
+    () => groupWordsIntoBeats(resolvedWords, wordsPerBeat, fps),
+    [resolvedWords, wordsPerBeat, fps]
+  );
+  const stageEnter = spring({
+    frame: frame - Math.max(2, startFrame ?? enterFrame ?? 2),
+    fps,
+    config: SPRING_PRESETS.snappy
+  });
+  if (stageEnter <= 5e-3 || beats.length === 0) {
+    return null;
+  }
+  const localFrame = frame - sceneStartFrame;
+  let activeBeatIndex = 0;
+  for (let i = 0; i < beats.length; i++) {
+    const b = beats[i];
+    const nextBeat = beats[i + 1];
+    if (localFrame >= b.startFrame - 4) {
+      activeBeatIndex = i;
+    }
+    if (nextBeat && localFrame < nextBeat.startFrame - 4) {
+      break;
+    }
+  }
+  const activeBeat = beats[activeBeatIndex];
+  const beatEnter = spring({
+    frame: Math.max(0, localFrame - (activeBeat.startFrame - 4)),
+    fps,
+    config: SPRING_PRESETS.snappy
+  });
+  let activeWordIdx = -1;
+  for (let i = 0; i < activeBeat.words.length; i++) {
+    const w = activeBeat.words[i];
+    if (localFrame >= w.startFrame - 1 && localFrame <= w.endFrame + 8) {
+      activeWordIdx = i;
+    }
+  }
+  const isVertical = height > width;
+  const isLight = variant === "light";
+  const textPrimary = isLight ? STUDIO_THEME.colors.text.slate900 : THEME.colors.textPrimary;
+  const resolvedFontSize = fontSize ?? (isVertical ? 64 : 74);
+  const containerPaddingStyle = isVertical && safeBox9x16 ? {
+    paddingLeft: Math.round(44 * (width / 1080)),
+    paddingRight: Math.round((1080 - 906) * (width / 1080)),
+    paddingTop: Math.round(230 * (height / 1920)),
+    paddingBottom: Math.round((1920 - 1370) * (height / 1920))
+  } : {
+    padding: "72px 120px"
+  };
+  const beatProgress = interpolate(
+    localFrame,
+    [activeBeat.startFrame, Math.max(activeBeat.startFrame + 1, activeBeat.endFrame)],
+    [0, 1],
+    { extrapolateLeft: "clamp", extrapolateRight: "clamp" }
+  );
+  return /* @__PURE__ */ jsx(
+    AbsoluteFill,
+    {
+      style: {
+        backgroundColor: variant === "dark" ? THEME.colors.bgPrimary : variant === "light" ? STUDIO_THEME.colors.bgCanvas : "transparent",
+        display: "flex",
+        flexDirection: "column",
+        alignItems: "center",
+        justifyContent: "center",
+        boxSizing: "border-box",
+        opacity: stageEnter,
+        pointerEvents: "none",
+        ...containerPaddingStyle,
+        ...style
+      },
+      children: /* @__PURE__ */ jsxs(
+        "div",
+        {
+          style: {
+            maxWidth: isVertical ? 840 : 1420,
+            width: "100%",
+            display: "flex",
+            flexDirection: "column",
+            alignItems: "center",
+            gap: 24,
+            transform: `translateY(${interpolate(beatEnter, [0, 1], [16, 0]).toFixed(2)}px) scale(${interpolate(stageEnter, [0, 1], [0.95, 1]).toFixed(4)})`
+          },
+          children: [
+            eyebrow && /* @__PURE__ */ jsx(
+              "div",
+              {
+                style: {
+                  fontFamily: FONTS.mono,
+                  fontSize: isVertical ? 18 : 19,
+                  fontWeight: 700,
+                  letterSpacing: "0.08em",
+                  textTransform: "uppercase",
+                  padding: "8px 18px",
+                  borderRadius: 9999,
+                  color: isLight ? accentColor : "#FFFFFF",
+                  backgroundColor: isLight ? `${accentColor}16` : `${accentColor}33`,
+                  border: `1.5px solid ${accentColor}66`
+                },
+                children: eyebrow
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              "div",
+              {
+                style: {
+                  display: "flex",
+                  flexWrap: "wrap",
+                  justifyContent: "center",
+                  alignItems: "center",
+                  gap: isVertical ? "14px 16px" : "16px 22px",
+                  textAlign: "center"
+                },
+                children: activeBeat.words.map((w, idx) => {
+                  const isCurrent = idx === activeWordIdx;
+                  const isPast = localFrame > w.endFrame + 8;
+                  const wordPop = spring({
+                    frame: Math.max(0, localFrame - w.startFrame),
+                    fps,
+                    config: SPRING_PRESETS.micro
+                  });
+                  const scale = isCurrent ? interpolate(wordPop, [0, 1], [0.96, 1.07]) : 1;
+                  const yShift = isCurrent || isPast ? 0 : interpolate(wordPop, [0, 1], [6, 0]);
+                  const wordOpacity = isCurrent ? 1 : isPast ? 0.94 : 0.38;
+                  return /* @__PURE__ */ jsx(
+                    "span",
+                    {
+                      style: {
+                        display: "inline-block",
+                        fontFamily: FONTS.display,
+                        fontSize: resolvedFontSize,
+                        fontWeight: 800,
+                        lineHeight: 1.15,
+                        letterSpacing: "-0.025em",
+                        padding: isCurrent ? "6px 20px" : "6px 8px",
+                        borderRadius: 18,
+                        color: isCurrent ? "#FFFFFF" : textPrimary,
+                        backgroundColor: isCurrent ? accentColor : "transparent",
+                        boxShadow: isCurrent ? `0 14px 36px ${accentColor}66, 0 0 0 2px rgba(255,255,255,0.22) inset` : "none",
+                        opacity: wordOpacity,
+                        transform: `translateY(${yShift.toFixed(2)}px) scale(${scale.toFixed(4)})`,
+                        textShadow: !isCurrent && variant === "transparent" ? "0 4px 22px rgba(9, 10, 15, 0.55)" : "none"
+                      },
+                      children: w.word
+                    },
+                    `${activeBeatIndex}-${idx}-${w.startFrame}`
+                  );
+                })
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              "div",
+              {
+                style: {
+                  width: isVertical ? 220 : 280,
+                  height: 5,
+                  borderRadius: 9999,
+                  backgroundColor: isLight ? "rgba(15, 23, 42, 0.10)" : "rgba(255, 255, 255, 0.14)",
+                  overflow: "hidden"
+                },
+                children: /* @__PURE__ */ jsx(
+                  "div",
+                  {
+                    style: {
+                      width: `${Math.round(beatProgress * 100)}%`,
+                      height: "100%",
+                      borderRadius: 9999,
+                      backgroundColor: accentColor
+                    }
+                  }
+                )
+              }
+            )
+          ]
+        }
+      )
+    }
+  );
+};
+
+// packages/kits/src/kinetic-typography/ImpactKeywordCard.tsx
+import { Sparkles } from "lucide-react";
+import {
+  interpolate as interpolate2,
+  spring as spring2,
+  useCurrentFrame as useCurrentFrame2,
+  useVideoConfig as useVideoConfig2
+} from "remotion";
+import {
+  FONTS as FONTS2,
+  SPRING_PRESETS as SPRING_PRESETS2,
+  STUDIO_THEME as STUDIO_THEME2,
+  THEME as THEME2,
+  useStudioFontsReady as useStudioFontsReady2
+} from "@make-pictures/core";
+import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+var ImpactKeywordCard = ({
+  keyword,
+  eyebrow,
+  sublabel,
+  badge,
+  icon,
+  accentColor = STUDIO_THEME2.colors.brand[600],
+  variant = "dark",
+  enterFrame,
+  startFrame,
+  exitFrame,
+  safeBox9x16 = true,
+  style
+}) => {
+  const frame = useCurrentFrame2();
+  const { fps, width, height } = useVideoConfig2();
+  useStudioFontsReady2();
+  const effectiveStart = Math.max(2, startFrame ?? enterFrame ?? 2);
+  const enter = spring2({
+    frame: frame - effectiveStart,
+    fps,
+    config: SPRING_PRESETS2.snappy
+  });
+  const exit = typeof exitFrame === "number" ? spring2({
+    frame: frame - exitFrame,
+    fps,
+    config: SPRING_PRESETS2.smooth
+  }) : 0;
+  const visibility = Math.max(0, enter * (1 - exit));
+  if (visibility <= 5e-3) {
+    return null;
+  }
+  const isVertical = height > width;
+  const isLight = variant === "light";
+  const translateY = interpolate2(enter, [0, 1], [28, 0]) - exit * 18;
+  const scale = interpolate2(visibility, [0, 1], [0.93, 1]);
+  const accentBarScale = spring2({
+    frame: frame - effectiveStart - 4,
+    fps,
+    config: SPRING_PRESETS2.smooth
+  });
+  const resolvedIcon = icon === void 0 ? /* @__PURE__ */ jsx2(Sparkles, { size: isVertical ? 30 : 34, color: "#FFFFFF", strokeWidth: 2.4 }) : icon;
+  return /* @__PURE__ */ jsxs2(
+    "div",
+    {
+      style: {
+        position: "relative",
+        display: "inline-flex",
+        alignItems: "center",
+        gap: isVertical ? 22 : 28,
+        maxWidth: isVertical && safeBox9x16 ? 830 : 1080,
+        padding: isVertical ? "28px 34px" : "32px 42px",
+        borderRadius: 26,
+        boxSizing: "border-box",
+        backgroundColor: isLight ? STUDIO_THEME2.colors.bgSurfaceGlass : "rgba(13, 15, 26, 0.86)",
+        border: isLight ? `1.5px solid ${STUDIO_THEME2.colors.border.subtle}` : `1.5px solid rgba(255, 255, 255, 0.14)`,
+        boxShadow: isLight ? STUDIO_THEME2.shadows.cardElevated : THEME2.shadows.glow(accentColor, 0.9),
+        backdropFilter: "blur(16px)",
+        opacity: visibility,
+        transform: `translate3d(0, ${translateY.toFixed(2)}px, 0) scale(${scale.toFixed(4)})`,
+        overflow: "hidden",
+        ...style
+      },
+      children: [
+        /* @__PURE__ */ jsx2(
+          "div",
+          {
+            style: {
+              position: "absolute",
+              left: 0,
+              top: 0,
+              bottom: 0,
+              width: 8,
+              backgroundColor: accentColor,
+              transformOrigin: "top center",
+              transform: `scaleY(${accentBarScale.toFixed(4)})`
+            }
+          }
+        ),
+        resolvedIcon && /* @__PURE__ */ jsx2(
+          "div",
+          {
+            style: {
+              width: isVertical ? 64 : 72,
+              height: isVertical ? 64 : 72,
+              borderRadius: 20,
+              flexShrink: 0,
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "center",
+              background: `linear-gradient(135deg, ${accentColor} 0%, ${accentColor}CC 100%)`,
+              boxShadow: `0 12px 28px ${accentColor}55`
+            },
+            children: resolvedIcon
+          }
+        ),
+        /* @__PURE__ */ jsxs2(
+          "div",
+          {
+            style: {
+              display: "flex",
+              flexDirection: "column",
+              gap: 6,
+              minWidth: 0
+            },
+            children: [
+              (eyebrow || badge) && /* @__PURE__ */ jsxs2(
+                "div",
+                {
+                  style: {
+                    display: "flex",
+                    alignItems: "center",
+                    gap: 12,
+                    flexWrap: "wrap"
+                  },
+                  children: [
+                    eyebrow && /* @__PURE__ */ jsx2(
+                      "span",
+                      {
+                        style: {
+                          fontFamily: FONTS2.mono,
+                          fontSize: 15,
+                          fontWeight: 700,
+                          letterSpacing: "0.08em",
+                          textTransform: "uppercase",
+                          color: isLight ? STUDIO_THEME2.colors.text.muted : THEME2.colors.textSecondary
+                        },
+                        children: eyebrow
+                      }
+                    ),
+                    badge && /* @__PURE__ */ jsx2(
+                      "span",
+                      {
+                        style: {
+                          fontFamily: FONTS2.mono,
+                          fontSize: 14,
+                          fontWeight: 700,
+                          padding: "3px 11px",
+                          borderRadius: 9999,
+                          color: "#FFFFFF",
+                          backgroundColor: accentColor
+                        },
+                        children: badge
+                      }
+                    )
+                  ]
+                }
+              ),
+              /* @__PURE__ */ jsx2(
+                "div",
+                {
+                  style: {
+                    fontFamily: FONTS2.display,
+                    fontSize: isVertical ? 44 : 52,
+                    fontWeight: 800,
+                    lineHeight: 1.1,
+                    letterSpacing: "-0.025em",
+                    color: isLight ? STUDIO_THEME2.colors.text.slate900 : THEME2.colors.textPrimary
+                  },
+                  children: keyword
+                }
+              ),
+              sublabel && /* @__PURE__ */ jsx2(
+                "div",
+                {
+                  style: {
+                    fontFamily: FONTS2.sans,
+                    fontSize: isVertical ? 20 : 22,
+                    fontWeight: 500,
+                    color: isLight ? STUDIO_THEME2.colors.text.secondary : THEME2.colors.textSecondary
+                  },
+                  children: sublabel
+                }
+              )
+            ]
+          }
+        )
+      ]
+    }
+  );
+};
+
+// packages/kits/src/kinetic-typography/AnimatedMetricCounter.tsx
+import {
+  Easing,
+  interpolate as interpolate3,
+  spring as spring3,
+  useCurrentFrame as useCurrentFrame3,
+  useVideoConfig as useVideoConfig3
+} from "remotion";
+import {
+  FONTS as FONTS3,
+  SPRING_PRESETS as SPRING_PRESETS3,
+  STUDIO_THEME as STUDIO_THEME3,
+  THEME as THEME3,
+  useStudioFontsReady as useStudioFontsReady3
+} from "@make-pictures/core";
+import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
+function formatTabularMetric(val, decimals = 0, thousandSeparator = ",") {
+  const safeDecimals = Math.max(0, Math.min(6, Math.round(decimals)));
+  const fixed = val.toFixed(safeDecimals);
+  const [intPart, decPart] = fixed.split(".");
+  const sign = intPart.startsWith("-") ? "-" : "";
+  const digits = sign ? intPart.slice(1) : intPart;
+  const grouped = thousandSeparator ? digits.replace(/\B(?=(\d{3})+(?!\d))/g, thousandSeparator) : digits;
+  return decPart !== void 0 ? `${sign}${grouped}.${decPart}` : `${sign}${grouped}`;
+}
+var AnimatedMetricCounter = ({
+  value,
+  fromValue = 0,
+  prefix = "",
+  suffix = "",
+  decimals = 0,
+  startFrame = 2,
+  durationInFrames = 54,
+  label,
+  badge,
+  accentColor = STUDIO_THEME3.colors.accents.emerald,
+  variant = "dark",
+  thousandSeparator = ",",
+  fontSize,
+  style
+}) => {
+  const frame = useCurrentFrame3();
+  const { fps, width, height } = useVideoConfig3();
+  useStudioFontsReady3();
+  const effectiveStart = Math.max(2, startFrame);
+  const dur = Math.max(6, durationInFrames);
+  const enter = spring3({
+    frame: frame - effectiveStart,
+    fps,
+    config: SPRING_PRESETS3.snappy
+  });
+  const countProgress = interpolate3(
+    frame,
+    [effectiveStart, effectiveStart + dur],
+    [0, 1],
+    {
+      easing: Easing.out(Easing.cubic),
+      extrapolateLeft: "clamp",
+      extrapolateRight: "clamp"
+    }
+  );
+  const currentVal = fromValue + (value - fromValue) * countProgress;
+  const formatted = `${prefix}${formatTabularMetric(
+    currentVal,
+    decimals,
+    thousandSeparator
+  )}${suffix}`;
+  if (variant === "inline") {
+    if (frame === 0 && startFrame >= 1) {
+      return null;
+    }
+    return /* @__PURE__ */ jsx3(
+      "span",
+      {
+        style: {
+          fontFamily: FONTS3.display,
+          fontVariantNumeric: "tabular-nums",
+          fontWeight: 800,
+          letterSpacing: "-0.03em",
+          fontSize: fontSize ?? 56,
+          opacity: enter,
+          ...style
+        },
+        children: formatted
+      }
+    );
+  }
+  if (enter <= 5e-3) {
+    return null;
+  }
+  const isVertical = height > width;
+  const isLight = variant === "light";
+  const resolvedFontSize = fontSize ?? (isVertical ? 68 : 76);
+  return /* @__PURE__ */ jsxs3(
+    "div",
+    {
+      style: {
+        display: "inline-flex",
+        flexDirection: "column",
+        alignItems: "flex-start",
+        gap: 10,
+        padding: isVertical ? "26px 32px" : "30px 38px",
+        borderRadius: 24,
+        boxSizing: "border-box",
+        backgroundColor: isLight ? STUDIO_THEME3.colors.bgSurfaceGlass : "rgba(13, 15, 26, 0.86)",
+        border: isLight ? `1.5px solid ${STUDIO_THEME3.colors.border.subtle}` : "1.5px solid rgba(255, 255, 255, 0.12)",
+        boxShadow: isLight ? STUDIO_THEME3.shadows.cardElevated : THEME3.shadows.glow(accentColor, 0.75),
+        opacity: enter,
+        transform: `translateY(${interpolate3(enter, [0, 1], [22, 0]).toFixed(2)}px) scale(${interpolate3(enter, [0, 1], [0.94, 1]).toFixed(4)})`,
+        ...style
+      },
+      children: [
+        /* @__PURE__ */ jsxs3(
+          "div",
+          {
+            style: {
+              display: "flex",
+              alignItems: "baseline",
+              gap: 14
+            },
+            children: [
+              /* @__PURE__ */ jsx3(
+                "span",
+                {
+                  style: {
+                    fontFamily: FONTS3.display,
+                    fontVariantNumeric: "tabular-nums",
+                    fontSize: resolvedFontSize,
+                    fontWeight: 800,
+                    lineHeight: 1,
+                    letterSpacing: "-0.035em",
+                    color: isLight ? STUDIO_THEME3.colors.text.slate900 : THEME3.colors.textPrimary
+                  },
+                  children: formatted
+                }
+              ),
+              badge && /* @__PURE__ */ jsx3(
+                "span",
+                {
+                  style: {
+                    fontFamily: FONTS3.mono,
+                    fontSize: 15,
+                    fontWeight: 700,
+                    padding: "5px 12px",
+                    borderRadius: 9999,
+                    color: "#FFFFFF",
+                    backgroundColor: accentColor
+                  },
+                  children: badge
+                }
+              )
+            ]
+          }
+        ),
+        label && /* @__PURE__ */ jsx3(
+          "div",
+          {
+            style: {
+              fontFamily: FONTS3.sans,
+              fontSize: isVertical ? 20 : 21,
+              fontWeight: 600,
+              color: isLight ? STUDIO_THEME3.colors.text.secondary : THEME3.colors.textSecondary
+            },
+            children: label
+          }
+        ),
+        /* @__PURE__ */ jsx3(
+          "div",
+          {
+            style: {
+              width: "100%",
+              height: 5,
+              marginTop: 4,
+              borderRadius: 9999,
+              backgroundColor: isLight ? "rgba(15, 23, 42, 0.08)" : "rgba(255, 255, 255, 0.12)",
+              overflow: "hidden"
+            },
+            children: /* @__PURE__ */ jsx3(
+              "div",
+              {
+                style: {
+                  width: `${Math.round(countProgress * 100)}%`,
+                  height: "100%",
+                  borderRadius: 9999,
+                  backgroundColor: accentColor
+                }
+              }
+            )
+          }
+        )
+      ]
+    }
+  );
+};
+
+export {
+  groupWordsIntoBeats,
+  WordByWordStage,
+  ImpactKeywordCard,
+  formatTabularMetric,
+  AnimatedMetricCounter
+};