@cueframe/kernel 0.0.1

package/dist/_members/primitives/chunk-WZFLEGMD.js

@@ -0,0 +1,1435 @@
+import {
+  ACCENT,
+  ACCENT_STRONG,
+  BG,
+  BORDER_SOFT,
+  DANGER,
+  SUCCESS,
+  SURFACE,
+  TEAL,
+  TEXT_HI,
+  TEXT_MUTED,
+  VIOLET,
+  WARNING
+} from "./chunk-3OMURV6Q.js";
+import {
+  FitText
+} from "./chunk-ROV2ODWC.js";
+
+// src/effects/blur/index.tsx
+import { useCurrentFrame, useVideoConfig, interpolate } from "remotion";
+import { jsx } from "react/jsx-runtime";
+var Blur = ({
+  type = "gaussian",
+  radius = 4,
+  animateFrom,
+  animateTo,
+  easing,
+  children,
+  style
+}) => {
+  const frame = useCurrentFrame();
+  const { durationInFrames } = useVideoConfig();
+  let currentRadius;
+  if (animateFrom !== void 0 && animateTo !== void 0) {
+    currentRadius = interpolate(
+      frame,
+      [0, durationInFrames - 1],
+      [animateFrom, animateTo],
+      { extrapolateLeft: "clamp", extrapolateRight: "clamp", easing }
+    );
+  } else {
+    currentRadius = radius;
+  }
+  const filterValue = currentRadius > 0 ? `blur(${currentRadius}px)` : "none";
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      style: {
+        width: "100%",
+        height: "100%",
+        filter: filterValue,
+        // Motion blur simulation: scale slightly in one direction
+        ...type === "motion" && currentRadius > 0 ? { transform: `scaleX(${1 + currentRadius * 5e-3})` } : {},
+        ...style
+      },
+      children
+    }
+  );
+};
+
+// src/effects/color-grade/index.tsx
+import { jsx as jsx2 } from "react/jsx-runtime";
+var PRESET_FILTERS = {
+  none: { brightness: 1, contrast: 1, saturation: 1, hue: 0, sepia: 0 },
+  vintage: { brightness: 1.05, contrast: 1.1, saturation: 0.7, hue: -5, sepia: 0.3 },
+  cinematic: { brightness: 0.95, contrast: 1.3, saturation: 0.85, hue: 0, sepia: 0 },
+  "bleach-bypass": { brightness: 1.1, contrast: 1.4, saturation: 0.3, hue: 0, sepia: 0 },
+  sepia: { brightness: 1, contrast: 1.05, saturation: 0.8, hue: 0, sepia: 0.8 },
+  cool: { brightness: 1, contrast: 1.05, saturation: 0.9, hue: 10, sepia: 0 },
+  warm: { brightness: 1.05, contrast: 1.05, saturation: 1.1, hue: -10, sepia: 0.1 }
+};
+var ColorGrade = ({
+  preset = "none",
+  brightness: brightnessProp,
+  contrast: contrastProp,
+  saturation: saturationProp,
+  hue: hueProp,
+  temperature = 0,
+  intensity = 1,
+  children,
+  style
+}) => {
+  const base = PRESET_FILTERS[preset];
+  const k = Math.max(0, Math.min(1, intensity));
+  const toNeutral = (v) => 1 + (v - 1) * k;
+  const brightness = toNeutral(brightnessProp ?? base.brightness);
+  const contrast = toNeutral(contrastProp ?? base.contrast);
+  const saturation = toNeutral(saturationProp ?? base.saturation);
+  const hue = ((hueProp ?? base.hue) + temperature) * k;
+  const sepia = base.sepia * k;
+  const filters = [];
+  if (brightness !== 1) filters.push(`brightness(${brightness})`);
+  if (contrast !== 1) filters.push(`contrast(${contrast})`);
+  if (saturation !== 1) filters.push(`saturate(${saturation})`);
+  if (hue !== 0) filters.push(`hue-rotate(${hue}deg)`);
+  if (sepia > 0) filters.push(`sepia(${sepia})`);
+  const filterString = filters.length > 0 ? filters.join(" ") : "none";
+  return /* @__PURE__ */ jsx2(
+    "div",
+    {
+      style: {
+        width: "100%",
+        height: "100%",
+        filter: filterString,
+        ...style
+      },
+      children
+    }
+  );
+};
+
+// src/effects/grain/index.tsx
+import { useRef, useEffect } from "react";
+import { useCurrentFrame as useCurrentFrame2, useVideoConfig as useVideoConfig2 } from "remotion";
+import { jsx as jsx3 } from "react/jsx-runtime";
+function seededRandom(seed) {
+  let s = seed;
+  return () => {
+    s = (s * 16807 + 0) % 2147483647;
+    return (s - 1) / 2147483646;
+  };
+}
+var Grain = ({
+  intensity = 0.3,
+  speed = 1,
+  blendMode = "overlay",
+  monochrome = true,
+  style
+}) => {
+  const canvasRef = useRef(null);
+  const frame = useCurrentFrame2();
+  const { width, height } = useVideoConfig2();
+  const scale = 0.25;
+  const w = Math.ceil(width * scale);
+  const h = Math.ceil(height * scale);
+  useEffect(() => {
+    const canvas = canvasRef.current;
+    if (!canvas) return;
+    const ctx = canvas.getContext("2d");
+    if (!ctx) return;
+    canvas.width = w;
+    canvas.height = h;
+    const grainFrame = Math.floor(frame * speed);
+    const rand = seededRandom(grainFrame * 7919 + 1);
+    const imageData = ctx.createImageData(w, h);
+    const data = imageData.data;
+    for (let i = 0; i < data.length; i += 4) {
+      if (monochrome) {
+        const v = rand() * 255;
+        data[i] = v;
+        data[i + 1] = v;
+        data[i + 2] = v;
+      } else {
+        data[i] = rand() * 255;
+        data[i + 1] = rand() * 255;
+        data[i + 2] = rand() * 255;
+      }
+      data[i + 3] = intensity * 255;
+    }
+    ctx.putImageData(imageData, 0, 0);
+  }, [frame, speed, w, h, intensity, monochrome]);
+  return /* @__PURE__ */ jsx3(
+    "canvas",
+    {
+      ref: canvasRef,
+      style: {
+        position: "absolute",
+        top: 0,
+        left: 0,
+        width: "100%",
+        height: "100%",
+        pointerEvents: "none",
+        mixBlendMode: blendMode,
+        imageRendering: "pixelated",
+        ...style
+      }
+    }
+  );
+};
+
+// src/effects/parallax/index.tsx
+import { useCurrentFrame as useCurrentFrame3, useVideoConfig as useVideoConfig3, interpolate as interpolate2, Img } from "remotion";
+import { jsx as jsx4 } from "react/jsx-runtime";
+var Parallax = ({
+  src,
+  zoom = 1.2,
+  pan = "left",
+  speed = 1,
+  easing,
+  style
+}) => {
+  const frame = useCurrentFrame3();
+  const { durationInFrames } = useVideoConfig3();
+  const progress = interpolate2(
+    frame,
+    [0, durationInFrames],
+    [0, 1 * speed],
+    { extrapolateRight: "clamp", easing }
+  );
+  const scale = interpolate2(progress, [0, 1], [1, zoom]);
+  let translateX = 0;
+  let translateY = 0;
+  const maxOffset = (zoom - 1) * 50;
+  switch (pan) {
+    case "left":
+      translateX = interpolate2(progress, [0, 1], [0, -maxOffset]);
+      break;
+    case "right":
+      translateX = interpolate2(progress, [0, 1], [0, maxOffset]);
+      break;
+    case "up":
+      translateY = interpolate2(progress, [0, 1], [0, -maxOffset]);
+      break;
+    case "down":
+      translateY = interpolate2(progress, [0, 1], [0, maxOffset]);
+      break;
+    case "none":
+      break;
+  }
+  return /* @__PURE__ */ jsx4(
+    "div",
+    {
+      style: {
+        width: "100%",
+        height: "100%",
+        overflow: "hidden",
+        ...style
+      },
+      children: /* @__PURE__ */ jsx4(
+        Img,
+        {
+          src,
+          style: {
+            width: "100%",
+            height: "100%",
+            objectFit: "cover",
+            transform: `scale(${scale}) translate(${translateX}%, ${translateY}%)`,
+            transformOrigin: "center center"
+          }
+        }
+      )
+    }
+  );
+};
+
+// src/effects/particles/index.tsx
+import { useRef as useRef2, useEffect as useEffect2 } from "react";
+import { useCurrentFrame as useCurrentFrame4, useVideoConfig as useVideoConfig4 } from "remotion";
+import { jsx as jsx5 } from "react/jsx-runtime";
+function seededRandom2(seed) {
+  let s = seed;
+  return () => {
+    s = (s * 16807 + 0) % 2147483647;
+    return (s - 1) / 2147483646;
+  };
+}
+var PRESET_DEFAULTS = {
+  dust: { size: 2, color: `${TEXT_HI}cc`, gravity: 0, wind: 0.1 },
+  bokeh: { size: 20, color: `${TEXT_HI}4d`, gravity: -0.02, wind: 0 },
+  snow: { size: 4, color: TEXT_HI, gravity: 0.3, wind: 0.15 },
+  sparks: { size: 3, color: ACCENT, gravity: -0.5, wind: 0 },
+  embers: { size: 5, color: ACCENT_STRONG, gravity: -0.2, wind: 0.05 },
+  fireflies: { size: 4, color: WARNING, gravity: 0, wind: 0 }
+};
+var Particles = ({
+  preset = "dust",
+  count = 60,
+  speed = 1,
+  size: sizeProp,
+  color: colorProp,
+  opacity = 0.6,
+  wind: windProp,
+  gravity: gravityProp,
+  style
+}) => {
+  const canvasRef = useRef2(null);
+  const particlesRef = useRef2(null);
+  const frame = useCurrentFrame4();
+  const { width, height, fps } = useVideoConfig4();
+  const defaults = PRESET_DEFAULTS[preset];
+  const pSize = sizeProp ?? defaults.size;
+  const pColor = colorProp ?? defaults.color;
+  const pWind = windProp ?? defaults.wind;
+  const pGravity = gravityProp ?? defaults.gravity;
+  if (!particlesRef.current) {
+    const rand = seededRandom2(42);
+    particlesRef.current = Array.from({ length: count }, () => ({
+      x: rand() * width,
+      y: rand() * height,
+      vx: (rand() - 0.5) * 2,
+      vy: (rand() - 0.5) * 2,
+      size: pSize * (0.5 + rand()),
+      alpha: 0.3 + rand() * 0.7,
+      phase: rand() * Math.PI * 2
+    }));
+  }
+  useEffect2(() => {
+    const canvas = canvasRef.current;
+    if (!canvas || !particlesRef.current) return;
+    const ctx = canvas.getContext("2d");
+    if (!ctx) return;
+    canvas.width = width;
+    canvas.height = height;
+    ctx.clearRect(0, 0, width, height);
+    const dt = speed / fps;
+    for (const p of particlesRef.current) {
+      const time = frame * dt;
+      const x = ((p.x + (p.vx + pWind * 60) * time) % width + width) % width;
+      const y = ((p.y + (p.vy + pGravity * 60) * time) % height + height) % height;
+      let alpha = p.alpha * opacity;
+      if (preset === "fireflies") {
+        alpha *= 0.5 + 0.5 * Math.sin(time * 3 + p.phase);
+      }
+      ctx.globalAlpha = alpha;
+      ctx.fillStyle = pColor;
+      if (preset === "bokeh") {
+        ctx.beginPath();
+        ctx.arc(x, y, p.size, 0, Math.PI * 2);
+        ctx.fill();
+      } else if (preset === "sparks" || preset === "embers") {
+        const gradient = ctx.createRadialGradient(x, y, 0, x, y, p.size);
+        gradient.addColorStop(0, pColor);
+        gradient.addColorStop(1, "transparent");
+        ctx.fillStyle = gradient;
+        ctx.beginPath();
+        ctx.arc(x, y, p.size, 0, Math.PI * 2);
+        ctx.fill();
+      } else {
+        ctx.beginPath();
+        ctx.arc(x, y, p.size, 0, Math.PI * 2);
+        ctx.fill();
+      }
+    }
+  }, [frame, width, height, fps, speed, pColor, pWind, pGravity, opacity, preset, pSize]);
+  return /* @__PURE__ */ jsx5(
+    "canvas",
+    {
+      ref: canvasRef,
+      style: {
+        position: "absolute",
+        top: 0,
+        left: 0,
+        width: "100%",
+        height: "100%",
+        pointerEvents: "none",
+        ...style
+      }
+    }
+  );
+};
+
+// src/effects/pulsing-indicator/index.tsx
+import { useCurrentFrame as useCurrentFrame5 } from "remotion";
+import { jsx as jsx6, jsxs } from "react/jsx-runtime";
+function PulsingIndicator({
+  color = SUCCESS,
+  size = 16,
+  period = 8,
+  speed = 1,
+  background = "white",
+  className
+}) {
+  const frame = useCurrentFrame5() * speed;
+  const wave = Math.sin(frame / period) * 0.5 + 0.5;
+  const dotScale = 0.9 + wave * 0.2;
+  const dotOpacity = 0.6 + wave * 0.4;
+  const ringPeriod = period * Math.PI * 2;
+  const phase = frame % ringPeriod / ringPeriod;
+  const ringScale = 1 + phase * 1.6;
+  const ringOpacity = (1 - phase) * 0.7;
+  return /* @__PURE__ */ jsx6(
+    "div",
+    {
+      className,
+      style: {
+        position: "absolute",
+        inset: 0,
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        background
+      },
+      children: /* @__PURE__ */ jsxs(
+        "div",
+        {
+          style: {
+            position: "relative",
+            width: size,
+            height: size
+          },
+          children: [
+            /* @__PURE__ */ jsx6(
+              "div",
+              {
+                style: {
+                  position: "absolute",
+                  inset: 0,
+                  borderRadius: "50%",
+                  background: color,
+                  opacity: ringOpacity,
+                  transform: `scale(${ringScale})`,
+                  transformOrigin: "center",
+                  willChange: "transform, opacity"
+                }
+              }
+            ),
+            /* @__PURE__ */ jsx6(
+              "div",
+              {
+                style: {
+                  position: "absolute",
+                  inset: 0,
+                  borderRadius: "50%",
+                  background: color,
+                  opacity: dotOpacity,
+                  transform: `scale(${dotScale})`,
+                  transformOrigin: "center",
+                  willChange: "transform, opacity"
+                }
+              }
+            )
+          ]
+        }
+      )
+    }
+  );
+}
+
+// src/effects/spotlight-card/index.tsx
+import { interpolate as interpolate3, useCurrentFrame as useCurrentFrame6, useVideoConfig as useVideoConfig5 } from "remotion";
+import { Fragment, jsx as jsx7, jsxs as jsxs2 } from "react/jsx-runtime";
+var FONT_FAMILY = "inherit";
+function cursorAt(frame, cardWidth, cardHeight, durationInFrames) {
+  const t = frame / durationInFrames * Math.PI * 2;
+  const x = cardWidth / 2 + Math.sin(t) * (cardWidth * 0.42);
+  const y = cardHeight / 2 + Math.sin(t * 2) * (cardHeight * 0.32);
+  return { x, y };
+}
+function SpotlightCard({
+  title = "Spotlight Card",
+  body = "Soft radial light follows the cursor, picking out the microborder.",
+  cardWidth = 520,
+  cardHeight = 320,
+  glowSize = 600,
+  glowOpacity = 0.08,
+  background = BG,
+  cardColor = SURFACE,
+  textColor = TEXT_HI,
+  mutedColor = TEXT_MUTED,
+  speed = 1,
+  className,
+  children
+}) {
+  const frame = useCurrentFrame6() * speed;
+  const { durationInFrames } = useVideoConfig5();
+  const cursor = cursorAt(
+    Math.max(0, frame - 1),
+    cardWidth,
+    cardHeight,
+    durationInFrames
+  );
+  const cardOpacity = interpolate3(frame, [0, 12], [0, 1], {
+    extrapolateLeft: "clamp",
+    extrapolateRight: "clamp"
+  });
+  const CONTENT_PADDING = 36;
+  const contentWidth = Math.max(80, cardWidth - CONTENT_PADDING * 2);
+  const bodyWidth = Math.min(360, contentWidth);
+  const surfaceGlow = `radial-gradient(${glowSize}px circle at ${cursor.x}px ${cursor.y}px, rgba(255,255,255,${glowOpacity}), transparent 40%)`;
+  const borderGlow = `radial-gradient(${glowSize * 0.6}px circle at ${cursor.x}px ${cursor.y}px, rgba(255,255,255,0.35), transparent 40%)`;
+  return /* @__PURE__ */ jsx7(
+    "div",
+    {
+      className,
+      style: {
+        position: "absolute",
+        inset: 0,
+        background,
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        fontFamily: FONT_FAMILY
+      },
+      children: /* @__PURE__ */ jsx7(
+        "div",
+        {
+          style: {
+            position: "relative",
+            width: cardWidth,
+            height: cardHeight,
+            borderRadius: 20,
+            padding: 1,
+            background: borderGlow,
+            opacity: cardOpacity
+          },
+          children: /* @__PURE__ */ jsxs2(
+            "div",
+            {
+              style: {
+                position: "relative",
+                width: "100%",
+                height: "100%",
+                borderRadius: 19,
+                background: cardColor,
+                overflow: "hidden"
+              },
+              children: [
+                /* @__PURE__ */ jsx7(
+                  "div",
+                  {
+                    style: {
+                      position: "absolute",
+                      inset: 0,
+                      background: surfaceGlow,
+                      pointerEvents: "none"
+                    }
+                  }
+                ),
+                /* @__PURE__ */ jsx7(
+                  "div",
+                  {
+                    style: {
+                      position: "relative",
+                      padding: 36,
+                      display: "flex",
+                      flexDirection: "column",
+                      gap: 12,
+                      height: "100%",
+                      justifyContent: "flex-end"
+                    },
+                    children: children ?? /* @__PURE__ */ jsxs2(Fragment, { children: [
+                      /* @__PURE__ */ jsx7(
+                        FitText,
+                        {
+                          maxFontSize: 28,
+                          maxWidth: contentWidth,
+                          maxLines: 2,
+                          fontFamily: FONT_FAMILY,
+                          fontWeight: 700,
+                          letterSpacing: "-0.02em",
+                          style: { color: textColor },
+                          children: title
+                        }
+                      ),
+                      /* @__PURE__ */ jsx7(
+                        FitText,
+                        {
+                          maxFontSize: 16,
+                          maxWidth: bodyWidth,
+                          maxLines: 4,
+                          fontFamily: FONT_FAMILY,
+                          fontWeight: 400,
+                          style: { color: mutedColor, lineHeight: 1.5 },
+                          children: body
+                        }
+                      )
+                    ] })
+                  }
+                )
+              ]
+            }
+          )
+        }
+      )
+    }
+  );
+}
+
+// src/effects/spring-pop-in/index.tsx
+import { spring, useCurrentFrame as useCurrentFrame7, useVideoConfig as useVideoConfig6 } from "remotion";
+import { jsx as jsx8 } from "react/jsx-runtime";
+var FONT_FAMILY2 = "inherit";
+function DefaultChild() {
+  return /* @__PURE__ */ jsx8(
+    "div",
+    {
+      style: {
+        width: 280,
+        height: 280,
+        borderRadius: 32,
+        background: `linear-gradient(135deg, ${ACCENT} 0%, ${VIOLET} 100%)`,
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        color: TEXT_HI,
+        fontFamily: FONT_FAMILY2,
+        fontSize: 56,
+        fontWeight: 700,
+        letterSpacing: "-0.04em",
+        border: `1px solid ${BORDER_SOFT}`
+      },
+      children: "Pop!"
+    }
+  );
+}
+function SpringPopIn({
+  children,
+  damping = 12,
+  mass = 1,
+  stiffness = 100,
+  delayInFrames = 0,
+  speed = 1,
+  background = "transparent",
+  className
+}) {
+  const frame = useCurrentFrame7() * speed;
+  const { fps } = useVideoConfig6();
+  const scale = spring({
+    fps,
+    frame: frame - delayInFrames,
+    config: {
+      damping,
+      mass,
+      stiffness
+    }
+  });
+  return /* @__PURE__ */ jsx8(
+    "div",
+    {
+      className,
+      style: {
+        position: "absolute",
+        inset: 0,
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        background
+      },
+      children: /* @__PURE__ */ jsx8(
+        "div",
+        {
+          style: {
+            transform: `scale(${scale})`,
+            transformOrigin: "center",
+            willChange: "transform"
+          },
+          children: children ?? /* @__PURE__ */ jsx8(DefaultChild, {})
+        }
+      )
+    }
+  );
+}
+
+// src/effects/success-confetti/index.tsx
+import {
+  interpolate as interpolate4,
+  random,
+  spring as spring2,
+  useCurrentFrame as useCurrentFrame8,
+  useVideoConfig as useVideoConfig7
+} from "remotion";
+import { jsx as jsx9, jsxs as jsxs3 } from "react/jsx-runtime";
+function SuccessConfetti({
+  count = 60,
+  colors = [ACCENT_STRONG, SUCCESS, TEAL, WARNING, VIOLET],
+  originX = 0.5,
+  originY = 0.5,
+  gravity = 0.4,
+  velocity = 12,
+  text = "Merged!",
+  textColor = SURFACE,
+  background = TEXT_HI,
+  seed = "remocn",
+  speed = 1,
+  className
+}) {
+  const frame = useCurrentFrame8() * speed;
+  const { fps, durationInFrames } = useVideoConfig7();
+  const width = 1280;
+  const height = 720;
+  const cx = width * originX;
+  const cy = height * originY;
+  const textPop = spring2({
+    frame: frame - 4,
+    fps,
+    config: { damping: 9, stiffness: 160, mass: 0.7 }
+  });
+  const textScale = interpolate4(textPop, [0, 1], [0.6, 1]);
+  const textOpacity = interpolate4(frame, [4, 14], [0, 1], {
+    extrapolateLeft: "clamp",
+    extrapolateRight: "clamp"
+  });
+  const textExit = interpolate4(
+    frame,
+    [durationInFrames - 12, durationInFrames],
+    [1, 0],
+    { extrapolateLeft: "clamp", extrapolateRight: "clamp" }
+  );
+  const particles = Array.from({ length: count }, (_, i) => {
+    const seedKey = `${seed}:${i}`;
+    const angle = random(`${seedKey}:angle`) * Math.PI * 2;
+    const speed2 = velocity * (0.6 + random(`${seedKey}:speed`) * 0.8);
+    const colorIndex = Math.floor(random(`${seedKey}:color`) * colors.length);
+    const color = colors[colorIndex] ?? colors[0];
+    const size = 6 + random(`${seedKey}:size`) * 8;
+    const rotationSpeed = (random(`${seedKey}:rot`) - 0.5) * 16;
+    const initialRotation = random(`${seedKey}:irot`) * 360;
+    const isCircle = random(`${seedKey}:shape`) > 0.6;
+    const lifeOffset = Math.floor(random(`${seedKey}:delay`) * 4);
+    const f = Math.max(0, frame - lifeOffset);
+    const x = cx + Math.cos(angle) * speed2 * f;
+    const y = cy + Math.sin(angle) * speed2 * f + 0.5 * gravity * f * f;
+    const rotation = initialRotation + rotationSpeed * f;
+    const opacity = interpolate4(
+      frame,
+      [0, 4, durationInFrames - 20, durationInFrames],
+      [0, 1, 1, 0],
+      { extrapolateLeft: "clamp", extrapolateRight: "clamp" }
+    );
+    return {
+      x,
+      y,
+      rotation,
+      color,
+      size,
+      isCircle,
+      opacity,
+      key: i
+    };
+  });
+  return /* @__PURE__ */ jsxs3(
+    "div",
+    {
+      className,
+      style: {
+        position: "absolute",
+        inset: 0,
+        background,
+        overflow: "hidden",
+        fontFamily: "inherit"
+      },
+      children: [
+        /* @__PURE__ */ jsx9(
+          "svg",
+          {
+            width,
+            height,
+            viewBox: `0 0 ${width} ${height}`,
+            style: { position: "absolute", inset: 0 },
+            children: particles.map(
+              (p) => p.isCircle ? /* @__PURE__ */ jsx9(
+                "circle",
+                {
+                  cx: p.x,
+                  cy: p.y,
+                  r: p.size / 2,
+                  fill: p.color,
+                  opacity: p.opacity
+                },
+                p.key
+              ) : /* @__PURE__ */ jsx9(
+                "rect",
+                {
+                  x: -p.size / 2,
+                  y: -p.size / 2,
+                  width: p.size,
+                  height: p.size * 0.5,
+                  rx: 1,
+                  fill: p.color,
+                  opacity: p.opacity,
+                  transform: `translate(${p.x} ${p.y}) rotate(${p.rotation})`
+                },
+                p.key
+              )
+            )
+          }
+        ),
+        text ? /* @__PURE__ */ jsx9(
+          "div",
+          {
+            style: {
+              position: "absolute",
+              inset: 0,
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "center",
+              pointerEvents: "none"
+            },
+            children: /* @__PURE__ */ jsx9(
+              "span",
+              {
+                style: {
+                  fontSize: 96,
+                  fontWeight: 700,
+                  letterSpacing: "-0.04em",
+                  color: textColor,
+                  transform: `scale(${textScale})`,
+                  opacity: Math.min(textOpacity, textExit)
+                },
+                children: text
+              }
+            )
+          }
+        ) : null
+      ]
+    }
+  );
+}
+
+// src/effects/vignette/index.tsx
+import { jsx as jsx10 } from "react/jsx-runtime";
+var Vignette = ({
+  intensity = 0.5,
+  spread = 0.5,
+  shape = "ellipse",
+  color = "black",
+  style
+}) => {
+  const innerStop = Math.round(spread * 70);
+  const outerStop = Math.round(70 + spread * 30);
+  const shapeValue = shape === "circle" ? "circle" : "ellipse";
+  const gradient = `radial-gradient(${shapeValue} at center, transparent ${innerStop}%, ${color} ${outerStop}%)`;
+  return /* @__PURE__ */ jsx10(
+    "div",
+    {
+      style: {
+        position: "absolute",
+        top: 0,
+        left: 0,
+        width: "100%",
+        height: "100%",
+        pointerEvents: "none",
+        background: gradient,
+        opacity: intensity,
+        ...style
+      }
+    }
+  );
+};
+
+// src/effects/blur/config.ts
+import { z } from "zod";
+var paramsSchema = z.object({
+  type: z.enum(["gaussian", "motion"]).default("gaussian").describe("Blur type. gaussian: standard. motion: adds slight horizontal stretch."),
+  radius: z.number().min(0).max(40).default(4).describe("Static blur radius. Used when animateFrom/animateTo are not set."),
+  animateFrom: z.number().min(0).max(40).optional().describe("Starting blur radius. Pair with animateTo to animate."),
+  animateTo: z.number().min(0).max(40).optional().describe("Ending blur radius. Pair with animateFrom to animate."),
+  speed: z.number().min(0.25).max(4).default(1).describe("Playback speed multiplier.")
+}).passthrough();
+var config = {
+  id: "blur",
+  component: Blur,
+  name: "Blur",
+  category: "effects",
+  kind: "component",
+  version: "0.1.0",
+  // Same wrapper contract as color-grade — see that config's note. Caveat the
+  // wrap mount inherits: `animateFrom/To` interpolate over the BODY's frame
+  // span (there is no Sequence around a wrap mount), not the effect window.
+  effectPlacement: "wrap",
+  intent: "depth-blur",
+  description: "Animatable blur wrapper. Wrap any child to apply CSS filter blur, optionally animating the radius across the duration (focus pull, reveal, transition out). Motion blur variant adds a slight scaleX stretch for a horizontal-pan feel.",
+  useWhen: "Focus pulls (animateFrom: 12, animateTo: 0), out-of-focus backgrounds (static high radius), transitional fade to next scene (animateTo: 20). Pair with Img/Video/Composition. Avoid wrapping text \u2014 use blur-reveal instead.",
+  pairsWith: ["parallax", "vignette", "mesh-gradient-bg"],
+  avoidWith: ["blur-reveal"],
+  tier: "standard",
+  useCase: ["transition", "emphasis"],
+  tags: ["effect", "blur", "gaussian", "focus", "depth", "animatable"],
+  mood: ["cinematic", "soft", "editorial"],
+  paramsSchema,
+  propDefaults: { type: "gaussian", radius: 4, speed: 1 },
+  examples: [
+    {
+      name: "focus-pull",
+      mood: ["cinematic"],
+      params: { type: "gaussian", animateFrom: 12, animateTo: 0, speed: 1 }
+    },
+    {
+      name: "static-bg-blur",
+      mood: ["soft"],
+      params: { type: "gaussian", radius: 8, speed: 1 }
+    },
+    {
+      name: "motion-stretch",
+      mood: ["cinematic"],
+      params: { type: "motion", animateFrom: 0, animateTo: 16, speed: 1 }
+    }
+  ],
+  textParam: null,
+  subtextParam: null,
+  tokens: [],
+  durationInFrames: 60,
+  fps: 30,
+  width: 1920,
+  height: 1080,
+  preview: { thumbnailFrame: 8, mode: "oneshot", defaultExample: "focus-pull" }
+};
+
+// src/effects/color-grade/config.ts
+import { z as z2 } from "zod";
+var paramsSchema2 = z2.object({
+  preset: z2.enum(["vintage", "cinematic", "bleach-bypass", "sepia", "cool", "warm", "none"]).default("none").describe(
+    "Built-in look. Override with brightness/contrast/saturation/hue/temperature for fine control."
+  ),
+  brightness: z2.number().min(0).max(2).optional().describe("Brightness multiplier. Overrides preset."),
+  contrast: z2.number().min(0).max(2).optional().describe("Contrast multiplier. Overrides preset."),
+  saturation: z2.number().min(0).max(2).optional().describe("Saturation multiplier. 0 = grayscale."),
+  hue: z2.number().min(-180).max(180).optional().describe("Hue rotation in degrees."),
+  temperature: z2.number().min(-30).max(30).default(0).describe("Color temperature shift. Positive = warm; negative = cool."),
+  intensity: z2.number().min(0).max(1).default(1).describe("Grade strength 0..1 (default 1). Scales every filter delta toward neutral \u2014 1 = full preset, 0 = no grade. Use ~0.6 for a mild anchor over a talking head so a strong preset does not shift skin tones.")
+}).passthrough();
+var config2 = {
+  id: "color-grade",
+  component: ColorGrade,
+  name: "Color Grade",
+  category: "effects",
+  kind: "component",
+  version: "0.1.0",
+  // A filter WRAPPER: CSS `filter` only touches the element's own subtree, so
+  // the render must mount this AROUND the footage (WrapEffects), never as a
+  // stacked layer — stacked, it filters an empty div and grades nothing.
+  effectPlacement: "wrap",
+  intent: "color-grade",
+  description: "CSS-filter-based color grading wrapper. Seven presets cover the common looks (vintage, cinematic, bleach-bypass, sepia, cool, warm, none) and per-channel overrides are available for fine-tuning. Wrap any media \u2014 Img, Video, full Composition.",
+  useWhen: 'Match footage from different sources, establish mood, age archival material. The "cinematic" preset is the safest starting point; tune temperature for warm/cool shifts. Avoid stacking color-grades.',
+  pairsWith: ["parallax", "vignette", "grain"],
+  avoidWith: [],
+  tier: "standard",
+  useCase: ["grade"],
+  tags: ["effect", "color", "grade", "lut", "filter", "preset"],
+  mood: ["cinematic", "editorial"],
+  paramsSchema: paramsSchema2,
+  propDefaults: { preset: "none", temperature: 0 },
+  examples: [
+    {
+      name: "cinematic-look",
+      mood: ["cinematic"],
+      params: { preset: "cinematic", temperature: 0 }
+    },
+    {
+      name: "warm-vintage",
+      mood: ["editorial"],
+      params: { preset: "vintage", temperature: 5 }
+    },
+    {
+      name: "cool-tech",
+      mood: ["tech-demo"],
+      params: { preset: "cool", temperature: -10 }
+    }
+  ],
+  textParam: null,
+  subtextParam: null,
+  tokens: [],
+  durationInFrames: 60,
+  fps: 30,
+  width: 1920,
+  height: 1080,
+  preview: { thumbnailFrame: 30, mode: "oneshot", defaultExample: "cinematic-look" }
+};
+
+// src/effects/grain/config.ts
+import { z as z3 } from "zod";
+var paramsSchema3 = z3.object({
+  intensity: z3.number().min(0).max(1).default(0.3).describe("Grain opacity. 0.2\u20130.4 is the sweet spot \u2014 heavier feels dirty."),
+  speed: z3.number().min(0.25).max(4).default(1).describe("Animation speed. Higher = faster jitter."),
+  blendMode: z3.enum(["overlay", "multiply", "screen", "soft-light", "hard-light", "normal"]).default("overlay").describe("CSS blend mode against the underlying frame."),
+  monochrome: z3.boolean().default(true).describe("Pure luminance grain (true) vs RGB color noise (false).")
+}).passthrough();
+var config3 = {
+  id: "grain",
+  component: Grain,
+  name: "Grain",
+  category: "effects",
+  kind: "component",
+  version: "0.1.0",
+  intent: "film-grain",
+  description: "Animated film-grain overlay. Canvas-based monochrome (or color) noise that brings analog warmth to digital footage. Downsampled internally for performance \u2014 grain doesn't need full resolution.",
+  useWhen: 'Add cinematic texture to anything that looks too clean. Pair with vignette + color-grade for the full "film" treatment. Avoid combining with particles (already textural) or stacking multiple grains.',
+  pairsWith: ["vignette", "color-grade", "parallax", "light-leak"],
+  avoidWith: ["particles"],
+  tier: "standard",
+  useCase: ["grade"],
+  tags: ["effect", "grain", "film", "noise", "texture", "analog"],
+  mood: ["cinematic", "editorial"],
+  paramsSchema: paramsSchema3,
+  propDefaults: { intensity: 0.3, speed: 1, blendMode: "overlay", monochrome: true },
+  examples: [
+    {
+      name: "subtle-film",
+      mood: ["cinematic"],
+      params: { intensity: 0.25, speed: 1, blendMode: "overlay", monochrome: true }
+    },
+    {
+      name: "heavy-vintage",
+      mood: ["cinematic", "editorial"],
+      params: { intensity: 0.5, speed: 0.8, blendMode: "soft-light", monochrome: true }
+    }
+  ],
+  textParam: null,
+  subtextParam: null,
+  tokens: [],
+  durationInFrames: 60,
+  fps: 30,
+  width: 1920,
+  height: 1080,
+  preview: { thumbnailFrame: 30, mode: "loop", defaultExample: "subtle-film" }
+};
+
+// src/effects/parallax/config.ts
+import { z as z4 } from "zod";
+var paramsSchema4 = z4.object({
+  src: z4.string().url().describe("Image URL. Pair with high-resolution sources \u2014 the zoom amplifies aliasing."),
+  zoom: z4.number().min(1).max(2).default(1.2).describe("End zoom factor. 1.2\u20131.4 reads as a gentle Ken Burns; >1.5 starts feeling aggressive."),
+  pan: z4.enum(["left", "right", "up", "down", "none"]).default("left").describe("Direction of the slow pan."),
+  speed: z4.number().min(0.25).max(4).default(1).describe("Playback speed multiplier.")
+}).passthrough();
+var config4 = {
+  id: "parallax",
+  component: Parallax,
+  name: "Parallax",
+  category: "effects",
+  kind: "component",
+  version: "0.1.0",
+  intent: "parallax-pan",
+  description: 'Ken-Burns-style slow zoom + pan over a still image. Adds depth and "the camera is moving" feel to static photography. Five pan directions plus none-for-zoom-only.',
+  useWhen: 'Photo backgrounds in a montage, biographical clips ("a young Einstein..."), travel/landscape moments, anywhere a still image would feel static. Best at the canonical 1.2\xD7\u20131.4\xD7 zoom range.',
+  pairsWith: ["vignette", "color-grade", "lower-third", "cinematic-title"],
+  avoidWith: ["ken-burns"],
+  tier: "standard",
+  useCase: ["background"],
+  tags: ["effect", "ken-burns", "parallax", "pan", "zoom", "image", "cinematic"],
+  mood: ["cinematic", "editorial", "soft"],
+  paramsSchema: paramsSchema4,
+  propDefaults: { zoom: 1.2, pan: "left", speed: 1 },
+  examples: [
+    {
+      name: "gentle-pan-left",
+      mood: ["cinematic"],
+      params: { src: "https://images.unsplash.com/photo-1506744038136-46273834b3fb?w=1920", zoom: 1.3, pan: "left", speed: 1 }
+    },
+    {
+      name: "zoom-only",
+      mood: ["editorial"],
+      params: { src: "https://images.unsplash.com/photo-1506744038136-46273834b3fb?w=1920", zoom: 1.4, pan: "none", speed: 1 }
+    }
+  ],
+  textParam: null,
+  subtextParam: null,
+  tokens: [],
+  durationInFrames: 180,
+  fps: 30,
+  width: 1920,
+  height: 1080,
+  preview: { thumbnailFrame: 90, mode: "oneshot", defaultExample: "gentle-pan-left" }
+};
+
+// src/effects/particles/config.ts
+import { z as z5 } from "zod";
+var paramsSchema5 = z5.object({
+  preset: z5.enum(["dust", "bokeh", "snow", "sparks", "embers", "fireflies"]).default("dust").describe(
+    "Particle aesthetic. dust: drifting motes. bokeh: soft glowing circles. snow: falling crystals. sparks: rising glow. embers: warm rising. fireflies: flicker."
+  ),
+  count: z5.number().int().min(5).max(300).default(60).describe("Particle count. 30\u2013100 is the sweet spot."),
+  size: z5.number().min(1).max(60).optional().describe("Override base particle size in px. Defaults vary per preset."),
+  color: z5.string().optional().describe("Override particle color. Defaults vary per preset."),
+  opacity: z5.number().min(0).max(1).default(0.6).describe("Overall opacity multiplier."),
+  wind: z5.number().min(-1).max(1).optional().describe("Horizontal drift force. Positive = right."),
+  gravity: z5.number().min(-1).max(1).optional().describe("Vertical force. Positive = down."),
+  speed: z5.number().min(0.25).max(4).default(1).describe("Playback speed multiplier.")
+}).passthrough();
+var config5 = {
+  id: "particles",
+  component: Particles,
+  name: "Particles",
+  category: "effects",
+  kind: "component",
+  version: "0.1.1",
+  intent: "particle-overlay",
+  description: "Configurable ambient particle layer rendered via Canvas. Six presets cover the most common atmospheric needs (dust, bokeh, snow, sparks, embers, fireflies) and each is tunable via overrides for size, color, count, wind, and gravity.",
+  useWhen: "Add atmosphere to a scene that feels too sterile. Bokeh for warmth, dust for cinematic film grain extras, snow for winter mood, sparks for reveals, fireflies for whimsy. Avoid combining two preset types \u2014 feels muddled.",
+  pairsWith: ["parallax", "vignette", "color-grade", "cinematic-title", "mesh-gradient-bg"],
+  avoidWith: ["grain"],
+  tier: "niche",
+  useCase: ["background"],
+  tags: ["effect", "particles", "atmosphere", "bokeh", "dust", "snow", "fireflies", "sparks"],
+  mood: ["cinematic", "soft", "playful"],
+  paramsSchema: paramsSchema5,
+  propDefaults: { preset: "dust", count: 60, opacity: 0.6, speed: 1 },
+  examples: [
+    {
+      name: "soft-bokeh",
+      mood: ["cinematic", "soft"],
+      params: { preset: "bokeh", count: 40, opacity: 0.5, speed: 1 }
+    },
+    {
+      name: "falling-snow",
+      mood: ["cinematic"],
+      params: { preset: "snow", count: 120, opacity: 0.8, speed: 1 }
+    },
+    {
+      name: "fireflies-summer",
+      mood: ["playful", "soft"],
+      params: { preset: "fireflies", count: 30, opacity: 0.9, speed: 0.8 }
+    }
+  ],
+  textParam: null,
+  subtextParam: null,
+  tokens: [],
+  durationInFrames: 180,
+  fps: 30,
+  width: 1920,
+  height: 1080,
+  preview: { thumbnailFrame: 90, mode: "loop", defaultExample: "soft-bokeh" }
+};
+
+// src/effects/pulsing-indicator/config.ts
+import { z as z6 } from "zod";
+var paramsSchema6 = z6.object({
+  color: z6.string().default(DANGER).describe('Pulse dot color. Red is canonical for "live" / "recording".'),
+  size: z6.number().min(8).max(64).default(16).describe("Diameter of the inner dot in pixels at 1920\xD71080."),
+  period: z6.number().min(20).max(180).default(60).describe("Frames per full pulse cycle. 60 frames = 2 seconds at 30fps."),
+  speed: z6.number().min(0.25).max(4).default(1).describe("Playback speed multiplier \u2014 overrides perceived period."),
+  background: z6.string().optional().describe("Optional background color behind the indicator.")
+}).passthrough();
+var config6 = {
+  id: "pulsing-indicator",
+  component: PulsingIndicator,
+  name: "Pulsing Indicator",
+  category: "effects",
+  kind: "component",
+  version: "0.1.1",
+  intent: "particle-overlay",
+  description: 'Small pulsing dot \u2014 the canonical "LIVE", "RECORDING", or "ACTIVE" indicator. A solid dot in the center, surrounded by a ring of decaying outer pulses radiating outward.',
+  useWhen: 'Live streaming overlays, recording badges, "you are here" indicators in a UI walkthrough, status pings. Pair with a tiny text label ("LIVE") for clarity. Avoid for any moment that needs the eye elsewhere \u2014 the pulse is hypnotic.',
+  pairsWith: ["lower-third", "toast-notification", "typewriter"],
+  avoidWith: [],
+  tier: "standard",
+  useCase: ["emphasis"],
+  tags: ["effect", "pulse", "indicator", "live", "badge", "status", "loop"],
+  mood: ["breaking-news", "tech-demo", "minimal"],
+  paramsSchema: paramsSchema6,
+  propDefaults: { color: DANGER, size: 16, period: 60, speed: 1 },
+  examples: [
+    {
+      name: "live-red",
+      mood: ["breaking-news"],
+      params: { color: DANGER, size: 16, period: 60, speed: 1 }
+    },
+    {
+      name: "recording-amber",
+      mood: ["tech-demo"],
+      params: { color: WARNING, size: 14, period: 50, speed: 1.2 }
+    }
+  ],
+  textParam: null,
+  subtextParam: null,
+  tokens: [
+    { propPath: "color", cssVar: "--cf-accent", fallback: DANGER, brandKitPath: "colors.accent" }
+  ],
+  durationInFrames: 60,
+  fps: 30,
+  width: 200,
+  height: 200,
+  preview: { thumbnailFrame: 30, mode: "loop", defaultExample: "live-red" }
+};
+
+// src/effects/spotlight-card/config.ts
+import { z as z7 } from "zod";
+var paramsSchema7 = z7.object({
+  title: z7.string().max(140).default("Spotlight Card").describe(
+    "Card headline. Keep \u22646 words; the spotlight effect is the hero, not the copy. Auto-fits (shrinks + wraps to 2 lines) to the card."
+  ),
+  body: z7.string().max(360).default("Soft radial light follows the cursor, picking out the microborder.").describe(
+    "Supporting copy beneath the title. 1\u20132 sentences max \u2014 content sits in a small footer block. Auto-fits (shrinks + wraps to 4 lines)."
+  ),
+  cardWidth: z7.number().min(200).max(1600).default(520).describe(
+    "Card width in pixels at 1920\xD71080. 480\u2013640 is the sweet spot for a single-card hero."
+  ),
+  cardHeight: z7.number().min(120).max(900).default(320).describe(
+    "Card height in pixels. 280\u2013360 reads like a product card; >500 starts feeling like a panel."
+  ),
+  glowSize: z7.number().min(100).max(2e3).default(600).describe(
+    "Radius of the moving radial spotlight in pixels. Larger = softer, more diffuse light."
+  ),
+  glowOpacity: z7.number().min(0).max(1).default(0.08).describe(
+    "Surface glow strength. 0.06\u20130.12 reads as subtle premium; >0.2 looks like a flashlight."
+  ),
+  background: z7.string().default(BG).describe("Frame background behind the card."),
+  cardColor: z7.string().default(SURFACE).describe("Card surface fill."),
+  textColor: z7.string().default(TEXT_HI).describe("Title color."),
+  mutedColor: z7.string().default(TEXT_MUTED).describe("Body/secondary text color."),
+  speed: z7.number().min(0.25).max(4).default(1).describe("Cursor-tour playback speed multiplier.")
+}).passthrough();
+var config7 = {
+  id: "spotlight-card",
+  component: SpotlightCard,
+  name: "Spotlight Card",
+  category: "effects",
+  kind: "component",
+  version: "0.1.1",
+  intent: "highlight-area",
+  description: 'Premium product-card primitive with a soft radial spotlight that drifts across the surface on a slow Lissajous path. The cursor-following light picks out a 1px microborder so the card always has a "hovered" feel even on still frames. Linear/Vercel/Stripe-style hero card.',
+  useWhen: 'Hero cards, feature callouts, "what we shipped" beats, premium SaaS product showcases on a dark background. Avoid on light backgrounds (the radial highlight needs darkness to read) and avoid stacking multiple spotlight cards in one frame \u2014 the wandering lights compete.',
+  pairsWith: ["mesh-gradient-bg", "dynamic-grid", "grain", "kinetic-type"],
+  avoidWith: ["vignette"],
+  tier: "recommended",
+  useCase: ["emphasis", "full-scene"],
+  tags: ["effect", "card", "spotlight", "cursor", "glow", "premium", "saas"],
+  mood: ["tech-demo", "minimal", "corporate", "editorial"],
+  paramsSchema: paramsSchema7,
+  propDefaults: {
+    title: "Spotlight Card",
+    body: "Soft radial light follows the cursor, picking out the microborder.",
+    cardWidth: 520,
+    cardHeight: 320,
+    glowSize: 600,
+    glowOpacity: 0.08,
+    background: BG,
+    cardColor: SURFACE,
+    textColor: TEXT_HI,
+    mutedColor: TEXT_MUTED,
+    speed: 1
+  },
+  examples: [
+    {
+      name: "product-hero",
+      mood: ["tech-demo", "minimal"],
+      params: { title: "Now Generally Available", body: "Ship faster with sub-second cold starts and zero infrastructure to manage.", glowSize: 600, glowOpacity: 0.1 },
+      description: "Default product-launch card on dark bg."
+    },
+    {
+      name: "subtle-feature",
+      mood: ["corporate", "minimal"],
+      params: { title: "Audit Logs", body: "Every action, every actor, every change.", glowSize: 480, glowOpacity: 0.06, cardWidth: 480, cardHeight: 280 },
+      description: "Smaller, calmer feature card for a grid of three."
+    },
+    {
+      name: "editorial-quote",
+      mood: ["editorial"],
+      params: { title: `"Honestly, the best DX we've seen."`, body: "Lead Engineer, Linear", glowSize: 700, glowOpacity: 0.12, cardWidth: 640, cardHeight: 360, textColor: TEXT_HI, mutedColor: TEXT_MUTED }
+    }
+  ],
+  textParam: "title",
+  subtextParam: "body",
+  tokens: [
+    { propPath: "background", cssVar: "--cf-bg", fallback: BG, brandKitPath: "colors.background" },
+    { propPath: "cardColor", cssVar: "--cf-surface", fallback: SURFACE, brandKitPath: "colors.surface" },
+    { propPath: "textColor", cssVar: "--cf-fg", fallback: TEXT_HI, brandKitPath: "colors.textOnSurface" },
+    { propPath: "mutedColor", cssVar: "--cf-muted", fallback: TEXT_MUTED, brandKitPath: "colors.textMuted" }
+  ],
+  durationInFrames: 240,
+  fps: 30,
+  width: 1920,
+  height: 1080,
+  preview: { thumbnailFrame: 90, mode: "loop", defaultExample: "product-hero" }
+};
+
+// src/effects/spring-pop-in/config.ts
+import { z as z8 } from "zod";
+var paramsSchema8 = z8.object({
+  damping: z8.number().min(2).max(40).default(12).describe("Spring damping. Lower = more bounce; higher = faster settle."),
+  mass: z8.number().min(0.1).max(5).default(1).describe("Spring mass. Higher feels heavier and overshoots more."),
+  stiffness: z8.number().min(20).max(400).default(140).describe("Spring stiffness. Higher = snappier response."),
+  delayInFrames: z8.number().int().min(0).max(120).default(0).describe("Frames to wait before the entrance starts."),
+  speed: z8.number().min(0.25).max(4).default(1).describe("Playback speed multiplier."),
+  background: z8.string().default("transparent").describe("Stage color behind the popping child. Keep transparent when compositing over a scene.")
+}).passthrough();
+var config8 = {
+  id: "spring-pop-in",
+  component: SpringPopIn,
+  name: "Spring Pop In",
+  category: "effects",
+  kind: "component",
+  version: "0.1.2",
+  intent: "particle-overlay",
+  description: "Wrapper that pops any child element into view with spring-driven scale. The child appears with a satisfying overshoot bounce and settles. Composable with any primitive that needs a more interesting entrance than a plain fade.",
+  useWhen: 'Wrap around badges, icons, callouts, modal dialogs, anything that should "arrive" with weight. Avoid wrapping text that has its own entrance animation (typewriter, blur-reveal) \u2014 double-animation.',
+  pairsWith: ["toast-notification", "pulsing-indicator", "success-confetti"],
+  avoidWith: ["blur-reveal", "tracking-in"],
+  tier: "standard",
+  useCase: ["emphasis"],
+  tags: ["effect", "spring", "pop-in", "wrapper", "entrance", "bounce"],
+  mood: ["playful", "tech-demo", "soft"],
+  paramsSchema: paramsSchema8,
+  propDefaults: { damping: 12, mass: 1, stiffness: 140, delayInFrames: 0, speed: 1, background: "transparent" },
+  examples: [
+    {
+      name: "default-bounce",
+      mood: ["playful"],
+      params: { damping: 12, mass: 1, stiffness: 140, delayInFrames: 0, speed: 1 }
+    },
+    {
+      name: "gentle-arrive",
+      mood: ["soft"],
+      params: { damping: 18, mass: 0.8, stiffness: 100, delayInFrames: 0, speed: 1 }
+    },
+    {
+      name: "snappy-pop",
+      mood: ["tech-demo"],
+      params: { damping: 8, mass: 0.6, stiffness: 220, delayInFrames: 0, speed: 1.1 }
+    }
+  ],
+  textParam: null,
+  subtextParam: null,
+  tokens: [],
+  durationInFrames: 60,
+  fps: 30,
+  width: 1920,
+  height: 1080,
+  preview: { thumbnailFrame: 30, mode: "oneshot", defaultExample: "default-bounce" }
+};
+
+// src/effects/success-confetti/config.ts
+import { z as z9 } from "zod";
+var paramsSchema9 = z9.object({
+  count: z9.number().int().min(10).max(400).default(120).describe("Number of confetti particles. 80\u2013150 reads festive without overwhelming."),
+  colors: z9.array(z9.string()).min(1).default([DANGER, WARNING, SUCCESS, TEAL, VIOLET]).describe("Particle colors to sample from. 4\u20136 distinct hues works best."),
+  originX: z9.number().min(0).max(1).default(0.5).describe("Horizontal origin of the burst, normalized 0\u20131."),
+  originY: z9.number().min(0).max(1).default(0.5).describe("Vertical origin of the burst, normalized 0\u20131."),
+  gravity: z9.number().min(0).max(2).default(0.8).describe("Downward acceleration. 0 = particles drift; 1+ = particles fall fast."),
+  velocity: z9.number().min(1).max(40).default(14).describe("Initial burst speed. Higher = particles travel further."),
+  text: z9.string().optional().describe('Optional centered text on top of the confetti (e.g., "\u2713 Done").'),
+  textColor: z9.string().default(SURFACE).describe("Color of the optional text."),
+  background: z9.string().optional().describe("Optional full-frame background behind the burst."),
+  seed: z9.string().default("cueframe").describe("Deterministic seed for the particle distribution."),
+  speed: z9.number().min(0.25).max(4).default(1).describe("Playback speed multiplier.")
+}).passthrough();
+var config9 = {
+  id: "success-confetti",
+  component: SuccessConfetti,
+  name: "Success Confetti",
+  category: "effects",
+  kind: "component",
+  version: "0.1.1",
+  intent: "particle-overlay",
+  description: "Particle burst from a configurable origin point \u2014 confetti, success celebration, achievement unlock. Colors cycle through a palette; gravity and velocity tune the physics.",
+  useWhen: 'Demo end cards, "you did it!" beats, deal closed, level cleared, milestone hit. Overlay on top of any other content. Avoid for serious/editorial moments \u2014 confetti is loud.',
+  pairsWith: ["blur-reveal", "shimmer-sweep", "kinetic-type"],
+  avoidWith: ["glitch-cut", "matrix-decode"],
+  tier: "niche",
+  useCase: ["emphasis"],
+  tags: ["effect", "confetti", "celebration", "particles", "success", "achievement"],
+  mood: ["playful", "breaking-news"],
+  paramsSchema: paramsSchema9,
+  propDefaults: { count: 120, colors: [DANGER, WARNING, SUCCESS, TEAL, VIOLET], originX: 0.5, originY: 0.5, gravity: 0.8, velocity: 14, textColor: SURFACE, seed: "cueframe", speed: 1 },
+  examples: [
+    {
+      name: "classic-burst",
+      mood: ["playful"],
+      params: { count: 120, originX: 0.5, originY: 0.5, gravity: 0.8, velocity: 14, seed: "cueframe", speed: 1 }
+    },
+    {
+      name: "with-text",
+      mood: ["playful"],
+      params: { count: 100, originX: 0.5, originY: 0.4, gravity: 0.7, velocity: 12, text: "\u2713 Done", textColor: BG, seed: "win", speed: 1 }
+    }
+  ],
+  textParam: "text",
+  subtextParam: null,
+  tokens: [
+    { propPath: "textColor", cssVar: "--cf-text", fallback: SURFACE, brandKitPath: "colors.text" }
+  ],
+  durationInFrames: 90,
+  fps: 30,
+  width: 1920,
+  height: 1080,
+  preview: { thumbnailFrame: 18, mode: "oneshot", defaultExample: "classic-burst" }
+};
+
+// src/effects/vignette/config.ts
+import { z as z10 } from "zod";
+var paramsSchema10 = z10.object({
+  intensity: z10.number().min(0).max(1).default(0.5).describe("Edge darkness. 0.4\u20130.6 reads as cinematic; 0.8+ feels like a tunnel."),
+  spread: z10.number().min(0).max(1).default(0.5).describe("How far from the edges the vignette starts. Lower = covers more of the frame."),
+  shape: z10.enum(["ellipse", "circle"]).default("ellipse").describe("Gradient shape. Ellipse follows the frame ratio; circle is centered round."),
+  color: z10.string().default("black").describe("Vignette color. Black is canonical; dark colors can tint the frame edges.")
+}).passthrough();
+var config10 = {
+  id: "vignette",
+  component: Vignette,
+  name: "Vignette",
+  category: "effects",
+  kind: "component",
+  version: "0.1.0",
+  intent: "depth-blur",
+  description: "Edge darkening overlay. Pure CSS radial-gradient \u2014 no canvas needed. Pulls focus to the center of the frame and adds cinematic depth.",
+  useWhen: "Anywhere you want to focus the eye toward the center: speaker close-ups, hero text frames, dramatic moments. Avoid combining with letterbox at high intensity (frame gets too dark) or for moments that need full peripheral visibility.",
+  pairsWith: ["parallax", "color-grade", "grain", "cinematic-title"],
+  avoidWith: [],
+  tier: "standard",
+  useCase: ["grade"],
+  tags: ["effect", "vignette", "edge", "darken", "focus", "cinematic"],
+  mood: ["cinematic", "editorial", "minimal"],
+  paramsSchema: paramsSchema10,
+  propDefaults: { intensity: 0.5, spread: 0.5, shape: "ellipse", color: "black" },
+  examples: [
+    {
+      name: "cinematic",
+      mood: ["cinematic"],
+      params: { intensity: 0.6, spread: 0.4, shape: "ellipse", color: "black" }
+    },
+    {
+      name: "subtle-focus",
+      mood: ["minimal"],
+      params: { intensity: 0.3, spread: 0.6, shape: "ellipse", color: "black" }
+    }
+  ],
+  textParam: null,
+  subtextParam: null,
+  tokens: [],
+  durationInFrames: 60,
+  fps: 30,
+  width: 1920,
+  height: 1080,
+  preview: { thumbnailFrame: 30, mode: "oneshot", defaultExample: "cinematic" }
+};
+
+// src/effects/index.ts
+var catalog = [
+  config,
+  config2,
+  config3,
+  config4,
+  config5,
+  config6,
+  config7,
+  config8,
+  config9,
+  config10
+];
+
+export {
+  Blur,
+  ColorGrade,
+  Grain,
+  Parallax,
+  Particles,
+  PulsingIndicator,
+  SpotlightCard,
+  SpringPopIn,
+  SuccessConfetti,
+  Vignette,
+  catalog
+};
+//# sourceMappingURL=chunk-WZFLEGMD.js.map