@cueframe/kernel 0.0.1

package/dist/_members/primitives/chunk-5MWGAEGQ.js

@@ -0,0 +1,1644 @@
+import {
+  FrostedGlassWipe,
+  SpatialPush,
+  frostedGlassWipe,
+  spatialPush
+} from "./chunk-US4YEDAA.js";
+import {
+  ACCENT,
+  BG,
+  BG_DEEP,
+  BORDER,
+  DANGER,
+  TEXT,
+  TEXT_HI,
+  TEXT_MUTED,
+  VIOLET,
+  WARNING
+} from "./chunk-3OMURV6Q.js";
+
+// src/transitions/light-leak/index.tsx
+import { useMemo } from "react";
+import { AbsoluteFill, interpolate } from "remotion";
+import { jsx, jsxs } from "react/jsx-runtime";
+var LightLeakPresentation = ({ children, presentationDirection, presentationProgress, passedProps }) => {
+  const { hue = 30 } = passedProps;
+  const isEntering = presentationDirection === "entering";
+  const style = useMemo(() => {
+    if (isEntering) {
+      const opacity2 = interpolate(presentationProgress, [0, 0.4, 1], [0, 0, 1], {
+        extrapolateLeft: "clamp",
+        extrapolateRight: "clamp"
+      });
+      return { opacity: opacity2 };
+    }
+    const opacity = interpolate(presentationProgress, [0, 0.6, 1], [1, 0, 0], {
+      extrapolateLeft: "clamp",
+      extrapolateRight: "clamp"
+    });
+    return { opacity };
+  }, [isEntering, presentationProgress]);
+  const leakOpacity = interpolate(
+    presentationProgress,
+    [0, 0.3, 0.5, 0.7, 1],
+    [0, 0.8, 1, 0.8, 0],
+    { extrapolateLeft: "clamp", extrapolateRight: "clamp" }
+  );
+  return /* @__PURE__ */ jsxs(AbsoluteFill, { children: [
+    /* @__PURE__ */ jsx(AbsoluteFill, { style, children }),
+    isEntering && /* @__PURE__ */ jsx(
+      AbsoluteFill,
+      {
+        style: {
+          background: `linear-gradient(
+              135deg,
+              hsla(${hue}, 100%, 70%, ${leakOpacity * 0.9}),
+              hsla(${hue + 40}, 100%, 80%, ${leakOpacity * 0.6}),
+              hsla(${hue + 80}, 100%, 60%, ${leakOpacity * 0.3})
+            )`,
+          mixBlendMode: "screen",
+          pointerEvents: "none"
+        }
+      }
+    )
+  ] });
+};
+var lightLeak = (props) => ({
+  component: LightLeakPresentation,
+  props: props ?? {}
+});
+var LightLeak = LightLeakPresentation;
+
+// src/transitions/ink-wipe/index.tsx
+import { useMemo as useMemo2 } from "react";
+import { AbsoluteFill as AbsoluteFill2, interpolate as interpolate2 } from "remotion";
+import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+var InkWipePresentation = ({ children, presentationDirection, presentationProgress, passedProps }) => {
+  const { direction = "left", color = "black" } = passedProps;
+  const isEntering = presentationDirection === "entering";
+  const clipPath = useMemo2(() => {
+    const p = presentationProgress;
+    if (isEntering) {
+      switch (direction) {
+        case "left":
+          return `inset(0 ${interpolate2(p, [0, 1], [100, 0])}% 0 0)`;
+        case "right":
+          return `inset(0 0 0 ${interpolate2(p, [0, 1], [100, 0])}%)`;
+        case "up":
+          return `inset(0 0 ${interpolate2(p, [0, 1], [100, 0])}% 0)`;
+        case "down":
+          return `inset(${interpolate2(p, [0, 1], [100, 0])}% 0 0 0)`;
+      }
+    } else {
+      switch (direction) {
+        case "left":
+          return `inset(0 0 0 ${interpolate2(p, [0, 1], [0, 100])}%)`;
+        case "right":
+          return `inset(0 ${interpolate2(p, [0, 1], [0, 100])}% 0 0)`;
+        case "up":
+          return `inset(${interpolate2(p, [0, 1], [0, 100])}% 0 0 0)`;
+        case "down":
+          return `inset(0 0 ${interpolate2(p, [0, 1], [0, 100])}% 0)`;
+      }
+    }
+  }, [direction, isEntering, presentationProgress]);
+  const style = useMemo2(
+    () => ({ clipPath }),
+    [clipPath]
+  );
+  const edgeOpacity = interpolate2(
+    presentationProgress,
+    [0, 0.1, 0.9, 1],
+    [0, 1, 1, 0],
+    { extrapolateLeft: "clamp", extrapolateRight: "clamp" }
+  );
+  const edgeStyle = useMemo2(() => {
+    const base = {
+      position: "absolute",
+      backgroundColor: color,
+      opacity: edgeOpacity,
+      pointerEvents: "none"
+    };
+    const pos = `${presentationProgress * 100}%`;
+    switch (direction) {
+      case "left":
+        return { ...base, top: 0, bottom: 0, right: pos, width: 4 };
+      case "right":
+        return { ...base, top: 0, bottom: 0, left: pos, width: 4 };
+      case "up":
+        return { ...base, left: 0, right: 0, bottom: pos, height: 4 };
+      case "down":
+        return { ...base, left: 0, right: 0, top: pos, height: 4 };
+    }
+  }, [color, direction, edgeOpacity, presentationProgress]);
+  return /* @__PURE__ */ jsxs2(AbsoluteFill2, { children: [
+    /* @__PURE__ */ jsx2(AbsoluteFill2, { style, children }),
+    isEntering && /* @__PURE__ */ jsx2("div", { style: edgeStyle })
+  ] });
+};
+var inkWipe = (props) => ({
+  component: InkWipePresentation,
+  props: props ?? {}
+});
+var InkWipe = InkWipePresentation;
+
+// src/transitions/luma-matte/index.tsx
+import { useMemo as useMemo3 } from "react";
+import { AbsoluteFill as AbsoluteFill3, interpolate as interpolate3 } from "remotion";
+import { jsx as jsx3 } from "react/jsx-runtime";
+var LumaMattePresentation = ({ children, presentationDirection, presentationProgress, passedProps }) => {
+  const { matte = "smoke" } = passedProps;
+  const isEntering = presentationDirection === "entering";
+  const style = useMemo3(() => {
+    const sweepPos = interpolate3(presentationProgress, [0, 1], [-20, 120], {
+      extrapolateLeft: "clamp",
+      extrapolateRight: "clamp"
+    });
+    let softness;
+    let gradientAngle;
+    switch (matte) {
+      case "smoke":
+        softness = 30;
+        gradientAngle = "to right";
+        break;
+      case "brush":
+        softness = 15;
+        gradientAngle = "135deg";
+        break;
+      case "geometric":
+        softness = 5;
+        gradientAngle = "to right";
+        break;
+    }
+    const maskStart = sweepPos - softness;
+    const maskEnd = sweepPos + softness;
+    if (isEntering) {
+      return {
+        maskImage: `linear-gradient(${gradientAngle}, transparent ${maskStart}%, black ${maskEnd}%)`,
+        WebkitMaskImage: `linear-gradient(${gradientAngle}, transparent ${maskStart}%, black ${maskEnd}%)`
+      };
+    }
+    return {
+      maskImage: `linear-gradient(${gradientAngle}, black ${maskStart}%, transparent ${maskEnd}%)`,
+      WebkitMaskImage: `linear-gradient(${gradientAngle}, black ${maskStart}%, transparent ${maskEnd}%)`
+    };
+  }, [isEntering, matte, presentationProgress]);
+  return /* @__PURE__ */ jsx3(AbsoluteFill3, { style, children });
+};
+var lumaMatte = (props) => ({
+  component: LumaMattePresentation,
+  props: props ?? {}
+});
+var LumaMatte = LumaMattePresentation;
+
+// src/transitions/glitch-cut/index.tsx
+import { useMemo as useMemo4 } from "react";
+import { AbsoluteFill as AbsoluteFill4, interpolate as interpolate4 } from "remotion";
+import { jsx as jsx4 } from "react/jsx-runtime";
+var GlitchCutPresentation = ({ children, presentationDirection, presentationProgress, passedProps }) => {
+  const { intensity = 0.5, slices = 5 } = passedProps;
+  const isEntering = presentationDirection === "entering";
+  const glitchAmount = interpolate4(
+    presentationProgress,
+    [0, 0.3, 0.5, 0.7, 1],
+    [0, 1, 1, 1, 0],
+    { extrapolateLeft: "clamp", extrapolateRight: "clamp" }
+  );
+  const maxShift = intensity * 20;
+  const style = useMemo4(() => {
+    const shift = glitchAmount * maxShift;
+    const filter = shift > 0.5 ? `drop-shadow(${shift}px 0 0 rgba(255,0,0,0.5)) drop-shadow(${-shift}px 0 0 rgba(0,255,255,0.5))` : "none";
+    let opacity;
+    if (isEntering) {
+      opacity = interpolate4(presentationProgress, [0, 0.45, 0.55, 1], [0, 0, 1, 1], {
+        extrapolateLeft: "clamp",
+        extrapolateRight: "clamp"
+      });
+    } else {
+      opacity = interpolate4(presentationProgress, [0, 0.45, 0.55, 1], [1, 1, 0, 0], {
+        extrapolateLeft: "clamp",
+        extrapolateRight: "clamp"
+      });
+    }
+    const sliceOffset = glitchAmount > 0 ? `translateX(${Math.sin(presentationProgress * slices * Math.PI) * shift * 0.5}px)` : "none";
+    return {
+      filter,
+      opacity,
+      transform: sliceOffset
+    };
+  }, [glitchAmount, isEntering, maxShift, presentationProgress, slices]);
+  return /* @__PURE__ */ jsx4(AbsoluteFill4, { style, children });
+};
+var glitchCut = (props) => ({
+  component: GlitchCutPresentation,
+  props: props ?? {}
+});
+var GlitchCut = GlitchCutPresentation;
+
+// src/transitions/zoom-through/index.tsx
+import { useMemo as useMemo5 } from "react";
+import { AbsoluteFill as AbsoluteFill5, interpolate as interpolate5 } from "remotion";
+import { jsx as jsx5 } from "react/jsx-runtime";
+var ZoomThroughPresentation = ({ children, presentationDirection, presentationProgress, passedProps }) => {
+  const { zoomPoint = { x: 0.5, y: 0.5 } } = passedProps;
+  const isEntering = presentationDirection === "entering";
+  const style = useMemo5(() => {
+    const originX = `${zoomPoint.x * 100}%`;
+    const originY = `${zoomPoint.y * 100}%`;
+    if (isEntering) {
+      const scale2 = interpolate5(presentationProgress, [0, 1], [3, 1], {
+        extrapolateLeft: "clamp",
+        extrapolateRight: "clamp"
+      });
+      const opacity2 = interpolate5(presentationProgress, [0, 0.3, 1], [0, 1, 1], {
+        extrapolateLeft: "clamp",
+        extrapolateRight: "clamp"
+      });
+      return {
+        transform: `scale(${scale2})`,
+        transformOrigin: `${originX} ${originY}`,
+        opacity: opacity2
+      };
+    }
+    const scale = interpolate5(presentationProgress, [0, 1], [1, 3], {
+      extrapolateLeft: "clamp",
+      extrapolateRight: "clamp"
+    });
+    const opacity = interpolate5(presentationProgress, [0, 0.7, 1], [1, 1, 0], {
+      extrapolateLeft: "clamp",
+      extrapolateRight: "clamp"
+    });
+    return {
+      transform: `scale(${scale})`,
+      transformOrigin: `${originX} ${originY}`,
+      opacity
+    };
+  }, [isEntering, presentationProgress, zoomPoint]);
+  return /* @__PURE__ */ jsx5(AbsoluteFill5, { style, children });
+};
+var zoomThrough = (props) => ({
+  component: ZoomThroughPresentation,
+  props: props ?? {}
+});
+var ZoomThrough = ZoomThroughPresentation;
+
+// src/transitions/morph/index.tsx
+import { useMemo as useMemo6 } from "react";
+import { AbsoluteFill as AbsoluteFill6, interpolate as interpolate6 } from "remotion";
+import { jsx as jsx6 } from "react/jsx-runtime";
+var MorphPresentation = ({ children, presentationDirection, presentationProgress, passedProps }) => {
+  const { type = "dissolve" } = passedProps;
+  const isEntering = presentationDirection === "entering";
+  const style = useMemo6(() => {
+    const opacity = isEntering ? presentationProgress : 1 - presentationProgress;
+    if (type === "displacement") {
+      const scale = isEntering ? interpolate6(presentationProgress, [0, 1], [1.05, 1], {
+        extrapolateLeft: "clamp",
+        extrapolateRight: "clamp"
+      }) : interpolate6(presentationProgress, [0, 1], [1, 0.95], {
+        extrapolateLeft: "clamp",
+        extrapolateRight: "clamp"
+      });
+      return {
+        opacity,
+        transform: `scale(${scale})`
+      };
+    }
+    return { opacity };
+  }, [isEntering, presentationProgress, type]);
+  return /* @__PURE__ */ jsx6(AbsoluteFill6, { style, children });
+};
+var morph = (props) => ({
+  component: MorphPresentation,
+  props: props ?? {}
+});
+var Morph = MorphPresentation;
+
+// src/transitions/chromatic-aberration-wipe/index.tsx
+import { Easing, interpolate as interpolate7 } from "remotion";
+import { jsx as jsx7 } from "react/jsx-runtime";
+var ChromaticAberrationWipePresentation = ({ children, presentationDirection, presentationProgress, passedProps }) => {
+  const { direction = "left", aberrationOffset = 8 } = passedProps;
+  const isEntering = presentationDirection === "entering";
+  const p = interpolate7(presentationProgress, [0, 1], [0, 1], {
+    easing: Easing.bezier(0.65, 0, 0.35, 1)
+  });
+  const sign = direction === "left" ? -1 : 1;
+  const offset = isEntering ? (1 - p) * 100 * -sign : p * 100 * sign;
+  const inPeak = presentationProgress > 0.25 && presentationProgress < 0.75;
+  const filter = inPeak ? `drop-shadow(-${aberrationOffset}px 0 0 rgba(255,0,0,0.8)) drop-shadow(${aberrationOffset}px 0 0 rgba(0,255,255,0.8))` : "none";
+  return /* @__PURE__ */ jsx7(
+    "div",
+    {
+      style: {
+        position: "absolute",
+        inset: 0,
+        overflow: "hidden",
+        transform: `translateX(${offset}%)`,
+        filter,
+        willChange: "transform"
+      },
+      children
+    }
+  );
+};
+var chromaticAberrationWipe = (props) => ({
+  component: ChromaticAberrationWipePresentation,
+  props: props ?? {}
+});
+var ChromaticAberrationWipe = ChromaticAberrationWipePresentation;
+
+// src/transitions/directional-wipe/index.tsx
+import { Easing as Easing2, interpolate as interpolate8 } from "remotion";
+import { jsx as jsx8 } from "react/jsx-runtime";
+var DirectionalWipePresentation = ({ children, presentationDirection, presentationProgress, passedProps }) => {
+  const { direction = "left" } = passedProps;
+  const isEntering = presentationDirection === "entering";
+  const p = interpolate8(presentationProgress, [0, 1], [0, 1], {
+    easing: Easing2.bezier(0.65, 0, 0.35, 1)
+  });
+  const axis = direction === "left" || direction === "right" ? "x" : "y";
+  const sign = direction === "left" || direction === "up" ? -1 : 1;
+  const offset = isEntering ? (1 - p) * 100 * -sign : p * 100 * sign;
+  const transform = axis === "x" ? `translateX(${offset}%)` : `translateY(${offset}%)`;
+  return /* @__PURE__ */ jsx8(
+    "div",
+    {
+      style: {
+        position: "absolute",
+        inset: 0,
+        overflow: "hidden",
+        transform,
+        willChange: "transform"
+      },
+      children
+    }
+  );
+};
+var directionalWipe = (props) => ({
+  component: DirectionalWipePresentation,
+  props: props ?? {}
+});
+var DirectionalWipe = DirectionalWipePresentation;
+
+// src/transitions/swipe-transition-wipe/index.tsx
+import { Easing as Easing3, interpolate as interpolate9 } from "remotion";
+import { jsx as jsx9, jsxs as jsxs3 } from "react/jsx-runtime";
+var SwipeTransitionWipePresentation = ({ children, presentationDirection, presentationProgress, passedProps }) => {
+  const { direction = "left", dimStrength = 0.4, parallaxFactor = 0.6 } = passedProps;
+  const isEntering = presentationDirection === "entering";
+  const sign = direction === "left" ? -1 : 1;
+  const p = interpolate9(presentationProgress, [0, 1], [0, 1], {
+    easing: Easing3.bezier(0.3, 0.9, 0.35, 1)
+  });
+  if (!isEntering) {
+    const dim = interpolate9(p, [0, 1], [0, dimStrength]);
+    return /* @__PURE__ */ jsxs3(
+      "div",
+      {
+        style: {
+          position: "absolute",
+          inset: 0,
+          overflow: "hidden",
+          transform: `translateX(${p * 100 * sign}%)`,
+          willChange: "transform"
+        },
+        children: [
+          children,
+          /* @__PURE__ */ jsx9("div", { style: { position: "absolute", inset: 0, background: "#000", opacity: dim } })
+        ]
+      }
+    );
+  }
+  const outer = (1 - p) * 100 * -sign;
+  const inner = (1 - p) * 30 * sign * parallaxFactor;
+  return /* @__PURE__ */ jsx9(
+    "div",
+    {
+      style: {
+        position: "absolute",
+        inset: 0,
+        overflow: "hidden",
+        transform: `translateX(${outer}%)`,
+        willChange: "transform"
+      },
+      children: /* @__PURE__ */ jsx9(
+        "div",
+        {
+          style: {
+            position: "absolute",
+            inset: 0,
+            transform: `translateX(${inner}%)`,
+            willChange: "transform"
+          },
+          children
+        }
+      )
+    }
+  );
+};
+var swipeTransitionWipe = (props) => ({
+  component: SwipeTransitionWipePresentation,
+  props: props ?? {}
+});
+var SwipeTransitionWipe = SwipeTransitionWipePresentation;
+
+// src/transitions/grid-pixelate-wipe/index.tsx
+import { useMemo as useMemo7 } from "react";
+import { interpolate as interpolate10 } from "remotion";
+import { jsx as jsx10, jsxs as jsxs4 } from "react/jsx-runtime";
+function spiralIndices(cols, rows) {
+  const out = Array.from({ length: rows }, () => Array(cols).fill(0));
+  let top = 0;
+  let bottom = rows - 1;
+  let left = 0;
+  let right = cols - 1;
+  let i = 0;
+  while (top <= bottom && left <= right) {
+    for (let x = left; x <= right; x++) out[top][x] = i++;
+    top++;
+    for (let y = top; y <= bottom; y++) out[y][right] = i++;
+    right--;
+    if (top <= bottom) {
+      for (let x = right; x >= left; x--) out[bottom][x] = i++;
+      bottom--;
+    }
+    if (left <= right) {
+      for (let y = bottom; y >= top; y--) out[y][left] = i++;
+      left++;
+    }
+  }
+  return out;
+}
+var GridPixelateWipePresentation = ({ children, presentationDirection, presentationProgress, passedProps }) => {
+  const {
+    cols = 12,
+    rows = 7,
+    pattern = "wave",
+    cellColor = "#0b0b10"
+  } = passedProps;
+  const isEntering = presentationDirection === "entering";
+  const p = presentationProgress;
+  const delays = useMemo7(() => {
+    const raw = Array.from({ length: rows }, () => Array(cols).fill(0));
+    const spiral = pattern === "spiral" ? spiralIndices(cols, rows) : null;
+    for (let y = 0; y < rows; y++) {
+      for (let x = 0; x < cols; x++) {
+        if (pattern === "wave") {
+          raw[y][x] = Math.hypot(x - (cols - 1) / 2, y - (rows - 1) / 2);
+        } else if (pattern === "diagonal") {
+          raw[y][x] = x + y;
+        } else if (spiral) {
+          raw[y][x] = spiral[y][x];
+        }
+      }
+    }
+    let min = Infinity;
+    let max = -Infinity;
+    for (const row of raw) for (const v of row) {
+      min = Math.min(min, v);
+      max = Math.max(max, v);
+    }
+    const range = max - min || 1;
+    return raw.map((row) => row.map((v) => (v - min) / range));
+  }, [cols, rows, pattern]);
+  const visible = isEntering ? p >= 0.5 : p < 0.5;
+  const cells = [];
+  if (isEntering) {
+    const FEATHER = 0.25;
+    for (let y = 0; y < rows; y++) {
+      for (let x = 0; x < cols; x++) {
+        const d = delays[y][x] * (1 - FEATHER);
+        const inO = interpolate10(p * 2, [d, d + FEATHER], [0, 1], {
+          extrapolateLeft: "clamp",
+          extrapolateRight: "clamp"
+        });
+        const outO = interpolate10(p * 2 - 1, [d, d + FEATHER], [1, 0], {
+          extrapolateLeft: "clamp",
+          extrapolateRight: "clamp"
+        });
+        const opacity = p < 0.5 ? inO : outO;
+        if (opacity <= 1e-3) continue;
+        cells.push(
+          /* @__PURE__ */ jsx10(
+            "div",
+            {
+              style: {
+                position: "absolute",
+                left: `${x / cols * 100}%`,
+                top: `${y / rows * 100}%`,
+                width: `${100 / cols}%`,
+                height: `${100 / rows}%`,
+                background: cellColor,
+                opacity
+              }
+            },
+            `${x}-${y}`
+          )
+        );
+      }
+    }
+  }
+  return /* @__PURE__ */ jsxs4("div", { style: { position: "absolute", inset: 0, overflow: "hidden" }, children: [
+    /* @__PURE__ */ jsx10("div", { style: { position: "absolute", inset: 0, opacity: visible ? 1 : 0 }, children }),
+    cells
+  ] });
+};
+var gridPixelateWipe = (props) => ({
+  component: GridPixelateWipePresentation,
+  props: props ?? {}
+});
+var GridPixelateWipe = GridPixelateWipePresentation;
+
+// src/transitions/kinetic-type-mask/index.tsx
+import { useId } from "react";
+import { Easing as Easing4, interpolate as interpolate11 } from "remotion";
+import { jsx as jsx11, jsxs as jsxs5 } from "react/jsx-runtime";
+var KineticTypeMaskPresentation = ({ children, presentationDirection, presentationProgress, passedProps }) => {
+  const { text = "NEXT", maxScale = 90 } = passedProps;
+  const isEntering = presentationDirection === "entering";
+  const rawId = useId().replace(/[:#]/g, "");
+  const clipId = `ktm-${rawId}`;
+  const slam = interpolate11(presentationProgress, [0, 0.25], [3, 1], {
+    extrapolateLeft: "clamp",
+    extrapolateRight: "clamp",
+    easing: Easing4.bezier(0.2, 0.9, 0.3, 1)
+  });
+  const grow = interpolate11(presentationProgress, [0.3, 1], [1, maxScale], {
+    extrapolateLeft: "clamp",
+    extrapolateRight: "clamp",
+    easing: Easing4.bezier(0.7, 0, 0.84, 0)
+  });
+  const scale = presentationProgress < 0.3 ? slam : grow;
+  if (!isEntering) {
+    return /* @__PURE__ */ jsx11("div", { style: { position: "absolute", inset: 0 }, children });
+  }
+  return /* @__PURE__ */ jsxs5("div", { style: { position: "absolute", inset: 0, overflow: "hidden" }, children: [
+    /* @__PURE__ */ jsx11(
+      "div",
+      {
+        style: {
+          position: "absolute",
+          inset: 0,
+          clipPath: `url(#${clipId})`,
+          WebkitClipPath: `url(#${clipId})`
+        },
+        children
+      }
+    ),
+    presentationProgress < 0.3 && /* @__PURE__ */ jsx11(
+      "div",
+      {
+        style: {
+          position: "absolute",
+          inset: 0,
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center",
+          fontSize: "70vh",
+          fontWeight: 900,
+          fontFamily: "inherit",
+          letterSpacing: "-0.04em",
+          color: "rgba(255,255,255,0.92)",
+          transform: `scale(${slam})`,
+          transformOrigin: "center center",
+          willChange: "transform",
+          mixBlendMode: "difference"
+        },
+        children: text
+      }
+    ),
+    /* @__PURE__ */ jsx11("svg", { width: "0", height: "0", style: { position: "absolute" }, children: /* @__PURE__ */ jsx11("defs", { children: /* @__PURE__ */ jsx11("clipPath", { id: clipId, clipPathUnits: "objectBoundingBox", children: /* @__PURE__ */ jsx11(
+      "text",
+      {
+        x: "0.5",
+        y: "0.62",
+        textAnchor: "middle",
+        fontSize: 0.42,
+        fontWeight: 900,
+        fontFamily: "Helvetica, Arial, sans-serif",
+        transform: `translate(0.5 0.5) scale(${scale}) translate(-0.5 -0.5)`,
+        children: text
+      }
+    ) }) }) })
+  ] });
+};
+var kineticTypeMask = (props) => ({
+  component: KineticTypeMaskPresentation,
+  props: props ?? {}
+});
+var KineticTypeMask = KineticTypeMaskPresentation;
+
+// src/transitions/zoom-through-transition/index.tsx
+import { Easing as Easing5, interpolate as interpolate12, useCurrentFrame } from "remotion";
+import { jsx as jsx12 } from "react/jsx-runtime";
+var FONT_FAMILY = "inherit";
+function DefaultContent() {
+  return /* @__PURE__ */ jsx12(
+    "div",
+    {
+      style: {
+        width: 320,
+        height: 200,
+        borderRadius: 24,
+        background: `linear-gradient(135deg, ${ACCENT} 0%, ${VIOLET} 100%)`,
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        color: TEXT_HI,
+        fontFamily: FONT_FAMILY,
+        fontSize: 48,
+        fontWeight: 700,
+        letterSpacing: "-0.03em"
+      },
+      children: "Zoom"
+    }
+  );
+}
+function ZoomThroughTransition({
+  children,
+  targetScale = 20,
+  transformOrigin = "center center",
+  background = "transparent",
+  beatFrames = 45,
+  speed = 1,
+  className
+}) {
+  const frame = useCurrentFrame() * speed;
+  const scale = interpolate12(frame, [0, beatFrames], [1, targetScale], {
+    extrapolateRight: "clamp",
+    easing: Easing5.bezier(0.7, 0, 0.84, 0)
+  });
+  const opacity = interpolate12(
+    frame,
+    [0, beatFrames * 0.7, beatFrames],
+    [1, 1, 0],
+    { extrapolateRight: "clamp" }
+  );
+  const content = children ?? /* @__PURE__ */ jsx12(DefaultContent, {});
+  return /* @__PURE__ */ jsx12(
+    "div",
+    {
+      className,
+      style: {
+        position: "absolute",
+        inset: 0,
+        background,
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        overflow: "hidden"
+      },
+      children: /* @__PURE__ */ jsx12(
+        "div",
+        {
+          style: {
+            transform: `scale(${scale})`,
+            transformOrigin,
+            opacity,
+            willChange: "transform, opacity"
+          },
+          children: content
+        }
+      )
+    }
+  );
+}
+
+// src/transitions/code-diff-wipe/index.tsx
+import { Easing as Easing6, interpolate as interpolate13, useCurrentFrame as useCurrentFrame2 } from "remotion";
+import { jsx as jsx13, jsxs as jsxs6 } from "react/jsx-runtime";
+var DEFAULT_BEFORE = `function getUser(id) {
+  return fetch('/api/user/' + id)
+    .then(function (res) {
+      return res.json();
+    })
+    .then(function (data) {
+      if (data.error) {
+        throw new Error(data.error);
+      }
+      return data.user;
+    });
+}`;
+var DEFAULT_AFTER = `async function getUser(id: string) {
+  const res = await fetch(\`/api/user/\${id}\`);
+  const { user, error } = await res.json();
+  if (error) throw new Error(error);
+  return user;
+}`;
+function CodeDiffWipe({
+  before = DEFAULT_BEFORE,
+  after = DEFAULT_AFTER,
+  language = "tsx",
+  background = BG,
+  accent = ACCENT,
+  transitionStart = 20,
+  transitionDuration = 60,
+  showHandle = true,
+  speed = 1,
+  className
+}) {
+  const frame = useCurrentFrame2() * speed;
+  const progress = interpolate13(
+    frame,
+    [transitionStart, transitionStart + transitionDuration],
+    [0, 1],
+    {
+      extrapolateLeft: "clamp",
+      extrapolateRight: "clamp",
+      easing: Easing6.inOut(Easing6.cubic)
+    }
+  );
+  const wipePercent = progress * 100;
+  return /* @__PURE__ */ jsx13(
+    "div",
+    {
+      className,
+      style: {
+        position: "absolute",
+        inset: 0,
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        background: BG_DEEP,
+        fontFamily: "inherit"
+      },
+      children: /* @__PURE__ */ jsxs6(
+        "div",
+        {
+          style: {
+            position: "relative",
+            width: 980,
+            height: 560,
+            borderRadius: 14,
+            overflow: "hidden",
+            background,
+            border: `1px solid ${BORDER}`
+          },
+          children: [
+            /* @__PURE__ */ jsx13(
+              CodePane,
+              {
+                code: after,
+                background,
+                label: "AFTER",
+                labelColor: accent,
+                language
+              }
+            ),
+            /* @__PURE__ */ jsx13(
+              "div",
+              {
+                style: {
+                  position: "absolute",
+                  inset: 0,
+                  clipPath: `inset(0 ${wipePercent}% 0 0)`
+                },
+                children: /* @__PURE__ */ jsx13(
+                  CodePane,
+                  {
+                    code: before,
+                    background,
+                    label: "BEFORE",
+                    labelColor: DANGER,
+                    language,
+                    dimmed: true
+                  }
+                )
+              }
+            ),
+            showHandle && wipePercent > 0 && wipePercent < 100 && /* @__PURE__ */ jsx13(
+              "div",
+              {
+                style: {
+                  position: "absolute",
+                  top: 0,
+                  bottom: 0,
+                  left: `${wipePercent}%`,
+                  width: 2,
+                  background: accent,
+                  transform: "translateX(-1px)"
+                },
+                children: /* @__PURE__ */ jsx13(
+                  "div",
+                  {
+                    style: {
+                      position: "absolute",
+                      top: "50%",
+                      left: "50%",
+                      transform: "translate(-50%, -50%)",
+                      width: 40,
+                      height: 40,
+                      borderRadius: "50%",
+                      background: accent,
+                      display: "flex",
+                      alignItems: "center",
+                      justifyContent: "center",
+                      color: BG,
+                      fontSize: 18,
+                      fontWeight: 700
+                    },
+                    children: "<>"
+                  }
+                )
+              }
+            )
+          ]
+        }
+      )
+    }
+  );
+}
+function CodePane({
+  code,
+  background,
+  label,
+  labelColor,
+  language,
+  dimmed
+}) {
+  const lines = code.split("\n");
+  return /* @__PURE__ */ jsxs6(
+    "div",
+    {
+      style: {
+        position: "absolute",
+        inset: 0,
+        background,
+        display: "flex",
+        flexDirection: "column"
+      },
+      children: [
+        /* @__PURE__ */ jsxs6(
+          "div",
+          {
+            style: {
+              height: 44,
+              padding: "0 18px",
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "space-between",
+              borderBottom: "1px solid rgba(255,255,255,0.06)",
+              background: "rgba(255,255,255,0.02)"
+            },
+            children: [
+              /* @__PURE__ */ jsx13(
+                "div",
+                {
+                  style: {
+                    color: TEXT_MUTED,
+                    fontSize: 13,
+                    fontFamily: "monospace"
+                  },
+                  children: language
+                }
+              ),
+              /* @__PURE__ */ jsx13(
+                "div",
+                {
+                  style: {
+                    fontSize: 11,
+                    fontWeight: 700,
+                    letterSpacing: "0.12em",
+                    color: labelColor,
+                    padding: "4px 10px",
+                    borderRadius: 999,
+                    background: `${labelColor}1a`,
+                    border: `1px solid ${labelColor}55`
+                  },
+                  children: label
+                }
+              )
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx13(
+          "pre",
+          {
+            style: {
+              flex: 1,
+              margin: 0,
+              padding: 24,
+              color: dimmed ? TEXT_MUTED : TEXT,
+              fontSize: 16,
+              lineHeight: 1.6,
+              fontFamily: "monospace",
+              overflow: "hidden",
+              whiteSpace: "pre"
+            },
+            children: lines.map((line, i) => /* @__PURE__ */ jsxs6("div", { style: { display: "flex" }, children: [
+              /* @__PURE__ */ jsx13(
+                "span",
+                {
+                  style: {
+                    width: 32,
+                    textAlign: "right",
+                    marginRight: 16,
+                    color: BORDER,
+                    userSelect: "none"
+                  },
+                  children: i + 1
+                }
+              ),
+              /* @__PURE__ */ jsx13("span", { children: line || " " })
+            ] }, i))
+          }
+        )
+      ]
+    }
+  );
+}
+
+// src/transitions/chromatic-aberration-wipe/config.ts
+import { z } from "zod";
+var paramsSchema = z.object({
+  direction: z.enum(["left", "right"]).default("left").describe("Slide direction the OLD scene exits toward."),
+  aberrationOffset: z.number().min(0).max(40).default(12).describe("Pixel offset between R/B channels at peak. 8\u201316 reads as digital glitch.")
+}).passthrough();
+var config = {
+  id: "chromatic-aberration-wipe",
+  component: ChromaticAberrationWipe,
+  name: "Chromatic Aberration Wipe",
+  category: "transitions",
+  kind: "transition",
+  version: "0.2.0",
+  intent: "glitch-cut",
+  description: "Standalone wipe with RGB-channel split chromatic aberration at the boundary. Feels digital, slightly broken, on-the-edge. The aberration peaks mid-transition then resolves clean.",
+  useWhen: 'Tech/digital aesthetic, glitchy product demos, "system breach" moments. Avoid for editorial / serious content (the aberration looks like a CRT artifact).',
+  pairsWith: ["glass-code-block", "terminal-simulator"],
+  avoidWith: ["cinematic-title", "changelog-bite"],
+  tier: "niche",
+  useCase: ["transition"],
+  tags: ["transition", "wipe", "chromatic", "aberration", "rgb-split", "glitch", "standalone"],
+  mood: ["glitchy", "tech-demo"],
+  paramsSchema,
+  propDefaults: { direction: "left", aberrationOffset: 12 },
+  createPresentation: (params) => chromaticAberrationWipe(params),
+  examples: [
+    { name: "digital-glitch", mood: ["glitchy", "tech-demo"], params: { direction: "left", aberrationOffset: 12 } }
+  ],
+  textParam: null,
+  subtextParam: null,
+  tokens: [],
+  durationInFrames: 30,
+  fps: 30,
+  width: 1920,
+  height: 1080,
+  preview: { thumbnailFrame: 15, mode: "loop" }
+};
+
+// src/transitions/code-diff-wipe/config.ts
+import { z as z2 } from "zod";
+var paramsSchema2 = z2.object({
+  before: z2.string().optional().describe('Source code shown on the left of the wipe (the "before" state). Defaults to a JS callback example.'),
+  after: z2.string().optional().describe('Source code revealed by the wipe (the "after" state). Defaults to an async/await TS rewrite of `before`.'),
+  language: z2.string().default("tsx").describe('Language label rendered in the pane header (e.g. "tsx", "py", "rust"). Cosmetic only \u2014 no syntax highlighting is applied.'),
+  background: z2.string().default(BG).describe("Code pane background color."),
+  accent: z2.string().default(ACCENT).describe("Accent color for the AFTER label, the wipe handle, and its glow."),
+  transitionStart: z2.number().int().min(0).default(20).describe("Frame at which the wipe begins."),
+  transitionDuration: z2.number().int().min(6).max(180).default(60).describe("Frames the wipe takes to complete."),
+  showHandle: z2.boolean().default(true).describe("Whether to draw the vertical handle + circular grip at the wipe boundary."),
+  speed: z2.number().min(0.25).max(4).default(1).describe("Playback speed multiplier.")
+}).passthrough();
+var config2 = {
+  id: "code-diff-wipe",
+  component: CodeDiffWipe,
+  name: "Code Diff Wipe",
+  category: "transitions",
+  kind: "component",
+  version: "0.1.1",
+  intent: "reveal-code-diff",
+  description: 'Self-contained before/after code reveal: two code panes stacked, with a clipped wipe revealing AFTER over BEFORE plus a glowing accent handle. Not a TransitionSeries presentation \u2014 drop in as a scene primitive when the story is "this code became that code".',
+  useWhen: 'Tech-demo refactor beats, "callbacks \u2192 async/await" style reveals, language migration walkthroughs, before/after engineering content. Avoid for non-code content (use frosted-glass-wipe or swipe-transition-wipe for image/video before/after) and avoid stacking with other glitchy transitions.',
+  pairsWith: ["terminal-simulator", "glass-code-block", "live-code-compilation"],
+  avoidWith: ["glitch-cut", "chromatic-aberration-wipe"],
+  tier: "standard",
+  useCase: ["transition", "explainer"],
+  tags: ["transition", "wipe", "code", "diff", "before-after", "tech-demo", "standalone"],
+  mood: ["tech-demo", "editorial", "minimal"],
+  paramsSchema: paramsSchema2,
+  propDefaults: {
+    language: "tsx",
+    background: BG,
+    accent: ACCENT,
+    transitionStart: 20,
+    transitionDuration: 60,
+    showHandle: true,
+    speed: 1
+  },
+  examples: [
+    {
+      name: "callbacks-to-async",
+      mood: ["tech-demo"],
+      params: { language: "tsx", accent: ACCENT, transitionStart: 20, transitionDuration: 60 },
+      description: "Default JS callbacks \u2192 async/await TS rewrite. Cyan accent."
+    },
+    {
+      name: "python-rewrite",
+      mood: ["editorial", "minimal"],
+      params: {
+        language: "py",
+        accent: WARNING,
+        before: 'def get_user(id):\n    res = requests.get(f"/api/user/{id}")\n    return res.json()',
+        after: 'async def get_user(id: str) -> User:\n    async with session.get(f"/api/user/{id}") as r:\n        return User(**await r.json())',
+        transitionDuration: 75
+      },
+      description: "Slower, amber accent \u2014 for a more documentary refactor pace."
+    }
+  ],
+  textParam: "before",
+  subtextParam: "after",
+  tokens: [
+    { propPath: "accent", cssVar: "--cf-accent", fallback: ACCENT, brandKitPath: "colors.accent" },
+    { propPath: "background", cssVar: "--cf-surface", fallback: BG, brandKitPath: "colors.surface" }
+  ],
+  durationInFrames: 120,
+  fps: 30,
+  width: 1920,
+  height: 1080,
+  preview: { thumbnailFrame: 50, mode: "oneshot", defaultExample: "callbacks-to-async" }
+};
+
+// src/transitions/directional-wipe/config.ts
+import { z as z3 } from "zod";
+var paramsSchema3 = z3.object({
+  direction: z3.enum(["left", "right", "up", "down"]).default("left").describe("Direction the OLD scene exits toward.")
+}).passthrough();
+var config3 = {
+  id: "directional-wipe",
+  component: DirectionalWipe,
+  name: "Directional Wipe",
+  category: "transitions",
+  kind: "transition",
+  version: "0.2.0",
+  intent: "reveal-mask",
+  description: "Hard-edge directional wipe between two scenes. Standalone component (renders both scenes as from/to ReactNodes). Four directions; clean and quick.",
+  useWhen: "Fast cuts in a montage, simple before/after, when you want clarity over flair. For TransitionSeries-driven wipes between clips, use the Remotion built-in `wipe` (already in cueframe's transitions catalog).",
+  pairsWith: ["mesh-gradient-bg"],
+  avoidWith: ["frosted-glass-wipe", "chromatic-aberration-wipe"],
+  tier: "standard",
+  useCase: ["transition"],
+  tags: ["transition", "wipe", "directional", "hard-edge", "standalone"],
+  mood: ["minimal", "tech-demo"],
+  paramsSchema: paramsSchema3,
+  propDefaults: { direction: "left" },
+  createPresentation: (params) => directionalWipe(params),
+  examples: [
+    { name: "left-wipe", mood: ["minimal"], params: { direction: "left" } },
+    { name: "up-wipe", mood: ["minimal"], params: { direction: "up" } }
+  ],
+  textParam: null,
+  subtextParam: null,
+  tokens: [],
+  durationInFrames: 30,
+  fps: 30,
+  width: 1920,
+  height: 1080,
+  preview: { thumbnailFrame: 15, mode: "loop" }
+};
+
+// src/transitions/frosted-glass-wipe/config.ts
+import { z as z4 } from "zod";
+var paramsSchema4 = z4.object({
+  glassBlur: z4.number().min(0).max(60).default(24).describe("Frosted-glass backdrop-filter blur radius in pixels.")
+}).passthrough();
+var config4 = {
+  id: "frosted-glass-wipe",
+  component: FrostedGlassWipe,
+  name: "Frosted Glass Wipe",
+  category: "transitions",
+  kind: "transition",
+  version: "0.2.0",
+  intent: "reveal-mask",
+  description: "Standalone scene-to-scene wipe with a frosted-glass blur band sweeping across the frame. Renders both scenes as ReactNode props (from/to) and animates a glassmorphic vertical strip between them. Note: not a TransitionSeries presentation \u2014 use as a scene-pair component.",
+  useWhen: 'Showcase reels where you control both A and B sides explicitly, product demo "before/after" with one beat of glass between, premium/glossy aesthetic. For TransitionSeries-driven clip-to-clip transitions, use light-leak, ink-wipe, or luma-matte instead.',
+  pairsWith: ["mesh-gradient-bg", "shimmer-sweep"],
+  avoidWith: ["light-leak", "ink-wipe"],
+  tier: "standard",
+  useCase: ["transition"],
+  tags: ["transition", "wipe", "glass", "frosted", "glassmorphism", "standalone"],
+  mood: ["cinematic", "corporate", "minimal"],
+  paramsSchema: paramsSchema4,
+  propDefaults: { glassBlur: 24 },
+  createPresentation: (params) => frostedGlassWipe(params),
+  examples: [
+    { name: "glossy-reveal", mood: ["soft", "corporate"], params: { glassBlur: 24 } }
+  ],
+  textParam: null,
+  subtextParam: null,
+  tokens: [],
+  durationInFrames: 30,
+  fps: 30,
+  width: 1920,
+  height: 1080,
+  preview: { thumbnailFrame: 15, mode: "loop" }
+};
+
+// src/transitions/glitch-cut/config.ts
+import { z as z5 } from "zod";
+var paramsSchema5 = z5.object({
+  intensity: z5.number().min(0).max(1).default(0.5).describe("Glitch intensity. 0.4\u20130.6 reads as deliberate; >0.8 feels like a CRT failure."),
+  slices: z5.number().int().min(1).max(20).default(5).describe("Number of horizontal slice displacement bands. More = more chaos.")
+}).passthrough();
+var config5 = {
+  id: "glitch-cut",
+  component: GlitchCut,
+  name: "Glitch Cut",
+  category: "transitions",
+  kind: "transition",
+  version: "0.1.0",
+  intent: "glitch-cut",
+  description: "Digital glitch cut with RGB drop-shadow split, horizontal slice displacement, and snap mid-transition. The new scene appears at the peak glitch and resolves clean.",
+  useWhen: 'Tech/digital aesthetic, hacking sequences, "system error" beats, sharp tonal shifts. Avoid editorial/serious moments and avoid stacking with other glitch primitives (chromatic-aberration-wipe is similar \u2014 pick one).',
+  pairsWith: ["terminal-simulator", "glass-code-block", "matrix-decode"],
+  avoidWith: ["light-leak", "luma-matte", "chromatic-aberration-wipe"],
+  tier: "niche",
+  useCase: ["transition"],
+  tags: ["transition", "glitch", "cut", "rgb-split", "digital"],
+  mood: ["glitchy", "tech-demo", "aggressive"],
+  paramsSchema: paramsSchema5,
+  propDefaults: { intensity: 0.5, slices: 5 },
+  createPresentation: (params) => glitchCut(params),
+  examples: [
+    { name: "subtle-glitch", mood: ["tech-demo"], params: { intensity: 0.4, slices: 3 } },
+    { name: "heavy-fail", mood: ["glitchy", "aggressive"], params: { intensity: 0.8, slices: 8 } }
+  ],
+  textParam: null,
+  subtextParam: null,
+  tokens: [],
+  durationInFrames: 30,
+  fps: 30,
+  width: 1920,
+  height: 1080,
+  preview: { thumbnailFrame: 15, mode: "loop", defaultExample: "subtle-glitch" }
+};
+
+// src/transitions/grid-pixelate-wipe/config.ts
+import { z as z6 } from "zod";
+var paramsSchema6 = z6.object({
+  cols: z6.number().int().min(2).max(48).default(12).describe("Grid column count. Higher = finer pixelation."),
+  rows: z6.number().int().min(2).max(27).default(7).describe("Grid row count. Pair with `cols` to match the frame aspect."),
+  pattern: z6.enum(["wave", "diagonal", "spiral"]).default("wave").describe("Cell-activation order. `wave` = radial from center, `diagonal` = top-left to bottom-right, `spiral` = perimeter inward."),
+  cellColor: z6.string().default("#0b0b10").describe("Mosaic cell color that flashes over the cut.")
+}).passthrough();
+var config6 = {
+  id: "grid-pixelate-wipe",
+  component: GridPixelateWipe,
+  name: "Grid Pixelate Wipe",
+  category: "transitions",
+  kind: "transition",
+  version: "0.2.0",
+  intent: "reveal-mask",
+  description: "Pixelated grid wipe: a black-cell grid covers scene A, then cells fade out in a chosen pattern (wave / diagonal / spiral) to reveal scene B underneath. Standalone scene-pair component (from/to ReactNode props).",
+  useWhen: 'Tech/demo reels where a digital "decode" feel suits the brand, retro game-style transitions, gallery-to-detail reveals. Pick `wave` for hero moments, `diagonal` for kinetic montages, `spiral` for closing/section-end beats. Avoid for editorial/cinematic content \u2014 the grid reads as too digital.',
+  pairsWith: ["terminal-simulator", "matrix-decode", "glass-code-block"],
+  avoidWith: ["light-leak", "ink-wipe", "frosted-glass-wipe"],
+  tier: "niche",
+  useCase: ["transition"],
+  tags: ["transition", "wipe", "grid", "pixelate", "mosaic", "standalone"],
+  mood: ["tech-demo", "playful", "glitchy"],
+  paramsSchema: paramsSchema6,
+  propDefaults: { cols: 12, rows: 7, pattern: "wave", cellColor: "#0b0b10" },
+  createPresentation: (params) => gridPixelateWipe(params),
+  examples: [
+    { name: "radial-wave", mood: ["tech-demo"], params: { cols: 12, rows: 7, pattern: "wave", cellColor: "#0b0b10" } },
+    { name: "fine-spiral", mood: ["glitchy"], params: { cols: 24, rows: 14, pattern: "spiral", cellColor: "#0b0b10" } }
+  ],
+  textParam: null,
+  subtextParam: null,
+  tokens: [],
+  durationInFrames: 30,
+  fps: 30,
+  width: 1920,
+  height: 1080,
+  preview: { thumbnailFrame: 15, mode: "loop" }
+};
+
+// src/transitions/ink-wipe/config.ts
+import { z as z7 } from "zod";
+var paramsSchema7 = z7.object({
+  direction: z7.enum(["left", "right", "up", "down"]).default("left").describe("Direction the ink travels."),
+  color: z7.string().default("black").describe("Color of the ink leading edge.")
+}).passthrough();
+var config7 = {
+  id: "ink-wipe",
+  component: InkWipe,
+  name: "Ink Wipe",
+  category: "transitions",
+  kind: "transition",
+  version: "0.1.1",
+  intent: "reveal-mask",
+  description: "Organic wipe transition using clip-path inset, with a colored ink edge leading the boundary. The entering scene reveals from the wipe direction; a thin colored bar trails the edge.",
+  useWhen: 'Editorial cuts where you want personality but not glitch, podcast clip-to-clip with a "page-turn" feel. Black ink reads as classic; brand-color ink ties to the design system.',
+  pairsWith: ["lower-third", "parallax", "vignette"],
+  avoidWith: ["light-leak", "frosted-glass-wipe"],
+  tier: "niche",
+  useCase: ["transition"],
+  tags: ["transition", "wipe", "ink", "edge", "directional"],
+  mood: ["editorial", "cinematic"],
+  paramsSchema: paramsSchema7,
+  propDefaults: { direction: "left", color: "black" },
+  createPresentation: (params) => inkWipe(params),
+  examples: [
+    { name: "classic-black", mood: ["editorial"], params: { direction: "left", color: "black" } },
+    { name: "brand-tinted", mood: ["corporate"], params: { direction: "right", color: ACCENT } }
+  ],
+  textParam: null,
+  subtextParam: null,
+  tokens: [
+    { propPath: "color", cssVar: "--cf-accent", fallback: "black", brandKitPath: "colors.accent" }
+  ],
+  durationInFrames: 30,
+  fps: 30,
+  width: 1920,
+  height: 1080,
+  preview: { thumbnailFrame: 15, mode: "loop", defaultExample: "classic-black" }
+};
+
+// src/transitions/kinetic-type-mask/config.ts
+import { z as z8 } from "zod";
+var paramsSchema8 = z8.object({
+  text: z8.string().min(1).max(12).default("NEXT").describe("Word used as the type mask. Short ALL-CAPS reads best (3\u20136 letters). The new scene is revealed through the glyphs as they scale up."),
+  maxScale: z8.number().min(20).max(400).default(90).describe("Final glyph scale \u2014 must be large enough to fully consume the frame.")
+}).passthrough();
+var config8 = {
+  id: "kinetic-type-mask",
+  component: KineticTypeMask,
+  name: "Kinetic Type Mask",
+  category: "transitions",
+  kind: "transition",
+  version: "0.2.0",
+  intent: "reveal-mask",
+  description: "Bold typographic mask transition: a giant word holds, then scales up explosively, revealing the next scene clipped through the type. Standalone scene-pair component (renders both scenes via from/to ReactNode props).",
+  useWhen: 'Section breaks with a strong verbal beat ("NEXT", "DROP", "LIVE"), title-driven reels, podcast chapter changes. The word should reinforce a story beat \u2014 avoid generic placeholders. Skip for fast-cut montages where the hold reads as too slow, and avoid stacking with other text-heavy transitions.',
+  pairsWith: ["headline", "lower-third", "mesh-gradient-bg"],
+  avoidWith: ["glitch-cut", "chromatic-aberration-wipe", "directional-wipe"],
+  tier: "standard",
+  useCase: ["transition"],
+  tags: ["transition", "mask", "type", "kinetic", "typography", "standalone"],
+  mood: ["editorial", "aggressive", "cinematic"],
+  paramsSchema: paramsSchema8,
+  propDefaults: { text: "NEXT", maxScale: 90 },
+  createPresentation: (params) => kineticTypeMask(params),
+  examples: [
+    { name: "next-beat", mood: ["aggressive", "tech-demo"], params: { text: "NEXT", maxScale: 90 } }
+  ],
+  textParam: "text",
+  subtextParam: null,
+  tokens: [],
+  durationInFrames: 30,
+  fps: 30,
+  width: 1920,
+  height: 1080,
+  preview: { thumbnailFrame: 15, mode: "loop" }
+};
+
+// src/transitions/light-leak/config.ts
+import { z as z9 } from "zod";
+var paramsSchema9 = z9.object({
+  hue: z9.number().min(0).max(360).default(30).describe("Hue rotation in degrees. 30 = warm amber (canonical analog leak); 200 = cool blue."),
+  seed: z9.number().int().min(0).default(0).describe("Random seed for variation. Reserved for future variant tuning.")
+}).passthrough();
+var config9 = {
+  id: "light-leak",
+  component: LightLeak,
+  name: "Light Leak",
+  category: "transitions",
+  kind: "transition",
+  version: "0.1.0",
+  intent: "film-leak",
+  description: "Analog film light-leak between clips. A warm bright overlay fades in then out across the cut, simulating the look of light catching the film between exposures. Implemented as a TransitionPresentation factory for `<TransitionSeries>`.",
+  useWhen: "Cinematic edits, montage transitions, podcast clips with a warm/editorial feel. Pair with grain + color-grade for the full analog treatment. Avoid for tech/digital content (the warm leak feels out of place).",
+  pairsWith: ["grain", "vignette", "color-grade", "parallax"],
+  avoidWith: ["glitch-cut", "chromatic-aberration-wipe"],
+  tier: "niche",
+  useCase: ["grade", "transition"],
+  tags: ["transition", "light-leak", "analog", "film", "warm"],
+  mood: ["cinematic", "editorial", "soft"],
+  paramsSchema: paramsSchema9,
+  propDefaults: { hue: 30, seed: 0 },
+  createPresentation: (params) => lightLeak(params),
+  examples: [
+    { name: "warm-amber", mood: ["cinematic"], params: { hue: 30, seed: 0 } },
+    { name: "cool-cyan", mood: ["editorial"], params: { hue: 190, seed: 0 } }
+  ],
+  textParam: null,
+  subtextParam: null,
+  tokens: [
+    { propPath: "hue", cssVar: "--cf-accent-hue", fallback: "30", brandKitPath: "colors.accentHue" }
+  ],
+  durationInFrames: 30,
+  fps: 30,
+  width: 1920,
+  height: 1080,
+  preview: { thumbnailFrame: 15, mode: "loop", defaultExample: "warm-amber" }
+};
+
+// src/transitions/luma-matte/config.ts
+import { z as z10 } from "zod";
+var paramsSchema10 = z10.object({
+  matte: z10.enum(["smoke", "brush", "geometric"]).default("smoke").describe(
+    "Matte style. smoke: very soft 30px edge \u2014 dreamy. brush: medium 15px painterly. geometric: hard 5px \u2014 clean."
+  )
+}).passthrough();
+var config10 = {
+  id: "luma-matte",
+  component: LumaMatte,
+  name: "Luma Matte",
+  category: "transitions",
+  kind: "transition",
+  version: "0.1.0",
+  intent: "reveal-mask",
+  description: "Soft-edge wipe via CSS mask-image gradient. Three matte styles control edge softness: smoke (dreamy), brush (painterly), geometric (clean). Simulates luma-matte transitions without actual matte video files.",
+  useWhen: "Editorial, dreamy, or painterly transitions where a hard wipe would feel too abrupt. The smoke matte is forgiving; the geometric matte is the closest to a clean wipe.",
+  pairsWith: ["parallax", "color-grade", "cinematic-title"],
+  avoidWith: ["ink-wipe", "glitch-cut"],
+  tier: "standard",
+  useCase: ["transition"],
+  tags: ["transition", "matte", "luma", "soft-edge", "mask"],
+  mood: ["cinematic", "editorial", "soft"],
+  paramsSchema: paramsSchema10,
+  propDefaults: { matte: "smoke" },
+  createPresentation: (params) => lumaMatte(params),
+  examples: [
+    { name: "smoke-dreamy", mood: ["cinematic", "soft"], params: { matte: "smoke" } },
+    { name: "brush-painterly", mood: ["editorial"], params: { matte: "brush" } },
+    { name: "geometric-clean", mood: ["minimal"], params: { matte: "geometric" } }
+  ],
+  textParam: null,
+  subtextParam: null,
+  tokens: [],
+  durationInFrames: 30,
+  fps: 30,
+  width: 1920,
+  height: 1080,
+  preview: { thumbnailFrame: 15, mode: "loop", defaultExample: "smoke-dreamy" }
+};
+
+// src/transitions/morph/config.ts
+import { z as z11 } from "zod";
+var paramsSchema11 = z11.object({
+  type: z11.enum(["dissolve", "displacement"]).default("dissolve").describe(
+    "Morph variant. dissolve: pure crossfade. displacement: crossfade + slight scale (entering grows, exiting shrinks) for organic feel."
+  )
+}).passthrough();
+var config11 = {
+  id: "morph",
+  component: Morph,
+  name: "Morph",
+  category: "transitions",
+  kind: "transition",
+  version: "0.1.0",
+  intent: "reveal-mask",
+  description: "Cross-dissolve / morph transition. The simplest and most-versatile transition; opacity crossfade by default, with optional displacement variant adding subtle scale dynamics.",
+  useWhen: "Editorial cuts, montage glue, anywhere a wipe would feel too aggressive. The default dissolve is the safest pick when you don't know what else to use.",
+  pairsWith: ["parallax", "lower-third", "color-grade"],
+  avoidWith: ["glitch-cut", "chromatic-aberration-wipe"],
+  tier: "standard",
+  useCase: ["transition"],
+  tags: ["transition", "morph", "dissolve", "crossfade", "simple"],
+  mood: ["editorial", "minimal", "soft"],
+  paramsSchema: paramsSchema11,
+  propDefaults: { type: "dissolve" },
+  createPresentation: (params) => morph(params),
+  examples: [
+    { name: "pure-dissolve", mood: ["minimal"], params: { type: "dissolve" } },
+    { name: "displacement-organic", mood: ["editorial"], params: { type: "displacement" } }
+  ],
+  textParam: null,
+  subtextParam: null,
+  tokens: [],
+  durationInFrames: 30,
+  fps: 30,
+  width: 1920,
+  height: 1080,
+  preview: { thumbnailFrame: 15, mode: "loop", defaultExample: "pure-dissolve" }
+};
+
+// src/transitions/spatial-push/config.ts
+import { z as z12 } from "zod";
+var paramsSchema12 = z12.object({
+  direction: z12.enum(["up", "down", "left", "right"]).default("up").describe("Edge the NEW scene pushes in from. `up` = enters from below (most common).")
+}).passthrough();
+var config12 = {
+  id: "spatial-push",
+  component: SpatialPush,
+  name: "Spatial Push",
+  category: "transitions",
+  kind: "transition",
+  version: "0.2.0",
+  intent: "reveal-mask",
+  description: "iOS-style spatial push: scene A scales down + dims + rounds its corners while scene B springs in from the chosen direction with a soft directional shadow. Standalone scene-pair component (from/to ReactNode props), spring-driven for a natural settle.",
+  useWhen: "Apple-flavored product reels, app-walkthrough cuts, premium showcase content where a layered z-feel matters. Especially clean for vertical (TikTok/Reels) flows when paired with `up`. Avoid for frenetic montages \u2014 the spring settle reads as deliberate and would slow the cut.",
+  pairsWith: ["mesh-gradient-bg", "lower-third", "parallax"],
+  avoidWith: ["glitch-cut", "chromatic-aberration-wipe", "directional-wipe"],
+  tier: "standard",
+  useCase: ["transition"],
+  tags: ["transition", "push", "spatial", "spring", "ios", "standalone"],
+  mood: ["cinematic", "corporate", "minimal"],
+  paramsSchema: paramsSchema12,
+  propDefaults: { direction: "up" },
+  createPresentation: (params) => spatialPush(params),
+  examples: [
+    { name: "push-up", mood: ["tech-demo"], params: { direction: "up" } },
+    { name: "push-left", mood: ["tech-demo"], params: { direction: "left" } }
+  ],
+  textParam: null,
+  subtextParam: null,
+  tokens: [],
+  durationInFrames: 30,
+  fps: 30,
+  width: 1920,
+  height: 1080,
+  preview: { thumbnailFrame: 15, mode: "loop" }
+};
+
+// src/transitions/swipe-transition-wipe/config.ts
+import { z as z13 } from "zod";
+var paramsSchema13 = z13.object({
+  direction: z13.enum(["left", "right"]).default("left").describe("Swipe direction the OLD scene exits toward."),
+  dimStrength: z13.number().min(0).max(1).default(0.4).describe("Darkening of the outgoing scene as it leaves."),
+  parallaxFactor: z13.number().min(0).max(1).default(0.6).describe("Parallax lag on the incoming scene. 0 = rigid slide.")
+}).passthrough();
+var config13 = {
+  id: "swipe-transition-wipe",
+  component: SwipeTransitionWipe,
+  name: "Swipe Transition Wipe",
+  category: "transitions",
+  kind: "transition",
+  version: "0.2.1",
+  intent: "reveal-mask",
+  description: "Polished swipe between two scenes with parallax + dim of the off-screen scene. Standalone showcase component with default gradient panels \u2014 pass sceneA/sceneB ReactNodes to use real content.",
+  useWhen: "Demo/showcase reels, podcast clip transitions where you want a designed look. The default colored gradient panels are nice for comparison videos.",
+  pairsWith: ["mesh-gradient-bg", "lower-third"],
+  avoidWith: ["frosted-glass-wipe"],
+  tier: "standard",
+  useCase: ["transition"],
+  tags: ["transition", "swipe", "wipe", "parallax", "showcase", "standalone"],
+  mood: ["cinematic", "corporate"],
+  paramsSchema: paramsSchema13,
+  propDefaults: { direction: "left", dimStrength: 0.4, parallaxFactor: 0.6 },
+  createPresentation: (params) => swipeTransitionWipe(params),
+  examples: [
+    { name: "designer-default", mood: ["tech-demo", "corporate"], params: { direction: "left", dimStrength: 0.4, parallaxFactor: 0.6 } }
+  ],
+  textParam: "labelA",
+  subtextParam: "labelB",
+  tokens: [
+    { propPath: "colorA1", cssVar: "--cf-accent", fallback: ACCENT, brandKitPath: "colors.accent" },
+    { propPath: "colorB1", cssVar: "--cf-accent-2", fallback: VIOLET, brandKitPath: "colors.accentMuted" }
+  ],
+  durationInFrames: 30,
+  fps: 30,
+  width: 1920,
+  height: 1080,
+  preview: { thumbnailFrame: 15, mode: "loop" }
+};
+
+// src/transitions/zoom-through/config.ts
+import { z as z14 } from "zod";
+var paramsSchema14 = z14.object({
+  zoomPoint: z14.object({
+    x: z14.number().min(0).max(1).default(0.5).describe("Horizontal focal point, 0\u20131 normalized."),
+    y: z14.number().min(0).max(1).default(0.5).describe("Vertical focal point, 0\u20131 normalized.")
+  }).default({ x: 0.5, y: 0.5 }).describe('Where the camera "flies through". Defaults to center.')
+}).passthrough();
+var config14 = {
+  id: "zoom-through",
+  component: ZoomThrough,
+  name: "Zoom Through",
+  category: "transitions",
+  kind: "transition",
+  version: "0.1.0",
+  intent: "reveal-mask",
+  description: 'Camera "zooms through" the exiting scene into the entering scene. The exit scales up and fades; the enter starts large (zoomed in) and scales down to 1. Creates the illusion of flying through one frame into the next.',
+  useWhen: 'Travel/journey beats, "into the next chapter" moments, dramatic perspective shifts. Pair with a focal point that has visual interest (a doorway, a logo, an eye). Avoid for fast cuts \u2014 the zoom takes time.',
+  pairsWith: ["parallax", "cinematic-title", "light-leak"],
+  avoidWith: ["glitch-cut", "directional-wipe"],
+  tier: "standard",
+  useCase: ["transition", "emphasis"],
+  tags: ["transition", "zoom", "camera", "fly-through", "perspective"],
+  mood: ["cinematic", "editorial"],
+  paramsSchema: paramsSchema14,
+  propDefaults: { zoomPoint: { x: 0.5, y: 0.5 } },
+  createPresentation: (params) => zoomThrough(params),
+  examples: [
+    { name: "center-fly", mood: ["cinematic"], params: { zoomPoint: { x: 0.5, y: 0.5 } } },
+    { name: "top-corner", mood: ["cinematic"], params: { zoomPoint: { x: 0.3, y: 0.3 } } }
+  ],
+  textParam: null,
+  subtextParam: null,
+  tokens: [],
+  durationInFrames: 45,
+  fps: 30,
+  width: 1920,
+  height: 1080,
+  preview: { thumbnailFrame: 22, mode: "loop", defaultExample: "center-fly" }
+};
+
+// src/transitions/zoom-through-transition/config.ts
+import { z as z15 } from "zod";
+var paramsSchema15 = z15.object({
+  targetScale: z15.number().min(2).max(60).default(20).describe("Final scale factor. 20 = aggressive zoom-through; 8\u201310 = gentler push."),
+  transformOrigin: z15.string().default("center center").describe('CSS transform-origin for the zoom (e.g. "center center", "30% 70%"). Off-center origins produce a parallax-like push.'),
+  background: z15.string().default("transparent").describe("Background behind the zooming content. Transparent lets the destination scene show through as the content fades; set a color for a hard flash handoff."),
+  beatFrames: z15.number().int().min(10).max(150).default(45).describe("Frames the zoom-through takes \u2014 its own beat, independent of the hosting sequence duration."),
+  speed: z15.number().min(0.25).max(4).default(1).describe("Playback speed multiplier.")
+}).passthrough();
+var config15 = {
+  id: "zoom-through-transition",
+  component: ZoomThroughTransition,
+  name: "Zoom Through Transition",
+  category: "transitions",
+  kind: "component",
+  version: "0.1.2",
+  intent: "zoom-through",
+  description: "Aggressive zoom-through: a single content node (passed as children) scales up from 1\xD7 to a high target scale while fading at the end, leaving the background color filling the frame. Use as the bridge between two scenes \u2014 the next scene mounts after this primitive ends. Distinct from the cueframe-native `zoom-through` TransitionPresentation, which interpolates two real scenes.",
+  useWhen: 'Hero hand-offs where you want a logo / emblem / object to "consume" the frame before the next scene begins, product-launch trailers, opening title pushes. Use the existing `zoom-through` TransitionSeries presentation when you want to interpolate between two real scenes instead.',
+  pairsWith: ["product-launch-trailer", "mesh-gradient-bg", "shimmer-sweep"],
+  avoidWith: ["zoom-through", "glitch-cut"],
+  tier: "standard",
+  useCase: ["transition"],
+  tags: ["transition", "zoom", "push", "hero", "standalone"],
+  mood: ["cinematic", "aggressive", "tech-demo"],
+  paramsSchema: paramsSchema15,
+  propDefaults: {
+    targetScale: 20,
+    transformOrigin: "center center",
+    background: "transparent",
+    beatFrames: 45,
+    speed: 1
+  },
+  examples: [
+    {
+      name: "scene-handoff",
+      mood: ["cinematic"],
+      params: { targetScale: 20, transformOrigin: "center center", background: "transparent", beatFrames: 45 },
+      description: "Content zooms through and fades, revealing the scene beneath \u2014 the default hand-off."
+    },
+    {
+      name: "off-center-push",
+      mood: ["aggressive", "tech-demo"],
+      params: { targetScale: 30, transformOrigin: "30% 70%", background: "#0a0a0a" },
+      description: "Steeper scale plus off-center origin for a parallax-flavored push into a dark scene."
+    }
+  ],
+  textParam: null,
+  subtextParam: null,
+  tokens: [
+    { propPath: "background", cssVar: "--cf-surface", fallback: "white", brandKitPath: "colors.surface" }
+  ],
+  durationInFrames: 60,
+  fps: 30,
+  width: 1920,
+  height: 1080,
+  preview: { thumbnailFrame: 40, mode: "oneshot", defaultExample: "logo-consume" }
+};
+
+// src/transitions/index.ts
+var catalog = [
+  config,
+  config2,
+  config3,
+  config4,
+  config5,
+  config6,
+  config7,
+  config8,
+  config9,
+  config10,
+  config11,
+  config12,
+  config13,
+  config14,
+  config15
+];
+
+export {
+  lightLeak,
+  LightLeak,
+  inkWipe,
+  InkWipe,
+  lumaMatte,
+  LumaMatte,
+  glitchCut,
+  GlitchCut,
+  zoomThrough,
+  ZoomThrough,
+  morph,
+  Morph,
+  chromaticAberrationWipe,
+  ChromaticAberrationWipe,
+  directionalWipe,
+  DirectionalWipe,
+  swipeTransitionWipe,
+  SwipeTransitionWipe,
+  gridPixelateWipe,
+  GridPixelateWipe,
+  kineticTypeMask,
+  KineticTypeMask,
+  ZoomThroughTransition,
+  CodeDiffWipe,
+  catalog
+};
+//# sourceMappingURL=chunk-5MWGAEGQ.js.map