@remotion/promo-pages 4.0.495 → 4.0.496

package/dist/Homepage.js

@@ -2029,17 +2029,6 @@ var delayRenderInternal = ({
   scope.remotion_renderReady = false;
   return handle;
 };
-var delayRender = (label2, options) => {
-  if (typeof window === "undefined") {
-    return Math.random();
-  }
-  return delayRenderInternal({
-    scope: window,
-    environment: getRemotionEnvironment(),
-    label: label2 ?? null,
-    options: options ?? {}
-  });
-};
 var continueRenderInternal = ({
   scope,
   handle,
@@ -2360,7 +2349,7 @@ var getSingleChildComponent = (children) => {
   }
   return child.type;
 };
-var VERSION = "4.0.495";
+var VERSION = "4.0.496";
 var checkMultipleRemotionVersions = () => {
   if (typeof globalThis === "undefined") {
     return;
@@ -9943,7 +9932,7 @@ var HtmlInCanvasContent = forwardRef9(({
   const resolvedPixelDensity = resolveHtmlInCanvasPixelDensity(pixelDensity);
   const canvasWidth = Math.ceil(width * resolvedPixelDensity);
   const canvasHeight = Math.ceil(height * resolvedPixelDensity);
-  const { continueRender: continueRender2, cancelRender: cancelRender2 } = useDelayRender();
+  const { delayRender: delayRender2, continueRender: continueRender2, cancelRender: cancelRender2 } = useDelayRender();
   const { isClientSideRendering, isRendering } = useRemotionEnvironment();
   const canRetryMissingPaintRecord = !isRendering || isClientSideRendering;
   const usesDirectLayoutCanvas = onPaint === undefined && onInit === undefined;
@@ -9997,7 +9986,7 @@ var HtmlInCanvasContent = forwardRef9(({
       if (!placeholderCanvas) {
         throw new Error("Canvas not found");
       }
-      const handle = delayRender("onPaint");
+      const handle = delayRender2("onPaint");
       if (!initializedRef.current) {
         const currentOnInit = onInitRef.current;
         if (!currentOnInit) {
@@ -10098,6 +10087,7 @@ var HtmlInCanvasContent = forwardRef9(({
     chainState,
     continueRender2,
     cancelRender2,
+    delayRender2,
     resolvedPixelDensity,
     canRetryMissingPaintRecord
   ]);
@@ -10149,14 +10139,14 @@ var HtmlInCanvasContent = forwardRef9(({
     if (!canvas) {
       return;
     }
-    const handle = delayRender("waiting for first paint after canvas resize");
+    const handle = delayRender2("waiting for first paint after canvas resize");
     canvas.addEventListener("paint", () => {
       continueRender2(handle);
     }, { once: true });
     return () => {
       continueRender2(handle);
     };
-  }, [width, height, continueRender2, canvasSizeKey]);
+  }, [width, height, continueRender2, delayRender2, canvasSizeKey]);
   const innerStyle = useMemo31(() => {
     return {
       width,
@@ -40703,7 +40693,7 @@ var AudioForRendering2 = ({
     throw new TypeError("No `src` was passed to <Audio>.");
   }
   const { fps } = videoConfig;
-  const { delayRender: delayRender2, continueRender } = useDelayRender();
+  const { delayRender, continueRender } = useDelayRender();
   const [replaceWithHtml5Audio, setReplaceWithHtml5Audio] = useState210(false);
   const [initialRequestInit] = useState210(requestInit);
   const sequenceContext = useContext312(Internals.SequenceContext);
@@ -40733,7 +40723,7 @@ var AudioForRendering2 = ({
     if (replaceWithHtml5Audio) {
       return;
     }
-    const newHandle = delayRender2(`Extracting audio for frame ${frame}`, {
+    const newHandle = delayRender(`Extracting audio for frame ${frame}`, {
       retries: delayRenderRetries ?? undefined,
       timeoutInMilliseconds: delayRenderTimeoutInMilliseconds ?? undefined
     });
@@ -40825,7 +40815,7 @@ var AudioForRendering2 = ({
   }, [
     absoluteFrame,
     continueRender,
-    delayRender2,
+    delayRender,
     delayRenderRetries,
     delayRenderTimeoutInMilliseconds,
     disallowFallbackToHtml5Audio,
@@ -41532,7 +41522,7 @@ var VideoForRendering2 = ({
     sequenceContext?.durationInFrames
   ]);
   const environment = useRemotionEnvironment();
-  const { delayRender: delayRender2, continueRender, cancelRender: cancelRender3 } = useDelayRender();
+  const { delayRender, continueRender, cancelRender: cancelRender3 } = useDelayRender();
   const canvasRef = useRef312(null);
   const [replaceWithOffthreadVideo, setReplaceWithOffthreadVideo] = useState53(false);
   const [initialRequestInit] = useState53(requestInit);
@@ -41556,7 +41546,7 @@ var VideoForRendering2 = ({
     }
     const timestamp = frame / fps;
     const durationInSeconds = 1 / fps;
-    const newHandle = delayRender2(`Extracting frame at time ${timestamp} from ${src}`, {
+    const newHandle = delayRender(`Extracting frame at time ${timestamp} from ${src}`, {
       retries: delayRenderRetries ?? undefined,
       timeoutInMilliseconds: delayRenderTimeoutInMilliseconds ?? undefined
     });
@@ -41708,7 +41698,7 @@ var VideoForRendering2 = ({
   }, [
     absoluteFrame,
     continueRender,
-    delayRender2,
+    delayRender,
     delayRenderRetries,
     delayRenderTimeoutInMilliseconds,
     environment.isClientSideRendering,
@@ -42601,8 +42591,8 @@ var Lottie = ({
   const containerRef = useRef53(null);
   const onAnimationLoadedRef = useRef53(onAnimationLoaded);
   onAnimationLoadedRef.current = onAnimationLoaded;
-  const { delayRender: delayRender2, continueRender } = useDelayRender();
-  const [handle] = useState44(() => delayRender2("Waiting for Lottie animation to load"));
+  const { delayRender, continueRender } = useDelayRender();
+  const [handle] = useState44(() => delayRender("Waiting for Lottie animation to load"));
   useEffect45(() => {
     return () => {
       continueRender(handle);
@@ -42683,13 +42673,13 @@ var Lottie = ({
       if (currentHref && currentHref === img.href.baseVal) {
         return;
       }
-      const imgHandle = delayRender2(`Waiting for lottie image with src="${img.href.baseVal}" to load`);
+      const imgHandle = delayRender(`Waiting for lottie image with src="${img.href.baseVal}" to load`);
       img.addEventListener("load", () => {
         continueRender(imgHandle);
       }, { once: true });
       img.setAttributeNS("http://www.w3.org/1999/xlink", "xlink:href", img.href.baseVal);
     });
-  }, [direction, frame, loop, playbackRate, delayRender2, continueRender]);
+  }, [direction, frame, loop, playbackRate, delayRender, continueRender]);
   return /* @__PURE__ */ jsx70("div", {
     ref: containerRef,
     className: className2,
@@ -42704,7 +42694,7 @@ var DisplayedEmoji = ({ emoji }) => {
   const [data, setData] = useState46(null);
   const { durationInFrames, fps } = useVideoConfig();
   const [browser, setBrowser] = useState46(typeof document !== "undefined");
-  const { delayRender: delayRender2, continueRender, cancelRender: cancelRender2 } = useDelayRender();
+  const { delayRender, continueRender, cancelRender: cancelRender2 } = useDelayRender();
   const { isRendering } = useRemotionEnvironment();
   const src = useMemo60(() => {
     if (emoji === "melting") {
@@ -42718,7 +42708,7 @@ var DisplayedEmoji = ({ emoji }) => {
     }
     throw new Error("Unknown emoji");
   }, [emoji]);
-  const [handle] = useState46(() => delayRender2("Loading emojis!"));
+  const [handle] = useState46(() => delayRender("Loading emojis!"));
   useEffect46(() => {
     fetch(src).then((res) => res.json()).then((json) => {
       setData({
@@ -43451,7 +43441,7 @@ import {
 import { BufferTarget, StreamTarget } from "mediabunny";
 
 // ../core/dist/esm/version.mjs
-var VERSION2 = "4.0.495";
+var VERSION2 = "4.0.496";
 
 // ../web-renderer/dist/esm/index.mjs
 import { AudioSample, VideoSample } from "mediabunny";
@@ -44344,6 +44334,7 @@ function createScaffold({
   wrapper.style.inset = "0";
   wrapper.style.overflow = "hidden";
   wrapper.style.visibility = "hidden";
+  wrapper.style.filter = "opacity(0)";
   wrapper.style.pointerEvents = "none";
   wrapper.style.zIndex = "-9999";
   const div = document.createElement("div");
@@ -44361,6 +44352,14 @@ function createScaffold({
   wrapper.appendChild(div);
   document.body.appendChild(wrapper);
   const htmlInCanvasContext = useHtmlInCanvas ? setupHtmlInCanvas({ wrapper, div, width: width2, height: height2 }) : null;
+  const updateFallbackScaffoldVisibility = () => {
+    if (htmlInCanvasContext) {
+      return;
+    }
+    div.style.visibility = containsLayoutSubtreeCanvas(div) ? "visible" : "";
+  };
+  const fallbackScaffoldObserver = htmlInCanvasContext ? null : new MutationObserver(updateFallbackScaffoldVisibility);
+  fallbackScaffoldObserver?.observe(div, { childList: true, subtree: true });
   const errorHolder = { error: null };
   const root = ReactDOM6.createRoot(div, {
     onUncaughtError: (err, errorInfo) => {
@@ -44451,12 +44450,14 @@ function createScaffold({
       })
     }));
   });
+  updateFallbackScaffoldVisibility();
   return {
     delayRenderScope,
     div,
     errorHolder,
     htmlInCanvasContext,
     [Symbol.dispose]: () => {
+      fallbackScaffoldObserver?.disconnect();
       root.unmount();
       if (htmlInCanvasContext) {
         teardownHtmlInCanvas({ htmlInCanvasContext, wrapper, div });

package/dist/design.js

@@ -5259,17 +5259,6 @@ var delayRenderInternal = ({
   scope.remotion_renderReady = false;
   return handle;
 };
-var delayRender = (label2, options) => {
-  if (typeof window === "undefined") {
-    return Math.random();
-  }
-  return delayRenderInternal({
-    scope: window,
-    environment: getRemotionEnvironment(),
-    label: label2 ?? null,
-    options: options ?? {}
-  });
-};
 var continueRenderInternal = ({
   scope,
   handle,
@@ -5590,7 +5579,7 @@ var getSingleChildComponent = (children) => {
   }
   return child.type;
 };
-var VERSION = "4.0.495";
+var VERSION = "4.0.496";
 var checkMultipleRemotionVersions = () => {
   if (typeof globalThis === "undefined") {
     return;
@@ -13173,7 +13162,7 @@ var HtmlInCanvasContent = forwardRef9(({
   const resolvedPixelDensity = resolveHtmlInCanvasPixelDensity(pixelDensity);
   const canvasWidth = Math.ceil(width * resolvedPixelDensity);
   const canvasHeight = Math.ceil(height * resolvedPixelDensity);
-  const { continueRender: continueRender2, cancelRender: cancelRender2 } = useDelayRender();
+  const { delayRender: delayRender2, continueRender: continueRender2, cancelRender: cancelRender2 } = useDelayRender();
   const { isClientSideRendering, isRendering } = useRemotionEnvironment();
   const canRetryMissingPaintRecord = !isRendering || isClientSideRendering;
   const usesDirectLayoutCanvas = onPaint === undefined && onInit === undefined;
@@ -13227,7 +13216,7 @@ var HtmlInCanvasContent = forwardRef9(({
       if (!placeholderCanvas) {
         throw new Error("Canvas not found");
       }
-      const handle = delayRender("onPaint");
+      const handle = delayRender2("onPaint");
       if (!initializedRef.current) {
         const currentOnInit = onInitRef.current;
         if (!currentOnInit) {
@@ -13328,6 +13317,7 @@ var HtmlInCanvasContent = forwardRef9(({
     chainState,
     continueRender2,
     cancelRender2,
+    delayRender2,
     resolvedPixelDensity,
     canRetryMissingPaintRecord
   ]);
@@ -13379,14 +13369,14 @@ var HtmlInCanvasContent = forwardRef9(({
     if (!canvas) {
       return;
     }
-    const handle = delayRender("waiting for first paint after canvas resize");
+    const handle = delayRender2("waiting for first paint after canvas resize");
     canvas.addEventListener("paint", () => {
       continueRender2(handle);
     }, { once: true });
     return () => {
       continueRender2(handle);
     };
-  }, [width, height, continueRender2, canvasSizeKey]);
+  }, [width, height, continueRender2, delayRender2, canvasSizeKey]);
   const innerStyle = useMemo31(() => {
     return {
       width,

package/dist/experts.js

@@ -2029,17 +2029,6 @@ var delayRenderInternal = ({
   scope.remotion_renderReady = false;
   return handle;
 };
-var delayRender = (label2, options) => {
-  if (typeof window === "undefined") {
-    return Math.random();
-  }
-  return delayRenderInternal({
-    scope: window,
-    environment: getRemotionEnvironment(),
-    label: label2 ?? null,
-    options: options ?? {}
-  });
-};
 var continueRenderInternal = ({
   scope,
   handle,
@@ -2360,7 +2349,7 @@ var getSingleChildComponent = (children) => {
   }
   return child.type;
 };
-var VERSION = "4.0.495";
+var VERSION = "4.0.496";
 var checkMultipleRemotionVersions = () => {
   if (typeof globalThis === "undefined") {
     return;
@@ -9943,7 +9932,7 @@ var HtmlInCanvasContent = forwardRef9(({
   const resolvedPixelDensity = resolveHtmlInCanvasPixelDensity(pixelDensity);
   const canvasWidth = Math.ceil(width * resolvedPixelDensity);
   const canvasHeight = Math.ceil(height * resolvedPixelDensity);
-  const { continueRender: continueRender2, cancelRender: cancelRender2 } = useDelayRender();
+  const { delayRender: delayRender2, continueRender: continueRender2, cancelRender: cancelRender2 } = useDelayRender();
   const { isClientSideRendering, isRendering } = useRemotionEnvironment();
   const canRetryMissingPaintRecord = !isRendering || isClientSideRendering;
   const usesDirectLayoutCanvas = onPaint === undefined && onInit === undefined;
@@ -9997,7 +9986,7 @@ var HtmlInCanvasContent = forwardRef9(({
       if (!placeholderCanvas) {
         throw new Error("Canvas not found");
       }
-      const handle = delayRender("onPaint");
+      const handle = delayRender2("onPaint");
       if (!initializedRef.current) {
         const currentOnInit = onInitRef.current;
         if (!currentOnInit) {
@@ -10098,6 +10087,7 @@ var HtmlInCanvasContent = forwardRef9(({
     chainState,
     continueRender2,
     cancelRender2,
+    delayRender2,
     resolvedPixelDensity,
     canRetryMissingPaintRecord
   ]);
@@ -10149,14 +10139,14 @@ var HtmlInCanvasContent = forwardRef9(({
     if (!canvas) {
       return;
     }
-    const handle = delayRender("waiting for first paint after canvas resize");
+    const handle = delayRender2("waiting for first paint after canvas resize");
     canvas.addEventListener("paint", () => {
       continueRender2(handle);
     }, { once: true });
     return () => {
       continueRender2(handle);
     };
-  }, [width, height, continueRender2, canvasSizeKey]);
+  }, [width, height, continueRender2, delayRender2, canvasSizeKey]);
   const innerStyle = useMemo31(() => {
     return {
       width,

package/dist/homepage/Pricing.js

@@ -5262,17 +5262,6 @@ var delayRenderInternal = ({
   scope.remotion_renderReady = false;
   return handle;
 };
-var delayRender = (label2, options) => {
-  if (typeof window === "undefined") {
-    return Math.random();
-  }
-  return delayRenderInternal({
-    scope: window,
-    environment: getRemotionEnvironment(),
-    label: label2 ?? null,
-    options: options ?? {}
-  });
-};
 var continueRenderInternal = ({
   scope,
   handle,
@@ -5593,7 +5582,7 @@ var getSingleChildComponent = (children) => {
   }
   return child.type;
 };
-var VERSION = "4.0.495";
+var VERSION = "4.0.496";
 var checkMultipleRemotionVersions = () => {
   if (typeof globalThis === "undefined") {
     return;
@@ -13176,7 +13165,7 @@ var HtmlInCanvasContent = forwardRef9(({
   const resolvedPixelDensity = resolveHtmlInCanvasPixelDensity(pixelDensity);
   const canvasWidth = Math.ceil(width * resolvedPixelDensity);
   const canvasHeight = Math.ceil(height * resolvedPixelDensity);
-  const { continueRender: continueRender2, cancelRender: cancelRender2 } = useDelayRender();
+  const { delayRender: delayRender2, continueRender: continueRender2, cancelRender: cancelRender2 } = useDelayRender();
   const { isClientSideRendering, isRendering } = useRemotionEnvironment();
   const canRetryMissingPaintRecord = !isRendering || isClientSideRendering;
   const usesDirectLayoutCanvas = onPaint === undefined && onInit === undefined;
@@ -13230,7 +13219,7 @@ var HtmlInCanvasContent = forwardRef9(({
       if (!placeholderCanvas) {
         throw new Error("Canvas not found");
       }
-      const handle = delayRender("onPaint");
+      const handle = delayRender2("onPaint");
       if (!initializedRef.current) {
         const currentOnInit = onInitRef.current;
         if (!currentOnInit) {
@@ -13331,6 +13320,7 @@ var HtmlInCanvasContent = forwardRef9(({
     chainState,
     continueRender2,
     cancelRender2,
+    delayRender2,
     resolvedPixelDensity,
     canRetryMissingPaintRecord
   ]);
@@ -13382,14 +13372,14 @@ var HtmlInCanvasContent = forwardRef9(({
     if (!canvas) {
       return;
     }
-    const handle = delayRender("waiting for first paint after canvas resize");
+    const handle = delayRender2("waiting for first paint after canvas resize");
     canvas.addEventListener("paint", () => {
       continueRender2(handle);
     }, { once: true });
     return () => {
       continueRender2(handle);
     };
-  }, [width, height, continueRender2, canvasSizeKey]);
+  }, [width, height, continueRender2, delayRender2, canvasSizeKey]);
   const innerStyle = useMemo31(() => {
     return {
       width,

package/dist/prompts/PromptsGallery.js

@@ -5259,17 +5259,6 @@ var delayRenderInternal = ({
   scope.remotion_renderReady = false;
   return handle;
 };
-var delayRender = (label2, options) => {
-  if (typeof window === "undefined") {
-    return Math.random();
-  }
-  return delayRenderInternal({
-    scope: window,
-    environment: getRemotionEnvironment(),
-    label: label2 ?? null,
-    options: options ?? {}
-  });
-};
 var continueRenderInternal = ({
   scope,
   handle,
@@ -5590,7 +5579,7 @@ var getSingleChildComponent = (children) => {
   }
   return child.type;
 };
-var VERSION = "4.0.495";
+var VERSION = "4.0.496";
 var checkMultipleRemotionVersions = () => {
   if (typeof globalThis === "undefined") {
     return;
@@ -13173,7 +13162,7 @@ var HtmlInCanvasContent = forwardRef9(({
   const resolvedPixelDensity = resolveHtmlInCanvasPixelDensity(pixelDensity);
   const canvasWidth = Math.ceil(width * resolvedPixelDensity);
   const canvasHeight = Math.ceil(height * resolvedPixelDensity);
-  const { continueRender: continueRender2, cancelRender: cancelRender2 } = useDelayRender();
+  const { delayRender: delayRender2, continueRender: continueRender2, cancelRender: cancelRender2 } = useDelayRender();
   const { isClientSideRendering, isRendering } = useRemotionEnvironment();
   const canRetryMissingPaintRecord = !isRendering || isClientSideRendering;
   const usesDirectLayoutCanvas = onPaint === undefined && onInit === undefined;
@@ -13227,7 +13216,7 @@ var HtmlInCanvasContent = forwardRef9(({
       if (!placeholderCanvas) {
         throw new Error("Canvas not found");
       }
-      const handle = delayRender("onPaint");
+      const handle = delayRender2("onPaint");
       if (!initializedRef.current) {
         const currentOnInit = onInitRef.current;
         if (!currentOnInit) {
@@ -13328,6 +13317,7 @@ var HtmlInCanvasContent = forwardRef9(({
     chainState,
     continueRender2,
     cancelRender2,
+    delayRender2,
     resolvedPixelDensity,
     canRetryMissingPaintRecord
   ]);
@@ -13379,14 +13369,14 @@ var HtmlInCanvasContent = forwardRef9(({
     if (!canvas) {
       return;
     }
-    const handle = delayRender("waiting for first paint after canvas resize");
+    const handle = delayRender2("waiting for first paint after canvas resize");
     canvas.addEventListener("paint", () => {
       continueRender2(handle);
     }, { once: true });
     return () => {
       continueRender2(handle);
     };
-  }, [width, height, continueRender2, canvasSizeKey]);
+  }, [width, height, continueRender2, delayRender2, canvasSizeKey]);
   const innerStyle = useMemo31(() => {
     return {
       width,

package/dist/prompts/PromptsShow.js

@@ -22593,17 +22593,6 @@ var delayRenderInternal = ({
   scope.remotion_renderReady = false;
   return handle;
 };
-var delayRender = (label2, options) => {
-  if (typeof window === "undefined") {
-    return Math.random();
-  }
-  return delayRenderInternal({
-    scope: window,
-    environment: getRemotionEnvironment(),
-    label: label2 ?? null,
-    options: options ?? {}
-  });
-};
 var continueRenderInternal = ({
   scope,
   handle,
@@ -22924,7 +22913,7 @@ var getSingleChildComponent = (children) => {
   }
   return child.type;
 };
-var VERSION = "4.0.495";
+var VERSION = "4.0.496";
 var checkMultipleRemotionVersions = () => {
   if (typeof globalThis === "undefined") {
     return;
@@ -30507,7 +30496,7 @@ var HtmlInCanvasContent = forwardRef9(({
   const resolvedPixelDensity = resolveHtmlInCanvasPixelDensity(pixelDensity);
   const canvasWidth = Math.ceil(width * resolvedPixelDensity);
   const canvasHeight = Math.ceil(height * resolvedPixelDensity);
-  const { continueRender: continueRender2, cancelRender: cancelRender2 } = useDelayRender();
+  const { delayRender: delayRender2, continueRender: continueRender2, cancelRender: cancelRender2 } = useDelayRender();
   const { isClientSideRendering, isRendering } = useRemotionEnvironment();
   const canRetryMissingPaintRecord = !isRendering || isClientSideRendering;
   const usesDirectLayoutCanvas = onPaint === undefined && onInit === undefined;
@@ -30561,7 +30550,7 @@ var HtmlInCanvasContent = forwardRef9(({
       if (!placeholderCanvas) {
         throw new Error("Canvas not found");
       }
-      const handle = delayRender("onPaint");
+      const handle = delayRender2("onPaint");
       if (!initializedRef.current) {
         const currentOnInit = onInitRef.current;
         if (!currentOnInit) {
@@ -30662,6 +30651,7 @@ var HtmlInCanvasContent = forwardRef9(({
     chainState,
     continueRender2,
     cancelRender2,
+    delayRender2,
     resolvedPixelDensity,
     canRetryMissingPaintRecord
   ]);
@@ -30713,14 +30703,14 @@ var HtmlInCanvasContent = forwardRef9(({
     if (!canvas) {
       return;
     }
-    const handle = delayRender("waiting for first paint after canvas resize");
+    const handle = delayRender2("waiting for first paint after canvas resize");
     canvas.addEventListener("paint", () => {
       continueRender2(handle);
     }, { once: true });
     return () => {
       continueRender2(handle);
     };
-  }, [width, height, continueRender2, canvasSizeKey]);
+  }, [width, height, continueRender2, delayRender2, canvasSizeKey]);
   const innerStyle = useMemo31(() => {
     return {
       width,

package/dist/prompts/PromptsSubmit.js

@@ -5259,17 +5259,6 @@ var delayRenderInternal = ({
   scope.remotion_renderReady = false;
   return handle;
 };
-var delayRender = (label2, options) => {
-  if (typeof window === "undefined") {
-    return Math.random();
-  }
-  return delayRenderInternal({
-    scope: window,
-    environment: getRemotionEnvironment(),
-    label: label2 ?? null,
-    options: options ?? {}
-  });
-};
 var continueRenderInternal = ({
   scope,
   handle,
@@ -5590,7 +5579,7 @@ var getSingleChildComponent = (children) => {
   }
   return child.type;
 };
-var VERSION = "4.0.495";
+var VERSION = "4.0.496";
 var checkMultipleRemotionVersions = () => {
   if (typeof globalThis === "undefined") {
     return;
@@ -13173,7 +13162,7 @@ var HtmlInCanvasContent = forwardRef9(({
   const resolvedPixelDensity = resolveHtmlInCanvasPixelDensity(pixelDensity);
   const canvasWidth = Math.ceil(width * resolvedPixelDensity);
   const canvasHeight = Math.ceil(height * resolvedPixelDensity);
-  const { continueRender: continueRender2, cancelRender: cancelRender2 } = useDelayRender();
+  const { delayRender: delayRender2, continueRender: continueRender2, cancelRender: cancelRender2 } = useDelayRender();
   const { isClientSideRendering, isRendering } = useRemotionEnvironment();
   const canRetryMissingPaintRecord = !isRendering || isClientSideRendering;
   const usesDirectLayoutCanvas = onPaint === undefined && onInit === undefined;
@@ -13227,7 +13216,7 @@ var HtmlInCanvasContent = forwardRef9(({
       if (!placeholderCanvas) {
         throw new Error("Canvas not found");
       }
-      const handle = delayRender("onPaint");
+      const handle = delayRender2("onPaint");
       if (!initializedRef.current) {
         const currentOnInit = onInitRef.current;
         if (!currentOnInit) {
@@ -13328,6 +13317,7 @@ var HtmlInCanvasContent = forwardRef9(({
     chainState,
     continueRender2,
     cancelRender2,
+    delayRender2,
     resolvedPixelDensity,
     canRetryMissingPaintRecord
   ]);
@@ -13379,14 +13369,14 @@ var HtmlInCanvasContent = forwardRef9(({
     if (!canvas) {
       return;
     }
-    const handle = delayRender("waiting for first paint after canvas resize");
+    const handle = delayRender2("waiting for first paint after canvas resize");
     canvas.addEventListener("paint", () => {
       continueRender2(handle);
     }, { once: true });
     return () => {
       continueRender2(handle);
     };
-  }, [width, height, continueRender2, canvasSizeKey]);
+  }, [width, height, continueRender2, delayRender2, canvasSizeKey]);
   const innerStyle = useMemo31(() => {
     return {
       width,

package/dist/team.js

@@ -5440,17 +5440,6 @@ var delayRenderInternal = ({
   scope.remotion_renderReady = false;
   return handle;
 };
-var delayRender = (label2, options) => {
-  if (typeof window === "undefined") {
-    return Math.random();
-  }
-  return delayRenderInternal({
-    scope: window,
-    environment: getRemotionEnvironment(),
-    label: label2 ?? null,
-    options: options ?? {}
-  });
-};
 var continueRenderInternal = ({
   scope,
   handle,
@@ -5771,7 +5760,7 @@ var getSingleChildComponent = (children) => {
   }
   return child.type;
 };
-var VERSION = "4.0.495";
+var VERSION = "4.0.496";
 var checkMultipleRemotionVersions = () => {
   if (typeof globalThis === "undefined") {
     return;
@@ -13354,7 +13343,7 @@ var HtmlInCanvasContent = forwardRef9(({
   const resolvedPixelDensity = resolveHtmlInCanvasPixelDensity(pixelDensity);
   const canvasWidth = Math.ceil(width * resolvedPixelDensity);
   const canvasHeight = Math.ceil(height * resolvedPixelDensity);
-  const { continueRender: continueRender2, cancelRender: cancelRender2 } = useDelayRender();
+  const { delayRender: delayRender2, continueRender: continueRender2, cancelRender: cancelRender2 } = useDelayRender();
   const { isClientSideRendering, isRendering } = useRemotionEnvironment();
   const canRetryMissingPaintRecord = !isRendering || isClientSideRendering;
   const usesDirectLayoutCanvas = onPaint === undefined && onInit === undefined;
@@ -13408,7 +13397,7 @@ var HtmlInCanvasContent = forwardRef9(({
       if (!placeholderCanvas) {
         throw new Error("Canvas not found");
       }
-      const handle = delayRender("onPaint");
+      const handle = delayRender2("onPaint");
       if (!initializedRef.current) {
         const currentOnInit = onInitRef.current;
         if (!currentOnInit) {
@@ -13509,6 +13498,7 @@ var HtmlInCanvasContent = forwardRef9(({
     chainState,
     continueRender2,
     cancelRender2,
+    delayRender2,
     resolvedPixelDensity,
     canRetryMissingPaintRecord
   ]);
@@ -13560,14 +13550,14 @@ var HtmlInCanvasContent = forwardRef9(({
     if (!canvas) {
       return;
     }
-    const handle = delayRender("waiting for first paint after canvas resize");
+    const handle = delayRender2("waiting for first paint after canvas resize");
     canvas.addEventListener("paint", () => {
       continueRender2(handle);
     }, { once: true });
     return () => {
       continueRender2(handle);
     };
-  }, [width, height, continueRender2, canvasSizeKey]);
+  }, [width, height, continueRender2, delayRender2, canvasSizeKey]);
   const innerStyle = useMemo31(() => {
     return {
       width,

package/dist/template-modal-content.js

@@ -5259,17 +5259,6 @@ var delayRenderInternal = ({
   scope.remotion_renderReady = false;
   return handle;
 };
-var delayRender = (label2, options) => {
-  if (typeof window === "undefined") {
-    return Math.random();
-  }
-  return delayRenderInternal({
-    scope: window,
-    environment: getRemotionEnvironment(),
-    label: label2 ?? null,
-    options: options ?? {}
-  });
-};
 var continueRenderInternal = ({
   scope,
   handle,
@@ -5590,7 +5579,7 @@ var getSingleChildComponent = (children) => {
   }
   return child.type;
 };
-var VERSION = "4.0.495";
+var VERSION = "4.0.496";
 var checkMultipleRemotionVersions = () => {
   if (typeof globalThis === "undefined") {
     return;
@@ -13173,7 +13162,7 @@ var HtmlInCanvasContent = forwardRef9(({
   const resolvedPixelDensity = resolveHtmlInCanvasPixelDensity(pixelDensity);
   const canvasWidth = Math.ceil(width * resolvedPixelDensity);
   const canvasHeight = Math.ceil(height * resolvedPixelDensity);
-  const { continueRender: continueRender2, cancelRender: cancelRender2 } = useDelayRender();
+  const { delayRender: delayRender2, continueRender: continueRender2, cancelRender: cancelRender2 } = useDelayRender();
   const { isClientSideRendering, isRendering } = useRemotionEnvironment();
   const canRetryMissingPaintRecord = !isRendering || isClientSideRendering;
   const usesDirectLayoutCanvas = onPaint === undefined && onInit === undefined;
@@ -13227,7 +13216,7 @@ var HtmlInCanvasContent = forwardRef9(({
       if (!placeholderCanvas) {
         throw new Error("Canvas not found");
       }
-      const handle = delayRender("onPaint");
+      const handle = delayRender2("onPaint");
       if (!initializedRef.current) {
         const currentOnInit = onInitRef.current;
         if (!currentOnInit) {
@@ -13328,6 +13317,7 @@ var HtmlInCanvasContent = forwardRef9(({
     chainState,
     continueRender2,
     cancelRender2,
+    delayRender2,
     resolvedPixelDensity,
     canRetryMissingPaintRecord
   ]);
@@ -13379,14 +13369,14 @@ var HtmlInCanvasContent = forwardRef9(({
     if (!canvas) {
       return;
     }
-    const handle = delayRender("waiting for first paint after canvas resize");
+    const handle = delayRender2("waiting for first paint after canvas resize");
     canvas.addEventListener("paint", () => {
       continueRender2(handle);
     }, { once: true });
     return () => {
       continueRender2(handle);
     };
-  }, [width, height, continueRender2, canvasSizeKey]);
+  }, [width, height, continueRender2, delayRender2, canvasSizeKey]);
   const innerStyle = useMemo31(() => {
     return {
       width,

package/dist/templates.js

@@ -5259,17 +5259,6 @@ var delayRenderInternal = ({
   scope.remotion_renderReady = false;
   return handle;
 };
-var delayRender = (label2, options) => {
-  if (typeof window === "undefined") {
-    return Math.random();
-  }
-  return delayRenderInternal({
-    scope: window,
-    environment: getRemotionEnvironment(),
-    label: label2 ?? null,
-    options: options ?? {}
-  });
-};
 var continueRenderInternal = ({
   scope,
   handle,
@@ -5590,7 +5579,7 @@ var getSingleChildComponent = (children) => {
   }
   return child.type;
 };
-var VERSION = "4.0.495";
+var VERSION = "4.0.496";
 var checkMultipleRemotionVersions = () => {
   if (typeof globalThis === "undefined") {
     return;
@@ -13173,7 +13162,7 @@ var HtmlInCanvasContent = forwardRef9(({
   const resolvedPixelDensity = resolveHtmlInCanvasPixelDensity(pixelDensity);
   const canvasWidth = Math.ceil(width * resolvedPixelDensity);
   const canvasHeight = Math.ceil(height * resolvedPixelDensity);
-  const { continueRender: continueRender2, cancelRender: cancelRender2 } = useDelayRender();
+  const { delayRender: delayRender2, continueRender: continueRender2, cancelRender: cancelRender2 } = useDelayRender();
   const { isClientSideRendering, isRendering } = useRemotionEnvironment();
   const canRetryMissingPaintRecord = !isRendering || isClientSideRendering;
   const usesDirectLayoutCanvas = onPaint === undefined && onInit === undefined;
@@ -13227,7 +13216,7 @@ var HtmlInCanvasContent = forwardRef9(({
       if (!placeholderCanvas) {
         throw new Error("Canvas not found");
       }
-      const handle = delayRender("onPaint");
+      const handle = delayRender2("onPaint");
       if (!initializedRef.current) {
         const currentOnInit = onInitRef.current;
         if (!currentOnInit) {
@@ -13328,6 +13317,7 @@ var HtmlInCanvasContent = forwardRef9(({
     chainState,
     continueRender2,
     cancelRender2,
+    delayRender2,
     resolvedPixelDensity,
     canRetryMissingPaintRecord
   ]);
@@ -13379,14 +13369,14 @@ var HtmlInCanvasContent = forwardRef9(({
     if (!canvas) {
       return;
     }
-    const handle = delayRender("waiting for first paint after canvas resize");
+    const handle = delayRender2("waiting for first paint after canvas resize");
     canvas.addEventListener("paint", () => {
       continueRender2(handle);
     }, { once: true });
     return () => {
       continueRender2(handle);
     };
-  }, [width, height, continueRender2, canvasSizeKey]);
+  }, [width, height, continueRender2, delayRender2, canvasSizeKey]);
   const innerStyle = useMemo31(() => {
     return {
       width,

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@remotion/promo-pages",
-	"version": "4.0.495",
+	"version": "4.0.496",
 	"publishConfig": {
 		"access": "public"
 	},
@@ -11,19 +11,19 @@
 	},
 	"type": "module",
 	"dependencies": {
-		"@remotion/animated-emoji": "4.0.495",
-		"@remotion/design": "4.0.495",
-		"@remotion/web-renderer": "4.0.495",
-		"@remotion/lottie": "4.0.495",
-		"@remotion/paths": "4.0.495",
-		"@remotion/player": "4.0.495",
-		"@remotion/shapes": "4.0.495",
-		"@remotion/media": "4.0.495",
-		"@remotion/svg-3d-engine": "4.0.495",
-		"create-video": "4.0.495",
+		"@remotion/animated-emoji": "4.0.496",
+		"@remotion/design": "4.0.496",
+		"@remotion/web-renderer": "4.0.496",
+		"@remotion/lottie": "4.0.496",
+		"@remotion/paths": "4.0.496",
+		"@remotion/player": "4.0.496",
+		"@remotion/shapes": "4.0.496",
+		"@remotion/media": "4.0.496",
+		"@remotion/svg-3d-engine": "4.0.496",
+		"create-video": "4.0.496",
 		"hls.js": "1.5.19",
 		"polished": "4.3.1",
-		"remotion": "4.0.495",
+		"remotion": "4.0.496",
 		"zod": "4.3.6",
 		"@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.495",
+		"@remotion/eslint-config-internal": "4.0.496",
 		"@eslint/eslintrc": "3.1.0",
 		"@types/react": "19.2.7",
 		"@types/react-dom": "19.2.3",