@remotion/promo-pages 4.0.394 → 4.0.395

package/dist/Homepage.js

@@ -755,7 +755,7 @@ var __defProp2, __export2 = (target, all) => {
   });
 }, useIsPlayer = () => {
   return useContext(IsPlayerContext);
-}, VERSION = "4.0.394", checkMultipleRemotionVersions = () => {
+}, VERSION = "4.0.395", checkMultipleRemotionVersions = () => {
   if (typeof globalThis === "undefined") {
     return;
   }
@@ -2929,11 +2929,15 @@ Check that all your Remotion packages are on the same version. If your dependenc
   });
 }, getCrossOriginValue = ({
   crossOrigin,
-  requestsVideoFrame
+  requestsVideoFrame,
+  isClientSideRendering
 }) => {
   if (crossOrigin !== undefined && crossOrigin !== null) {
     return crossOrigin;
   }
+  if (isClientSideRendering) {
+    return "anonymous";
+  }
   if (requestsVideoFrame) {
     return "anonymous";
   }
@@ -3638,8 +3642,17 @@ Check that all your Remotion packages are on the same version. If your dependenc
   const [blocks, setBlocks] = useState13([]);
   const [onBufferingCallbacks, setOnBufferingCallbacks] = useState13([]);
   const [onResumeCallbacks, setOnResumeCallbacks] = useState13([]);
+  const env = useRemotionEnvironment();
+  const rendering = env.isRendering;
   const buffering = useRef9(false);
   const addBlock = useCallback8((block) => {
+    if (rendering) {
+      return {
+        unblock: () => {
+          return;
+        }
+      };
+    }
     setBlocks((b) => [...b, block]);
     return {
       unblock: () => {
@@ -3652,7 +3665,7 @@ Check that all your Remotion packages are on the same version. If your dependenc
         });
       }
     };
-  }, []);
+  }, [rendering]);
   const listenForBuffering = useCallback8((callback) => {
     setOnBufferingCallbacks((c) => [...c, callback]);
     return {
@@ -3670,6 +3683,9 @@ Check that all your Remotion packages are on the same version. If your dependenc
     };
   }, []);
   useEffect7(() => {
+    if (rendering) {
+      return;
+    }
     if (blocks.length > 0) {
       onBufferingCallbacks.forEach((c) => c());
       playbackLogging({
@@ -3682,6 +3698,9 @@ Check that all your Remotion packages are on the same version. If your dependenc
   }, [blocks]);
   if (typeof window !== "undefined") {
     useLayoutEffect6(() => {
+      if (rendering) {
+        return;
+      }
       if (blocks.length === 0) {
         onResumeCallbacks.forEach((c) => c());
         playbackLogging({
@@ -4465,7 +4484,8 @@ Check that all your Remotion packages are on the same version. If your dependenc
   warnAboutTooHighVolume(userPreferredVolume);
   const crossOriginValue = getCrossOriginValue({
     crossOrigin,
-    requestsVideoFrame: false
+    requestsVideoFrame: false,
+    isClientSideRendering: false
   });
   const propsToPass = useMemo21(() => {
     return {
@@ -5202,9 +5222,11 @@ Check that all your Remotion packages are on the same version. If your dependenc
       delayRender2
     ]);
   }
+  const { isClientSideRendering } = useRemotionEnvironment();
   const crossOriginValue = getCrossOriginValue({
     crossOrigin,
-    requestsVideoFrame: false
+    requestsVideoFrame: false,
+    isClientSideRendering
   });
   return /* @__PURE__ */ jsx25("img", {
     ...props2,
@@ -5929,7 +5951,8 @@ Check that all your Remotion packages are on the same version. If your dependenc
   }, [isSequenceHidden, style]);
   const crossOriginValue = getCrossOriginValue({
     crossOrigin,
-    requestsVideoFrame: Boolean(onVideoFrame)
+    requestsVideoFrame: Boolean(onVideoFrame),
+    isClientSideRendering: false
   });
   return /* @__PURE__ */ jsx30("video", {
     ref: videoRef,
@@ -20323,7 +20346,7 @@ var GitHubStars = () => {
             width: "45px"
           }),
           /* @__PURE__ */ jsx47(StatItemContent, {
-            content: "24k",
+            content: "25k",
             width: "80px",
             fontSize: "2.5rem",
             fontWeight: "bold"
@@ -28992,7 +29015,7 @@ var FEATURED_TEMPLATES = [
     contributedBy: null
   },
   {
-    homePageLabel: "Prompt to Motion graphics",
+    homePageLabel: "Prompt to Motion Graphics",
     shortName: "Prompt to Motion Graphics (Next.js)",
     org: "remotion-dev",
     repoName: "template-prompt-to-motion-graphics",
@@ -30063,7 +30086,7 @@ var GithubButton = () => {
       " ",
       /* @__PURE__ */ jsx151("div", {
         className: "text-xs inline-block ml-2 leading-none mt-[3px] self-center",
-        children: "24k"
+        children: "25k"
       })
     ]
   });

package/dist/Users/jonathanburger/remotion/packages/promo-pages/dist/Homepage.js

@@ -755,7 +755,7 @@ var __defProp2, __export2 = (target, all) => {
   });
 }, useIsPlayer = () => {
   return useContext(IsPlayerContext);
-}, VERSION = "4.0.394", checkMultipleRemotionVersions = () => {
+}, VERSION = "4.0.395", checkMultipleRemotionVersions = () => {
   if (typeof globalThis === "undefined") {
     return;
   }
@@ -2929,11 +2929,15 @@ Check that all your Remotion packages are on the same version. If your dependenc
   });
 }, getCrossOriginValue = ({
   crossOrigin,
-  requestsVideoFrame
+  requestsVideoFrame,
+  isClientSideRendering
 }) => {
   if (crossOrigin !== undefined && crossOrigin !== null) {
     return crossOrigin;
   }
+  if (isClientSideRendering) {
+    return "anonymous";
+  }
   if (requestsVideoFrame) {
     return "anonymous";
   }
@@ -3638,8 +3642,17 @@ Check that all your Remotion packages are on the same version. If your dependenc
   const [blocks, setBlocks] = useState13([]);
   const [onBufferingCallbacks, setOnBufferingCallbacks] = useState13([]);
   const [onResumeCallbacks, setOnResumeCallbacks] = useState13([]);
+  const env = useRemotionEnvironment();
+  const rendering = env.isRendering;
   const buffering = useRef9(false);
   const addBlock = useCallback8((block) => {
+    if (rendering) {
+      return {
+        unblock: () => {
+          return;
+        }
+      };
+    }
     setBlocks((b) => [...b, block]);
     return {
       unblock: () => {
@@ -3652,7 +3665,7 @@ Check that all your Remotion packages are on the same version. If your dependenc
         });
       }
     };
-  }, []);
+  }, [rendering]);
   const listenForBuffering = useCallback8((callback) => {
     setOnBufferingCallbacks((c) => [...c, callback]);
     return {
@@ -3670,6 +3683,9 @@ Check that all your Remotion packages are on the same version. If your dependenc
     };
   }, []);
   useEffect7(() => {
+    if (rendering) {
+      return;
+    }
     if (blocks.length > 0) {
       onBufferingCallbacks.forEach((c) => c());
       playbackLogging({
@@ -3682,6 +3698,9 @@ Check that all your Remotion packages are on the same version. If your dependenc
   }, [blocks]);
   if (typeof window !== "undefined") {
     useLayoutEffect6(() => {
+      if (rendering) {
+        return;
+      }
       if (blocks.length === 0) {
         onResumeCallbacks.forEach((c) => c());
         playbackLogging({
@@ -4465,7 +4484,8 @@ Check that all your Remotion packages are on the same version. If your dependenc
   warnAboutTooHighVolume(userPreferredVolume);
   const crossOriginValue = getCrossOriginValue({
     crossOrigin,
-    requestsVideoFrame: false
+    requestsVideoFrame: false,
+    isClientSideRendering: false
   });
   const propsToPass = useMemo21(() => {
     return {
@@ -5202,9 +5222,11 @@ Check that all your Remotion packages are on the same version. If your dependenc
       delayRender2
     ]);
   }
+  const { isClientSideRendering } = useRemotionEnvironment();
   const crossOriginValue = getCrossOriginValue({
     crossOrigin,
-    requestsVideoFrame: false
+    requestsVideoFrame: false,
+    isClientSideRendering
   });
   return /* @__PURE__ */ jsx25("img", {
     ...props2,
@@ -5929,7 +5951,8 @@ Check that all your Remotion packages are on the same version. If your dependenc
   }, [isSequenceHidden, style]);
   const crossOriginValue = getCrossOriginValue({
     crossOrigin,
-    requestsVideoFrame: Boolean(onVideoFrame)
+    requestsVideoFrame: Boolean(onVideoFrame),
+    isClientSideRendering: false
   });
   return /* @__PURE__ */ jsx30("video", {
     ref: videoRef,
@@ -20323,7 +20346,7 @@ var GitHubStars = () => {
             width: "45px"
           }),
           /* @__PURE__ */ jsx47(StatItemContent, {
-            content: "24k",
+            content: "25k",
             width: "80px",
             fontSize: "2.5rem",
             fontWeight: "bold"
@@ -28992,7 +29015,7 @@ var FEATURED_TEMPLATES = [
     contributedBy: null
   },
   {
-    homePageLabel: "Prompt to Motion graphics",
+    homePageLabel: "Prompt to Motion Graphics",
     shortName: "Prompt to Motion Graphics (Next.js)",
     org: "remotion-dev",
     repoName: "template-prompt-to-motion-graphics",
@@ -30063,7 +30086,7 @@ var GithubButton = () => {
       " ",
       /* @__PURE__ */ jsx151("div", {
         className: "text-xs inline-block ml-2 leading-none mt-[3px] self-center",
-        children: "24k"
+        children: "25k"
       })
     ]
   });

package/dist/Users/jonathanburger/remotion/packages/promo-pages/dist/design.js

@@ -755,7 +755,7 @@ var __defProp2, __export2 = (target, all) => {
   });
 }, useIsPlayer = () => {
   return useContext(IsPlayerContext);
-}, VERSION = "4.0.394", checkMultipleRemotionVersions = () => {
+}, VERSION = "4.0.395", checkMultipleRemotionVersions = () => {
   if (typeof globalThis === "undefined") {
     return;
   }
@@ -2929,11 +2929,15 @@ Check that all your Remotion packages are on the same version. If your dependenc
   });
 }, getCrossOriginValue = ({
   crossOrigin,
-  requestsVideoFrame
+  requestsVideoFrame,
+  isClientSideRendering
 }) => {
   if (crossOrigin !== undefined && crossOrigin !== null) {
     return crossOrigin;
   }
+  if (isClientSideRendering) {
+    return "anonymous";
+  }
   if (requestsVideoFrame) {
     return "anonymous";
   }
@@ -3638,8 +3642,17 @@ Check that all your Remotion packages are on the same version. If your dependenc
   const [blocks, setBlocks] = useState13([]);
   const [onBufferingCallbacks, setOnBufferingCallbacks] = useState13([]);
   const [onResumeCallbacks, setOnResumeCallbacks] = useState13([]);
+  const env = useRemotionEnvironment();
+  const rendering = env.isRendering;
   const buffering = useRef9(false);
   const addBlock = useCallback8((block) => {
+    if (rendering) {
+      return {
+        unblock: () => {
+          return;
+        }
+      };
+    }
     setBlocks((b) => [...b, block]);
     return {
       unblock: () => {
@@ -3652,7 +3665,7 @@ Check that all your Remotion packages are on the same version. If your dependenc
         });
       }
     };
-  }, []);
+  }, [rendering]);
   const listenForBuffering = useCallback8((callback) => {
     setOnBufferingCallbacks((c) => [...c, callback]);
     return {
@@ -3670,6 +3683,9 @@ Check that all your Remotion packages are on the same version. If your dependenc
     };
   }, []);
   useEffect7(() => {
+    if (rendering) {
+      return;
+    }
     if (blocks.length > 0) {
       onBufferingCallbacks.forEach((c) => c());
       playbackLogging({
@@ -3682,6 +3698,9 @@ Check that all your Remotion packages are on the same version. If your dependenc
   }, [blocks]);
   if (typeof window !== "undefined") {
     useLayoutEffect6(() => {
+      if (rendering) {
+        return;
+      }
       if (blocks.length === 0) {
         onResumeCallbacks.forEach((c) => c());
         playbackLogging({
@@ -4465,7 +4484,8 @@ Check that all your Remotion packages are on the same version. If your dependenc
   warnAboutTooHighVolume(userPreferredVolume);
   const crossOriginValue = getCrossOriginValue({
     crossOrigin,
-    requestsVideoFrame: false
+    requestsVideoFrame: false,
+    isClientSideRendering: false
   });
   const propsToPass = useMemo21(() => {
     return {
@@ -5202,9 +5222,11 @@ Check that all your Remotion packages are on the same version. If your dependenc
       delayRender2
     ]);
   }
+  const { isClientSideRendering } = useRemotionEnvironment();
   const crossOriginValue = getCrossOriginValue({
     crossOrigin,
-    requestsVideoFrame: false
+    requestsVideoFrame: false,
+    isClientSideRendering
   });
   return /* @__PURE__ */ jsx25("img", {
     ...props2,
@@ -5929,7 +5951,8 @@ Check that all your Remotion packages are on the same version. If your dependenc
   }, [isSequenceHidden, style]);
   const crossOriginValue = getCrossOriginValue({
     crossOrigin,
-    requestsVideoFrame: Boolean(onVideoFrame)
+    requestsVideoFrame: Boolean(onVideoFrame),
+    isClientSideRendering: false
   });
   return /* @__PURE__ */ jsx30("video", {
     ref: videoRef,

package/dist/Users/jonathanburger/remotion/packages/promo-pages/dist/homepage/Pricing.js

@@ -755,7 +755,7 @@ var __defProp2, __export2 = (target, all) => {
   });
 }, useIsPlayer = () => {
   return useContext(IsPlayerContext);
-}, VERSION = "4.0.394", checkMultipleRemotionVersions = () => {
+}, VERSION = "4.0.395", checkMultipleRemotionVersions = () => {
   if (typeof globalThis === "undefined") {
     return;
   }
@@ -2929,11 +2929,15 @@ Check that all your Remotion packages are on the same version. If your dependenc
   });
 }, getCrossOriginValue = ({
   crossOrigin,
-  requestsVideoFrame
+  requestsVideoFrame,
+  isClientSideRendering
 }) => {
   if (crossOrigin !== undefined && crossOrigin !== null) {
     return crossOrigin;
   }
+  if (isClientSideRendering) {
+    return "anonymous";
+  }
   if (requestsVideoFrame) {
     return "anonymous";
   }
@@ -3638,8 +3642,17 @@ Check that all your Remotion packages are on the same version. If your dependenc
   const [blocks, setBlocks] = useState13([]);
   const [onBufferingCallbacks, setOnBufferingCallbacks] = useState13([]);
   const [onResumeCallbacks, setOnResumeCallbacks] = useState13([]);
+  const env = useRemotionEnvironment();
+  const rendering = env.isRendering;
   const buffering = useRef9(false);
   const addBlock = useCallback8((block) => {
+    if (rendering) {
+      return {
+        unblock: () => {
+          return;
+        }
+      };
+    }
     setBlocks((b) => [...b, block]);
     return {
       unblock: () => {
@@ -3652,7 +3665,7 @@ Check that all your Remotion packages are on the same version. If your dependenc
         });
       }
     };
-  }, []);
+  }, [rendering]);
   const listenForBuffering = useCallback8((callback) => {
     setOnBufferingCallbacks((c) => [...c, callback]);
     return {
@@ -3670,6 +3683,9 @@ Check that all your Remotion packages are on the same version. If your dependenc
     };
   }, []);
   useEffect7(() => {
+    if (rendering) {
+      return;
+    }
     if (blocks.length > 0) {
       onBufferingCallbacks.forEach((c) => c());
       playbackLogging({
@@ -3682,6 +3698,9 @@ Check that all your Remotion packages are on the same version. If your dependenc
   }, [blocks]);
   if (typeof window !== "undefined") {
     useLayoutEffect6(() => {
+      if (rendering) {
+        return;
+      }
       if (blocks.length === 0) {
         onResumeCallbacks.forEach((c) => c());
         playbackLogging({
@@ -4465,7 +4484,8 @@ Check that all your Remotion packages are on the same version. If your dependenc
   warnAboutTooHighVolume(userPreferredVolume);
   const crossOriginValue = getCrossOriginValue({
     crossOrigin,
-    requestsVideoFrame: false
+    requestsVideoFrame: false,
+    isClientSideRendering: false
   });
   const propsToPass = useMemo21(() => {
     return {
@@ -5202,9 +5222,11 @@ Check that all your Remotion packages are on the same version. If your dependenc
       delayRender2
     ]);
   }
+  const { isClientSideRendering } = useRemotionEnvironment();
   const crossOriginValue = getCrossOriginValue({
     crossOrigin,
-    requestsVideoFrame: false
+    requestsVideoFrame: false,
+    isClientSideRendering
   });
   return /* @__PURE__ */ jsx25("img", {
     ...props2,
@@ -5929,7 +5951,8 @@ Check that all your Remotion packages are on the same version. If your dependenc
   }, [isSequenceHidden, style]);
   const crossOriginValue = getCrossOriginValue({
     crossOrigin,
-    requestsVideoFrame: Boolean(onVideoFrame)
+    requestsVideoFrame: Boolean(onVideoFrame),
+    isClientSideRendering: false
   });
   return /* @__PURE__ */ jsx30("video", {
     ref: videoRef,

package/dist/Users/jonathanburger/remotion/packages/promo-pages/dist/template-modal-content.js

@@ -755,7 +755,7 @@ var __defProp2, __export2 = (target, all) => {
   });
 }, useIsPlayer = () => {
   return useContext(IsPlayerContext);
-}, VERSION = "4.0.394", checkMultipleRemotionVersions = () => {
+}, VERSION = "4.0.395", checkMultipleRemotionVersions = () => {
   if (typeof globalThis === "undefined") {
     return;
   }
@@ -2929,11 +2929,15 @@ Check that all your Remotion packages are on the same version. If your dependenc
   });
 }, getCrossOriginValue = ({
   crossOrigin,
-  requestsVideoFrame
+  requestsVideoFrame,
+  isClientSideRendering
 }) => {
   if (crossOrigin !== undefined && crossOrigin !== null) {
     return crossOrigin;
   }
+  if (isClientSideRendering) {
+    return "anonymous";
+  }
   if (requestsVideoFrame) {
     return "anonymous";
   }
@@ -3638,8 +3642,17 @@ Check that all your Remotion packages are on the same version. If your dependenc
   const [blocks, setBlocks] = useState13([]);
   const [onBufferingCallbacks, setOnBufferingCallbacks] = useState13([]);
   const [onResumeCallbacks, setOnResumeCallbacks] = useState13([]);
+  const env = useRemotionEnvironment();
+  const rendering = env.isRendering;
   const buffering = useRef9(false);
   const addBlock = useCallback8((block) => {
+    if (rendering) {
+      return {
+        unblock: () => {
+          return;
+        }
+      };
+    }
     setBlocks((b) => [...b, block]);
     return {
       unblock: () => {
@@ -3652,7 +3665,7 @@ Check that all your Remotion packages are on the same version. If your dependenc
         });
       }
     };
-  }, []);
+  }, [rendering]);
   const listenForBuffering = useCallback8((callback) => {
     setOnBufferingCallbacks((c) => [...c, callback]);
     return {
@@ -3670,6 +3683,9 @@ Check that all your Remotion packages are on the same version. If your dependenc
     };
   }, []);
   useEffect7(() => {
+    if (rendering) {
+      return;
+    }
     if (blocks.length > 0) {
       onBufferingCallbacks.forEach((c) => c());
       playbackLogging({
@@ -3682,6 +3698,9 @@ Check that all your Remotion packages are on the same version. If your dependenc
   }, [blocks]);
   if (typeof window !== "undefined") {
     useLayoutEffect6(() => {
+      if (rendering) {
+        return;
+      }
       if (blocks.length === 0) {
         onResumeCallbacks.forEach((c) => c());
         playbackLogging({
@@ -4465,7 +4484,8 @@ Check that all your Remotion packages are on the same version. If your dependenc
   warnAboutTooHighVolume(userPreferredVolume);
   const crossOriginValue = getCrossOriginValue({
     crossOrigin,
-    requestsVideoFrame: false
+    requestsVideoFrame: false,
+    isClientSideRendering: false
   });
   const propsToPass = useMemo21(() => {
     return {
@@ -5202,9 +5222,11 @@ Check that all your Remotion packages are on the same version. If your dependenc
       delayRender2
     ]);
   }
+  const { isClientSideRendering } = useRemotionEnvironment();
   const crossOriginValue = getCrossOriginValue({
     crossOrigin,
-    requestsVideoFrame: false
+    requestsVideoFrame: false,
+    isClientSideRendering
   });
   return /* @__PURE__ */ jsx25("img", {
     ...props2,
@@ -5929,7 +5951,8 @@ Check that all your Remotion packages are on the same version. If your dependenc
   }, [isSequenceHidden, style]);
   const crossOriginValue = getCrossOriginValue({
     crossOrigin,
-    requestsVideoFrame: Boolean(onVideoFrame)
+    requestsVideoFrame: Boolean(onVideoFrame),
+    isClientSideRendering: false
   });
   return /* @__PURE__ */ jsx30("video", {
     ref: videoRef,

package/dist/Users/jonathanburger/remotion/packages/promo-pages/dist/templates.js

@@ -755,7 +755,7 @@ var __defProp2, __export2 = (target, all) => {
   });
 }, useIsPlayer = () => {
   return useContext(IsPlayerContext);
-}, VERSION = "4.0.394", checkMultipleRemotionVersions = () => {
+}, VERSION = "4.0.395", checkMultipleRemotionVersions = () => {
   if (typeof globalThis === "undefined") {
     return;
   }
@@ -2929,11 +2929,15 @@ Check that all your Remotion packages are on the same version. If your dependenc
   });
 }, getCrossOriginValue = ({
   crossOrigin,
-  requestsVideoFrame
+  requestsVideoFrame,
+  isClientSideRendering
 }) => {
   if (crossOrigin !== undefined && crossOrigin !== null) {
     return crossOrigin;
   }
+  if (isClientSideRendering) {
+    return "anonymous";
+  }
   if (requestsVideoFrame) {
     return "anonymous";
   }
@@ -3638,8 +3642,17 @@ Check that all your Remotion packages are on the same version. If your dependenc
   const [blocks, setBlocks] = useState13([]);
   const [onBufferingCallbacks, setOnBufferingCallbacks] = useState13([]);
   const [onResumeCallbacks, setOnResumeCallbacks] = useState13([]);
+  const env = useRemotionEnvironment();
+  const rendering = env.isRendering;
   const buffering = useRef9(false);
   const addBlock = useCallback8((block) => {
+    if (rendering) {
+      return {
+        unblock: () => {
+          return;
+        }
+      };
+    }
     setBlocks((b) => [...b, block]);
     return {
       unblock: () => {
@@ -3652,7 +3665,7 @@ Check that all your Remotion packages are on the same version. If your dependenc
         });
       }
     };
-  }, []);
+  }, [rendering]);
   const listenForBuffering = useCallback8((callback) => {
     setOnBufferingCallbacks((c) => [...c, callback]);
     return {
@@ -3670,6 +3683,9 @@ Check that all your Remotion packages are on the same version. If your dependenc
     };
   }, []);
   useEffect7(() => {
+    if (rendering) {
+      return;
+    }
     if (blocks.length > 0) {
       onBufferingCallbacks.forEach((c) => c());
       playbackLogging({
@@ -3682,6 +3698,9 @@ Check that all your Remotion packages are on the same version. If your dependenc
   }, [blocks]);
   if (typeof window !== "undefined") {
     useLayoutEffect6(() => {
+      if (rendering) {
+        return;
+      }
       if (blocks.length === 0) {
         onResumeCallbacks.forEach((c) => c());
         playbackLogging({
@@ -4465,7 +4484,8 @@ Check that all your Remotion packages are on the same version. If your dependenc
   warnAboutTooHighVolume(userPreferredVolume);
   const crossOriginValue = getCrossOriginValue({
     crossOrigin,
-    requestsVideoFrame: false
+    requestsVideoFrame: false,
+    isClientSideRendering: false
   });
   const propsToPass = useMemo21(() => {
     return {
@@ -5202,9 +5222,11 @@ Check that all your Remotion packages are on the same version. If your dependenc
       delayRender2
     ]);
   }
+  const { isClientSideRendering } = useRemotionEnvironment();
   const crossOriginValue = getCrossOriginValue({
     crossOrigin,
-    requestsVideoFrame: false
+    requestsVideoFrame: false,
+    isClientSideRendering
   });
   return /* @__PURE__ */ jsx25("img", {
     ...props2,
@@ -5929,7 +5951,8 @@ Check that all your Remotion packages are on the same version. If your dependenc
   }, [isSequenceHidden, style]);
   const crossOriginValue = getCrossOriginValue({
     crossOrigin,
-    requestsVideoFrame: Boolean(onVideoFrame)
+    requestsVideoFrame: Boolean(onVideoFrame),
+    isClientSideRendering: false
   });
   return /* @__PURE__ */ jsx30("video", {
     ref: videoRef,
@@ -18328,7 +18351,7 @@ var FEATURED_TEMPLATES = [
     contributedBy: null
   },
   {
-    homePageLabel: "Prompt to Motion graphics",
+    homePageLabel: "Prompt to Motion Graphics",
     shortName: "Prompt to Motion Graphics (Next.js)",
     org: "remotion-dev",
     repoName: "template-prompt-to-motion-graphics",
@@ -19408,7 +19431,7 @@ var Templates = () => {
                 className: "no-underline",
                 children: /* @__PURE__ */ jsx70(Button, {
                   depth: 0.5,
-                  className: "items-start justify-start text-left p-3.5 flex flex-col relative cursor-pointer text-[var(--text-color)] no-underline h-full w-full",
+                  className: "items-start justify-start text-left p-3.5 flex flex-col relative cursor-pointer text-[var(--text-color)] no-underline h-full w-full items-start",
                   children: /* @__PURE__ */ jsx70(Item2, {
                     label: template.homePageLabel,
                     description: template.description,
@@ -19434,7 +19457,7 @@ var Templates = () => {
                 href: `https://www.remotion.pro/editor-starter`,
                 children: /* @__PURE__ */ jsx70(Button, {
                   depth: 0.5,
-                  className: "text-left p-3.5 flex flex-col relative cursor-pointer text-[var(--text-color)] no-underline h-full w-full",
+                  className: "text-left p-3.5 flex flex-col relative cursor-pointer text-[var(--text-color)] no-underline h-full w-full items-start",
                   children: /* @__PURE__ */ jsx70(Item2, {
                     label: "Editor Starter",
                     description: "A boilerplate for starting your own video editor",
@@ -19452,7 +19475,7 @@ var Templates = () => {
                 href: `https://www.remotion.pro/mapbox-globe`,
                 children: /* @__PURE__ */ jsx70(Button, {
                   depth: 0.5,
-                  className: "text-left p-3.5 flex flex-col relative cursor-pointer text-[var(--text-color)] no-underline h-full w-full",
+                  className: "text-left p-3.5 flex flex-col relative cursor-pointer text-[var(--text-color)] no-underline h-full w-full items-start",
                   children: /* @__PURE__ */ jsx70(Item2, {
                     label: "Mapbox Globe",
                     description: "A rotateable and zoomeable 3D Globe",
@@ -19472,7 +19495,7 @@ var Templates = () => {
                 href: `https://www.remotion.pro/watercolor-map`,
                 children: /* @__PURE__ */ jsx70(Button, {
                   depth: 0.5,
-                  className: "text-left p-3.5 flex flex-col relative cursor-pointer text-[var(--text-color)] no-underline h-full w-full",
+                  className: "text-left p-3.5 flex flex-col relative cursor-pointer text-[var(--text-color)] no-underline h-full w-full items-start",
                   children: /* @__PURE__ */ jsx70(Item2, {
                     label: "Watercolor Map",
                     description: "A beautiful 2D map for travel videos",
@@ -19490,7 +19513,7 @@ var Templates = () => {
                 href: `https://www.remotion.pro/timeline`,
                 children: /* @__PURE__ */ jsx70(Button, {
                   depth: 0.5,
-                  className: "text-left p-3.5 flex flex-col relative cursor-pointer text-[var(--text-color)] no-underline h-full w-full",
+                  className: "text-left p-3.5 flex flex-col relative cursor-pointer text-[var(--text-color)] no-underline h-full w-full items-start",
                   children: /* @__PURE__ */ jsx70(Item2, {
                     label: "<Timeline />",
                     description: "A copy pasteable component for timeline-based editing",

package/dist/design.js

@@ -755,7 +755,7 @@ var __defProp2, __export2 = (target, all) => {
   });
 }, useIsPlayer = () => {
   return useContext(IsPlayerContext);
-}, VERSION = "4.0.394", checkMultipleRemotionVersions = () => {
+}, VERSION = "4.0.395", checkMultipleRemotionVersions = () => {
   if (typeof globalThis === "undefined") {
     return;
   }
@@ -2929,11 +2929,15 @@ Check that all your Remotion packages are on the same version. If your dependenc
   });
 }, getCrossOriginValue = ({
   crossOrigin,
-  requestsVideoFrame
+  requestsVideoFrame,
+  isClientSideRendering
 }) => {
   if (crossOrigin !== undefined && crossOrigin !== null) {
     return crossOrigin;
   }
+  if (isClientSideRendering) {
+    return "anonymous";
+  }
   if (requestsVideoFrame) {
     return "anonymous";
   }
@@ -3638,8 +3642,17 @@ Check that all your Remotion packages are on the same version. If your dependenc
   const [blocks, setBlocks] = useState13([]);
   const [onBufferingCallbacks, setOnBufferingCallbacks] = useState13([]);
   const [onResumeCallbacks, setOnResumeCallbacks] = useState13([]);
+  const env = useRemotionEnvironment();
+  const rendering = env.isRendering;
   const buffering = useRef9(false);
   const addBlock = useCallback8((block) => {
+    if (rendering) {
+      return {
+        unblock: () => {
+          return;
+        }
+      };
+    }
     setBlocks((b) => [...b, block]);
     return {
       unblock: () => {
@@ -3652,7 +3665,7 @@ Check that all your Remotion packages are on the same version. If your dependenc
         });
       }
     };
-  }, []);
+  }, [rendering]);
   const listenForBuffering = useCallback8((callback) => {
     setOnBufferingCallbacks((c) => [...c, callback]);
     return {
@@ -3670,6 +3683,9 @@ Check that all your Remotion packages are on the same version. If your dependenc
     };
   }, []);
   useEffect7(() => {
+    if (rendering) {
+      return;
+    }
     if (blocks.length > 0) {
       onBufferingCallbacks.forEach((c) => c());
       playbackLogging({
@@ -3682,6 +3698,9 @@ Check that all your Remotion packages are on the same version. If your dependenc
   }, [blocks]);
   if (typeof window !== "undefined") {
     useLayoutEffect6(() => {
+      if (rendering) {
+        return;
+      }
       if (blocks.length === 0) {
         onResumeCallbacks.forEach((c) => c());
         playbackLogging({
@@ -4465,7 +4484,8 @@ Check that all your Remotion packages are on the same version. If your dependenc
   warnAboutTooHighVolume(userPreferredVolume);
   const crossOriginValue = getCrossOriginValue({
     crossOrigin,
-    requestsVideoFrame: false
+    requestsVideoFrame: false,
+    isClientSideRendering: false
   });
   const propsToPass = useMemo21(() => {
     return {
@@ -5202,9 +5222,11 @@ Check that all your Remotion packages are on the same version. If your dependenc
       delayRender2
     ]);
   }
+  const { isClientSideRendering } = useRemotionEnvironment();
   const crossOriginValue = getCrossOriginValue({
     crossOrigin,
-    requestsVideoFrame: false
+    requestsVideoFrame: false,
+    isClientSideRendering
   });
   return /* @__PURE__ */ jsx25("img", {
     ...props2,
@@ -5929,7 +5951,8 @@ Check that all your Remotion packages are on the same version. If your dependenc
   }, [isSequenceHidden, style]);
   const crossOriginValue = getCrossOriginValue({
     crossOrigin,
-    requestsVideoFrame: Boolean(onVideoFrame)
+    requestsVideoFrame: Boolean(onVideoFrame),
+    isClientSideRendering: false
   });
   return /* @__PURE__ */ jsx30("video", {
     ref: videoRef,

package/dist/homepage/Pricing.js

@@ -755,7 +755,7 @@ var __defProp2, __export2 = (target, all) => {
   });
 }, useIsPlayer = () => {
   return useContext(IsPlayerContext);
-}, VERSION = "4.0.394", checkMultipleRemotionVersions = () => {
+}, VERSION = "4.0.395", checkMultipleRemotionVersions = () => {
   if (typeof globalThis === "undefined") {
     return;
   }
@@ -2929,11 +2929,15 @@ Check that all your Remotion packages are on the same version. If your dependenc
   });
 }, getCrossOriginValue = ({
   crossOrigin,
-  requestsVideoFrame
+  requestsVideoFrame,
+  isClientSideRendering
 }) => {
   if (crossOrigin !== undefined && crossOrigin !== null) {
     return crossOrigin;
   }
+  if (isClientSideRendering) {
+    return "anonymous";
+  }
   if (requestsVideoFrame) {
     return "anonymous";
   }
@@ -3638,8 +3642,17 @@ Check that all your Remotion packages are on the same version. If your dependenc
   const [blocks, setBlocks] = useState13([]);
   const [onBufferingCallbacks, setOnBufferingCallbacks] = useState13([]);
   const [onResumeCallbacks, setOnResumeCallbacks] = useState13([]);
+  const env = useRemotionEnvironment();
+  const rendering = env.isRendering;
   const buffering = useRef9(false);
   const addBlock = useCallback8((block) => {
+    if (rendering) {
+      return {
+        unblock: () => {
+          return;
+        }
+      };
+    }
     setBlocks((b) => [...b, block]);
     return {
       unblock: () => {
@@ -3652,7 +3665,7 @@ Check that all your Remotion packages are on the same version. If your dependenc
         });
       }
     };
-  }, []);
+  }, [rendering]);
   const listenForBuffering = useCallback8((callback) => {
     setOnBufferingCallbacks((c) => [...c, callback]);
     return {
@@ -3670,6 +3683,9 @@ Check that all your Remotion packages are on the same version. If your dependenc
     };
   }, []);
   useEffect7(() => {
+    if (rendering) {
+      return;
+    }
     if (blocks.length > 0) {
       onBufferingCallbacks.forEach((c) => c());
       playbackLogging({
@@ -3682,6 +3698,9 @@ Check that all your Remotion packages are on the same version. If your dependenc
   }, [blocks]);
   if (typeof window !== "undefined") {
     useLayoutEffect6(() => {
+      if (rendering) {
+        return;
+      }
       if (blocks.length === 0) {
         onResumeCallbacks.forEach((c) => c());
         playbackLogging({
@@ -4465,7 +4484,8 @@ Check that all your Remotion packages are on the same version. If your dependenc
   warnAboutTooHighVolume(userPreferredVolume);
   const crossOriginValue = getCrossOriginValue({
     crossOrigin,
-    requestsVideoFrame: false
+    requestsVideoFrame: false,
+    isClientSideRendering: false
   });
   const propsToPass = useMemo21(() => {
     return {
@@ -5202,9 +5222,11 @@ Check that all your Remotion packages are on the same version. If your dependenc
       delayRender2
     ]);
   }
+  const { isClientSideRendering } = useRemotionEnvironment();
   const crossOriginValue = getCrossOriginValue({
     crossOrigin,
-    requestsVideoFrame: false
+    requestsVideoFrame: false,
+    isClientSideRendering
   });
   return /* @__PURE__ */ jsx25("img", {
     ...props2,
@@ -5929,7 +5951,8 @@ Check that all your Remotion packages are on the same version. If your dependenc
   }, [isSequenceHidden, style]);
   const crossOriginValue = getCrossOriginValue({
     crossOrigin,
-    requestsVideoFrame: Boolean(onVideoFrame)
+    requestsVideoFrame: Boolean(onVideoFrame),
+    isClientSideRendering: false
   });
   return /* @__PURE__ */ jsx30("video", {
     ref: videoRef,

package/dist/template-modal-content.js

@@ -755,7 +755,7 @@ var __defProp2, __export2 = (target, all) => {
   });
 }, useIsPlayer = () => {
   return useContext(IsPlayerContext);
-}, VERSION = "4.0.394", checkMultipleRemotionVersions = () => {
+}, VERSION = "4.0.395", checkMultipleRemotionVersions = () => {
   if (typeof globalThis === "undefined") {
     return;
   }
@@ -2929,11 +2929,15 @@ Check that all your Remotion packages are on the same version. If your dependenc
   });
 }, getCrossOriginValue = ({
   crossOrigin,
-  requestsVideoFrame
+  requestsVideoFrame,
+  isClientSideRendering
 }) => {
   if (crossOrigin !== undefined && crossOrigin !== null) {
     return crossOrigin;
   }
+  if (isClientSideRendering) {
+    return "anonymous";
+  }
   if (requestsVideoFrame) {
     return "anonymous";
   }
@@ -3638,8 +3642,17 @@ Check that all your Remotion packages are on the same version. If your dependenc
   const [blocks, setBlocks] = useState13([]);
   const [onBufferingCallbacks, setOnBufferingCallbacks] = useState13([]);
   const [onResumeCallbacks, setOnResumeCallbacks] = useState13([]);
+  const env = useRemotionEnvironment();
+  const rendering = env.isRendering;
   const buffering = useRef9(false);
   const addBlock = useCallback8((block) => {
+    if (rendering) {
+      return {
+        unblock: () => {
+          return;
+        }
+      };
+    }
     setBlocks((b) => [...b, block]);
     return {
       unblock: () => {
@@ -3652,7 +3665,7 @@ Check that all your Remotion packages are on the same version. If your dependenc
         });
       }
     };
-  }, []);
+  }, [rendering]);
   const listenForBuffering = useCallback8((callback) => {
     setOnBufferingCallbacks((c) => [...c, callback]);
     return {
@@ -3670,6 +3683,9 @@ Check that all your Remotion packages are on the same version. If your dependenc
     };
   }, []);
   useEffect7(() => {
+    if (rendering) {
+      return;
+    }
     if (blocks.length > 0) {
       onBufferingCallbacks.forEach((c) => c());
       playbackLogging({
@@ -3682,6 +3698,9 @@ Check that all your Remotion packages are on the same version. If your dependenc
   }, [blocks]);
   if (typeof window !== "undefined") {
     useLayoutEffect6(() => {
+      if (rendering) {
+        return;
+      }
       if (blocks.length === 0) {
         onResumeCallbacks.forEach((c) => c());
         playbackLogging({
@@ -4465,7 +4484,8 @@ Check that all your Remotion packages are on the same version. If your dependenc
   warnAboutTooHighVolume(userPreferredVolume);
   const crossOriginValue = getCrossOriginValue({
     crossOrigin,
-    requestsVideoFrame: false
+    requestsVideoFrame: false,
+    isClientSideRendering: false
   });
   const propsToPass = useMemo21(() => {
     return {
@@ -5202,9 +5222,11 @@ Check that all your Remotion packages are on the same version. If your dependenc
       delayRender2
     ]);
   }
+  const { isClientSideRendering } = useRemotionEnvironment();
   const crossOriginValue = getCrossOriginValue({
     crossOrigin,
-    requestsVideoFrame: false
+    requestsVideoFrame: false,
+    isClientSideRendering
   });
   return /* @__PURE__ */ jsx25("img", {
     ...props2,
@@ -5929,7 +5951,8 @@ Check that all your Remotion packages are on the same version. If your dependenc
   }, [isSequenceHidden, style]);
   const crossOriginValue = getCrossOriginValue({
     crossOrigin,
-    requestsVideoFrame: Boolean(onVideoFrame)
+    requestsVideoFrame: Boolean(onVideoFrame),
+    isClientSideRendering: false
   });
   return /* @__PURE__ */ jsx30("video", {
     ref: videoRef,

package/dist/templates.js

@@ -755,7 +755,7 @@ var __defProp2, __export2 = (target, all) => {
   });
 }, useIsPlayer = () => {
   return useContext(IsPlayerContext);
-}, VERSION = "4.0.394", checkMultipleRemotionVersions = () => {
+}, VERSION = "4.0.395", checkMultipleRemotionVersions = () => {
   if (typeof globalThis === "undefined") {
     return;
   }
@@ -2929,11 +2929,15 @@ Check that all your Remotion packages are on the same version. If your dependenc
   });
 }, getCrossOriginValue = ({
   crossOrigin,
-  requestsVideoFrame
+  requestsVideoFrame,
+  isClientSideRendering
 }) => {
   if (crossOrigin !== undefined && crossOrigin !== null) {
     return crossOrigin;
   }
+  if (isClientSideRendering) {
+    return "anonymous";
+  }
   if (requestsVideoFrame) {
     return "anonymous";
   }
@@ -3638,8 +3642,17 @@ Check that all your Remotion packages are on the same version. If your dependenc
   const [blocks, setBlocks] = useState13([]);
   const [onBufferingCallbacks, setOnBufferingCallbacks] = useState13([]);
   const [onResumeCallbacks, setOnResumeCallbacks] = useState13([]);
+  const env = useRemotionEnvironment();
+  const rendering = env.isRendering;
   const buffering = useRef9(false);
   const addBlock = useCallback8((block) => {
+    if (rendering) {
+      return {
+        unblock: () => {
+          return;
+        }
+      };
+    }
     setBlocks((b) => [...b, block]);
     return {
       unblock: () => {
@@ -3652,7 +3665,7 @@ Check that all your Remotion packages are on the same version. If your dependenc
         });
       }
     };
-  }, []);
+  }, [rendering]);
   const listenForBuffering = useCallback8((callback) => {
     setOnBufferingCallbacks((c) => [...c, callback]);
     return {
@@ -3670,6 +3683,9 @@ Check that all your Remotion packages are on the same version. If your dependenc
     };
   }, []);
   useEffect7(() => {
+    if (rendering) {
+      return;
+    }
     if (blocks.length > 0) {
       onBufferingCallbacks.forEach((c) => c());
       playbackLogging({
@@ -3682,6 +3698,9 @@ Check that all your Remotion packages are on the same version. If your dependenc
   }, [blocks]);
   if (typeof window !== "undefined") {
     useLayoutEffect6(() => {
+      if (rendering) {
+        return;
+      }
       if (blocks.length === 0) {
         onResumeCallbacks.forEach((c) => c());
         playbackLogging({
@@ -4465,7 +4484,8 @@ Check that all your Remotion packages are on the same version. If your dependenc
   warnAboutTooHighVolume(userPreferredVolume);
   const crossOriginValue = getCrossOriginValue({
     crossOrigin,
-    requestsVideoFrame: false
+    requestsVideoFrame: false,
+    isClientSideRendering: false
   });
   const propsToPass = useMemo21(() => {
     return {
@@ -5202,9 +5222,11 @@ Check that all your Remotion packages are on the same version. If your dependenc
       delayRender2
     ]);
   }
+  const { isClientSideRendering } = useRemotionEnvironment();
   const crossOriginValue = getCrossOriginValue({
     crossOrigin,
-    requestsVideoFrame: false
+    requestsVideoFrame: false,
+    isClientSideRendering
   });
   return /* @__PURE__ */ jsx25("img", {
     ...props2,
@@ -5929,7 +5951,8 @@ Check that all your Remotion packages are on the same version. If your dependenc
   }, [isSequenceHidden, style]);
   const crossOriginValue = getCrossOriginValue({
     crossOrigin,
-    requestsVideoFrame: Boolean(onVideoFrame)
+    requestsVideoFrame: Boolean(onVideoFrame),
+    isClientSideRendering: false
   });
   return /* @__PURE__ */ jsx30("video", {
     ref: videoRef,
@@ -18328,7 +18351,7 @@ var FEATURED_TEMPLATES = [
     contributedBy: null
   },
   {
-    homePageLabel: "Prompt to Motion graphics",
+    homePageLabel: "Prompt to Motion Graphics",
     shortName: "Prompt to Motion Graphics (Next.js)",
     org: "remotion-dev",
     repoName: "template-prompt-to-motion-graphics",
@@ -19408,7 +19431,7 @@ var Templates = () => {
                 className: "no-underline",
                 children: /* @__PURE__ */ jsx70(Button, {
                   depth: 0.5,
-                  className: "items-start justify-start text-left p-3.5 flex flex-col relative cursor-pointer text-[var(--text-color)] no-underline h-full w-full",
+                  className: "items-start justify-start text-left p-3.5 flex flex-col relative cursor-pointer text-[var(--text-color)] no-underline h-full w-full items-start",
                   children: /* @__PURE__ */ jsx70(Item2, {
                     label: template.homePageLabel,
                     description: template.description,
@@ -19434,7 +19457,7 @@ var Templates = () => {
                 href: `https://www.remotion.pro/editor-starter`,
                 children: /* @__PURE__ */ jsx70(Button, {
                   depth: 0.5,
-                  className: "text-left p-3.5 flex flex-col relative cursor-pointer text-[var(--text-color)] no-underline h-full w-full",
+                  className: "text-left p-3.5 flex flex-col relative cursor-pointer text-[var(--text-color)] no-underline h-full w-full items-start",
                   children: /* @__PURE__ */ jsx70(Item2, {
                     label: "Editor Starter",
                     description: "A boilerplate for starting your own video editor",
@@ -19452,7 +19475,7 @@ var Templates = () => {
                 href: `https://www.remotion.pro/mapbox-globe`,
                 children: /* @__PURE__ */ jsx70(Button, {
                   depth: 0.5,
-                  className: "text-left p-3.5 flex flex-col relative cursor-pointer text-[var(--text-color)] no-underline h-full w-full",
+                  className: "text-left p-3.5 flex flex-col relative cursor-pointer text-[var(--text-color)] no-underline h-full w-full items-start",
                   children: /* @__PURE__ */ jsx70(Item2, {
                     label: "Mapbox Globe",
                     description: "A rotateable and zoomeable 3D Globe",
@@ -19472,7 +19495,7 @@ var Templates = () => {
                 href: `https://www.remotion.pro/watercolor-map`,
                 children: /* @__PURE__ */ jsx70(Button, {
                   depth: 0.5,
-                  className: "text-left p-3.5 flex flex-col relative cursor-pointer text-[var(--text-color)] no-underline h-full w-full",
+                  className: "text-left p-3.5 flex flex-col relative cursor-pointer text-[var(--text-color)] no-underline h-full w-full items-start",
                   children: /* @__PURE__ */ jsx70(Item2, {
                     label: "Watercolor Map",
                     description: "A beautiful 2D map for travel videos",
@@ -19490,7 +19513,7 @@ var Templates = () => {
                 href: `https://www.remotion.pro/timeline`,
                 children: /* @__PURE__ */ jsx70(Button, {
                   depth: 0.5,
-                  className: "text-left p-3.5 flex flex-col relative cursor-pointer text-[var(--text-color)] no-underline h-full w-full",
+                  className: "text-left p-3.5 flex flex-col relative cursor-pointer text-[var(--text-color)] no-underline h-full w-full items-start",
                   children: /* @__PURE__ */ jsx70(Item2, {
                     label: "<Timeline />",
                     description: "A copy pasteable component for timeline-based editing",

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@remotion/promo-pages",
-	"version": "4.0.394",
+	"version": "4.0.395",
 	"publishConfig": {
 		"access": "public"
 	},
@@ -11,23 +11,23 @@
 	},
 	"type": "module",
 	"dependencies": {
-		"@remotion/animated-emoji": "4.0.394",
-		"@remotion/design": "4.0.394",
-		"@remotion/lambda": "4.0.394",
-		"@remotion/lottie": "4.0.394",
-		"@remotion/paths": "4.0.394",
-		"@remotion/player": "4.0.394",
-		"@remotion/shapes": "4.0.394",
-		"@remotion/svg-3d-engine": "4.0.394",
-		"create-video": "4.0.394",
+		"@remotion/animated-emoji": "4.0.395",
+		"@remotion/design": "4.0.395",
+		"@remotion/lambda": "4.0.395",
+		"@remotion/lottie": "4.0.395",
+		"@remotion/paths": "4.0.395",
+		"@remotion/player": "4.0.395",
+		"@remotion/shapes": "4.0.395",
+		"@remotion/svg-3d-engine": "4.0.395",
+		"create-video": "4.0.395",
 		"hls.js": "1.5.19",
 		"polished": "4.3.1",
-		"remotion": "4.0.394",
+		"remotion": "4.0.395",
 		"zod": "3.22.3",
 		"bun-plugin-tailwind": "0.1.2"
 	},
 	"devDependencies": {
-		"@remotion/eslint-config-internal": "4.0.394",
+		"@remotion/eslint-config-internal": "4.0.395",
 		"@eslint/eslintrc": "3.1.0",
 		"@types/react": "19.2.7",
 		"@types/react-dom": "19.2.3",