@make-pictures/kits 0.0.0-stage → 2.0.1

package/dist/vfx/index.cjs

@@ -0,0 +1,933 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// packages/kits/src/vfx/index.ts
+var vfx_exports = {};
+__export(vfx_exports, {
+  CinematicLensOverlay: () => CinematicLensOverlay,
+  ContactShadowDisc3D: () => ContactShadowDisc3D,
+  ParticleField: () => ParticleField,
+  SceneTransition: () => SceneTransition,
+  StagePostProcessing3D: () => StagePostProcessing3D
+});
+module.exports = __toCommonJS(vfx_exports);
+
+// packages/kits/src/vfx/CinematicLensOverlay.tsx
+var import_react = require("react");
+var import_remotion = require("remotion");
+var import_camera = require("@make-pictures/core");
+var import_prng = require("@make-pictures/core");
+var import_jsx_runtime = require("react/jsx-runtime");
+function clamp(v, min, max) {
+  return Math.max(min, Math.min(max, v));
+}
+var CinematicLensOverlay = ({
+  vignetteIntensity = 0.36,
+  grainOpacity = 0.045,
+  chromaticAberration,
+  velocityAberrationScale = 0.85,
+  warmLightLeak = 0.16,
+  lightLeakColor = "#F59E0B",
+  seed = 77,
+  zIndex = 60
+}) => {
+  const frame = (0, import_remotion.useCurrentFrame)();
+  const { fps, width, height } = (0, import_remotion.useVideoConfig)();
+  const telemetry = (0, import_camera.useDirectorCameraTelemetry)();
+  const leakTraits = (0, import_react.useMemo)(() => {
+    const rand = (0, import_prng.createSeededRandom)(`lens-leak:${seed}`);
+    return {
+      phaseA: rand() * Math.PI * 2,
+      phaseB: rand() * Math.PI * 2,
+      baseX: 8 + rand() * 14,
+      baseY: 6 + rand() * 14
+    };
+  }, [seed]);
+  const vig = clamp(vignetteIntensity, 0, 1);
+  const grain = clamp(grainOpacity, 0, 0.18);
+  const leak = clamp(warmLightLeak, 0, 1);
+  const rawCa = typeof chromaticAberration === "number" ? chromaticAberration : telemetry.velocity * velocityAberrationScale;
+  const ca = clamp(rawCa, 0, 1);
+  const f60 = frame * (60 / Math.max(1, fps));
+  const leakPulse = 0.72 + 0.28 * (0.5 * Math.sin(f60 * 0.032 + leakTraits.phaseA) + 0.5 * Math.cos(f60 * 0.045 + leakTraits.phaseB));
+  const leakX = leakTraits.baseX + Math.sin(f60 * 0.031 + leakTraits.phaseA) * 5;
+  const leakY = leakTraits.baseY + Math.cos(f60 * 0.037 + leakTraits.phaseB) * 4;
+  const grainSeed = (Math.abs(Math.floor(frame)) + Math.abs(seed)) % 97 + 1;
+  const filterId = `mp-film-grain-${Math.abs(seed)}`;
+  const fringePx = Math.round(ca * Math.max(width, height) * 0.018);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+    import_remotion.AbsoluteFill,
+    {
+      style: {
+        pointerEvents: "none",
+        overflow: "hidden",
+        zIndex
+      },
+      children: [
+        ca > 0.015 && fringePx > 0 && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          import_remotion.AbsoluteFill,
+          {
+            style: {
+              mixBlendMode: "screen",
+              opacity: clamp(ca * 0.78, 0, 0.72),
+              boxShadow: `
+              inset ${fringePx}px 0 ${fringePx * 2}px -${Math.max(1, Math.floor(fringePx * 0.35))}px rgba(255, 42, 84, 0.62),
+              inset -${fringePx}px 0 ${fringePx * 2}px -${Math.max(1, Math.floor(fringePx * 0.35))}px rgba(0, 240, 255, 0.62)
+            `
+            }
+          }
+        ),
+        leak > 5e-3 && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          import_remotion.AbsoluteFill,
+          {
+            style: {
+              mixBlendMode: "screen",
+              opacity: clamp(leak * leakPulse, 0, 0.85),
+              backgroundImage: `
+              radial-gradient(ellipse 52% 44% at ${leakX.toFixed(2)}% ${leakY.toFixed(2)}%, ${lightLeakColor}66 0%, ${lightLeakColor}22 46%, transparent 78%),
+              radial-gradient(ellipse 40% 36% at ${(100 - leakX * 0.7).toFixed(2)}% ${(96 - leakY * 0.6).toFixed(2)}%, #FB718538 0%, transparent 72%)
+            `
+            }
+          }
+        ),
+        vig > 5e-3 && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          import_remotion.AbsoluteFill,
+          {
+            style: {
+              backgroundImage: `radial-gradient(ellipse 76% 74% at 50% 50%, transparent 48%, rgba(9, 10, 18, ${(vig * 0.42).toFixed(3)}) 80%, rgba(5, 6, 12, ${(vig * 0.82).toFixed(3)}) 100%)`
+            }
+          }
+        ),
+        grain > 2e-3 && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+          "svg",
+          {
+            width: "100%",
+            height: "100%",
+            style: {
+              position: "absolute",
+              inset: 0,
+              opacity: grain,
+              mixBlendMode: "overlay",
+              pointerEvents: "none"
+            },
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)("defs", { children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("filter", { id: filterId, x: "0%", y: "0%", width: "100%", height: "100%", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                  "feTurbulence",
+                  {
+                    type: "fractalNoise",
+                    baseFrequency: "0.78",
+                    numOctaves: 2,
+                    seed: grainSeed,
+                    stitchTiles: "stitch"
+                  }
+                ),
+                /* @__PURE__ */ (0, import_jsx_runtime.jsx)("feColorMatrix", { type: "saturate", values: "0" })
+              ] }) }),
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)("rect", { width: "100%", height: "100%", filter: `url(#${filterId})` })
+            ]
+          }
+        )
+      ]
+    }
+  );
+};
+
+// packages/kits/src/vfx/ParticleField.tsx
+var import_react2 = require("react");
+var import_remotion2 = require("remotion");
+var import_tokens = require("@make-pictures/core");
+var import_prng2 = require("@make-pictures/core");
+var import_jsx_runtime2 = require("react/jsx-runtime");
+var CONFETTI_PALETTE = [
+  "#2563EB",
+  "#FF2A85",
+  "#10B981",
+  "#F59E0B",
+  "#38BDF8",
+  "#7209B7"
+];
+function wrap01(v) {
+  const m = v % 1;
+  return m < 0 ? m + 1 : m;
+}
+function defaultCountForPreset(preset) {
+  switch (preset) {
+    case "dust-motes":
+      return 34;
+    case "snow":
+      return 48;
+    case "rain":
+      return 64;
+    case "sparks":
+      return 38;
+    case "confetti":
+      return 52;
+    case "speed-lines":
+      return 28;
+  }
+}
+function defaultColorForPreset(preset) {
+  switch (preset) {
+    case "dust-motes":
+      return "#FDE68A";
+    case "snow":
+      return "#FFFFFF";
+    case "rain":
+      return "#BAE6FD";
+    case "sparks":
+      return "#FB923C";
+    case "confetti":
+      return "#FF2A85";
+    case "speed-lines":
+      return "#E0E7FF";
+  }
+}
+var ParticleField = ({
+  preset = "dust-motes",
+  count,
+  color,
+  seed = 108,
+  intensity = 1,
+  cleanFrameZero = true,
+  zIndex = 20
+}) => {
+  const frame = (0, import_remotion2.useCurrentFrame)();
+  const { fps, width, height } = (0, import_remotion2.useVideoConfig)();
+  const resolvedCount = Math.max(
+    0,
+    Math.round((count ?? defaultCountForPreset(preset)) * Math.max(0.25, intensity))
+  );
+  const baseColor = color ?? defaultColorForPreset(preset);
+  const descriptors = (0, import_react2.useMemo)(() => {
+    const list = [];
+    for (let i = 0; i < resolvedCount; i++) {
+      const rand = (0, import_prng2.createSeededRandom)(`particle:${preset}:${seed}:${i}`);
+      const depth = 0.35 + rand() * 0.65;
+      const u0 = rand();
+      const v0 = rand();
+      const swayPhase = rand() * Math.PI * 2;
+      let rot0 = rand() * 360;
+      let speedU = 0;
+      let speedV = 0;
+      let swayAmp = 0;
+      let swayFreq = 0.035;
+      let size = 4;
+      let baseOpacity = 0.5;
+      let rotSpeed = 0;
+      let itemColor = baseColor;
+      if (preset === "dust-motes") {
+        speedU = (rand() - 0.5) * 0.025 * depth;
+        speedV = -(0.018 + rand() * 0.028) * depth;
+        swayAmp = 14 + rand() * 24;
+        swayFreq = 0.031 + rand() * 0.02;
+        size = (2.2 + rand() * 5.2) * depth;
+        baseOpacity = 0.22 + rand() * 0.45;
+      } else if (preset === "snow") {
+        speedU = (rand() - 0.35) * 0.04 * depth;
+        speedV = (0.085 + rand() * 0.095) * depth;
+        swayAmp = 18 + rand() * 28;
+        swayFreq = 0.032 + rand() * 0.02;
+        size = (2.8 + rand() * 5.5) * depth;
+        baseOpacity = 0.38 + rand() * 0.5;
+      } else if (preset === "rain") {
+        speedU = -0.18 * depth;
+        speedV = (0.95 + rand() * 0.45) * depth;
+        size = (26 + rand() * 36) * depth;
+        baseOpacity = 0.2 + rand() * 0.34;
+        rot0 = 11;
+      } else if (preset === "sparks") {
+        speedU = (rand() - 0.42) * 0.11 * depth;
+        speedV = -(0.22 + rand() * 0.28) * depth;
+        swayAmp = 16 + rand() * 30;
+        swayFreq = 0.042 + rand() * 0.012;
+        size = (2.4 + rand() * 4.2) * depth;
+        baseOpacity = 0.55 + rand() * 0.42;
+        itemColor = color ?? (rand() > 0.45 ? "#FB923C" : rand() > 0.5 ? "#FDE047" : "#F43F5E");
+      } else if (preset === "confetti") {
+        speedU = (rand() - 0.5) * 0.07;
+        speedV = (0.16 + rand() * 0.16) * depth;
+        swayAmp = 24 + rand() * 34;
+        swayFreq = 0.036 + rand() * 0.018;
+        size = (8 + rand() * 8) * (0.65 + depth * 0.35);
+        baseOpacity = 0.78 + rand() * 0.22;
+        rotSpeed = (rand() > 0.5 ? 1 : -1) * (95 + rand() * 130);
+        itemColor = color ?? CONFETTI_PALETTE[Math.floor(rand() * CONFETTI_PALETTE.length)];
+      } else if (preset === "speed-lines") {
+        speedU = -(1.45 + rand() * 0.95) * depth;
+        speedV = 0;
+        size = (120 + rand() * 220) * depth;
+        baseOpacity = 0.14 + rand() * 0.32;
+      }
+      list.push({
+        index: i,
+        u0,
+        v0,
+        speedU,
+        speedV,
+        swayAmp,
+        swayFreq,
+        swayPhase,
+        size,
+        baseOpacity,
+        rot0,
+        rotSpeed,
+        color: itemColor,
+        depth
+      });
+    }
+    return list;
+  }, [preset, resolvedCount, seed, baseColor, color]);
+  const enterOpacity = cleanFrameZero ? (0, import_remotion2.spring)({
+    frame: frame - 2,
+    fps,
+    config: import_tokens.SPRING_PRESETS.smooth
+  }) : 1;
+  if (enterOpacity <= 5e-3 || resolvedCount === 0 || intensity <= 0) {
+    return null;
+  }
+  const tSec = frame / Math.max(1, fps);
+  const f60 = frame * (60 / Math.max(1, fps));
+  const margin = 80;
+  const spanW = width + margin * 2;
+  const spanH = height + margin * 2;
+  const ampOpacity = Math.min(1.35, Math.max(0, intensity));
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+    import_remotion2.AbsoluteFill,
+    {
+      style: {
+        pointerEvents: "none",
+        overflow: "hidden",
+        opacity: enterOpacity,
+        zIndex
+      },
+      children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+        "svg",
+        {
+          width,
+          height,
+          viewBox: `0 0 ${width} ${height}`,
+          style: { display: "block", width: "100%", height: "100%" },
+          children: descriptors.map((p) => {
+            const u = wrap01(p.u0 + p.speedU * tSec);
+            const v = wrap01(p.v0 + p.speedV * tSec);
+            const sway = Math.sin(f60 * p.swayFreq + p.swayPhase) * p.swayAmp;
+            const x = -margin + u * spanW + (preset === "speed-lines" ? 0 : sway);
+            const y = -margin + v * spanH + (preset === "dust-motes" ? sway * 0.35 : 0);
+            const edgeFadeV = v < 0.08 ? v / 0.08 : v > 0.92 ? (1 - v) / 0.08 : 1;
+            const twinkle = preset === "dust-motes" || preset === "sparks" ? 0.65 + 0.35 * Math.sin(f60 * 0.045 + p.swayPhase) : 1;
+            const alpha = Math.min(
+              1,
+              p.baseOpacity * ampOpacity * edgeFadeV * twinkle
+            );
+            if (alpha <= 0.01) return null;
+            if (preset === "rain") {
+              const rad = p.rot0 * Math.PI / 180;
+              const dx = -Math.sin(rad) * p.size;
+              const dy = Math.cos(rad) * p.size;
+              return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+                "line",
+                {
+                  x1: x,
+                  y1: y,
+                  x2: x + dx,
+                  y2: y + dy,
+                  stroke: p.color,
+                  strokeWidth: 1.4 * p.depth + 0.5,
+                  strokeLinecap: "round",
+                  opacity: alpha
+                },
+                p.index
+              );
+            }
+            if (preset === "speed-lines") {
+              const edgeFadeU = u < 0.1 ? u / 0.1 : u > 0.9 ? (1 - u) / 0.1 : 1;
+              return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+                "line",
+                {
+                  x1: x,
+                  y1: y,
+                  x2: x + p.size,
+                  y2: y,
+                  stroke: p.color,
+                  strokeWidth: 1.6 + p.depth * 2.2,
+                  strokeLinecap: "round",
+                  opacity: alpha * edgeFadeU
+                },
+                p.index
+              );
+            }
+            if (preset === "confetti") {
+              const rot = p.rot0 + p.rotSpeed * tSec;
+              const tumbleScaleY = Math.max(
+                0.22,
+                Math.abs(Math.cos(f60 * 0.052 + p.swayPhase))
+              );
+              const w = p.size;
+              const h = p.size * 0.58;
+              return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+                "rect",
+                {
+                  x: -w / 2,
+                  y: -h / 2,
+                  width: w,
+                  height: h,
+                  rx: 1.8,
+                  fill: p.color,
+                  opacity: alpha,
+                  transform: `translate(${x.toFixed(2)}, ${y.toFixed(2)}) rotate(${rot.toFixed(1)}) scale(1, ${tumbleScaleY.toFixed(2)})`
+                },
+                p.index
+              );
+            }
+            if (preset === "sparks") {
+              return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("g", { opacity: alpha, children: [
+                /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("circle", { cx: x, cy: y, r: p.size * 2.3, fill: p.color, opacity: 0.24 }),
+                /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("circle", { cx: x, cy: y, r: p.size, fill: "#FFFBEB" })
+              ] }, p.index);
+            }
+            return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("g", { opacity: alpha, children: [
+              preset === "dust-motes" && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("circle", { cx: x, cy: y, r: p.size * 2.2, fill: p.color, opacity: 0.2 }),
+              /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("circle", { cx: x, cy: y, r: p.size, fill: p.color })
+            ] }, p.index);
+          })
+        }
+      )
+    }
+  );
+};
+
+// packages/kits/src/vfx/StagePostProcessing3D.tsx
+var import_react3 = require("react");
+var import_fiber = require("@react-three/fiber");
+var import_remotion3 = require("remotion");
+var THREE = __toESM(require("three"), 1);
+var import_prng3 = require("@make-pictures/core");
+var import_jsx_runtime3 = require("react/jsx-runtime");
+var radialShadowTextureCache = /* @__PURE__ */ new Map();
+var spotlightBeamTextureCache = /* @__PURE__ */ new Map();
+function getRadialDiscTexture(colorHex) {
+  if (typeof document === "undefined") return null;
+  const cached = radialShadowTextureCache.get(colorHex);
+  if (cached) return cached;
+  const canvas = document.createElement("canvas");
+  canvas.width = 256;
+  canvas.height = 256;
+  const ctx = canvas.getContext("2d");
+  if (ctx) {
+    const grad = ctx.createRadialGradient(128, 128, 8, 128, 128, 124);
+    grad.addColorStop(0, colorHex);
+    grad.addColorStop(0.45, colorHex);
+    grad.addColorStop(1, "rgba(0,0,0,0)");
+    ctx.fillStyle = grad;
+    ctx.fillRect(0, 0, 256, 256);
+  }
+  if (ctx) {
+    const img = ctx.getImageData(0, 0, 256, 256);
+    const data = img.data;
+    for (let y = 0; y < 256; y++) {
+      for (let x = 0; x < 256; x++) {
+        const dx = (x - 128) / 124;
+        const dy = (y - 128) / 124;
+        const r2 = dx * dx + dy * dy;
+        const idx = (y * 256 + x) * 4;
+        if (r2 >= 1) {
+          data[idx + 3] = 0;
+        } else {
+          const smooth = Math.pow(1 - r2, 2.2);
+          data[idx + 3] = Math.round(smooth * 255);
+        }
+      }
+    }
+    ctx.putImageData(img, 0, 0);
+  }
+  const tex = new THREE.CanvasTexture(canvas);
+  tex.needsUpdate = true;
+  radialShadowTextureCache.set(colorHex, tex);
+  return tex;
+}
+function getVolumetricConeTexture(key) {
+  if (typeof document === "undefined") return null;
+  const cached = spotlightBeamTextureCache.get(key);
+  if (cached) return cached;
+  const canvas = document.createElement("canvas");
+  canvas.width = 128;
+  canvas.height = 256;
+  const ctx = canvas.getContext("2d");
+  if (ctx) {
+    const grad = ctx.createLinearGradient(0, 0, 0, 256);
+    grad.addColorStop(0, "rgba(255, 255, 255, 0.0)");
+    grad.addColorStop(0.14, "rgba(255, 255, 255, 0.92)");
+    grad.addColorStop(0.58, "rgba(255, 255, 255, 0.45)");
+    grad.addColorStop(1, "rgba(255, 255, 255, 0.0)");
+    ctx.fillStyle = grad;
+    ctx.fillRect(0, 0, 128, 256);
+  }
+  const tex = new THREE.CanvasTexture(canvas);
+  tex.needsUpdate = true;
+  spotlightBeamTextureCache.set(key, tex);
+  return tex;
+}
+var ContactShadowDisc3D = ({
+  position = [0, 0.012, 0],
+  radius = 0.85,
+  opacity = 0.3,
+  color = "#0F172A",
+  scaleX = 1,
+  scaleZ = 1
+}) => {
+  const tex = (0, import_react3.useMemo)(() => getRadialDiscTexture(color), [color]);
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+    "mesh",
+    {
+      position,
+      rotation: [-Math.PI / 2, 0, 0],
+      scale: [scaleX, scaleZ, 1],
+      renderOrder: 1,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("planeGeometry", { args: [radius * 2, radius * 2] }),
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+          "meshBasicMaterial",
+          {
+            map: tex ?? void 0,
+            color,
+            transparent: true,
+            opacity,
+            depthWrite: false,
+            polygonOffset: true,
+            polygonOffsetFactor: -2
+          }
+        )
+      ]
+    }
+  );
+};
+var StagePostProcessing3D = ({
+  fogColor = "#F8F9FF",
+  fogDensity = 0.02,
+  spotlightBeams = true,
+  beamColor = "#FFF7ED",
+  beamOpacity = 0.075,
+  beamOrigin = [-4.2, 8.2, 2.8],
+  beamTarget = [0, 0, 0],
+  depthHaze = true,
+  hazeColor = "#E0E7FF",
+  hazeOpacity = 0.16,
+  seed = 303
+}) => {
+  const scene = (0, import_fiber.useThree)((state) => state.scene);
+  const frame = (0, import_remotion3.useCurrentFrame)();
+  const { fps } = (0, import_remotion3.useVideoConfig)();
+  (0, import_react3.useLayoutEffect)(() => {
+    const previousFog = scene.fog;
+    if (fogDensity > 0) {
+      scene.fog = new THREE.FogExp2(fogColor, fogDensity);
+    } else {
+      scene.fog = null;
+    }
+    return () => {
+      scene.fog = previousFog;
+    };
+  }, [scene, fogColor, fogDensity]);
+  const beamCount = typeof spotlightBeams === "number" ? Math.max(0, Math.min(6, Math.round(spotlightBeams))) : spotlightBeams ? 2 : 0;
+  const beams = (0, import_react3.useMemo)(() => {
+    if (beamCount === 0) return [];
+    const rand = (0, import_prng3.createSeededRandom)(`beams3d:${seed}`);
+    const list = [];
+    for (let i = 0; i < beamCount; i++) {
+      const spreadX = i === 0 ? 0 : (i % 2 === 1 ? 1 : -1) * (3.6 + rand() * 1.8);
+      const targetSpreadX = i === 0 ? 0 : spreadX * 0.32;
+      list.push({
+        origin: [
+          beamOrigin[0] + spreadX,
+          beamOrigin[1] + (i === 0 ? 0 : rand() * 0.8),
+          beamOrigin[2] - i * 0.9
+        ],
+        target: [
+          beamTarget[0] + targetSpreadX,
+          beamTarget[1],
+          beamTarget[2] - i * 0.35
+        ],
+        topRadius: 0.28 + rand() * 0.12,
+        bottomRadius: 2.15 + rand() * 0.65,
+        phase: rand() * Math.PI * 2
+      });
+    }
+    return list;
+  }, [beamCount, beamOrigin, beamTarget, seed]);
+  const motes = (0, import_react3.useMemo)(() => {
+    const rand = (0, import_prng3.createSeededRandom)(`motes3d:${seed}`);
+    return Array.from({ length: 16 }, (_, idx) => ({
+      id: idx,
+      baseX: (rand() - 0.5) * 7.2,
+      baseY: 0.6 + rand() * 4.2,
+      baseZ: (rand() - 0.4) * 5.2,
+      radius: 0.024 + rand() * 0.032,
+      phase: rand() * Math.PI * 2,
+      freq: 0.031 + rand() * 0.02
+    }));
+  }, [seed]);
+  const coneTex = (0, import_react3.useMemo)(() => getVolumetricConeTexture("default"), []);
+  const hazeTex = (0, import_react3.useMemo)(() => getRadialDiscTexture("#FFFFFF"), []);
+  const f60 = frame * (60 / Math.max(1, fps));
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("group", { name: "stage-post-processing-3d", children: [
+    beams.map((b, idx) => {
+      const dir = new THREE.Vector3(
+        b.target[0] - b.origin[0],
+        b.target[1] - b.origin[1],
+        b.target[2] - b.origin[2]
+      );
+      const len = Math.max(0.5, dir.length());
+      const mid = [
+        (b.origin[0] + b.target[0]) * 0.5,
+        (b.origin[1] + b.target[1]) * 0.5,
+        (b.origin[2] + b.target[2]) * 0.5
+      ];
+      const quat = new THREE.Quaternion().setFromUnitVectors(
+        new THREE.Vector3(0, -1, 0),
+        dir.clone().normalize()
+      );
+      const euler = new THREE.Euler().setFromQuaternion(quat);
+      const breathe = 0.86 + 0.14 * Math.sin(f60 * 0.033 + b.phase);
+      return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+        "mesh",
+        {
+          position: mid,
+          rotation: [euler.x, euler.y, euler.z],
+          renderOrder: 10,
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+              "cylinderGeometry",
+              {
+                args: [b.topRadius, b.bottomRadius, len, 32, 1, true]
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+              "meshBasicMaterial",
+              {
+                map: coneTex ?? void 0,
+                color: beamColor,
+                transparent: true,
+                opacity: beamOpacity * breathe,
+                blending: THREE.AdditiveBlending,
+                depthWrite: false,
+                side: THREE.DoubleSide
+              }
+            )
+          ]
+        },
+        `beam-${idx}`
+      );
+    }),
+    beamCount > 0 && motes.map((m) => {
+      const x = m.baseX + Math.sin(f60 * m.freq + m.phase) * 0.22;
+      const y = m.baseY + Math.cos(f60 * (m.freq * 0.85) + m.phase) * 0.18;
+      const z = m.baseZ + Math.sin(f60 * 0.03 + m.phase * 1.3) * 0.16;
+      const twinkle = 0.45 + 0.55 * Math.sin(f60 * 0.042 + m.phase);
+      return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("mesh", { position: [x, y, z], renderOrder: 11, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("sphereGeometry", { args: [m.radius, 10, 10] }),
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+          "meshBasicMaterial",
+          {
+            color: beamColor,
+            transparent: true,
+            opacity: Math.min(0.65, beamOpacity * 5.2 * twinkle),
+            blending: THREE.AdditiveBlending,
+            depthWrite: false
+          }
+        )
+      ] }, `mote-${m.id}`);
+    }),
+    depthHaze && /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_jsx_runtime3.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("mesh", { position: [-2.2, 2.8, -5.8], renderOrder: 2, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("planeGeometry", { args: [14, 7.5] }),
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+          "meshBasicMaterial",
+          {
+            map: hazeTex ?? void 0,
+            color: hazeColor,
+            transparent: true,
+            opacity: hazeOpacity,
+            depthWrite: false
+          }
+        )
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("mesh", { position: [2.4, 3.2, -7.6], renderOrder: 2, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("planeGeometry", { args: [16, 8.5] }),
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+          "meshBasicMaterial",
+          {
+            map: hazeTex ?? void 0,
+            color: hazeColor,
+            transparent: true,
+            opacity: hazeOpacity * 0.78,
+            depthWrite: false
+          }
+        )
+      ] })
+    ] })
+  ] });
+};
+
+// packages/kits/src/vfx/SceneTransition.tsx
+var import_remotion4 = require("remotion");
+var import_tokens2 = require("@make-pictures/core");
+var import_jsx_runtime4 = require("react/jsx-runtime");
+var SceneTransition = ({
+  atFrame,
+  durationInFrames = 28,
+  type = "iris-wipe",
+  accentColor = import_tokens2.STUDIO_THEME.colors.brand[600],
+  backdropColor = "#0F172A",
+  direction = "left",
+  seed = 51,
+  zIndex = 80
+}) => {
+  const frame = (0, import_remotion4.useCurrentFrame)();
+  const { width, height } = (0, import_remotion4.useVideoConfig)();
+  const dur = Math.max(6, durationInFrames);
+  const half = dur / 2;
+  const startFrame = atFrame - half;
+  const endFrame = atFrame + half;
+  if (frame <= startFrame || frame >= endFrame) {
+    return null;
+  }
+  const u = (frame - startFrame) / dur;
+  const coverProgress = u <= 0.5 ? (0, import_remotion4.interpolate)(u, [0, 0.5], [0, 1], {
+    easing: import_remotion4.Easing.inOut(import_remotion4.Easing.cubic),
+    extrapolateLeft: "clamp",
+    extrapolateRight: "clamp"
+  }) : (0, import_remotion4.interpolate)(u, [0.5, 1], [1, 0], {
+    easing: import_remotion4.Easing.inOut(import_remotion4.Easing.cubic),
+    extrapolateLeft: "clamp",
+    extrapolateRight: "clamp"
+  });
+  const diagRadius = Math.hypot(width, height) * 0.55;
+  if (type === "flash-cut") {
+    const flashOpacity = u <= 0.5 ? Math.pow(u * 2, 2.2) : Math.pow(Math.max(0, 1 - (u - 0.5) * 2), 1.65);
+    return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+      import_remotion4.AbsoluteFill,
+      {
+        style: {
+          pointerEvents: "none",
+          zIndex,
+          opacity: flashOpacity,
+          background: `radial-gradient(circle at 50% 50%, #FFFFFF 0%, #FFFBEB 45%, ${accentColor} 100%)`
+        }
+      }
+    );
+  }
+  if (type === "whip-pan") {
+    const sweep = (0, import_remotion4.interpolate)(u, [0, 1], [-1.25, 1.25], {
+      easing: import_remotion4.Easing.inOut(import_remotion4.Easing.cubic)
+    });
+    const isHorizontal = direction === "left" || direction === "right";
+    const sign = direction === "left" || direction === "up" ? -1 : 1;
+    const tx = isHorizontal ? sweep * sign * width : 0;
+    const ty = !isHorizontal ? sweep * sign * height : 0;
+    return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+      import_remotion4.AbsoluteFill,
+      {
+        style: {
+          pointerEvents: "none",
+          overflow: "hidden",
+          zIndex
+        },
+        children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+          "div",
+          {
+            style: {
+              position: "absolute",
+              left: -width * 0.35,
+              top: -height * 0.35,
+              width: width * 1.7,
+              height: height * 1.7,
+              transform: `translate3d(${tx}px, ${ty}px, 0) skewX(${isHorizontal ? -10 * sign : 0}deg)`,
+              background: isHorizontal ? `linear-gradient(90deg, transparent 0%, ${accentColor} 16%, ${backdropColor} 32%, ${backdropColor} 68%, ${accentColor} 84%, transparent 100%)` : `linear-gradient(180deg, transparent 0%, ${accentColor} 16%, ${backdropColor} 32%, ${backdropColor} 68%, ${accentColor} 84%, transparent 100%)`,
+              boxShadow: `0 0 80px ${accentColor}88`
+            }
+          }
+        )
+      }
+    );
+  }
+  if (type === "paper-curtain") {
+    const slidePct = (1 - coverProgress) * 104;
+    return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+      import_remotion4.AbsoluteFill,
+      {
+        style: {
+          pointerEvents: "none",
+          overflow: "hidden",
+          zIndex
+        },
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+            "div",
+            {
+              style: {
+                position: "absolute",
+                left: 0,
+                top: 0,
+                width: "53%",
+                height: "100%",
+                backgroundColor: "#FFFBEB",
+                borderRight: `14px solid ${accentColor}`,
+                boxShadow: "18px 0 48px rgba(15, 23, 42, 0.35)",
+                transform: `translate3d(${-slidePct}%, 0, 0)`
+              }
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+            "div",
+            {
+              style: {
+                position: "absolute",
+                right: 0,
+                top: 0,
+                width: "53%",
+                height: "100%",
+                backgroundColor: "#FEF3C7",
+                borderLeft: `14px solid ${accentColor}`,
+                boxShadow: "-18px 0 48px rgba(15, 23, 42, 0.35)",
+                transform: `translate3d(${slidePct}%, 0, 0)`
+              }
+            }
+          )
+        ]
+      }
+    );
+  }
+  if (type === "ink-wash") {
+    const filterId = `mp-ink-wash-${Math.abs(seed)}`;
+    const blobRadius = coverProgress * diagRadius * 1.22;
+    return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+      import_remotion4.AbsoluteFill,
+      {
+        style: {
+          pointerEvents: "none",
+          overflow: "hidden",
+          zIndex
+        },
+        children: /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("svg", { width, height, viewBox: `0 0 ${width} ${height}`, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("defs", { children: /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("filter", { id: filterId, x: "-20%", y: "-20%", width: "140%", height: "140%", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+              "feTurbulence",
+              {
+                type: "fractalNoise",
+                baseFrequency: "0.012",
+                numOctaves: 3,
+                seed: Math.abs(seed) % 97,
+                result: "noise"
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+              "feDisplacementMap",
+              {
+                in: "SourceGraphic",
+                in2: "noise",
+                scale: Math.round(140 * Math.sin(Math.PI * u)),
+                xChannelSelector: "R",
+                yChannelSelector: "G"
+              }
+            )
+          ] }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("g", { filter: `url(#${filterId})`, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+              "circle",
+              {
+                cx: width / 2,
+                cy: height / 2,
+                r: blobRadius + 18,
+                fill: accentColor
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+              "circle",
+              {
+                cx: width / 2,
+                cy: height / 2,
+                r: blobRadius,
+                fill: backdropColor
+              }
+            )
+          ] })
+        ] })
+      }
+    );
+  }
+  const holeRadius = Math.max(0, (1 - coverProgress) * diagRadius);
+  const maskId = `mp-iris-mask-${Math.abs(seed)}-${atFrame}`;
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+    import_remotion4.AbsoluteFill,
+    {
+      style: {
+        pointerEvents: "none",
+        overflow: "hidden",
+        zIndex
+      },
+      children: /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("svg", { width, height, viewBox: `0 0 ${width} ${height}`, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("defs", { children: /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("mask", { id: maskId, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("rect", { x: 0, y: 0, width, height, fill: "white" }),
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+            "circle",
+            {
+              cx: width / 2,
+              cy: height / 2,
+              r: holeRadius,
+              fill: "black"
+            }
+          )
+        ] }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+          "rect",
+          {
+            x: 0,
+            y: 0,
+            width,
+            height,
+            fill: backdropColor,
+            mask: `url(#${maskId})`
+          }
+        ),
+        holeRadius > 2 && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+          "circle",
+          {
+            cx: width / 2,
+            cy: height / 2,
+            r: holeRadius,
+            fill: "none",
+            stroke: accentColor,
+            strokeWidth: 10
+          }
+        )
+      ] })
+    }
+  );
+};