@remotion/promo-pages 4.0.501 → 4.0.502

package/dist/Homepage.js

@@ -6092,7 +6092,7 @@ var Composition = (props) => {
     ...props
   });
 };
-var VERSION = "4.0.501";
+var VERSION = "4.0.502";
 var checkMultipleRemotionVersions = () => {
   if (typeof globalThis === "undefined") {
     return;
@@ -29452,14 +29452,16 @@ import { jsx as jsx48, jsxs as jsxs9 } from "react/jsx-runtime";
 var container3 = {
   display: "flex",
   flexDirection: "row",
-  alignItems: "center",
+  alignItems: "flex-start",
   gap: "10px"
 };
 var greyCircle = {
   width: 20,
   height: 20,
   borderRadius: 10,
-  backgroundColor: "var(--footer-border)"
+  backgroundColor: "var(--footer-border)",
+  flexShrink: 0,
+  marginTop: 4
 };
 var PricingBulletPoint = ({ text, checked, children }) => {
   const checkmarkSVG = /* @__PURE__ */ jsxs9("svg", {
@@ -29469,7 +29471,8 @@ var PricingBulletPoint = ({ text, checked, children }) => {
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg",
     style: {
-      flexShrink: 0
+      flexShrink: 0,
+      marginTop: 4
     },
     children: [
       /* @__PURE__ */ jsx48("circle", {
@@ -29519,7 +29522,7 @@ var Title = ({ children }) => {
 };
 var Audience = ({ children }) => {
   return /* @__PURE__ */ jsx50("div", {
-    className: "fontbrand text-lg leading-none",
+    className: "fontbrand text-lg leading-snug",
     children
   });
 };
@@ -44013,7 +44016,7 @@ import {
 import { BufferTarget, StreamTarget } from "mediabunny";
 
 // ../core/dist/esm/version.mjs
-var VERSION2 = "4.0.501";
+var VERSION2 = "4.0.502";
 
 // ../web-renderer/dist/esm/index.mjs
 import { AudioSample, VideoSample } from "mediabunny";
@@ -45061,7 +45064,110 @@ var getRealFrameRange = (durationInFrames, frameRange) => {
   }
   return resolved;
 };
-var makeInternalState = () => {
+var makeMaskImageLoaderState = ({
+  signal,
+  timeoutInMilliseconds
+}) => {
+  const images = new Set;
+  return {
+    cache: new Map,
+    images,
+    signal,
+    timeoutInMilliseconds,
+    [Symbol.dispose]: () => {
+      for (const image of images) {
+        image.close();
+      }
+      images.clear();
+    }
+  };
+};
+var validateMaskImageUrl = (src) => {
+  const url = new URL(src, document.baseURI);
+  if (url.protocol === "data:" || url.protocol === "blob:") {
+    return url.href;
+  }
+  if ((url.protocol === "http:" || url.protocol === "https:") && url.origin === window.location.origin) {
+    return url.href;
+  }
+  throw new Error(`@remotion/web-renderer only supports same-origin, data:, and blob: mask-image URLs. Received: ${url.href}`);
+};
+var loadMaskImage = async ({
+  src,
+  state
+}) => {
+  const resolvedSrc = validateMaskImageUrl(src);
+  if (state.signal?.aborted) {
+    throw new Error(`Loading mask-image URL was cancelled: ${resolvedSrc}`);
+  }
+  const controller = new AbortController;
+  let timedOut = false;
+  const onAbort = () => controller.abort();
+  state.signal?.addEventListener("abort", onAbort, { once: true });
+  const timeout = window.setTimeout(() => {
+    timedOut = true;
+    controller.abort();
+  }, state.timeoutInMilliseconds);
+  const operation = (async () => {
+    const response = await fetch(resolvedSrc, {
+      credentials: "same-origin",
+      signal: controller.signal
+    });
+    if (!response.ok) {
+      throw new Error(`HTTP ${response.status} ${response.statusText}`);
+    }
+    const blob = await response.blob();
+    const contentType = blob.type.toLowerCase().split(";")[0];
+    if (!contentType.startsWith("image/") || contentType === "image/svg+xml") {
+      throw new Error(`Expected a raster image, but received Content-Type "${blob.type || "unknown"}"`);
+    }
+    return createImageBitmap(blob);
+  })();
+  operation.then((image) => {
+    if (controller.signal.aborted) {
+      image.close();
+    }
+  }, () => {
+    return;
+  });
+  const aborted = new Promise((_, reject) => {
+    controller.signal.addEventListener("abort", () => reject(new Error("Mask image loading was aborted")), { once: true });
+  });
+  try {
+    const image = await Promise.race([operation, aborted]);
+    state.images.add(image);
+    return image;
+  } catch (error2) {
+    if (timedOut) {
+      throw new Error(`Timed out loading mask-image URL after ${state.timeoutInMilliseconds}ms: ${resolvedSrc}`);
+    }
+    if (state.signal?.aborted) {
+      throw new Error(`Loading mask-image URL was cancelled: ${resolvedSrc}`);
+    }
+    const detail = error2 instanceof Error ? error2.message : String(error2);
+    throw new Error(`Could not load mask-image URL ${resolvedSrc}: ${detail}`);
+  } finally {
+    window.clearTimeout(timeout);
+    state.signal?.removeEventListener("abort", onAbort);
+  }
+};
+var getMaskImage = ({
+  src,
+  state
+}) => {
+  const cached = state.cache.get(src);
+  if (cached) {
+    return cached;
+  }
+  const promise = loadMaskImage({ src, state });
+  state.cache.set(src, promise);
+  promise.catch(() => state.cache.delete(src));
+  return promise;
+};
+var makeInternalState = ({
+  signal = null,
+  maskImageTimeoutInMilliseconds = 30000
+} = {}) => {
   let drawnPrecomposedPixels = 0;
   let precomposedTextures = 0;
   let waitForReadyTime = 0;
@@ -45071,6 +45177,10 @@ var makeInternalState = () => {
   const helperCanvasState = {
     current: null
   };
+  const maskImageLoaderState = makeMaskImageLoaderState({
+    signal,
+    timeoutInMilliseconds: maskImageTimeoutInMilliseconds
+  });
   return {
     getDrawn3dPixels: () => drawnPrecomposedPixels,
     getPrecomposedTiles: () => precomposedTextures,
@@ -45082,10 +45192,12 @@ var makeInternalState = () => {
       precomposedTextures++;
     },
     helperCanvasState,
+    maskImageLoaderState,
     [Symbol.dispose]: () => {
       if (helperCanvasState.current) {
         helperCanvasState.current.cleanup();
       }
+      maskImageLoaderState[Symbol.dispose]();
     },
     getWaitForReadyTime: () => waitForReadyTime,
     addWaitForReadyTime: (time) => {
@@ -45977,8 +46089,133 @@ var getMaskImageValue = (computedStyle) => {
   }
   return value;
 };
+var parseUrlFunction = (value) => {
+  const trimmed = value.trim();
+  if (!trimmed.toLowerCase().startsWith("url(")) {
+    return null;
+  }
+  let index2 = 4;
+  while (/\s/.test(trimmed[index2] ?? "")) {
+    index2++;
+  }
+  const quote = trimmed[index2] === '"' || trimmed[index2] === "'" ? trimmed[index2] : null;
+  if (quote) {
+    index2++;
+  }
+  let url = "";
+  let closedQuote = quote === null;
+  for (;index2 < trimmed.length; index2++) {
+    const char = trimmed[index2];
+    if (char === "\\") {
+      const next = trimmed[index2 + 1];
+      if (next === undefined) {
+        return null;
+      }
+      url += next;
+      index2++;
+      continue;
+    }
+    if (quote && char === quote) {
+      closedQuote = true;
+      index2++;
+      break;
+    }
+    if (!quote && char === ")") {
+      break;
+    }
+    url += char;
+  }
+  if (!closedQuote) {
+    return null;
+  }
+  while (/\s/.test(trimmed[index2] ?? "")) {
+    index2++;
+  }
+  if (trimmed[index2] !== ")") {
+    return null;
+  }
+  index2++;
+  while (/\s/.test(trimmed[index2] ?? "")) {
+    index2++;
+  }
+  if (index2 !== trimmed.length) {
+    return null;
+  }
+  return url.trim();
+};
+var getMaskProperty = ({
+  standard,
+  prefixed
+}) => standard || prefixed;
+var normalizeCssValue = (value) => value.trim().toLowerCase().replace(/\s+/g, " ");
+var validateUrlMaskImageStyle = (computedStyle) => {
+  const maskSize = normalizeCssValue(getMaskProperty({
+    standard: computedStyle.maskSize,
+    prefixed: computedStyle.webkitMaskSize
+  }));
+  const maskPosition = normalizeCssValue(getMaskProperty({
+    standard: computedStyle.maskPosition,
+    prefixed: computedStyle.webkitMaskPosition
+  }));
+  const maskRepeat = normalizeCssValue(getMaskProperty({
+    standard: computedStyle.maskRepeat,
+    prefixed: computedStyle.webkitMaskRepeat
+  }));
+  const maskMode = normalizeCssValue(computedStyle.maskMode);
+  const maskOrigin = normalizeCssValue(getMaskProperty({
+    standard: computedStyle.maskOrigin,
+    prefixed: computedStyle.webkitMaskOrigin
+  }));
+  const maskClip = normalizeCssValue(getMaskProperty({
+    standard: computedStyle.maskClip,
+    prefixed: computedStyle.webkitMaskClip
+  }));
+  const isSupportedPosition = maskPosition === "0% 0%" || maskPosition === "0px 0px" || maskPosition === "left top";
+  const unsupportedProperties = [
+    maskSize !== "100% 100%" ? `mask-size: ${maskSize}` : null,
+    !isSupportedPosition ? `mask-position: ${maskPosition}` : null,
+    maskRepeat !== "no-repeat" ? `mask-repeat: ${maskRepeat}` : null,
+    maskMode !== "" && maskMode !== "alpha" && maskMode !== "match-source" ? `mask-mode: ${maskMode}` : null,
+    maskOrigin !== "border-box" ? `mask-origin: ${maskOrigin}` : null,
+    maskClip !== "border-box" ? `mask-clip: ${maskClip}` : null
+  ].filter((property) => property !== null);
+  if (unsupportedProperties.length > 0) {
+    throw new Error(`@remotion/web-renderer only supports URL masks with mask-size: 100% 100%, mask-position: 0% 0%, mask-repeat: no-repeat, the border box as origin and clip, and alpha semantics. Unsupported value${unsupportedProperties.length === 1 ? "" : "s"}: ${unsupportedProperties.join(", ")}`);
+  }
+};
 var parseMaskImage = (maskImageValue) => {
-  return parseLinearGradient(maskImageValue);
+  const gradientInfo = parseLinearGradient(maskImageValue);
+  if (gradientInfo) {
+    return { type: "linear-gradient", gradientInfo };
+  }
+  const url = parseUrlFunction(maskImageValue);
+  if (url !== null) {
+    if (!url) {
+      throw new Error("mask-image: url() must contain a URL");
+    }
+    return { type: "url", src: new URL(url, document.baseURI).href };
+  }
+  if (maskImageValue.trim().toLowerCase().startsWith("url(")) {
+    throw new Error("@remotion/web-renderer only supports a single mask-image: url() layer");
+  }
+  return null;
+};
+var elementHasUrlMaskImage = (element) => {
+  const value = getMaskImageValue(getComputedStyle(element));
+  return value?.trim().toLowerCase().startsWith("url(") ?? false;
+};
+var containsUrlMaskImage = (element) => {
+  if (elementHasUrlMaskImage(element)) {
+    return true;
+  }
+  const children = element.querySelectorAll("*");
+  for (let index2 = 0;index2 < children.length; index2++) {
+    const child = children[index2];
+    if (elementHasUrlMaskImage(child)) {
+      return true;
+    }
+  }
+  return false;
 };
 var parseTransformOrigin = (transformOrigin2) => {
   if (transformOrigin2.trim() === "") {
@@ -46083,6 +46320,9 @@ var calculateTransforms = ({
       opacity2 = parseFloat(computedStyle.opacity);
       const maskImageValue = getMaskImageValue(computedStyle);
       maskImageInfo = maskImageValue ? parseMaskImage(maskImageValue) : null;
+      if (maskImageInfo?.type === "url") {
+        validateUrlMaskImageStyle(computedStyle);
+      }
       filterForPrecompositing = filterRequiresPrecompositing(computedStyle.filter);
       const originalMaskImage = parent.style.maskImage;
       const originalWebkitMaskImage = parent.style.webkitMaskImage;
@@ -47914,24 +48154,34 @@ var getPrecomposeRectForMask = (element) => {
   const boundingRect = getBiggestBoundingClientRect(element);
   return boundingRect;
 };
-var handleMask = ({
-  gradientInfo,
+var handleMask = async ({
+  maskImageInfo,
   maskRect,
   precomposeRect,
   tempContext,
-  scale
+  scale,
+  internalState
 }) => {
   const rectToFill = new DOMRect((maskRect.left - precomposeRect.left) * scale, (maskRect.top - precomposeRect.top) * scale, maskRect.width * scale, maskRect.height * scale);
-  const gradient = createCanvasGradient({
-    ctx: tempContext,
-    rect: rectToFill,
-    gradientInfo,
-    offsetLeft: 0,
-    offsetTop: 0
+  if (maskImageInfo.type === "linear-gradient") {
+    const gradient = createCanvasGradient({
+      ctx: tempContext,
+      rect: rectToFill,
+      gradientInfo: maskImageInfo.gradientInfo,
+      offsetLeft: 0,
+      offsetTop: 0
+    });
+    tempContext.globalCompositeOperation = "destination-in";
+    tempContext.fillStyle = gradient;
+    tempContext.fillRect(rectToFill.left, rectToFill.top, rectToFill.width, rectToFill.height);
+    return;
+  }
+  const image = await getMaskImage({
+    src: maskImageInfo.src,
+    state: internalState.maskImageLoaderState
   });
   tempContext.globalCompositeOperation = "destination-in";
-  tempContext.fillStyle = gradient;
-  tempContext.fillRect(rectToFill.left, rectToFill.top, rectToFill.width, rectToFill.height);
+  tempContext.drawImage(image, rectToFill.left, rectToFill.top, rectToFill.width, rectToFill.height);
 };
 var scaleRect = ({
   rect,
@@ -48048,12 +48298,13 @@ var processNode = async ({
         })
       }));
       if (precompositing.needsMaskImage) {
-        handleMask({
-          gradientInfo: precompositing.needsMaskImage,
+        await handleMask({
+          maskImageInfo: precompositing.needsMaskImage,
           maskRect: dimensions,
           precomposeRect,
           tempContext,
-          scale
+          scale,
+          internalState
         });
         if (waitForPageResponsiveness !== null) {
           await waitForPageResponsiveness();
@@ -48654,26 +48905,34 @@ var createLayer = async ({
   const scaledWidth = Math.ceil(cutout.width * scale);
   const scaledHeight = Math.ceil(cutout.height * scale);
   if (!onlyBackgroundClipText && element instanceof HTMLElement && htmlInCanvasContext && onHtmlInCanvasLayerOutcome) {
-    const hasNestedHtmlInCanvas = containsLayoutSubtreeCanvas(element);
-    try {
-      const offCtx = await drawWithHtmlInCanvas({
-        htmlInCanvasContext,
-        element,
-        scaledWidth,
-        scaledHeight,
-        waitForRenderReady,
-        useElementImage: hasNestedHtmlInCanvas
-      });
-      onHtmlInCanvasLayerOutcome({ native: true });
-      return offCtx;
-    } catch (err) {
-      const detail = err instanceof Error ? err.message : JSON.stringify(err);
+    if (containsUrlMaskImage(element)) {
       onHtmlInCanvasLayerOutcome({
         native: false,
-        reason: `drawElementImage failed (${detail}); falling back to the built-in DOM composer.`,
-        shouldWarn: true
+        reason: "URL masks are loaded by the built-in DOM composer to guarantee deterministic rendering.",
+        shouldWarn: false
       });
-      Internals.Log.verbose({ logLevel, tag: "@remotion/web-renderer" }, "HTML-in-canvas capture failed, falling back to software compose", err);
+    } else {
+      const hasNestedHtmlInCanvas = containsLayoutSubtreeCanvas(element);
+      try {
+        const offCtx = await drawWithHtmlInCanvas({
+          htmlInCanvasContext,
+          element,
+          scaledWidth,
+          scaledHeight,
+          waitForRenderReady,
+          useElementImage: hasNestedHtmlInCanvas
+        });
+        onHtmlInCanvasLayerOutcome({ native: true });
+        return offCtx;
+      } catch (err) {
+        const detail = err instanceof Error ? err.message : JSON.stringify(err);
+        onHtmlInCanvasLayerOutcome({
+          native: false,
+          reason: `drawElementImage failed (${detail}); falling back to the built-in DOM composer.`,
+          shouldWarn: true
+        });
+        Internals.Log.verbose({ logLevel, tag: "@remotion/web-renderer" }, "HTML-in-canvas capture failed, falling back to software compose", err);
+      }
     }
   }
   const canvas = new OffscreenCanvas(scaledWidth, scaledHeight);
@@ -49005,7 +49264,10 @@ var internalRenderMediaOnWeb = async ({
       errorHolder,
       htmlInCanvasContext
     } = scaffold;
-    const internalState = __using2(__stack2, makeInternalState(), 0);
+    const internalState = __using2(__stack2, makeInternalState({
+      signal,
+      maskImageTimeoutInMilliseconds: delayRenderTimeoutInMilliseconds
+    }), 0);
     const pageResponsivenessController = createPageResponsivenessController({
       intervalInMilliseconds: pageResponsivenessIntervalInMilliseconds,
       now: () => performance.now(),
@@ -50638,7 +50900,7 @@ var useTransparentVideoSource = ({
   fallbackVideoSrc,
   videoSrc
 }) => {
-  const [src, setSrc] = useState59(videoSrc);
+  const [src, setSrc] = useState59(null);
   useEffect60(() => {
     setSrc(isWebkit() ? fallbackVideoSrc : videoSrc);
   }, [fallbackVideoSrc, videoSrc]);
@@ -50694,7 +50956,7 @@ var MakeVideosAgentically = ({
     children: [
       /* @__PURE__ */ jsx121("div", {
         className: "flex aspect-square w-full items-start",
-        children: showVideo ? /* @__PURE__ */ jsx121("video", {
+        children: showVideo && src ? /* @__PURE__ */ jsx121("video", {
           ref: videoRef,
           src,
           muted: true,
@@ -50761,7 +51023,7 @@ var MakeVideosInteractively = ({
     children: [
       /* @__PURE__ */ jsx125("div", {
         className: "flex aspect-square w-full items-start",
-        children: showVideo ? /* @__PURE__ */ jsx125("video", {
+        children: showVideo && src ? /* @__PURE__ */ jsx125("video", {
           src,
           autoPlay: true,
           muted: true,
@@ -50824,7 +51086,7 @@ var MakeVideosProgrammatically = ({
     children: [
       /* @__PURE__ */ jsx127("div", {
         className: "flex aspect-square w-full items-start",
-        children: showVideo ? /* @__PURE__ */ jsx127("video", {
+        children: showVideo && src ? /* @__PURE__ */ jsx127("video", {
           src,
           muted: true,
           autoPlay: true,

package/dist/design.js

@@ -9322,7 +9322,7 @@ var Composition = (props) => {
     ...props
   });
 };
-var VERSION = "4.0.501";
+var VERSION = "4.0.502";
 var checkMultipleRemotionVersions = () => {
   if (typeof globalThis === "undefined") {
     return;

package/dist/experts.js

@@ -6092,7 +6092,7 @@ var Composition = (props) => {
     ...props
   });
 };
-var VERSION = "4.0.501";
+var VERSION = "4.0.502";
 var checkMultipleRemotionVersions = () => {
   if (typeof globalThis === "undefined") {
     return;

package/dist/homepage/Pricing.js

@@ -9325,7 +9325,7 @@ var Composition = (props) => {
     ...props
   });
 };
-var VERSION = "4.0.501";
+var VERSION = "4.0.502";
 var checkMultipleRemotionVersions = () => {
   if (typeof globalThis === "undefined") {
     return;
@@ -28136,14 +28136,16 @@ import { jsx as jsx45, jsxs as jsxs7 } from "react/jsx-runtime";
 var container3 = {
   display: "flex",
   flexDirection: "row",
-  alignItems: "center",
+  alignItems: "flex-start",
   gap: "10px"
 };
 var greyCircle = {
   width: 20,
   height: 20,
   borderRadius: 10,
-  backgroundColor: "var(--footer-border)"
+  backgroundColor: "var(--footer-border)",
+  flexShrink: 0,
+  marginTop: 4
 };
 var PricingBulletPoint = ({ text, checked, children }) => {
   const checkmarkSVG = /* @__PURE__ */ jsxs7("svg", {
@@ -28153,7 +28155,8 @@ var PricingBulletPoint = ({ text, checked, children }) => {
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg",
     style: {
-      flexShrink: 0
+      flexShrink: 0,
+      marginTop: 4
     },
     children: [
       /* @__PURE__ */ jsx45("circle", {
@@ -28203,7 +28206,7 @@ var Title = ({ children }) => {
 };
 var Audience = ({ children }) => {
   return /* @__PURE__ */ jsx47("div", {
-    className: "fontbrand text-lg leading-none",
+    className: "fontbrand text-lg leading-snug",
     children
   });
 };

package/dist/prompts/PromptsGallery.js

@@ -9322,7 +9322,7 @@ var Composition = (props) => {
     ...props
   });
 };
-var VERSION = "4.0.501";
+var VERSION = "4.0.502";
 var checkMultipleRemotionVersions = () => {
   if (typeof globalThis === "undefined") {
     return;

package/dist/prompts/PromptsShow.js

@@ -26656,7 +26656,7 @@ var Composition = (props) => {
     ...props
   });
 };
-var VERSION = "4.0.501";
+var VERSION = "4.0.502";
 var checkMultipleRemotionVersions = () => {
   if (typeof globalThis === "undefined") {
     return;

package/dist/prompts/PromptsSubmit.js

@@ -9322,7 +9322,7 @@ var Composition = (props) => {
     ...props
   });
 };
-var VERSION = "4.0.501";
+var VERSION = "4.0.502";
 var checkMultipleRemotionVersions = () => {
   if (typeof globalThis === "undefined") {
     return;

package/dist/team.js

@@ -9503,7 +9503,7 @@ var Composition = (props) => {
     ...props
   });
 };
-var VERSION = "4.0.501";
+var VERSION = "4.0.502";
 var checkMultipleRemotionVersions = () => {
   if (typeof globalThis === "undefined") {
     return;

package/dist/template-modal-content.js

@@ -9322,7 +9322,7 @@ var Composition = (props) => {
     ...props
   });
 };
-var VERSION = "4.0.501";
+var VERSION = "4.0.502";
 var checkMultipleRemotionVersions = () => {
   if (typeof globalThis === "undefined") {
     return;

package/dist/templates.js

@@ -9322,7 +9322,7 @@ var Composition = (props) => {
     ...props
   });
 };
-var VERSION = "4.0.501";
+var VERSION = "4.0.502";
 var checkMultipleRemotionVersions = () => {
   if (typeof globalThis === "undefined") {
     return;
@@ -26906,7 +26906,7 @@ var listOfRemotionPackages = [
   "@remotion/remotion-media",
   "@remotion/web-renderer",
   "@remotion/design",
-  "@remotion/drag-and-drop",
+  "@remotion/studio-protocol",
   "@remotion/light-leaks",
   "@remotion/rough-notation",
   "@remotion/starburst",

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@remotion/promo-pages",
-	"version": "4.0.501",
+	"version": "4.0.502",
 	"publishConfig": {
 		"access": "public"
 	},
@@ -11,19 +11,19 @@
 	},
 	"type": "module",
 	"dependencies": {
-		"@remotion/animated-emoji": "4.0.501",
-		"@remotion/design": "4.0.501",
-		"@remotion/web-renderer": "4.0.501",
-		"@remotion/lottie": "4.0.501",
-		"@remotion/paths": "4.0.501",
-		"@remotion/player": "4.0.501",
-		"@remotion/shapes": "4.0.501",
-		"@remotion/media": "4.0.501",
-		"@remotion/svg-3d-engine": "4.0.501",
-		"create-video": "4.0.501",
+		"@remotion/animated-emoji": "4.0.502",
+		"@remotion/design": "4.0.502",
+		"@remotion/web-renderer": "4.0.502",
+		"@remotion/lottie": "4.0.502",
+		"@remotion/paths": "4.0.502",
+		"@remotion/player": "4.0.502",
+		"@remotion/shapes": "4.0.502",
+		"@remotion/media": "4.0.502",
+		"@remotion/svg-3d-engine": "4.0.502",
+		"create-video": "4.0.502",
 		"hls.js": "1.5.19",
 		"polished": "4.3.1",
-		"remotion": "4.0.501",
+		"remotion": "4.0.502",
 		"zod": "4.4.3",
 		"@mux/upchunk": "3.5.0",
 		"@vidstack/react": "1.12.13",
@@ -34,7 +34,7 @@
 		"@mediabunny/mp3-encoder": "1.50.8"
 	},
 	"devDependencies": {
-		"@remotion/eslint-config-internal": "4.0.501",
+		"@remotion/eslint-config-internal": "4.0.502",
 		"@eslint/eslintrc": "3.1.0",
 		"@types/react": "19.2.7",
 		"@types/react-dom": "19.2.3",