npm - @remotion/promo-pages - Versions diffs - 4.0.344 → 4.0.345 - Mend

@remotion/promo-pages 4.0.344 → 4.0.345

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (4) hide show

package/.turbo/turbo-make.log +2 -2
package/dist/Homepage.js +332 -273
package/package.json +10 -10
package/src/components/homepage/Demo/DisplayedEmoji.tsx +3 -7

package/dist/Homepage.js CHANGED Viewed

@@ -19,12 +19,13 @@ var __require = /* @__PURE__ */ ((x) => typeof require !== "undefined" ? require
 // ../core/dist/esm/index.mjs
 import { createContext } from "react";
+import React22 from "react";
 import React4 from "react";
 import { createContext as createContext2, useContext } from "react";
 import { jsx as jsx10 } from "react/jsx-runtime";
 import {
   forwardRef as forwardRef2,
-  useContext as useContext10,
+  useContext as useContext11,
   useEffect as useEffect3,
   useMemo as useMemo9,
   useState as useState5
@@ -32,24 +33,24 @@ import {
 import { forwardRef, useMemo as useMemo2 } from "react";
 import { jsx as jsx22 } from "react/jsx-runtime";
 import { createContext as createContext3 } from "react";
-import React32, { useCallback as useCallback2, useMemo as useMemo22, useState as useState2 } from "react";
+import React42, { useCallback as useCallback2, useMemo as useMemo22, useState as useState2 } from "react";
 import { jsx as jsx32 } from "react/jsx-runtime";
 import { createContext as createContext4, useContext as useContext2, useEffect as useEffect2, useRef, useState as useState22 } from "react";
-import { createContext as createContext8, useContext as useContext5, useMemo as useMemo6 } from "react";
-import { useState as useState3 } from "react";
-import { useContext as useContext4, useMemo as useMemo5 } from "react";
+import { createContext as createContext8, useContext as useContext6, useMemo as useMemo6 } from "react";
+import { useContext as useContext3, useState as useState3 } from "react";
+import { useContext as useContext5, useMemo as useMemo5 } from "react";
 import { createContext as createContext5 } from "react";
 import {
   createContext as createContext7,
   createRef,
   useCallback as useCallback3,
-  useContext as useContext3,
+  useContext as useContext4,
   useEffect as useEffect22,
   useImperativeHandle as useImperativeHandle2,
   useMemo as useMemo4,
   useState as useState4
 } from "react";
-import React42, {
+import React5, {
   createContext as createContext6,
   useCallback as useCallback22,
   useImperativeHandle,
@@ -57,12 +58,12 @@ import React42, {
 } from "react";
 import { jsx as jsx42 } from "react/jsx-runtime";
 import { jsx as jsx52 } from "react/jsx-runtime";
-import { useContext as useContext7 } from "react";
+import { useContext as useContext8 } from "react";
 import { createContext as createContext9 } from "react";
 import { jsx as jsx62 } from "react/jsx-runtime";
-import { useContext as useContext6, useMemo as useMemo7 } from "react";
-import { useContext as useContext9, useMemo as useMemo8 } from "react";
-import { useContext as useContext8 } from "react";
+import { useContext as useContext7, useMemo as useMemo7 } from "react";
+import { useContext as useContext10, useMemo as useMemo8 } from "react";
+import { useContext as useContext9 } from "react";
 import { jsx as jsx72 } from "react/jsx-runtime";
 import { jsx as jsx82 } from "react/jsx-runtime";
 import {
@@ -73,29 +74,30 @@ import {
   useRef as useRef3,
   useState as useState6
 } from "react";
-import React8, { useCallback as useCallback4, useImperativeHandle as useImperativeHandle3, useRef as useRef2 } from "react";
+import { useCallback as useCallback4 } from "react";
+import React9, { useCallback as useCallback5, useImperativeHandle as useImperativeHandle3, useRef as useRef2 } from "react";
 import { jsx as jsx92 } from "react/jsx-runtime";
 import { jsx as jsx102 } from "react/jsx-runtime";
-import { useContext as useContext11, useEffect as useEffect5, useState as useState8 } from "react";
+import { useContext as useContext12, useEffect as useEffect5, useState as useState8 } from "react";
 import {
   createContext as createContext10,
-  useCallback as useCallback5,
+  useCallback as useCallback6,
   useLayoutEffect as useLayoutEffect2,
   useMemo as useMemo10,
   useState as useState7
 } from "react";
 import { jsx as jsx11 } from "react/jsx-runtime";
-import { forwardRef as forwardRef6, useCallback as useCallback10, useContext as useContext24 } from "react";
-import React9, { createContext as createContext11, useMemo as useMemo11 } from "react";
+import { forwardRef as forwardRef6, useCallback as useCallback11, useContext as useContext25 } from "react";
+import React10, { createContext as createContext11, useMemo as useMemo11 } from "react";
 import { jsx as jsx12 } from "react/jsx-runtime";
-import { useContext as useContext12 } from "react";
+import { useContext as useContext13 } from "react";
 import { createContext as createContext12, useEffect as useEffect6, useState as useState9 } from "react";
 import { jsx as jsx13 } from "react/jsx-runtime";
 import { createContext as createContext13, useMemo as useMemo12, useReducer } from "react";
 import { jsx as jsx14 } from "react/jsx-runtime";
 import {
   forwardRef as forwardRef4,
-  useContext as useContext22,
+  useContext as useContext23,
   useEffect as useEffect13,
   useImperativeHandle as useImperativeHandle5,
   useMemo as useMemo20,
@@ -103,13 +105,13 @@ import {
   useState as useState14
 } from "react";
 import { createContext as createContext14 } from "react";
-import * as React12 from "react";
-import { useContext as useContext15, useLayoutEffect as useLayoutEffect3, useRef as useRef6 } from "react";
-import React13, {
+import * as React13 from "react";
+import { useContext as useContext16, useLayoutEffect as useLayoutEffect3, useRef as useRef6 } from "react";
+import React14, {
   createContext as createContext15,
   createRef as createRef2,
-  useCallback as useCallback6,
-  useContext as useContext14,
+  useCallback as useCallback7,
+  useContext as useContext15,
   useEffect as useEffect7,
   useMemo as useMemo14,
   useRef as useRef4,
@@ -118,20 +120,20 @@ import React13, {
 import { useMemo as useMemo13 } from "react";
 import { jsx as jsx15, jsxs as jsxs9 } from "react/jsx-runtime";
 import { useRef as useRef5 } from "react";
-import { useContext as useContext17, useEffect as useEffect8, useMemo as useMemo15, useState as useState11 } from "react";
-import { useContext as useContext16 } from "react";
+import { useContext as useContext18, useEffect as useEffect8, useMemo as useMemo15, useState as useState11 } from "react";
+import { useContext as useContext17 } from "react";
 import {
-  useCallback as useCallback9,
-  useContext as useContext20,
+  useCallback as useCallback10,
+  useContext as useContext21,
   useEffect as useEffect12,
   useLayoutEffect as useLayoutEffect5,
   useRef as useRef10
 } from "react";
-import { useCallback as useCallback8, useMemo as useMemo18, useRef as useRef8 } from "react";
-import { useContext as useContext19, useMemo as useMemo17 } from "react";
-import React14, {
-  useCallback as useCallback7,
-  useContext as useContext18,
+import { useCallback as useCallback9, useMemo as useMemo18, useRef as useRef8 } from "react";
+import { useContext as useContext20, useMemo as useMemo17 } from "react";
+import React15, {
+  useCallback as useCallback8,
+  useContext as useContext19,
   useEffect as useEffect9,
   useLayoutEffect as useLayoutEffect4,
   useMemo as useMemo16,
@@ -139,14 +141,14 @@ import React14, {
   useState as useState12
 } from "react";
 import { jsx as jsx16 } from "react/jsx-runtime";
-import React15 from "react";
+import React16 from "react";
 import { useEffect as useEffect10, useState as useState13 } from "react";
 import { useEffect as useEffect11, useRef as useRef9 } from "react";
-import { createContext as createContext16, useContext as useContext21, useMemo as useMemo19 } from "react";
+import { createContext as createContext16, useContext as useContext22, useMemo as useMemo19 } from "react";
 import { jsx as jsx17 } from "react/jsx-runtime";
 import {
   forwardRef as forwardRef5,
-  useContext as useContext23,
+  useContext as useContext24,
   useEffect as useEffect14,
   useImperativeHandle as useImperativeHandle6,
   useLayoutEffect as useLayoutEffect6,
@@ -155,27 +157,27 @@ import {
 } from "react";
 import { jsx as jsx18 } from "react/jsx-runtime";
 import { jsx as jsx19 } from "react/jsx-runtime";
-import { Suspense, useContext as useContext26, useEffect as useEffect16 } from "react";
+import { Suspense, useContext as useContext27, useEffect as useEffect16 } from "react";
 import { createPortal } from "react-dom";
-import { createContext as createContext17, useContext as useContext25, useEffect as useEffect15, useMemo as useMemo222 } from "react";
+import { createContext as createContext17, useContext as useContext26, useEffect as useEffect15, useMemo as useMemo222 } from "react";
 import { jsx as jsx20 } from "react/jsx-runtime";
 import { jsx as jsx21, jsxs as jsxs22 } from "react/jsx-runtime";
-import React19, { useMemo as useMemo23 } from "react";
+import React20, { useMemo as useMemo23 } from "react";
 import { jsx as jsx222 } from "react/jsx-runtime";
-import { forwardRef as forwardRef7, useCallback as useCallback11, useState as useState15 } from "react";
+import { forwardRef as forwardRef7, useCallback as useCallback12, useState as useState15 } from "react";
 import { jsx as jsx23 } from "react/jsx-runtime";
 import {
   forwardRef as forwardRef8,
-  useCallback as useCallback12,
-  useContext as useContext27,
+  useCallback as useCallback13,
+  useContext as useContext28,
   useImperativeHandle as useImperativeHandle7,
   useLayoutEffect as useLayoutEffect7,
   useRef as useRef13
 } from "react";
 import { jsx as jsx24 } from "react/jsx-runtime";
 import { createRef as createRef3 } from "react";
-import React23, {
-  useCallback as useCallback13,
+import React24, {
+  useCallback as useCallback14,
   useImperativeHandle as useImperativeHandle8,
   useMemo as useMemo24,
   useRef as useRef14,
@@ -190,10 +192,10 @@ import {
   useState as useState17
 } from "react";
 import { jsx as jsx26 } from "react/jsx-runtime";
-import React25, { createContext as createContext18 } from "react";
+import React26, { createContext as createContext18 } from "react";
 import {
   forwardRef as forwardRef9,
-  useContext as useContext28,
+  useContext as useContext29,
   useEffect as useEffect19,
   useImperativeHandle as useImperativeHandle9,
   useMemo as useMemo26,
@@ -202,19 +204,18 @@ import {
 } from "react";
 import { useEffect as useEffect18 } from "react";
 import { jsx as jsx27 } from "react/jsx-runtime";
-import React27, { useMemo as useMemo27 } from "react";
+import React28, { useMemo as useMemo27 } from "react";
 import { jsx as jsx28 } from "react/jsx-runtime";
 import { Children, forwardRef as forwardRef10, useMemo as useMemo28 } from "react";
-import React28 from "react";
-import React29, { createContext as createContext19 } from "react";
+import React29 from "react";
+import React30, { createContext as createContext19 } from "react";
 import { jsx as jsx29 } from "react/jsx-runtime";
 import { jsx as jsx30 } from "react/jsx-runtime";
-import React31 from "react";
-import { useCallback as useCallback14 } from "react";
+import React32 from "react";
 import { useCallback as useCallback16 } from "react";
 import {
   useCallback as useCallback15,
-  useContext as useContext29,
+  useContext as useContext30,
   useEffect as useEffect20,
   useLayoutEffect as useLayoutEffect9,
   useMemo as useMemo29,
@@ -222,10 +223,10 @@ import {
 } from "react";
 import { jsx as jsx31 } from "react/jsx-runtime";
 import { jsx as jsx322 } from "react/jsx-runtime";
-import { forwardRef as forwardRef12, useCallback as useCallback17, useContext as useContext31 } from "react";
+import { forwardRef as forwardRef12, useCallback as useCallback17, useContext as useContext32 } from "react";
 import {
   forwardRef as forwardRef11,
-  useContext as useContext30,
+  useContext as useContext31,
   useEffect as useEffect21,
   useImperativeHandle as useImperativeHandle10,
   useLayoutEffect as useLayoutEffect10,
@@ -438,18 +439,18 @@ function exponentialBackoff(errorCount) {
   return 1000 * 2 ** (errorCount - 1);
 }
 function useRemotionContexts() {
-  const compositionManagerCtx = React27.useContext(CompositionManager);
-  const timelineContext = React27.useContext(TimelineContext);
-  const setTimelineContext = React27.useContext(SetTimelineContext);
-  const sequenceContext = React27.useContext(SequenceContext);
-  const nonceContext = React27.useContext(NonceContext);
-  const canUseRemotionHooksContext = React27.useContext(CanUseRemotionHooks);
-  const preloadContext = React27.useContext(PreloadContext);
-  const resolveCompositionContext = React27.useContext(ResolveCompositionContext);
-  const renderAssetManagerContext = React27.useContext(RenderAssetManager);
-  const sequenceManagerContext = React27.useContext(SequenceManager);
-  const bufferManagerContext = React27.useContext(BufferingContextReact);
-  const logLevelContext = React27.useContext(LogLevelContext);
+  const compositionManagerCtx = React28.useContext(CompositionManager);
+  const timelineContext = React28.useContext(TimelineContext);
+  const setTimelineContext = React28.useContext(SetTimelineContext);
+  const sequenceContext = React28.useContext(SequenceContext);
+  const nonceContext = React28.useContext(NonceContext);
+  const canUseRemotionHooksContext = React28.useContext(CanUseRemotionHooks);
+  const preloadContext = React28.useContext(PreloadContext);
+  const resolveCompositionContext = React28.useContext(ResolveCompositionContext);
+  const renderAssetManagerContext = React28.useContext(RenderAssetManager);
+  const sequenceManagerContext = React28.useContext(SequenceManager);
+  const bufferManagerContext = React28.useContext(BufferingContextReact);
+  const logLevelContext = React28.useContext(LogLevelContext);
   return useMemo27(() => ({
     compositionManagerCtx,
     timelineContext,
@@ -705,9 +706,10 @@ var __defProp2, __export2 = (target, all) => {
     isStudio,
     isRendering,
     isPlayer,
-    isReadOnlyStudio
+    isReadOnlyStudio,
+    isClientSideRendering: false
   };
-}, originalCreateElement, componentsToAddStacksTo, enableSequenceStackTraces = () => {
+}, RemotionEnvironmentContext, originalCreateElement, componentsToAddStacksTo, enableSequenceStackTraces = () => {
   if (!getRemotionEnvironment().isStudio) {
     return;
   }
@@ -724,7 +726,7 @@ var __defProp2, __export2 = (target, all) => {
       return Reflect.apply(target, thisArg, argArray);
     }
   });
-  React4.createElement = proxy;
+  React22.createElement = proxy;
 }, addSequenceStackTraces = (component) => {
   componentsToAddStacksTo.push(component);
   enableSequenceStackTraces();
@@ -737,7 +739,7 @@ var __defProp2, __export2 = (target, all) => {
   });
 }, useIsPlayer = () => {
   return useContext(IsPlayerContext);
-}, VERSION = "4.0.344", checkMultipleRemotionVersions = () => {
+}, VERSION = "4.0.345", checkMultipleRemotionVersions = () => {
   if (typeof globalThis === "undefined") {
     return;
   }
@@ -896,10 +898,11 @@ Check that all your Remotion packages are on the same version. If your dependenc
   }, [context]);
   return nonce;
 }, exports_timeline_position_state, useRemotionEnvironment = () => {
+  const context = useContext3(RemotionEnvironmentContext);
   const [env] = useState3(() => getRemotionEnvironment());
-  return env;
+  return context ?? env;
 }, CompositionManager, CompositionSetters, EditorPropsContext, editorPropsProviderRef, timeValueRef, EditorPropsProvider = ({ children }) => {
-  const [props, setProps] = React42.useState({});
+  const [props, setProps] = React5.useState({});
   const updateProps = useCallback22(({
     defaultProps,
     id,
@@ -1147,14 +1150,14 @@ Check that all your Remotion packages are on the same version. If your dependenc
   return Boolean(composition.calculateMetadata);
 }, PROPS_UPDATED_EXTERNALLY = "remotion.propsUpdatedExternally", ResolveCompositionConfig = ({ children }) => {
   const [currentRenderModalComposition, setCurrentRenderModalComposition] = useState4(null);
-  const { compositions, canvasContent, currentCompositionMetadata } = useContext3(CompositionManager);
-  const { fastRefreshes, manualRefreshes } = useContext3(NonceContext);
+  const { compositions, canvasContent, currentCompositionMetadata } = useContext4(CompositionManager);
+  const { fastRefreshes, manualRefreshes } = useContext4(NonceContext);
   if (manualRefreshes) {}
   const selectedComposition = useMemo4(() => {
     return compositions.find((c) => canvasContent && canvasContent.type === "composition" && canvasContent.compositionId === c.id);
   }, [canvasContent, compositions]);
   const renderModalComposition = compositions.find((c) => c.id === currentRenderModalComposition);
-  const { props: allEditorProps } = useContext3(EditorPropsContext);
+  const { props: allEditorProps } = useContext4(EditorPropsContext);
   const env = useRemotionEnvironment();
   const inputProps = useMemo4(() => {
     return typeof window === "undefined" || env.isPlayer ? {} : getInputProps() ?? {};
@@ -1397,9 +1400,9 @@ Check that all your Remotion packages are on the same version. If your dependenc
     children
   });
 }, useResolvedVideoConfig = (preferredCompositionId) => {
-  const context = useContext3(ResolveCompositionContext);
-  const { props: allEditorProps } = useContext3(EditorPropsContext);
-  const { compositions, canvasContent, currentCompositionMetadata } = useContext3(CompositionManager);
+  const context = useContext4(ResolveCompositionContext);
+  const { props: allEditorProps } = useContext4(EditorPropsContext);
+  const { compositions, canvasContent, currentCompositionMetadata } = useContext4(CompositionManager);
   const currentComposition = canvasContent?.type === "composition" ? canvasContent.compositionId : null;
   const compositionId = preferredCompositionId ?? currentComposition;
   const composition = compositions.find((c) => c.id === compositionId);
@@ -1462,7 +1465,7 @@ Check that all your Remotion packages are on the same version. If your dependenc
     env.isPlayer
   ]);
 }, useVideo = () => {
-  const { canvasContent, compositions, currentCompositionMetadata } = useContext4(CompositionManager);
+  const { canvasContent, compositions, currentCompositionMetadata } = useContext5(CompositionManager);
   const selected = compositions.find((c) => {
     return canvasContent?.type === "composition" && c.id === canvasContent.compositionId;
   });
@@ -1508,7 +1511,7 @@ Check that all your Remotion packages are on the same version. If your dependenc
   return window.remotion_initialFrame ?? 0;
 }, useTimelinePosition = () => {
   const videoConfig = useVideo();
-  const state = useContext5(TimelineContext);
+  const state = useContext6(TimelineContext);
   const env = useRemotionEnvironment();
   if (!videoConfig) {
     return typeof window === "undefined" ? 0 : window.remotion_initialFrame ?? 0;
@@ -1516,11 +1519,11 @@ Check that all your Remotion packages are on the same version. If your dependenc
   const unclamped = state.frame[videoConfig.id] ?? (env.isPlayer ? 0 : getFrameForComposition(videoConfig.id));
   return Math.min(videoConfig.durationInFrames - 1, unclamped);
 }, useTimelineSetFrame = () => {
-  const { setFrame } = useContext5(SetTimelineContext);
+  const { setFrame } = useContext6(SetTimelineContext);
   return setFrame;
 }, usePlayingState = () => {
-  const { playing, imperativePlaying } = useContext5(TimelineContext);
-  const { setPlaying } = useContext5(SetTimelineContext);
+  const { playing, imperativePlaying } = useContext6(TimelineContext);
+  const { setPlaying } = useContext6(SetTimelineContext);
   return useMemo6(() => [playing, setPlaying, imperativePlaying], [imperativePlaying, playing, setPlaying]);
 }, CanUseRemotionHooks, CanUseRemotionHooksProvider = ({ children }) => {
   return /* @__PURE__ */ jsx62(CanUseRemotionHooks.Provider, {
@@ -1528,7 +1531,7 @@ Check that all your Remotion packages are on the same version. If your dependenc
     children
   });
 }, useUnsafeVideoConfig = () => {
-  const context = useContext6(SequenceContext);
+  const context = useContext7(SequenceContext);
   const ctxWidth = context?.width ?? null;
   const ctxHeight = context?.height ?? null;
   const ctxDuration = context?.durationInFrames ?? null;
@@ -1566,7 +1569,7 @@ Check that all your Remotion packages are on the same version. If your dependenc
   }, [ctxDuration, ctxHeight, ctxWidth, video]);
 }, useVideoConfig = () => {
   const videoConfig = useUnsafeVideoConfig();
-  const context = useContext7(CanUseRemotionHooks);
+  const context = useContext8(CanUseRemotionHooks);
   const isPlayer = useIsPlayer();
   if (!videoConfig) {
     if (typeof window !== "undefined" && window.remotion_isPlayer || isPlayer) {
@@ -1583,7 +1586,7 @@ Check that all your Remotion packages are on the same version. If your dependenc
   }
   return videoConfig;
 }, useCurrentFrame = () => {
-  const canUseRemotionHooks = useContext8(CanUseRemotionHooks);
+  const canUseRemotionHooks = useContext9(CanUseRemotionHooks);
   const env = useRemotionEnvironment();
   if (!canUseRemotionHooks) {
     if (env.isPlayer) {
@@ -1592,7 +1595,7 @@ Check that all your Remotion packages are on the same version. If your dependenc
     throw new Error(`useCurrentFrame() can only be called inside a component that was registered as a composition. See https://www.remotion.dev/docs/the-fundamentals#defining-compositions`);
   }
   const frame = useTimelinePosition();
-  const context = useContext8(SequenceContext);
+  const context = useContext9(SequenceContext);
   const contextOffset = context ? context.cumulatedFrom + context.relativeFrom : 0;
   return frame - contextOffset;
 }, Freeze = ({
@@ -1622,8 +1625,8 @@ Check that all your Remotion packages are on the same version. If your dependenc
       return active(frame);
     }
   }, [active, frame]);
-  const timelineContext = useContext9(TimelineContext);
-  const sequenceContext = useContext9(SequenceContext);
+  const timelineContext = useContext10(TimelineContext);
+  const sequenceContext = useContext10(SequenceContext);
   const relativeFrom = sequenceContext?.relativeFrom ?? 0;
   const timelineValue = useMemo8(() => {
     if (!isActive) {
@@ -1660,8 +1663,8 @@ Check that all your Remotion packages are on the same version. If your dependenc
 }, ref) => {
   const { layout = "absolute-fill" } = other;
   const [id] = useState5(() => String(Math.random()));
-  const parentSequence = useContext10(SequenceContext);
-  const { rootId } = useContext10(TimelineContext);
+  const parentSequence = useContext11(SequenceContext);
+  const { rootId } = useContext11(TimelineContext);
   const cumulatedFrom = parentSequence ? parentSequence.cumulatedFrom + parentSequence.relativeFrom : 0;
   const nonce = useNonce();
   if (layout !== "absolute-fill" && layout !== "none") {
@@ -1686,8 +1689,8 @@ Check that all your Remotion packages are on the same version. If your dependenc
   const videoConfig = useVideoConfig();
   const parentSequenceDuration = parentSequence ? Math.min(parentSequence.durationInFrames - from, durationInFrames) : durationInFrames;
   const actualDurationInFrames = Math.max(0, Math.min(videoConfig.durationInFrames - from, parentSequenceDuration));
-  const { registerSequence, unregisterSequence } = useContext10(SequenceManager);
-  const { hidden } = useContext10(SequenceVisibilityToggleContext);
+  const { registerSequence, unregisterSequence } = useContext11(SequenceManager);
+  const { hidden } = useContext11(SequenceVisibilityToggleContext);
   const premounting = useMemo9(() => {
     return parentSequence?.premounting || Boolean(other._remotionInternalIsPremounting);
   }, [other._remotionInternalIsPremounting, parentSequence?.premounting]);
@@ -1913,8 +1916,6 @@ Check that all your Remotion packages are on the same version. If your dependenc
     window.remotion_renderReady = false;
   }
   return handle;
-}, delayRender = (label, options) => {
-  return delayRenderInternal(getRemotionEnvironment(), label, options);
 }, continueRenderInternal = (handle, environment) => {
   if (typeof handle === "undefined") {
     throw new TypeError("The continueRender() method must be called with a parameter that is the return value of delayRender(). No value was passed.");
@@ -1945,8 +1946,15 @@ Check that all your Remotion packages are on the same version. If your dependenc
   if (handles.length === 0 && typeof window !== "undefined") {
     window.remotion_renderReady = true;
   }
-}, continueRender = (handle) => {
-  continueRenderInternal(handle, getRemotionEnvironment());
+}, useDelayRender = () => {
+  const environment = useRemotionEnvironment();
+  const delayRender2 = useCallback4((label, options) => {
+    return delayRenderInternal(environment, label, options);
+  }, [environment]);
+  const continueRender2 = useCallback4((handle) => {
+    continueRenderInternal(handle, environment);
+  }, [environment]);
+  return { delayRender: delayRender2, continueRender: continueRender2 };
 }, calcArgs = (fit, frameSize, canvasSize) => {
   switch (fit) {
     case "fill": {
@@ -1996,7 +2004,7 @@ Check that all your Remotion packages are on the same version. If your dependenc
   }
 }, CanvasRefForwardingFunction = ({ width, height, fit, className, style }, ref) => {
   const canvasRef = useRef2(null);
-  const draw = useCallback4((imageData) => {
+  const draw = useCallback5((imageData) => {
     const canvas = canvasRef.current;
     const canvasWidth = width ?? imageData.displayWidth;
     const canvasHeight = height ?? imageData.displayHeight;
@@ -2210,13 +2218,13 @@ Check that all your Remotion packages are on the same version. If your dependenc
   validateContent(artifact.content);
 }, RenderAssetManager, RenderAssetManagerProvider = ({ children }) => {
   const [renderAssets, setRenderAssets] = useState7([]);
-  const registerRenderAsset = useCallback5((renderAsset) => {
+  const registerRenderAsset = useCallback6((renderAsset) => {
     validateRenderAsset(renderAsset);
     setRenderAssets((assets) => {
       return [...assets, renderAsset];
     });
   }, []);
-  const unregisterRenderAsset = useCallback5((id) => {
+  const unregisterRenderAsset = useCallback6((id) => {
     setRenderAssets((assts) => {
       return assts.filter((a) => a.id !== id);
     });
@@ -2241,7 +2249,7 @@ Check that all your Remotion packages are on the same version. If your dependenc
     children
   });
 }, ArtifactThumbnail, Artifact = ({ filename, content, downloadBehavior }) => {
-  const { registerRenderAsset, unregisterRenderAsset } = useContext11(RenderAssetManager);
+  const { registerRenderAsset, unregisterRenderAsset } = useContext12(RenderAssetManager);
   const env = useRemotionEnvironment();
   const frame = useCurrentFrame();
   const [id] = useState8(() => {
@@ -2319,7 +2327,7 @@ Check that all your Remotion packages are on the same version. If your dependenc
   const actualDuration = duration / playbackRate;
   return Math.floor(actualDuration);
 }, LoopContext, useLoop = () => {
-  return React9.useContext(LoopContext);
+  return React10.useContext(LoopContext);
 }, Loop = ({ durationInFrames, times = Infinity, children, name, ...props }) => {
   const currentFrame = useCurrentFrame();
   const { durationInFrames: compDuration } = useVideoConfig();
@@ -2407,7 +2415,7 @@ Check that all your Remotion packages are on the same version. If your dependenc
   }
   return src.slice(0, hashIndex);
 }, usePreload = (src) => {
-  const preloads2 = useContext12(PreloadContext);
+  const preloads2 = useContext13(PreloadContext);
   const hashFragmentIndex = removeAndGetHashFragment(src);
   const withoutHashFragment = getSrcWithoutHash(src);
   if (!preloads2[withoutHashFragment]) {
@@ -2704,13 +2712,13 @@ Check that all your Remotion packages are on the same version. If your dependenc
   }
   return;
 }, LogLevelContext, useLogLevel = () => {
-  const { logLevel } = React12.useContext(LogLevelContext);
+  const { logLevel } = React13.useContext(LogLevelContext);
   if (logLevel === null) {
     throw new Error("useLogLevel must be used within a LogLevelProvider");
   }
   return logLevel;
 }, useMountTime = () => {
-  const { mountTime } = React12.useContext(LogLevelContext);
+  const { mountTime } = React13.useContext(LogLevelContext);
   if (mountTime === null) {
     throw new Error("useMountTime must be used within a LogLevelProvider");
   }
@@ -2871,7 +2879,7 @@ Check that all your Remotion packages are on the same version. If your dependenc
     });
   }, [audioContext, numberOfAudioTags]);
   const takenAudios = useRef4(new Array(numberOfAudioTags).fill(false));
-  const rerenderAudios = useCallback6(() => {
+  const rerenderAudios = useCallback7(() => {
     refs.forEach(({ ref, id }) => {
       const data = audios.current?.find((a) => a.id === id);
       const { current } = ref;
@@ -2892,7 +2900,7 @@ Check that all your Remotion packages are on the same version. If your dependenc
       });
     });
   }, [refs]);
-  const registerAudio = useCallback6((options) => {
+  const registerAudio = useCallback7((options) => {
     const { aud, audioId, premounting } = options;
     const found = audios.current?.find((a) => a.audioId === audioId);
     if (found) {
@@ -2918,7 +2926,7 @@ Check that all your Remotion packages are on the same version. If your dependenc
     rerenderAudios();
     return newElem;
   }, [numberOfAudioTags, refs, rerenderAudios]);
-  const unregisterAudio = useCallback6((id) => {
+  const unregisterAudio = useCallback7((id) => {
     const cloned = [...takenAudios.current];
     const index = refs.findIndex((r2) => r2.id === id);
     if (index === -1) {
@@ -2929,7 +2937,7 @@ Check that all your Remotion packages are on the same version. If your dependenc
     audios.current = audios.current?.filter((a) => a.id !== id);
     rerenderAudios();
   }, [refs, rerenderAudios]);
-  const updateAudio = useCallback6(({
+  const updateAudio = useCallback7(({
     aud,
     audioId,
     id,
@@ -2958,7 +2966,7 @@ Check that all your Remotion packages are on the same version. If your dependenc
   }, [rerenderAudios]);
   const mountTime = useMountTime();
   const env = useRemotionEnvironment();
-  const playAllAudios = useCallback6(() => {
+  const playAllAudios = useCallback7(() => {
     refs.forEach((ref) => {
       const audio = audios.current.find((a) => a.el === ref.ref);
       if (audio?.premounting) {
@@ -2993,7 +3001,7 @@ Check that all your Remotion packages are on the same version. If your dependenc
     updateAudio,
     audioContext
   ]);
-  const resetAudio = useCallback6(() => {
+  const resetAudio = useCallback7(() => {
     takenAudios.current = new Array(numberOfAudioTags).fill(false);
     audios.current = [];
     rerenderAudios();
@@ -3021,12 +3029,12 @@ Check that all your Remotion packages are on the same version. If your dependenc
   audioId,
   premounting
 }) => {
-  const ctx = useContext14(SharedAudioContext);
+  const ctx = useContext15(SharedAudioContext);
   const [elem] = useState10(() => {
     if (ctx && ctx.numberOfAudioTags > 0) {
       return ctx.registerAudio({ aud, audioId, premounting });
     }
-    const el = React13.createRef();
+    const el = React14.createRef();
     const mediaElementSourceNode = ctx?.audioContext ? makeSharedElementSourceNode({
       audioContext: ctx.audioContext,
       ref: el
@@ -3040,7 +3048,7 @@ Check that all your Remotion packages are on the same version. If your dependenc
       premounting
     };
   });
-  const effectToUse = React13.useInsertionEffect ?? React13.useLayoutEffect;
+  const effectToUse = React14.useInsertionEffect ?? React14.useLayoutEffect;
   if (typeof document !== "undefined") {
     effectToUse(() => {
       if (ctx && ctx.numberOfAudioTags > 0) {
@@ -3175,7 +3183,7 @@ Check that all your Remotion packages are on the same version. If your dependenc
   const audioStuffRef = useRef6(null);
   const currentVolumeRef = useRef6(volume);
   currentVolumeRef.current = volume;
-  const sharedAudioContext = useContext15(SharedAudioContext);
+  const sharedAudioContext = useContext16(SharedAudioContext);
   if (!sharedAudioContext) {
     throw new Error("useAmplification must be used within a SharedAudioContext");
   }
@@ -3229,7 +3237,7 @@ Check that all your Remotion packages are on the same version. If your dependenc
   }
   return audioStuffRef;
 }, useMediaStartsAt = () => {
-  const parentSequence = useContext16(SequenceContext);
+  const parentSequence = useContext17(SequenceContext);
   const startsAt = Math.min(0, parentSequence?.relativeFrom ?? 0);
   return startsAt;
 }, useFrameForVolumeProp = (behavior) => {
@@ -3292,12 +3300,12 @@ Check that all your Remotion packages are on the same version. If your dependenc
   isPostmounting
 }) => {
   const videoConfig = useVideoConfig();
-  const { rootId, audioAndVideoTags } = useContext17(TimelineContext);
-  const parentSequence = useContext17(SequenceContext);
+  const { rootId, audioAndVideoTags } = useContext18(TimelineContext);
+  const parentSequence = useContext18(SequenceContext);
   const actualFrom = parentSequence ? parentSequence.relativeFrom + parentSequence.cumulatedFrom : 0;
-  const { imperativePlaying } = useContext17(TimelineContext);
+  const { imperativePlaying } = useContext18(TimelineContext);
   const startsAt = useMediaStartsAt();
-  const { registerSequence, unregisterSequence } = useContext17(SequenceManager);
+  const { registerSequence, unregisterSequence } = useContext18(SequenceManager);
   const [initialVolume] = useState11(() => volume);
   const logLevel = useLogLevel();
   const mountTime = useMountTime();
@@ -3425,7 +3433,7 @@ Check that all your Remotion packages are on the same version. If your dependenc
   const [onBufferingCallbacks, setOnBufferingCallbacks] = useState12([]);
   const [onResumeCallbacks, setOnResumeCallbacks] = useState12([]);
   const buffering = useRef7(false);
-  const addBlock = useCallback7((block) => {
+  const addBlock = useCallback8((block) => {
     setBlocks((b) => [...b, block]);
     return {
       unblock: () => {
@@ -3439,7 +3447,7 @@ Check that all your Remotion packages are on the same version. If your dependenc
       }
     };
   }, []);
-  const listenForBuffering = useCallback7((callback) => {
+  const listenForBuffering = useCallback8((callback) => {
     setOnBufferingCallbacks((c) => [...c, callback]);
     return {
       remove: () => {
@@ -3447,7 +3455,7 @@ Check that all your Remotion packages are on the same version. If your dependenc
       }
     };
   }, []);
-  const listenForResume = useCallback7((callback) => {
+  const listenForResume = useCallback8((callback) => {
     setOnResumeCallbacks((c) => [...c, callback]);
     return {
       remove: () => {
@@ -3483,7 +3491,7 @@ Check that all your Remotion packages are on the same version. If your dependenc
     return { addBlock, listenForBuffering, listenForResume, buffering };
   }, [addBlock, buffering, listenForBuffering, listenForResume]);
 }, BufferingContextReact, BufferingProvider = ({ children }) => {
-  const { logLevel, mountTime } = useContext18(LogLevelContext);
+  const { logLevel, mountTime } = useContext19(LogLevelContext);
   const bufferManager = useBufferManager(logLevel ?? "info", mountTime);
   return /* @__PURE__ */ jsx16(BufferingContextReact.Provider, {
     value: bufferManager,
@@ -3511,7 +3519,7 @@ Check that all your Remotion packages are on the same version. If your dependenc
   }, [bufferManager]);
   return isBuffering;
 }, useBufferState = () => {
-  const buffer = useContext19(BufferingContextReact);
+  const buffer = useContext20(BufferingContextReact);
   const addBlock = buffer ? buffer.addBlock : null;
   return useMemo17(() => ({
     delayPlayback: () => {
@@ -3537,7 +3545,7 @@ Check that all your Remotion packages are on the same version. If your dependenc
 }) => {
   const bufferingRef = useRef8(false);
   const { delayPlayback } = useBufferState();
-  const bufferUntilFirstFrame = useCallback8((requestedTime) => {
+  const bufferUntilFirstFrame = useCallback9((requestedTime) => {
     if (mediaType !== "video") {
       return;
     }
@@ -3615,7 +3623,7 @@ Check that all your Remotion packages are on the same version. If your dependenc
     };
   }, [bufferUntilFirstFrame]);
 }, useCurrentTimeOfMediaTagWithUpdateTimeStamp = (mediaRef) => {
-  const lastUpdate = React15.useRef({
+  const lastUpdate = React16.useRef({
     time: mediaRef.current?.currentTime ?? 0,
     lastUpdate: performance.now()
   });
@@ -3902,11 +3910,11 @@ Check that all your Remotion packages are on the same version. If your dependenc
   isPostmounting,
   onAutoPlayError
 }) => {
-  const { playbackRate: globalPlaybackRate } = useContext20(TimelineContext);
+  const { playbackRate: globalPlaybackRate } = useContext21(TimelineContext);
   const frame = useCurrentFrame();
   const absoluteFrame = useTimelinePosition();
   const [playing] = usePlayingState();
-  const buffering = useContext20(BufferingContextReact);
+  const buffering = useContext21(BufferingContextReact);
   const { fps } = useVideoConfig();
   const mediaStartsAt = useMediaStartsAt();
   const lastSeekDueToShift = useRef10(null);
@@ -3917,7 +3925,7 @@ Check that all your Remotion packages are on the same version. If your dependenc
     throw new Error("useMediaPlayback must be used inside a <BufferingContext>");
   }
   const isVariableFpsVideoMap = useRef10({});
-  const onVariableFpsVideoDetected = useCallback9(() => {
+  const onVariableFpsVideoDetected = useCallback10(() => {
     if (!src) {
       return;
     }
@@ -4130,14 +4138,14 @@ Check that all your Remotion packages are on the same version. If your dependenc
     env.isPlayer
   ]);
 }, MediaVolumeContext, SetMediaVolumeContext, useMediaVolumeState = () => {
-  const { mediaVolume } = useContext21(MediaVolumeContext);
-  const { setMediaVolume } = useContext21(SetMediaVolumeContext);
+  const { mediaVolume } = useContext22(MediaVolumeContext);
+  const { setMediaVolume } = useContext22(SetMediaVolumeContext);
   return useMemo19(() => {
     return [mediaVolume, setMediaVolume];
   }, [mediaVolume, setMediaVolume]);
 }, useMediaMutedState = () => {
-  const { mediaMuted } = useContext21(MediaVolumeContext);
-  const { setMediaMuted } = useContext21(SetMediaVolumeContext);
+  const { mediaMuted } = useContext22(MediaVolumeContext);
+  const { setMediaMuted } = useContext22(SetMediaVolumeContext);
   return useMemo19(() => {
     return [mediaMuted, setMediaMuted];
   }, [mediaMuted, setMediaMuted]);
@@ -4181,12 +4189,12 @@ Check that all your Remotion packages are on the same version. If your dependenc
   const [mediaVolume] = useMediaVolumeState();
   const [mediaMuted] = useMediaMutedState();
   const volumePropFrame = useFrameForVolumeProp(loopVolumeCurveBehavior ?? "repeat");
-  const { hidden } = useContext22(SequenceVisibilityToggleContext);
+  const { hidden } = useContext23(SequenceVisibilityToggleContext);
   if (!src) {
     throw new TypeError("No 'src' was passed to <Audio>.");
   }
   const preloadedSrc = usePreload(src);
-  const sequenceContext = useContext22(SequenceContext);
+  const sequenceContext = useContext23(SequenceContext);
   const [timelineId] = useState14(() => String(Math.random()));
   const isSequenceHidden = hidden[timelineId] ?? false;
   const userPreferredVolume = evaluateVolume({
@@ -4224,7 +4232,7 @@ Check that all your Remotion packages are on the same version. If your dependenc
     props.muted,
     props.loop
   ]);
-  const context = useContext22(SharedAudioContext);
+  const context = useContext23(SharedAudioContext);
   if (!context) {
     throw new Error("SharedAudioContext not found");
   }
@@ -4323,8 +4331,9 @@ Check that all your Remotion packages are on the same version. If your dependenc
   const absoluteFrame = useTimelinePosition();
   const volumePropFrame = useFrameForVolumeProp(loopVolumeCurveBehavior ?? "repeat");
   const frame = useCurrentFrame();
-  const sequenceContext = useContext23(SequenceContext);
-  const { registerRenderAsset, unregisterRenderAsset } = useContext23(RenderAssetManager);
+  const sequenceContext = useContext24(SequenceContext);
+  const { registerRenderAsset, unregisterRenderAsset } = useContext24(RenderAssetManager);
+  const { delayRender: delayRender2, continueRender: continueRender2 } = useDelayRender();
   const id = useMemo21(() => `audio-${random(props.src ?? "")}-${sequenceContext?.relativeFrom}-${sequenceContext?.cumulatedFrom}-${sequenceContext?.durationInFrames}`, [
     props.src,
     sequenceContext?.relativeFrom,
@@ -4390,7 +4399,7 @@ Check that all your Remotion packages are on the same version. If your dependenc
     if (!needsToRenderAudioTag) {
       return;
     }
-    const newHandle = delayRender("Loading <Audio> duration with src=" + src, {
+    const newHandle = delayRender2("Loading <Audio> duration with src=" + src, {
       retries: delayRenderRetries ?? undefined,
       timeoutInMilliseconds: delayRenderTimeoutInMilliseconds ?? undefined
     });
@@ -4399,24 +4408,26 @@ Check that all your Remotion packages are on the same version. If your dependenc
       if (current?.duration) {
         onDuration(current.src, current.duration);
       }
-      continueRender(newHandle);
+      continueRender2(newHandle);
     };
     if (current?.duration) {
       onDuration(current.src, current.duration);
-      continueRender(newHandle);
+      continueRender2(newHandle);
     } else {
       current?.addEventListener("loadedmetadata", didLoad, { once: true });
     }
     return () => {
       current?.removeEventListener("loadedmetadata", didLoad);
-      continueRender(newHandle);
+      continueRender2(newHandle);
     };
   }, [
     src,
     onDuration,
     needsToRenderAudioTag,
     delayRenderRetries,
-    delayRenderTimeoutInMilliseconds
+    delayRenderTimeoutInMilliseconds,
+    continueRender2,
+    delayRender2
   ]);
   if (!needsToRenderAudioTag) {
     return null;
@@ -4427,7 +4438,7 @@ Check that all your Remotion packages are on the same version. If your dependenc
     onError: onNativeError
   });
 }, AudioForRendering, AudioRefForwardingFunction = (props, ref) => {
-  const audioContext = useContext24(SharedAudioContext);
+  const audioContext = useContext25(SharedAudioContext);
   const {
     startFrom,
     endAt,
@@ -4443,12 +4454,12 @@ Check that all your Remotion packages are on the same version. If your dependenc
   const { loop, ...propsOtherThanLoop } = props;
   const { fps } = useVideoConfig();
   const environment = useRemotionEnvironment();
-  const { durations, setDurations } = useContext24(DurationsContext);
+  const { durations, setDurations } = useContext25(DurationsContext);
   if (typeof props.src !== "string") {
     throw new TypeError(`The \`<Audio>\` tag requires a string for \`src\`, but got ${JSON.stringify(props.src)} instead.`);
   }
   const preloadedSrc = usePreload(props.src);
-  const onError = useCallback10((e) => {
+  const onError = useCallback11((e) => {
     console.log(e.currentTarget.error);
     const errMessage = `Could not play audio with src ${preloadedSrc}: ${e.currentTarget.error}. See https://remotion.dev/docs/media-playback-error for help.`;
     if (loop) {
@@ -4462,7 +4473,7 @@ Check that all your Remotion packages are on the same version. If your dependenc
       console.warn(errMessage);
     }
   }, [loop, onRemotionError, preloadedSrc]);
-  const onDuration = useCallback10((src, durationInSeconds) => {
+  const onDuration = useCallback11((src, durationInSeconds) => {
     setDurations({ type: "got-duration", durationInSeconds, src });
   }, [setDurations]);
   const durationFetched = durations[getAbsoluteSrc(preloadedSrc)] ?? durations[getAbsoluteSrc(props.src)];
@@ -4614,13 +4625,13 @@ Check that all your Remotion packages are on the same version. If your dependenc
       if (typeof compProps.component === "undefined") {
         throw new Error(`A value of \`undefined\` was passed to the \`component\` prop. Check the value you are passing to the <${componentName}/> component.`);
       }
-      return React19.lazy(() => Promise.resolve({ default: compProps.component }));
+      return React20.lazy(() => Promise.resolve({ default: compProps.component }));
     }
     if ("lazyComponent" in compProps && typeof compProps.lazyComponent !== "undefined") {
       if (typeof compProps.lazyComponent === "undefined") {
         throw new Error(`A value of \`undefined\` was passed to the \`lazyComponent\` prop. Check the value you are passing to the <${componentName}/> component.`);
       }
-      return React19.lazy(compProps.lazyComponent);
+      return React20.lazy(compProps.lazyComponent);
     }
     throw new Error("You must pass either 'component' or 'lazyComponent'");
   }, [compProps.component, compProps.lazyComponent]);
@@ -4640,10 +4651,11 @@ Check that all your Remotion packages are on the same version. If your dependenc
     throw new Error(`"${name}" must be an object, an array was passed ${compositionId ? `for composition "${compositionId}"` : ""}`);
   }
 }, Fallback = () => {
+  const { continueRender: continueRender2, delayRender: delayRender2 } = useDelayRender();
   useEffect16(() => {
-    const fallback = delayRender("Waiting for Root component to unsuspend");
-    return () => continueRender(fallback);
-  }, []);
+    const fallback = delayRender2("Waiting for Root component to unsuspend");
+    return () => continueRender2(fallback);
+  }, [continueRender2, delayRender2]);
   return null;
 }, InnerComposition = ({
   width,
@@ -4655,7 +4667,7 @@ Check that all your Remotion packages are on the same version. If your dependenc
   schema,
   ...compProps
 }) => {
-  const compManager = useContext26(CompositionSetters);
+  const compManager = useContext27(CompositionSetters);
   const { registerComposition, unregisterComposition } = compManager;
   const video = useVideo();
   const lazy = useLazyComponent({
@@ -4666,14 +4678,14 @@ Check that all your Remotion packages are on the same version. If your dependenc
   const nonce = useNonce();
   const isPlayer = useIsPlayer();
   const environment = useRemotionEnvironment();
-  const canUseComposition = useContext26(CanUseRemotionHooks);
+  const canUseComposition = useContext27(CanUseRemotionHooks);
   if (canUseComposition) {
     if (isPlayer) {
       throw new Error("<Composition> was mounted inside the `component` that was passed to the <Player>. See https://remotion.dev/docs/wrong-composition-mount for help.");
     }
     throw new Error("<Composition> mounted inside another composition. See https://remotion.dev/docs/wrong-composition-mount for help.");
   }
-  const { folderName, parentName } = useContext26(FolderContext);
+  const { folderName, parentName } = useContext27(FolderContext);
   useEffect16(() => {
     if (!id) {
       throw new Error("No id for composition passed.");
@@ -4751,7 +4763,7 @@ Check that all your Remotion packages are on the same version. If your dependenc
   }
   return null;
 }, Composition = (props2) => {
-  const { onlyRenderComposition } = useContext26(CompositionSetters);
+  const { onlyRenderComposition } = useContext27(CompositionSetters);
   if (onlyRenderComposition && onlyRenderComposition !== props2.id) {
     return null;
   }
@@ -4765,22 +4777,23 @@ Check that all your Remotion packages are on the same version. If your dependenc
   delayRenderTimeoutInMilliseconds,
   ...props2
 }, ref) => {
-  const [handle] = useState15(() => delayRender(`Loading <IFrame> with source ${props2.src}`, {
+  const { delayRender: delayRender2, continueRender: continueRender2 } = useDelayRender();
+  const [handle] = useState15(() => delayRender2(`Loading <IFrame> with source ${props2.src}`, {
     retries: delayRenderRetries ?? undefined,
     timeoutInMilliseconds: delayRenderTimeoutInMilliseconds ?? undefined
   }));
-  const didLoad = useCallback11((e) => {
-    continueRender(handle);
+  const didLoad = useCallback12((e) => {
+    continueRender2(handle);
     onLoad?.(e);
-  }, [handle, onLoad]);
-  const didGetError = useCallback11((e) => {
-    continueRender(handle);
+  }, [handle, onLoad, continueRender2]);
+  const didGetError = useCallback12((e) => {
+    continueRender2(handle);
     if (onError) {
       onError(e);
     } else {
       console.error("Error loading iframe:", e, "Handle the event using the onError() prop to make this message disappear.");
     }
-  }, [handle, onError]);
+  }, [handle, onError, continueRender2]);
   return /* @__PURE__ */ jsx23("iframe", {
     ...props2,
     ref,
@@ -4801,7 +4814,7 @@ Check that all your Remotion packages are on the same version. If your dependenc
   const imageRef = useRef13(null);
   const errors = useRef13({});
   const { delayPlayback } = useBufferState();
-  const sequenceContext = useContext27(SequenceContext);
+  const sequenceContext = useContext28(SequenceContext);
   if (!src) {
     throw new Error('No "src" prop was passed to <Img>.');
   }
@@ -4813,7 +4826,7 @@ Check that all your Remotion packages are on the same version. If your dependenc
     return imageRef.current;
   }, []);
   const actualSrc = usePreload(src);
-  const retryIn = useCallback12((timeout) => {
+  const retryIn = useCallback13((timeout) => {
     if (!imageRef.current) {
       return;
     }
@@ -4830,7 +4843,7 @@ Check that all your Remotion packages are on the same version. If your dependenc
       imageRef.current.setAttribute("src", newSrc);
     }, timeout);
   }, []);
-  const didGetError = useCallback12((e) => {
+  const didGetError = useCallback13((e) => {
     if (!errors.current) {
       return;
     }
@@ -4847,6 +4860,7 @@ Check that all your Remotion packages are on the same version. If your dependenc
     }
     cancelRender("Error loading image with src: " + imageRef.current?.src);
   }, [maxRetries, onError, retryIn]);
+  const { delayRender: delayRender2, continueRender: continueRender2 } = useDelayRender();
   if (typeof window !== "undefined") {
     const isPremounting = Boolean(sequenceContext?.premounting);
     const isPostmounting = Boolean(sequenceContext?.postmounting);
@@ -4861,7 +4875,7 @@ Check that all your Remotion packages are on the same version. If your dependenc
       if (!current) {
         return;
       }
-      const newHandle = delayRender("Loading <Img> with src=" + actualSrc, {
+      const newHandle = delayRender2("Loading <Img> with src=" + actualSrc, {
         retries: delayRenderRetries ?? undefined,
         timeoutInMilliseconds: delayRenderTimeoutInMilliseconds ?? undefined
       });
@@ -4871,7 +4885,7 @@ Check that all your Remotion packages are on the same version. If your dependenc
       let unmounted = false;
       const onComplete = () => {
         if (unmounted) {
-          continueRender(newHandle);
+          continueRender2(newHandle);
           return;
         }
         if ((errors.current[imageRef.current?.src] ?? 0) > 0) {
@@ -4882,7 +4896,7 @@ Check that all your Remotion packages are on the same version. If your dependenc
           onImageFrame?.(current);
         }
         unblock();
-        continueRender(newHandle);
+        continueRender2(newHandle);
       };
       if (!imageRef.current) {
         onComplete();
@@ -4905,7 +4919,7 @@ Check that all your Remotion packages are on the same version. If your dependenc
         unmounted = true;
         current.removeEventListener("load", onComplete);
         unblock();
-        continueRender(newHandle);
+        continueRender2(newHandle);
       };
     }, [
       actualSrc,
@@ -4915,7 +4929,9 @@ Check that all your Remotion packages are on the same version. If your dependenc
       pauseWhenLoading,
       isPremounting,
       isPostmounting,
-      onImageFrame
+      onImageFrame,
+      continueRender2,
+      delayRender2
     ]);
   }
   const crossOriginValue = getCrossOriginValue({
@@ -4939,14 +4955,14 @@ Check that all your Remotion packages are on the same version. If your dependenc
   const currentcompositionsRef = useRef14(compositions);
   const [folders, setFolders] = useState16([]);
   const [canvasContent, setCanvasContent] = useState16(null);
-  const updateCompositions = useCallback13((updateComps) => {
+  const updateCompositions = useCallback14((updateComps) => {
     setCompositions((comps) => {
       const updated = updateComps(comps);
       currentcompositionsRef.current = updated;
       return updated;
     });
   }, []);
-  const registerComposition = useCallback13((comp) => {
+  const registerComposition = useCallback14((comp) => {
     updateCompositions((comps) => {
       if (comps.find((c2) => c2.id === comp.id)) {
         throw new Error(`Multiple composition with id ${comp.id} are registered.`);
@@ -4955,12 +4971,12 @@ Check that all your Remotion packages are on the same version. If your dependenc
       return value;
     });
   }, [updateCompositions]);
-  const unregisterComposition = useCallback13((id) => {
+  const unregisterComposition = useCallback14((id) => {
     setCompositions((comps) => {
       return comps.filter((c2) => c2.id !== id);
     });
   }, []);
-  const registerFolder = useCallback13((name, parent) => {
+  const registerFolder = useCallback14((name, parent) => {
     setFolders((prevFolders) => {
       return [
         ...prevFolders,
@@ -4971,7 +4987,7 @@ Check that all your Remotion packages are on the same version. If your dependenc
       ];
     });
   }, []);
-  const unregisterFolder = useCallback13((name, parent) => {
+  const unregisterFolder = useCallback14((name, parent) => {
     setFolders((prevFolders) => {
       return prevFolders.filter((p) => !(p.name === name && p.parent === parent));
     });
@@ -4982,7 +4998,7 @@ Check that all your Remotion packages are on the same version. If your dependenc
     };
   }, []);
   const composition = compositions.find((c2) => canvasContent?.type === "composition" ? c2.id === canvasContent.compositionId : null);
-  const updateCompositionDefaultProps = useCallback13((id, newDefaultProps) => {
+  const updateCompositionDefaultProps = useCallback14((id, newDefaultProps) => {
     setCompositions((comps) => {
       const updated = comps.map((c2) => {
         if (c2.id === id) {
@@ -5110,11 +5126,12 @@ Check that all your Remotion packages are on the same version. If your dependenc
   const [manualRefreshes, setManualRefreshes] = useState17(0);
   const [playbackRate, setPlaybackRate] = useState17(1);
   const audioAndVideoTags = useRef15([]);
+  const { delayRender: delayRender2, continueRender: continueRender2 } = useDelayRender();
   if (typeof window !== "undefined") {
     useLayoutEffect8(() => {
       window.remotion_setFrame = (f, composition, attempt) => {
         window.remotion_attempt = attempt;
-        const id = delayRender(`Setting the current frame to ${f}`);
+        const id = delayRender2(`Setting the current frame to ${f}`);
         let asyncUpdate = true;
         setFrame((s) => {
           const currentFrame = s[composition] ?? window.remotion_initialFrame;
@@ -5128,13 +5145,13 @@ Check that all your Remotion packages are on the same version. If your dependenc
           };
         });
         if (asyncUpdate) {
-          requestAnimationFrame(() => continueRender(id));
+          requestAnimationFrame(() => continueRender2(id));
         } else {
-          continueRender(id);
+          continueRender2(id);
         }
       };
       window.remotion_isPlayer = false;
-    }, []);
+    }, [continueRender2, delayRender2]);
   }
   const timelineContextValue = useMemo25(() => {
     return {
@@ -5277,7 +5294,7 @@ Check that all your Remotion packages are on the same version. If your dependenc
     };
   }, [onVideoFrame, ref]);
 }, VideoForDevelopmentRefForwardingFunction = (props2, ref) => {
-  const context = useContext28(SharedAudioContext);
+  const context = useContext29(SharedAudioContext);
   if (!context) {
     throw new Error("SharedAudioContext not found");
   }
@@ -5325,8 +5342,8 @@ Check that all your Remotion packages are on the same version. If your dependenc
   }
   const volumePropFrame = useFrameForVolumeProp(loopVolumeCurveBehavior ?? "repeat");
   const { fps, durationInFrames } = useVideoConfig();
-  const parentSequence = useContext28(SequenceContext);
-  const { hidden } = useContext28(SequenceVisibilityToggleContext);
+  const parentSequence = useContext29(SequenceContext);
+  const { hidden } = useContext29(SequenceVisibilityToggleContext);
   const logLevel = useLogLevel();
   const mountTime = useMountTime();
   const [timelineId] = useState18(() => String(Math.random()));
@@ -5538,9 +5555,9 @@ Check that all your Remotion packages are on the same version. If your dependenc
     throw new RangeError(`Cannot use frame ${frame}: Duration of composition is ${durationInFrames}, therefore the highest frame that can be rendered is ${durationInFrames - 1}`);
   }
 }, flattenChildren = (children) => {
-  const childrenArray = React28.Children.toArray(children);
+  const childrenArray = React29.Children.toArray(children);
   return childrenArray.reduce((flatChildren, child) => {
-    if (child.type === React28.Fragment) {
+    if (child.type === React29.Fragment) {
       return flatChildren.concat(flattenChildren(child.props.children));
     }
     flatChildren.push(child);
@@ -5557,7 +5574,7 @@ Check that all your Remotion packages are on the same version. If your dependenc
     children
   });
 }, useRequireToBeInsideSeries = () => {
-  const isInsideSeries = React29.useContext(IsInsideSeriesContext);
+  const isInsideSeries = React30.useContext(IsInsideSeriesContext);
   if (!isInsideSeries) {
     throw new Error("This component must be inside a <Series /> component.");
   }
@@ -5849,12 +5866,13 @@ Check that all your Remotion packages are on the same version. If your dependenc
   const volumePropsFrame = useFrameForVolumeProp(loopVolumeCurveBehavior ?? "repeat");
   const videoConfig = useUnsafeVideoConfig();
   const videoRef = useRef17(null);
-  const sequenceContext = useContext30(SequenceContext);
+  const sequenceContext = useContext31(SequenceContext);
   const mediaStartsAt = useMediaStartsAt();
   const environment = useRemotionEnvironment();
   const logLevel = useLogLevel();
   const mountTime = useMountTime();
-  const { registerRenderAsset, unregisterRenderAsset } = useContext30(RenderAssetManager);
+  const { delayRender: delayRender2, continueRender: continueRender2 } = useDelayRender();
+  const { registerRenderAsset, unregisterRenderAsset } = useContext31(RenderAssetManager);
   const id = useMemo30(() => `video-${random(props2.src ?? "")}-${sequenceContext?.cumulatedFrom}-${sequenceContext?.relativeFrom}-${sequenceContext?.durationInFrames}`, [
     props2.src,
     sequenceContext?.cumulatedFrom,
@@ -5926,21 +5944,21 @@ Check that all your Remotion packages are on the same version. If your dependenc
       startFrom: -mediaStartsAt,
       fps: videoConfig.fps
     });
-    const handle = delayRender(`Rendering <Video /> with src="${props2.src}" at time ${currentTime}`, {
+    const handle = delayRender2(`Rendering <Video /> with src="${props2.src}" at time ${currentTime}`, {
       retries: delayRenderRetries ?? undefined,
       timeoutInMilliseconds: delayRenderTimeoutInMilliseconds ?? undefined
     });
     if (window.process?.env?.NODE_ENV === "test") {
-      continueRender(handle);
+      continueRender2(handle);
       return;
     }
     if (isApproximatelyTheSame(current.currentTime, currentTime)) {
       if (current.readyState >= 2) {
-        continueRender(handle);
+        continueRender2(handle);
         return;
       }
       const loadedDataHandler = () => {
-        continueRender(handle);
+        continueRender2(handle);
       };
       current.addEventListener("loadeddata", loadedDataHandler, { once: true });
       return () => {
@@ -5948,7 +5966,7 @@ Check that all your Remotion packages are on the same version. If your dependenc
       };
     }
     const endedHandler = () => {
-      continueRender(handle);
+      continueRender2(handle);
     };
     const seek2 = seekToTimeMultipleUntilRight({
       element: current,
@@ -5958,7 +5976,7 @@ Check that all your Remotion packages are on the same version. If your dependenc
       mountTime
     });
     seek2.prom.then(() => {
-      continueRender(handle);
+      continueRender2(handle);
     });
     current.addEventListener("ended", endedHandler, { once: true });
     const errorHandler = () => {
@@ -5977,7 +5995,7 @@ Check that all your Remotion packages are on the same version. If your dependenc
       seek2.cancel();
       current.removeEventListener("ended", endedHandler);
       current.removeEventListener("error", errorHandler);
-      continueRender(handle);
+      continueRender2(handle);
     };
   }, [
     volumePropsFrame,
@@ -5990,7 +6008,9 @@ Check that all your Remotion packages are on the same version. If your dependenc
     delayRenderRetries,
     delayRenderTimeoutInMilliseconds,
     logLevel,
-    mountTime
+    mountTime,
+    continueRender2,
+    delayRender2
   ]);
   const { src } = props2;
   if (environment.isRendering) {
@@ -5998,7 +6018,7 @@ Check that all your Remotion packages are on the same version. If your dependenc
       if (window.process?.env?.NODE_ENV === "test") {
         return;
       }
-      const newHandle = delayRender("Loading <Video> duration with src=" + src, {
+      const newHandle = delayRender2("Loading <Video> duration with src=" + src, {
         retries: delayRenderRetries ?? undefined,
         timeoutInMilliseconds: delayRenderTimeoutInMilliseconds ?? undefined
       });
@@ -6007,19 +6027,26 @@ Check that all your Remotion packages are on the same version. If your dependenc
         if (current?.duration) {
           onDuration(src, current.duration);
         }
-        continueRender(newHandle);
+        continueRender2(newHandle);
       };
       if (current?.duration) {
         onDuration(src, current.duration);
-        continueRender(newHandle);
+        continueRender2(newHandle);
       } else {
         current?.addEventListener("loadedmetadata", didLoad, { once: true });
       }
       return () => {
         current?.removeEventListener("loadedmetadata", didLoad);
-        continueRender(newHandle);
+        continueRender2(newHandle);
       };
-    }, [src, onDuration, delayRenderRetries, delayRenderTimeoutInMilliseconds]);
+    }, [
+      src,
+      onDuration,
+      delayRenderRetries,
+      delayRenderTimeoutInMilliseconds,
+      continueRender2,
+      delayRender2
+    ]);
   }
   return /* @__PURE__ */ jsx33("video", {
     ref: videoRef,
@@ -6043,7 +6070,7 @@ Check that all your Remotion packages are on the same version. If your dependenc
   const { loop, ...propsOtherThanLoop } = props2;
   const { fps } = useVideoConfig();
   const environment = useRemotionEnvironment();
-  const { durations, setDurations } = useContext31(DurationsContext);
+  const { durations, setDurations } = useContext32(DurationsContext);
   if (typeof ref === "string") {
     throw new Error("string refs are not supported");
   }
@@ -6141,12 +6168,13 @@ var init_esm = __esm(() => {
     throw new Error(err.join(`
 `));
   }
-  originalCreateElement = React4.createElement;
+  RemotionEnvironmentContext = React4.createContext(null);
+  originalCreateElement = React22.createElement;
   componentsToAddStacksTo = [];
   IsPlayerContext = createContext2(false);
   AbsoluteFill = forwardRef(AbsoluteFillRefForwarding);
   SequenceContext = createContext3(null);
-  SequenceManager = React32.createContext({
+  SequenceManager = React42.createContext({
     registerSequence: () => {
       throw new Error("SequenceManagerContext not initialized");
     },
@@ -6155,7 +6183,7 @@ var init_esm = __esm(() => {
     },
     sequences: []
   });
-  SequenceVisibilityToggleContext = React32.createContext({
+  SequenceVisibilityToggleContext = React42.createContext({
     hidden: {},
     setHidden: () => {
       throw new Error("SequenceVisibilityToggle not initialized");
@@ -6216,8 +6244,8 @@ var init_esm = __esm(() => {
       throw new Error("Not implemented");
     }
   });
-  editorPropsProviderRef = React42.createRef();
-  timeValueRef = React42.createRef();
+  editorPropsProviderRef = React5.createRef();
+  timeValueRef = React5.createRef();
   validCodecs = [
     "h264",
     "h265",
@@ -6291,7 +6319,7 @@ var init_esm = __esm(() => {
   if (typeof window !== "undefined") {
     window.remotion_delayRenderTimeouts = {};
   }
-  Canvas = React8.forwardRef(CanvasRefForwardingFunction);
+  Canvas = React9.forwardRef(CanvasRefForwardingFunction);
   AnimatedImage = forwardRef3(({
     src,
     width,
@@ -6312,7 +6340,8 @@ var init_esm = __esm(() => {
     }, []);
     const resolvedSrc = resolveAnimatedImageSource(src);
     const [imageDecoder, setImageDecoder] = useState6(null);
-    const [decodeHandle] = useState6(() => delayRender(`Rendering <AnimatedImage/> with src="${resolvedSrc}"`));
+    const { delayRender: delayRender2, continueRender: continueRender2 } = useDelayRender();
+    const [decodeHandle] = useState6(() => delayRender2(`Rendering <AnimatedImage/> with src="${resolvedSrc}"`));
     const frame = useCurrentFrame();
     const { fps } = useVideoConfig();
     const currentTime = frame / playbackRate / fps;
@@ -6336,15 +6365,15 @@ var init_esm = __esm(() => {
         initialLoopBehavior
       }).then((d) => {
         setImageDecoder(d);
-        continueRender(decodeHandle);
+        continueRender2(decodeHandle);
       }).catch((err) => {
         if (err.name === "AbortError") {
-          continueRender(decodeHandle);
+          continueRender2(decodeHandle);
           return;
         }
         if (onError) {
           onError?.(err);
-          continueRender(decodeHandle);
+          continueRender2(decodeHandle);
         } else {
           cancelRender(err);
         }
@@ -6352,12 +6381,18 @@ var init_esm = __esm(() => {
       return () => {
         controller.abort();
       };
-    }, [resolvedSrc, decodeHandle, onError, initialLoopBehavior]);
+    }, [
+      resolvedSrc,
+      decodeHandle,
+      onError,
+      initialLoopBehavior,
+      continueRender2
+    ]);
     useLayoutEffect(() => {
       if (!imageDecoder) {
         return;
       }
-      const delay = delayRender(`Rendering frame at ${currentTime} of <AnimatedImage src="${src}"/>`);
+      const delay = delayRender2(`Rendering frame at ${currentTime} of <AnimatedImage src="${src}"/>`);
       imageDecoder.getFrame(currentTime, loopBehavior).then((videoFrame) => {
         if (mountState.current.isMounted) {
           if (videoFrame === null) {
@@ -6366,16 +6401,24 @@ var init_esm = __esm(() => {
             ref.current?.draw(videoFrame.frame);
           }
         }
-        continueRender(delay);
+        continueRender2(delay);
       }).catch((err) => {
         if (onError) {
           onError(err);
-          continueRender(delay);
+          continueRender2(delay);
         } else {
           cancelRender(err);
         }
       });
-    }, [currentTime, imageDecoder, loopBehavior, onError, src]);
+    }, [
+      currentTime,
+      imageDecoder,
+      loopBehavior,
+      onError,
+      src,
+      continueRender2,
+      delayRender2
+    ]);
     return /* @__PURE__ */ jsx102(Canvas, {
       ref,
       width,
@@ -6412,7 +6455,7 @@ var init_esm = __esm(() => {
   });
   SharedAudioContext = createContext15(null);
   didWarn = {};
-  BufferingContextReact = React14.createContext(null);
+  BufferingContextReact = React15.createContext(null);
   alreadyWarned = {};
   MediaVolumeContext = createContext16({
     mediaMuted: false,
@@ -6451,7 +6494,7 @@ var init_esm = __esm(() => {
   kSampleStepSize = 1 / (kSplineTableSize - 1);
   IFrame = forwardRef7(IFrameRefForwarding);
   Img = forwardRef8(ImgRefForwarding);
-  compositionsRef = React23.createRef();
+  compositionsRef = React24.createRef();
   exports_default_css = {};
   __export2(exports_default_css, {
     makeDefaultPreviewCSS: () => makeDefaultPreviewCSS,
@@ -6460,7 +6503,7 @@ var init_esm = __esm(() => {
   });
   injected = {};
   listeners = [];
-  CurrentScaleContext = React25.createContext(null);
+  CurrentScaleContext = React26.createContext(null);
   PreviewSizeContext = createContext18({
     setSize: () => {
       return;
@@ -6544,7 +6587,8 @@ var init_esm = __esm(() => {
     useLogLevel,
     playbackLogging,
     timeValueRef,
-    compositionSelectorRef
+    compositionSelectorRef,
+    RemotionEnvironmentContext
   };
   PERCENTAGE = NUMBER + "%";
   IsInsideSeriesContext = createContext19(false);
@@ -6684,12 +6728,13 @@ var getLottieMetadata = (animationData) => {
   const containerRef = useRef21(null);
   const onAnimationLoadedRef = useRef21(onAnimationLoaded);
   onAnimationLoadedRef.current = onAnimationLoaded;
+  const { delayRender, continueRender } = useDelayRender();
   const [handle] = useState24(() => delayRender("Waiting for Lottie animation to load"));
   useEffect26(() => {
     return () => {
       continueRender(handle);
     };
-  }, [handle]);
+  }, [handle, continueRender]);
   const frame = useCurrentFrame();
   currentFrameRef.current = frame;
   useEffect26(() => {
@@ -6734,7 +6779,8 @@ var getLottieMetadata = (animationData) => {
     loop,
     playbackRate,
     preserveAspectRatio,
-    renderer
+    renderer,
+    continueRender
   ]);
   useEffect26(() => {
     if (animationRef.current && direction) {
@@ -6770,7 +6816,7 @@ var getLottieMetadata = (animationData) => {
       }, { once: true });
       img.setAttributeNS("http://www.w3.org/1999/xlink", "xlink:href", img.href.baseVal);
     });
-  }, [direction, frame, loop, playbackRate]);
+  }, [direction, frame, loop, playbackRate, delayRender, continueRender]);
   return /* @__PURE__ */ jsx41("div", {
     ref: containerRef,
     className: className2,
@@ -11738,15 +11784,15 @@ init_esm();
 init_esm();
 import { jsx as jsx35, jsxs as jsxs10 } from "react/jsx-runtime";
 import { jsx as jsx210, jsxs as jsxs23, Fragment } from "react/jsx-runtime";
-import React5 from "react";
+import React8 from "react";
 import { useContext as useContext210, useEffect as useEffect23, useState as useState20 } from "react";
-import { useContext as useContext32, useEffect as useEffect24 } from "react";
+import { useContext as useContext33, useEffect as useEffect24 } from "react";
 import { jsx as jsx36 } from "react/jsx-runtime";
 import { useCallback as useCallback18, useRef as useRef18 } from "react";
 import { useEffect as useEffect32, useState as useState23 } from "react";
 import { useContext as useContext42, useEffect as useEffect62, useRef as useRef42 } from "react";
 import { useEffect as useEffect42 } from "react";
-import { useCallback as useCallback23, useContext as useContext33, useMemo as useMemo31, useRef as useRef22, useState as useState32 } from "react";
+import { useCallback as useCallback23, useContext as useContext34, useMemo as useMemo31, useRef as useRef22, useState as useState32 } from "react";
 import { useEffect as useEffect52, useRef as useRef32 } from "react";
 import { useCallback as useCallback32, useEffect as useEffect72, useMemo as useMemo210, useState as useState42 } from "react";
 import {
@@ -11758,7 +11804,7 @@ import {
   useRef as useRef112,
   useState as useState132
 } from "react";
-import React10, {
+import React102, {
   Suspense as Suspense2,
   forwardRef as forwardRef13,
   useCallback as useCallback112,
@@ -11801,6 +11847,7 @@ import { useCallback as useCallback122, useMemo as useMemo132, useState as useSt
 import { jsx as jsx132 } from "react/jsx-runtime";
 // ../core/dist/esm/no-react.mjs
+import React6 from "react";
 function interpolateFunction2(input, inputRange, outputRange, options) {
   const { extrapolateLeft, extrapolateRight, easing } = options;
   let result = input;
@@ -11900,6 +11947,7 @@ function interpolate2(input, inputRange, outputRange, options) {
     extrapolateRight
   });
 }
+var RemotionEnvironmentContext2 = React6.createContext(null);
 function truthy2(value) {
   return Boolean(value);
 }
@@ -12758,8 +12806,8 @@ var calculateOuter = ({
     overflow: overflowVisible ? "visible" : "hidden"
   };
 };
-var PlayerEventEmitterContext = React5.createContext(undefined);
-var ThumbnailEmitterContext = React5.createContext(undefined);
+var PlayerEventEmitterContext = React8.createContext(undefined);
+var ThumbnailEmitterContext = React8.createContext(undefined);
 class PlayerEmitter {
   listeners = {
@@ -12873,7 +12921,7 @@ class ThumbnailEmitter {
   };
 }
 var useBufferStateEmitter = (emitter) => {
-  const bufferManager = useContext32(Internals.BufferingContextReact);
+  const bufferManager = useContext33(Internals.BufferingContextReact);
   if (!bufferManager) {
     throw new Error("BufferingContextReact not found");
   }
@@ -12956,20 +13004,20 @@ var usePlayer = () => {
   const playStart = useRef22(frame);
   const setFrame = Internals.Timeline.useTimelineSetFrame();
   const setTimelinePosition = Internals.Timeline.useTimelineSetFrame();
-  const audioContext = useContext33(Internals.SharedAudioContext);
-  const { audioAndVideoTags } = useContext33(Internals.Timeline.TimelineContext);
+  const audioContext = useContext34(Internals.SharedAudioContext);
+  const { audioAndVideoTags } = useContext34(Internals.Timeline.TimelineContext);
   const frameRef = useRef22(frame);
   frameRef.current = frame;
   const video = Internals.useVideo();
   const config = Internals.useUnsafeVideoConfig();
-  const emitter = useContext33(PlayerEventEmitterContext);
+  const emitter = useContext34(PlayerEventEmitterContext);
   const lastFrame = (config?.durationInFrames ?? 1) - 1;
   const isLastFrame = frame === lastFrame;
   const isFirstFrame = frame === 0;
   if (!emitter) {
     throw new TypeError("Expected Player event emitter context");
   }
-  const bufferingContext = useContext33(Internals.BufferingContextReact);
+  const bufferingContext = useContext34(Internals.BufferingContextReact);
   if (!bufferingContext) {
     throw new Error("Missing the buffering context. Most likely you have a Remotion version mismatch.");
   }
@@ -14628,7 +14676,7 @@ var useClickPreventionOnDoubleClick = (onClick, onDoubleClick, doubleClickToFull
   }, [doubleClickToFullscreen, handleDoubleClick, handlePointerDown, onClick]);
   return returnValue;
 };
-var reactVersion = React10.version.split(".")[0];
+var reactVersion = React102.version.split(".")[0];
 if (reactVersion === "0") {
   throw new Error(`Version ${reactVersion} of "react" is not supported by Remotion`);
 }
@@ -15192,26 +15240,38 @@ var SharedPlayerContexts = ({
       mountTime: Date.now()
     };
   }, [logLevel]);
-  return /* @__PURE__ */ jsx132(Internals.LogLevelContext.Provider, {
-    value: logLevelContext,
-    children: /* @__PURE__ */ jsx132(Internals.CanUseRemotionHooksProvider, {
-      children: /* @__PURE__ */ jsx132(Internals.Timeline.TimelineContext.Provider, {
-        value: timelineContext,
-        children: /* @__PURE__ */ jsx132(Internals.CompositionManager.Provider, {
-          value: compositionManagerContext,
-          children: /* @__PURE__ */ jsx132(Internals.ResolveCompositionConfig, {
-            children: /* @__PURE__ */ jsx132(Internals.PrefetchProvider, {
-              children: /* @__PURE__ */ jsx132(Internals.DurationsContextProvider, {
-                children: /* @__PURE__ */ jsx132(Internals.MediaVolumeContext.Provider, {
-                  value: mediaVolumeContextValue,
-                  children: /* @__PURE__ */ jsx132(Internals.SetMediaVolumeContext.Provider, {
-                    value: setMediaVolumeContextValue,
-                    children: /* @__PURE__ */ jsx132(Internals.SharedAudioContextProvider, {
-                      numberOfAudioTags: numberOfSharedAudioTags,
-                      component,
-                      audioLatencyHint,
-                      children: /* @__PURE__ */ jsx132(Internals.BufferingProvider, {
-                        children
+  const env = useMemo132(() => {
+    return {
+      isPlayer: true,
+      isRendering: false,
+      isStudio: false,
+      isClientSideRendering: false,
+      isReadOnlyStudio: false
+    };
+  }, []);
+  return /* @__PURE__ */ jsx132(Internals.RemotionEnvironmentContext, {
+    value: env,
+    children: /* @__PURE__ */ jsx132(Internals.LogLevelContext.Provider, {
+      value: logLevelContext,
+      children: /* @__PURE__ */ jsx132(Internals.CanUseRemotionHooksProvider, {
+        children: /* @__PURE__ */ jsx132(Internals.Timeline.TimelineContext.Provider, {
+          value: timelineContext,
+          children: /* @__PURE__ */ jsx132(Internals.CompositionManager.Provider, {
+            value: compositionManagerContext,
+            children: /* @__PURE__ */ jsx132(Internals.ResolveCompositionConfig, {
+              children: /* @__PURE__ */ jsx132(Internals.PrefetchProvider, {
+                children: /* @__PURE__ */ jsx132(Internals.DurationsContextProvider, {
+                  children: /* @__PURE__ */ jsx132(Internals.MediaVolumeContext.Provider, {
+                    value: mediaVolumeContextValue,
+                    children: /* @__PURE__ */ jsx132(Internals.SetMediaVolumeContext.Provider, {
+                      value: setMediaVolumeContextValue,
+                      children: /* @__PURE__ */ jsx132(Internals.SharedAudioContextProvider, {
+                        numberOfAudioTags: numberOfSharedAudioTags,
+                        component,
+                        audioLatencyHint,
+                        children: /* @__PURE__ */ jsx132(Internals.BufferingProvider, {
+                          children
+                        })
                       })
                     })
                   })
@@ -15381,9 +15441,7 @@ var PlayerFn = ({
   ...componentProps
 }, ref) => {
   if (typeof window !== "undefined") {
-    useLayoutEffect11(() => {
-      window.remotion_isPlayer = true;
-    }, []);
+    window.remotion_isPlayer = true;
   }
   if (componentProps.defaultProps !== undefined) {
     throw new Error("The <Player /> component does not accept `defaultProps`, but some were passed. Use `inputProps` instead.");
@@ -16535,9 +16593,9 @@ var UNDERLAY_RED = curriedTransparentize$1(0.9, RED);
 var BLUE_TEXT = curriedDarken$1(0.3, "#42e9f5");
 // src/components/homepage/layout/use-color-mode.tsx
-import React6, { useContext as useContext34, useMemo as useMemo33 } from "react";
+import React11, { useContext as useContext35, useMemo as useMemo33 } from "react";
 import { jsx as jsx37 } from "react/jsx-runtime";
-var Context = React6.createContext(undefined);
+var Context = React11.createContext(undefined);
 var ColorModeProvider = ({
   children,
   colorMode,
@@ -16552,7 +16610,7 @@ var ColorModeProvider = ({
   });
 };
 function useColorMode() {
-  const context = useContext34(Context);
+  const context = useContext35(Context);
   if (context === null || context === undefined) {
     throw new Error("ColorModeProvider");
   }
@@ -16952,6 +17010,7 @@ var DisplayedEmoji = ({ emoji }) => {
   const [data, setData] = useState26(null);
   const { durationInFrames, fps } = useVideoConfig();
   const [browser, setBrowser] = useState26(typeof document !== "undefined");
+  const { delayRender, continueRender } = useDelayRender();
   const src = useMemo34(() => {
     if (emoji === "melting") {
       return "https://fonts.gstatic.com/s/e/notoemoji/latest/1fae0/lottie.json";
@@ -16982,7 +17041,7 @@ var DisplayedEmoji = ({ emoji }) => {
     }).catch((err) => {
       cancelRender(err);
     });
-  }, [handle, src]);
+  }, [handle, src, continueRender]);
   useEffect27(() => {
     if (typeof document !== "undefined") {
       setBrowser(true);
@@ -17679,7 +17738,7 @@ var DemoError = () => {
 };
 // src/components/homepage/Demo/DemoRender.tsx
-import React34, { useCallback as useCallback28 } from "react";
+import React37, { useCallback as useCallback28 } from "react";
 import { z } from "zod";
 // src/components/homepage/Demo/DemoErrorIcon.tsx
@@ -17753,7 +17812,7 @@ var DoneCheckmark = () => {
 };
 // ../shapes/dist/esm/index.mjs
-import React26, { useMemo as useMemo37 } from "react";
+import React34, { useMemo as useMemo37 } from "react";
 import { version } from "react-dom";
 import { jsx as jsx60, jsxs as jsxs21 } from "react/jsx-runtime";
 import { jsx as jsx212 } from "react/jsx-runtime";
@@ -18035,7 +18094,7 @@ var style2 = {
   justifyContent: "center"
 };
 var RenderButton = ({ renderData, onError }) => {
-  const [state, setState] = React34.useState({
+  const [state, setState] = React37.useState({
     type: "idle"
   });
   const triggerRender = useCallback28(async () => {
@@ -18612,7 +18671,7 @@ var PlayerVolume = ({ playerRef }) => {
 };
 // src/components/homepage/Demo/PlayPauseButton.tsx
-import React38, { useCallback as useCallback33, useEffect as useEffect36 } from "react";
+import React40, { useCallback as useCallback33, useEffect as useEffect36 } from "react";
 import { jsx as jsx77 } from "react/jsx-runtime";
 var playerButtonStyle2 = {
   appearance: "none",
@@ -18629,7 +18688,7 @@ var playerButtonStyle2 = {
   color: PALETTE.TEXT_COLOR
 };
 var PlayPauseButton = ({ playerRef }) => {
-  const [playing, setPlaying] = React38.useState(true);
+  const [playing, setPlaying] = React40.useState(true);
   useEffect36(() => {
     const { current } = playerRef;
     if (!current) {
@@ -18667,7 +18726,7 @@ var PlayPauseButton = ({ playerRef }) => {
 };
 // src/components/homepage/Demo/TimeDisplay.tsx
-import React39, { useEffect as useEffect37 } from "react";
+import React41, { useEffect as useEffect37 } from "react";
 import { jsx as jsx78 } from "react/jsx-runtime";
 var formatTime2 = (timeInSeconds) => {
   const minutes = Math.floor(timeInSeconds / 60);
@@ -18675,7 +18734,7 @@ var formatTime2 = (timeInSeconds) => {
   return `${String(minutes)}:${String(seconds).padStart(2, "0")}`;
 };
 var TimeDisplay = ({ fps, playerRef }) => {
-  const [time, setTime] = React39.useState(0);
+  const [time, setTime] = React41.useState(0);
   useEffect37(() => {
     const { current } = playerRef;
     if (!current) {
@@ -18754,7 +18813,7 @@ var PlayerControls = ({ playerRef, durationInFrames, fps, children }) => {
 };
 // src/components/homepage/Demo/ThemeNudge.tsx
-import React40 from "react";
+import React43 from "react";
 import { jsx as jsx80, jsxs as jsxs31 } from "react/jsx-runtime";
 var origWidth3 = 21;
 var scale3 = 0.4;
@@ -18776,7 +18835,7 @@ var Icon3 = () => {
 };
 var ThemeNudge = () => {
   const { colorMode, setColorMode } = useColorMode();
-  const toggleTheme = React40.useCallback((e) => {
+  const toggleTheme = React43.useCallback((e) => {
     e.preventDefault();
     setColorMode(colorMode === "dark" ? "light" : "dark");
   }, [colorMode, setColorMode]);