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

@remotion/promo-pages 4.0.341 → 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 (6) hide show

package/.turbo/turbo-make.log +2 -2
package/dist/Homepage.js +514 -420
package/package.json +10 -10
package/src/components/homepage/Demo/Cards.tsx +2 -2
package/src/components/homepage/Demo/DisplayedEmoji.tsx +3 -7
package/src/components/homepage/Demo/EmojiCard.tsx +4 -2

package/dist/Homepage.js CHANGED Viewed

@@ -19,36 +19,38 @@ 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 useState4
+  useState as useState5
 } from "react";
 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 { 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 useState3
+  useState as useState4
 } from "react";
-import React42, {
+import React5, {
   createContext as createContext6,
   useCallback as useCallback22,
   useImperativeHandle,
@@ -56,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 {
@@ -70,82 +72,83 @@ import {
   useImperativeHandle as useImperativeHandle4,
   useLayoutEffect,
   useRef as useRef3,
-  useState as useState5
+  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 useState7 } 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 useState6
+  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 { createContext as createContext12, useEffect as useEffect6, useState as useState8 } 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,
   useRef as useRef11,
-  useState as useState13
+  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,
-  useState as useState9
+  useState as useState10
 } from "react";
 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 useState10 } 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,
   useRef as useRef7,
-  useState as useState11
+  useState as useState12
 } from "react";
 import { jsx as jsx16 } from "react/jsx-runtime";
-import React15 from "react";
-import { useEffect as useEffect10, useState as useState12 } 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,
@@ -154,31 +157,31 @@ 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 useState14 } 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,
-  useState as useState15
+  useState as useState16
 } from "react";
 import { jsx as jsx25 } from "react/jsx-runtime";
 import {
@@ -186,44 +189,44 @@ import {
   useLayoutEffect as useLayoutEffect8,
   useMemo as useMemo25,
   useRef as useRef15,
-  useState as useState16
+  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,
   useRef as useRef16,
-  useState as useState17
+  useState as useState18
 } 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 useCallback15 } from "react";
+import React32 from "react";
+import { useCallback as useCallback16 } from "react";
 import {
-  useCallback as useCallback14,
-  useContext as useContext29,
+  useCallback as useCallback15,
+  useContext as useContext30,
   useEffect as useEffect20,
   useLayoutEffect as useLayoutEffect9,
   useMemo as useMemo29,
-  useState as useState18
+  useState as useState19
 } from "react";
 import { jsx as jsx31 } from "react/jsx-runtime";
 import { jsx as jsx322 } from "react/jsx-runtime";
-import { forwardRef as forwardRef12, useCallback as useCallback16, 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,
@@ -436,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,
@@ -703,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;
   }
@@ -722,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();
@@ -735,7 +739,7 @@ var __defProp2, __export2 = (target, all) => {
   });
 }, useIsPlayer = () => {
   return useContext(IsPlayerContext);
-}, VERSION = "4.0.341", checkMultipleRemotionVersions = () => {
+}, VERSION = "4.0.345", checkMultipleRemotionVersions = () => {
   if (typeof globalThis === "undefined") {
     return;
   }
@@ -893,8 +897,12 @@ Check that all your Remotion packages are on the same version. If your dependenc
     setNonce(context.getNonce);
   }, [context]);
   return nonce;
-}, exports_timeline_position_state, CompositionManager, CompositionSetters, EditorPropsContext, editorPropsProviderRef, timeValueRef, EditorPropsProvider = ({ children }) => {
-  const [props, setProps] = React42.useState({});
+}, exports_timeline_position_state, useRemotionEnvironment = () => {
+  const context = useContext3(RemotionEnvironmentContext);
+  const [env] = useState3(() => getRemotionEnvironment());
+  return context ?? env;
+}, CompositionManager, CompositionSetters, EditorPropsContext, editorPropsProviderRef, timeValueRef, EditorPropsProvider = ({ children }) => {
+  const [props, setProps] = React5.useState({});
   const updateProps = useCallback22(({
     defaultProps,
     id,
@@ -1058,7 +1066,8 @@ Check that all your Remotion packages are on the same version. If your dependenc
     defaultProps,
     props: originalProps,
     abortSignal: signal,
-    compositionId
+    compositionId,
+    isRendering: getRemotionEnvironment().isRendering
   }) : null;
   if (calculatedProm !== null && typeof calculatedProm === "object" && "then" in calculatedProm) {
     return calculatedProm.then((c) => {
@@ -1140,19 +1149,20 @@ Check that all your Remotion packages are on the same version. If your dependenc
 }, ResolveCompositionContext, resolveCompositionsRef, needsResolution = (composition) => {
   return Boolean(composition.calculateMetadata);
 }, PROPS_UPDATED_EXTERNALLY = "remotion.propsUpdatedExternally", ResolveCompositionConfig = ({ children }) => {
-  const [currentRenderModalComposition, setCurrentRenderModalComposition] = useState3(null);
-  const { compositions, canvasContent, currentCompositionMetadata } = useContext3(CompositionManager);
-  const { fastRefreshes, manualRefreshes } = useContext3(NonceContext);
+  const [currentRenderModalComposition, setCurrentRenderModalComposition] = useState4(null);
+  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" || getRemotionEnvironment().isPlayer ? {} : getInputProps() ?? {};
-  }, []);
-  const [resolvedConfigs, setResolvedConfigs] = useState3({});
+    return typeof window === "undefined" || env.isPlayer ? {} : getInputProps() ?? {};
+  }, [env.isPlayer]);
+  const [resolvedConfigs, setResolvedConfigs] = useState4({});
   const selectedEditorProps = useMemo4(() => {
     return selectedComposition ? allEditorProps[selectedComposition.id] ?? {} : {};
   }, [allEditorProps, selectedComposition]);
@@ -1390,15 +1400,16 @@ 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);
   const selectedEditorProps = useMemo4(() => {
     return composition ? allEditorProps[composition.id] ?? {} : {};
   }, [allEditorProps, composition]);
+  const env = useRemotionEnvironment();
   return useMemo4(() => {
     if (!composition) {
       return null;
@@ -1433,7 +1444,7 @@ Check that all your Remotion packages are on the same version. If your dependenc
           props: {
             ...composition.defaultProps ?? {},
             ...selectedEditorProps ?? {},
-            ...typeof window === "undefined" || getRemotionEnvironment().isPlayer ? {} : getInputProps() ?? {}
+            ...typeof window === "undefined" || env.isPlayer ? {} : getInputProps() ?? {}
           },
           defaultCodec: null,
           defaultOutName: null,
@@ -1446,9 +1457,15 @@ Check that all your Remotion packages are on the same version. If your dependenc
       return null;
     }
     return context[composition.id];
-  }, [composition, context, currentCompositionMetadata, selectedEditorProps]);
+  }, [
+    composition,
+    context,
+    currentCompositionMetadata,
+    selectedEditorProps,
+    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;
   });
@@ -1494,18 +1511,19 @@ 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;
   }
-  const unclamped = state.frame[videoConfig.id] ?? (getRemotionEnvironment().isPlayer ? 0 : getFrameForComposition(videoConfig.id));
+  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, {
@@ -1513,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;
@@ -1551,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) {
@@ -1568,15 +1586,16 @@ 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 (getRemotionEnvironment().isPlayer) {
+    if (env.isPlayer) {
       throw new Error(`useCurrentFrame can only be called inside a component that was passed to <Player>. See: https://www.remotion.dev/docs/player/examples`);
     }
     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 = ({
@@ -1606,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) {
@@ -1643,9 +1662,9 @@ Check that all your Remotion packages are on the same version. If your dependenc
   ...other
 }, ref) => {
   const { layout = "absolute-fill" } = other;
-  const [id] = useState4(() => String(Math.random()));
-  const parentSequence = useContext10(SequenceContext);
-  const { rootId } = useContext10(TimelineContext);
+  const [id] = useState5(() => String(Math.random()));
+  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") {
@@ -1670,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]);
@@ -1704,8 +1723,9 @@ Check that all your Remotion packages are on the same version. If your dependenc
   const timelineClipName = useMemo9(() => {
     return name ?? "";
   }, [name]);
+  const env = useRemotionEnvironment();
   useEffect3(() => {
-    if (!getRemotionEnvironment().isStudio) {
+    if (!env.isStudio) {
       return;
     }
     registerSequence({
@@ -1742,7 +1762,8 @@ Check that all your Remotion packages are on the same version. If your dependenc
     loopDisplay,
     stack,
     premountDisplay,
-    postmountDisplay
+    postmountDisplay,
+    env.isStudio
   ]);
   const endThreshold = Math.ceil(cumulatedFrom + from + durationInFrames - 1);
   const content = absoluteFrame < cumulatedFrom + from ? null : absoluteFrame > endThreshold ? null : children;
@@ -1822,7 +1843,8 @@ Check that all your Remotion packages are on the same version. If your dependenc
     })
   });
 }, PremountedPostmountedSequence, SequenceRefForwardingFunction = (props, ref) => {
-  if (props.layout !== "none" && !getRemotionEnvironment().isRendering) {
+  const env = useRemotionEnvironment();
+  if (props.layout !== "none" && !env.isRendering) {
     if (props.premountFor || props.postmountFor) {
       return /* @__PURE__ */ jsx82(PremountedPostmountedSequence, {
         ...props,
@@ -1861,14 +1883,14 @@ Check that all your Remotion packages are on the same version. If your dependenc
   return logLevels.indexOf(level);
 }, isEqualOrBelowLogLevel = (currentLevel, level) => {
   return getNumberForLogLevel(currentLevel) <= getNumberForLogLevel(level);
-}, Log, handles, DELAY_RENDER_CALLSTACK_TOKEN = "The delayRender was called:", DELAY_RENDER_RETRIES_LEFT = "Retries left: ", DELAY_RENDER_RETRY_TOKEN = "- Rendering the frame will be retried.", DELAY_RENDER_CLEAR_TOKEN = "handle was cleared after", defaultTimeout = 30000, delayRender = (label, options) => {
+}, Log, handles, DELAY_RENDER_CALLSTACK_TOKEN = "The delayRender was called:", DELAY_RENDER_RETRIES_LEFT = "Retries left: ", DELAY_RENDER_RETRY_TOKEN = "- Rendering the frame will be retried.", DELAY_RENDER_CLEAR_TOKEN = "handle was cleared after", defaultTimeout = 30000, delayRenderInternal = (environment, label, options) => {
   if (typeof label !== "string" && typeof label !== "undefined") {
     throw new Error("The label parameter of delayRender() must be a string or undefined, got: " + JSON.stringify(label));
   }
   const handle = Math.random();
   handles.push(handle);
   const called = Error().stack?.replace(/^Error/g, "") ?? "";
-  if (getRemotionEnvironment().isRendering) {
+  if (environment.isRendering) {
     const timeoutToUse = (options?.timeoutInMilliseconds ?? (typeof window === "undefined" ? defaultTimeout : window.remotion_puppeteerTimeout ?? defaultTimeout)) - 2000;
     if (typeof window !== "undefined") {
       const retriesLeft = (options?.retries ?? 0) - (window.remotion_attempt - 1);
@@ -1894,7 +1916,7 @@ Check that all your Remotion packages are on the same version. If your dependenc
     window.remotion_renderReady = false;
   }
   return handle;
-}, continueRender = (handle) => {
+}, 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.");
   }
@@ -1903,7 +1925,7 @@ Check that all your Remotion packages are on the same version. If your dependenc
   }
   handles = handles.filter((h) => {
     if (h === handle) {
-      if (getRemotionEnvironment().isRendering) {
+      if (environment.isRendering) {
         if (!window.remotion_delayRenderTimeouts[handle]) {
           return false;
         }
@@ -1924,6 +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;
   }
+}, 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": {
@@ -1973,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;
@@ -2186,14 +2217,14 @@ Check that all your Remotion packages are on the same version. If your dependenc
   }
   validateContent(artifact.content);
 }, RenderAssetManager, RenderAssetManagerProvider = ({ children }) => {
-  const [renderAssets, setRenderAssets] = useState6([]);
-  const registerRenderAsset = useCallback5((renderAsset) => {
+  const [renderAssets, setRenderAssets] = useState7([]);
+  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);
     });
@@ -2218,10 +2249,10 @@ 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 [env] = useState7(() => getRemotionEnvironment());
+  const { registerRenderAsset, unregisterRenderAsset } = useContext12(RenderAssetManager);
+  const env = useRemotionEnvironment();
   const frame = useCurrentFrame();
-  const [id] = useState7(() => {
+  const [id] = useState8(() => {
     return String(Math.random());
   });
   useEffect5(() => {
@@ -2296,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();
@@ -2357,7 +2388,7 @@ Check that all your Remotion packages are on the same version. If your dependenc
   preloads = updater(preloads);
   updaters.forEach((u) => u());
 }, PrefetchProvider = ({ children }) => {
-  const [_preloads, _setPreloads] = useState8(() => preloads);
+  const [_preloads, _setPreloads] = useState9(() => preloads);
   useEffect6(() => {
     const updaterFunction = () => {
       _setPreloads(preloads);
@@ -2384,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]) {
@@ -2681,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");
   }
@@ -2712,7 +2743,8 @@ Check that all your Remotion packages are on the same version. If your dependenc
   onAutoPlayError,
   logLevel,
   mountTime,
-  reason
+  reason,
+  isPlayer
 }) => {
   const { current } = mediaRef;
   if (!current) {
@@ -2757,7 +2789,7 @@ Check that all your Remotion packages are on the same version. If your dependenc
         return;
       }
       console.log(`The video will be muted and we'll retry playing it.`);
-      if (mediaType === "video" && getRemotionEnvironment().isPlayer) {
+      if (mediaType === "video" && isPlayer) {
         console.log("Use onAutoPlayError() to handle this error yourself.");
       }
       current.muted = true;
@@ -2827,7 +2859,7 @@ Check that all your Remotion packages are on the same version. If your dependenc
   return true;
 }, SharedAudioContext, SharedAudioContextProvider = ({ children, numberOfAudioTags, component, audioLatencyHint }) => {
   const audios = useRef4([]);
-  const [initialNumberOfAudioTags] = useState9(numberOfAudioTags);
+  const [initialNumberOfAudioTags] = useState10(numberOfAudioTags);
   if (numberOfAudioTags !== initialNumberOfAudioTags) {
     throw new Error("The number of shared audio tags has changed dynamically. Once you have set this property, you cannot change it afterwards.");
   }
@@ -2847,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;
@@ -2868,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) {
@@ -2894,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) {
@@ -2905,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,
@@ -2933,7 +2965,8 @@ Check that all your Remotion packages are on the same version. If your dependenc
     }
   }, [rerenderAudios]);
   const mountTime = useMountTime();
-  const playAllAudios = useCallback6(() => {
+  const env = useRemotionEnvironment();
+  const playAllAudios = useCallback7(() => {
     refs.forEach((ref) => {
       const audio = audios.current.find((a) => a.el === ref.ref);
       if (audio?.premounting) {
@@ -2945,11 +2978,12 @@ Check that all your Remotion packages are on the same version. If your dependenc
         onAutoPlayError: null,
         logLevel,
         mountTime,
-        reason: "playing all audios"
+        reason: "playing all audios",
+        isPlayer: env.isPlayer
       });
     });
     audioContext?.resume();
-  }, [audioContext, logLevel, mountTime, refs]);
+  }, [audioContext, logLevel, mountTime, refs, env.isPlayer]);
   const value = useMemo14(() => {
     return {
       registerAudio,
@@ -2967,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();
@@ -2995,12 +3029,12 @@ Check that all your Remotion packages are on the same version. If your dependenc
   audioId,
   premounting
 }) => {
-  const ctx = useContext14(SharedAudioContext);
-  const [elem] = useState9(() => {
+  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
@@ -3014,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) {
@@ -3149,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");
   }
@@ -3203,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) => {
@@ -3266,13 +3300,13 @@ 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 [initialVolume] = useState10(() => volume);
+  const { registerSequence, unregisterSequence } = useContext18(SequenceManager);
+  const [initialVolume] = useState11(() => volume);
   const logLevel = useLogLevel();
   const mountTime = useMountTime();
   const nonce = useNonce();
@@ -3295,6 +3329,7 @@ Check that all your Remotion packages are on the same version. If your dependenc
       warnOnce2(`Remotion: The ${mediaType} with src ${src} has changed it's volume. Prefer the callback syntax for setting volume to get better timeline display: https://www.remotion.dev/docs/audio/volume`);
     }
   }, [initialVolume, mediaType, src, volume]);
+  const env = useRemotionEnvironment();
   useEffect8(() => {
     if (!mediaRef.current) {
       return;
@@ -3302,7 +3337,7 @@ Check that all your Remotion packages are on the same version. If your dependenc
     if (!src) {
       throw new Error("No src passed");
     }
-    if (!getRemotionEnvironment().isStudio && window.process?.env?.NODE_ENV !== "test") {
+    if (!env.isStudio && window.process?.env?.NODE_ENV !== "test") {
       return;
     }
     if (!showInTimeline) {
@@ -3352,7 +3387,8 @@ Check that all your Remotion packages are on the same version. If your dependenc
     stack,
     showInTimeline,
     premountDisplay,
-    postmountDisplay
+    postmountDisplay,
+    env.isStudio
   ]);
   useEffect8(() => {
     const tag = {
@@ -3370,7 +3406,8 @@ Check that all your Remotion packages are on the same version. If your dependenc
           onAutoPlayError,
           logLevel,
           mountTime,
-          reason
+          reason,
+          isPlayer: env.isPlayer
         });
       }
     };
@@ -3388,14 +3425,15 @@ Check that all your Remotion packages are on the same version. If your dependenc
     isPremounting,
     isPostmounting,
     logLevel,
-    mountTime
+    mountTime,
+    env.isPlayer
   ]);
 }, useBufferManager = (logLevel, mountTime) => {
-  const [blocks, setBlocks] = useState11([]);
-  const [onBufferingCallbacks, setOnBufferingCallbacks] = useState11([]);
-  const [onResumeCallbacks, setOnResumeCallbacks] = useState11([]);
+  const [blocks, setBlocks] = useState12([]);
+  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: () => {
@@ -3409,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: () => {
@@ -3417,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: () => {
@@ -3453,14 +3491,14 @@ 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,
     children
   });
 }, useIsPlayerBuffering = (bufferManager) => {
-  const [isBuffering, setIsBuffering] = useState11(bufferManager.buffering.current);
+  const [isBuffering, setIsBuffering] = useState12(bufferManager.buffering.current);
   useEffect9(() => {
     const onBuffer = () => {
       setIsBuffering(true);
@@ -3481,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: () => {
@@ -3507,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;
     }
@@ -3585,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()
   });
@@ -3623,7 +3661,7 @@ Check that all your Remotion packages are on the same version. If your dependenc
   src
 }) => {
   const buffer = useBufferState();
-  const [isBuffering, setIsBuffering] = useState12(false);
+  const [isBuffering, setIsBuffering] = useState13(false);
   useEffect10(() => {
     let cleanupFns = [];
     const { current } = element;
@@ -3872,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);
@@ -3887,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;
     }
@@ -3976,6 +4014,7 @@ Check that all your Remotion packages are on the same version. If your dependenc
     playing,
     isPostmounting
   ]);
+  const env = useRemotionEnvironment();
   useLayoutEffect5(() => {
     const playbackRateToSet = Math.max(0, playbackRate);
     if (mediaRef.current && mediaRef.current.playbackRate !== playbackRateToSet) {
@@ -4019,7 +4058,8 @@ Check that all your Remotion packages are on the same version. If your dependenc
             onAutoPlayError,
             logLevel,
             mountTime,
-            reason: "player is playing but media tag is paused, and just seeked"
+            reason: "player is playing but media tag is paused, and just seeked",
+            isPlayer: env.isPlayer
           });
         }
       }
@@ -4066,7 +4106,8 @@ Check that all your Remotion packages are on the same version. If your dependenc
         onAutoPlayError,
         logLevel,
         mountTime,
-        reason: `player is playing and ${reason}`
+        reason: `player is playing and ${reason}`,
+        isPlayer: env.isPlayer
       });
       if (!isVariableFpsVideo && playbackRate > 0) {
         bufferUntilFirstFrame(shouldBeTime);
@@ -4093,22 +4134,23 @@ Check that all your Remotion packages are on the same version. If your dependenc
     isPostmounting,
     pauseWhenBuffering,
     mountTime,
-    mediaTagCurrentTime
+    mediaTagCurrentTime,
+    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]);
 }, AudioForDevelopmentForwardRefFunction = (props, ref) => {
-  const [initialShouldPreMountAudioElements] = useState13(props.shouldPreMountAudioTags);
+  const [initialShouldPreMountAudioElements] = useState14(props.shouldPreMountAudioTags);
   if (props.shouldPreMountAudioTags !== initialShouldPreMountAudioElements) {
     throw new Error("Cannot change the behavior for pre-mounting audio tags dynamically.");
   }
@@ -4147,13 +4189,13 @@ 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 [timelineId] = useState13(() => String(Math.random()));
+  const sequenceContext = useContext23(SequenceContext);
+  const [timelineId] = useState14(() => String(Math.random()));
   const isSequenceHidden = hidden[timelineId] ?? false;
   const userPreferredVolume = evaluateVolume({
     frame: volumePropFrame,
@@ -4190,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");
   }
@@ -4289,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,
@@ -4356,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
     });
@@ -4365,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;
@@ -4393,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,
@@ -4408,13 +4453,13 @@ Check that all your Remotion packages are on the same version. If your dependenc
   } = props;
   const { loop, ...propsOtherThanLoop } = props;
   const { fps } = useVideoConfig();
-  const environment = getRemotionEnvironment();
-  const { durations, setDurations } = useContext24(DurationsContext);
+  const environment = useRemotionEnvironment();
+  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) {
@@ -4428,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)];
@@ -4580,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]);
@@ -4606,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,
@@ -4621,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({
@@ -4631,15 +4677,15 @@ Check that all your Remotion packages are on the same version. If your dependenc
   });
   const nonce = useNonce();
   const isPlayer = useIsPlayer();
-  const environment = getRemotionEnvironment();
-  const canUseComposition = useContext26(CanUseRemotionHooks);
+  const environment = useRemotionEnvironment();
+  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.");
@@ -4717,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;
   }
@@ -4731,22 +4777,23 @@ Check that all your Remotion packages are on the same version. If your dependenc
   delayRenderTimeoutInMilliseconds,
   ...props2
 }, ref) => {
-  const [handle] = useState14(() => 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,
@@ -4767,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>.');
   }
@@ -4779,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;
     }
@@ -4796,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;
     }
@@ -4813,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);
@@ -4827,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
       });
@@ -4837,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) {
@@ -4848,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();
@@ -4871,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,
@@ -4881,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({
@@ -4901,18 +4951,18 @@ Check that all your Remotion packages are on the same version. If your dependenc
   currentCompositionMetadata,
   audioLatencyHint
 }) => {
-  const [compositions, setCompositions] = useState15([]);
+  const [compositions, setCompositions] = useState16([]);
   const currentcompositionsRef = useRef14(compositions);
-  const [folders, setFolders] = useState15([]);
-  const [canvasContent, setCanvasContent] = useState15(null);
-  const updateCompositions = useCallback13((updateComps) => {
+  const [folders, setFolders] = useState16([]);
+  const [canvasContent, setCanvasContent] = useState16(null);
+  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.`);
@@ -4921,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,
@@ -4937,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));
     });
@@ -4948,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) {
@@ -5068,19 +5118,20 @@ Check that all your Remotion packages are on the same version. If your dependenc
   currentCompositionMetadata,
   audioLatencyHint
 }) => {
-  const [remotionRootId] = useState16(() => String(random(null)));
-  const [frame, setFrame] = useState16(() => getInitialFrameState());
-  const [playing, setPlaying] = useState16(false);
+  const [remotionRootId] = useState17(() => String(random(null)));
+  const [frame, setFrame] = useState17(() => getInitialFrameState());
+  const [playing, setPlaying] = useState17(false);
   const imperativePlaying = useRef15(false);
-  const [fastRefreshes, setFastRefreshes] = useState16(0);
-  const [manualRefreshes, setManualRefreshes] = useState16(0);
-  const [playbackRate, setPlaybackRate] = useState16(1);
+  const [fastRefreshes, setFastRefreshes] = useState17(0);
+  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;
@@ -5094,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 {
@@ -5243,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");
   }
@@ -5291,11 +5342,11 @@ 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] = useState17(() => String(Math.random()));
+  const [timelineId] = useState18(() => String(Math.random()));
   const isSequenceHidden = hidden[timelineId] ?? false;
   if (typeof acceptableTimeShift !== "undefined") {
     throw new Error("acceptableTimeShift has been removed. Use acceptableTimeShiftInSeconds instead.");
@@ -5355,7 +5406,7 @@ Check that all your Remotion packages are on the same version. If your dependenc
   useImperativeHandle9(ref, () => {
     return videoRef.current;
   }, []);
-  useState17(() => playbackLogging({
+  useState18(() => playbackLogging({
     logLevel,
     message: `Mounting video with source = ${actualSrc}, v=${VERSION}, user agent=${typeof navigator === "undefined" ? "server" : navigator.userAgent}`,
     tag: "video",
@@ -5504,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);
@@ -5523,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.");
   }
@@ -5815,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 = getRemotionEnvironment();
+  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,
@@ -5892,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 () => {
@@ -5914,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,
@@ -5924,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 = () => {
@@ -5943,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,
@@ -5956,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) {
@@ -5964,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
       });
@@ -5973,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,
@@ -6008,8 +6069,8 @@ Check that all your Remotion packages are on the same version. If your dependenc
   } = props2;
   const { loop, ...propsOtherThanLoop } = props2;
   const { fps } = useVideoConfig();
-  const environment = getRemotionEnvironment();
-  const { durations, setDurations } = useContext31(DurationsContext);
+  const environment = useRemotionEnvironment();
+  const { durations, setDurations } = useContext32(DurationsContext);
   if (typeof ref === "string") {
     throw new Error("string refs are not supported");
   }
@@ -6017,10 +6078,10 @@ Check that all your Remotion packages are on the same version. If your dependenc
     throw new TypeError(`The \`<Video>\` tag requires a string for \`src\`, but got ${JSON.stringify(props2.src)} instead.`);
   }
   const preloadedSrc = usePreload(props2.src);
-  const onDuration = useCallback16((src, durationInSeconds) => {
+  const onDuration = useCallback17((src, durationInSeconds) => {
     setDurations({ type: "got-duration", durationInSeconds, src });
   }, [setDurations]);
-  const onVideoFrame = useCallback16(() => {}, []);
+  const onVideoFrame = useCallback17(() => {}, []);
   const durationFetched = durations[getAbsoluteSrc(preloadedSrc)] ?? durations[getAbsoluteSrc(props2.src)];
   validateMediaTrimProps({ startFrom, endAt, trimBefore, trimAfter });
   const { trimBeforeValue, trimAfterValue } = resolveTrimProps({
@@ -6107,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");
     },
@@ -6121,7 +6183,7 @@ var init_esm = __esm(() => {
     },
     sequences: []
   });
-  SequenceVisibilityToggleContext = React32.createContext({
+  SequenceVisibilityToggleContext = React42.createContext({
     hidden: {},
     setHidden: () => {
       throw new Error("SequenceVisibilityToggle not initialized");
@@ -6182,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",
@@ -6257,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,
@@ -6277,8 +6339,9 @@ var init_esm = __esm(() => {
       };
     }, []);
     const resolvedSrc = resolveAnimatedImageSource(src);
-    const [imageDecoder, setImageDecoder] = useState5(null);
-    const [decodeHandle] = useState5(() => delayRender(`Rendering <AnimatedImage/> with src="${resolvedSrc}"`));
+    const [imageDecoder, setImageDecoder] = useState6(null);
+    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;
@@ -6292,7 +6355,7 @@ var init_esm = __esm(() => {
       }
       return c;
     }, []);
-    const [initialLoopBehavior] = useState5(() => loopBehavior);
+    const [initialLoopBehavior] = useState6(() => loopBehavior);
     useEffect4(() => {
       const controller = new AbortController;
       decodeImage({
@@ -6302,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);
         }
@@ -6318,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) {
@@ -6332,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,
@@ -6378,7 +6455,7 @@ var init_esm = __esm(() => {
   });
   SharedAudioContext = createContext15(null);
   didWarn = {};
-  BufferingContextReact = React14.createContext(null);
+  BufferingContextReact = React15.createContext(null);
   alreadyWarned = {};
   MediaVolumeContext = createContext16({
     mediaMuted: false,
@@ -6417,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,
@@ -6426,7 +6503,7 @@ var init_esm = __esm(() => {
   });
   injected = {};
   listeners = [];
-  CurrentScaleContext = React25.createContext(null);
+  CurrentScaleContext = React26.createContext(null);
   PreviewSizeContext = createContext18({
     setSize: () => {
       return;
@@ -6510,7 +6587,8 @@ var init_esm = __esm(() => {
     useLogLevel,
     playbackLogging,
     timeValueRef,
-    compositionSelectorRef
+    compositionSelectorRef,
+    RemotionEnvironmentContext
   };
   PERCENTAGE = NUMBER + "%";
   IsInsideSeriesContext = createContext19(false);
@@ -6580,7 +6658,7 @@ __export(exports_esm, {
   Lottie: () => Lottie
 });
 import lottie from "lottie-web";
-import { useEffect as useEffect26, useRef as useRef21, useState as useState21 } from "react";
+import { useEffect as useEffect26, useRef as useRef21, useState as useState24 } from "react";
 import { jsx as jsx41 } from "react/jsx-runtime";
 var getLottieMetadata = (animationData) => {
   const width2 = animationData.w;
@@ -6650,12 +6728,13 @@ var getLottieMetadata = (animationData) => {
   const containerRef = useRef21(null);
   const onAnimationLoadedRef = useRef21(onAnimationLoaded);
   onAnimationLoadedRef.current = onAnimationLoaded;
-  const [handle] = useState21(() => delayRender("Waiting for Lottie animation to load"));
+  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(() => {
@@ -6700,7 +6779,8 @@ var getLottieMetadata = (animationData) => {
     loop,
     playbackRate,
     preserveAspectRatio,
-    renderer
+    renderer,
+    continueRender
   ]);
   useEffect26(() => {
     if (animationRef.current && direction) {
@@ -6736,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,
@@ -11704,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 { useContext as useContext210, useEffect as useEffect23, useState as useState19 } from "react";
-import { useContext as useContext32, useEffect as useEffect24 } from "react";
+import React8 from "react";
+import { useContext as useContext210, useEffect as useEffect23, useState as useState20 } from "react";
+import { useContext as useContext33, useEffect as useEffect24 } from "react";
 import { jsx as jsx36 } from "react/jsx-runtime";
-import { useCallback as useCallback17, useRef as useRef18 } from "react";
+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 {
@@ -11724,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,
@@ -11767,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;
@@ -11866,6 +11947,7 @@ function interpolate2(input, inputRange, outputRange, options) {
     extrapolateRight
   });
 }
+var RemotionEnvironmentContext2 = React6.createContext(null);
 function truthy2(value) {
   return Boolean(value);
 }
@@ -12724,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 = {
@@ -12839,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");
   }
@@ -12859,7 +12941,7 @@ var useBufferStateEmitter = (emitter) => {
   }, [bufferManager, emitter]);
 };
 var PlayerEmitterProvider = ({ children, currentPlaybackRate }) => {
-  const [emitter] = useState19(() => new PlayerEmitter);
+  const [emitter] = useState20(() => new PlayerEmitter);
   const bufferManager = useContext210(Internals.BufferingContextReact);
   if (!bufferManager) {
     throw new Error("BufferingContextReact not found");
@@ -12922,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.");
   }
@@ -14594,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`);
 }
@@ -15158,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
+                        })
                       })
                     })
                   })
@@ -15347,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.");
@@ -15748,11 +15840,11 @@ var Thumbnail = forward2(ThumbnailFn);
 // src/components/homepage/Demo/index.tsx
 import {
-  useCallback as useCallback33,
+  useCallback as useCallback35,
   useEffect as useEffect38,
   useMemo as useMemo41,
   useRef as useRef28,
-  useState as useState31
+  useState as useState33
 } from "react";
 // ../../node_modules/.pnpm/@babel+runtime@7.27.1/node_modules/@babel/runtime/helpers/esm/extends.js
@@ -16501,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,
@@ -16518,7 +16610,7 @@ var ColorModeProvider = ({
   });
 };
 function useColorMode() {
-  const context = useContext34(Context);
+  const context = useContext35(Context);
   if (context === null || context === undefined) {
     throw new Error("ColorModeProvider");
   }
@@ -16527,21 +16619,21 @@ function useColorMode() {
 // src/components/homepage/Demo/Comp.tsx
 init_esm();
-import { useCallback as useCallback26, useEffect as useEffect30, useMemo as useMemo36, useState as useState27 } from "react";
+import { useCallback as useCallback27, useEffect as useEffect30, useMemo as useMemo36, useState as useState28 } from "react";
 // src/components/homepage/Demo/Cards.tsx
 init_esm();
 import {
   createRef as createRef4,
-  useCallback as useCallback24,
+  useCallback as useCallback26,
   useEffect as useEffect29,
   useRef as useRef25,
-  useState as useState26
+  useState as useState27
 } from "react";
 // src/components/homepage/Demo/Card.tsx
 init_esm();
-import { useCallback as useCallback20, useRef as useRef20 } from "react";
+import { useCallback as useCallback21, useRef as useRef20 } from "react";
 // src/components/homepage/Demo/math.ts
 var paddingAndMargin = 20;
@@ -16575,10 +16667,10 @@ var getIndexFromPosition = (clientX, clientY) => {
 };
 // src/components/homepage/Demo/Switcher.tsx
-import { useCallback as useCallback19 } from "react";
+import { useCallback as useCallback20 } from "react";
 import { jsx as jsx38, jsxs as jsxs11 } from "react/jsx-runtime";
 var Switcher = ({ type, theme, onTap }) => {
-  const onPointerDown = useCallback19((e) => {
+  const onPointerDown = useCallback20((e) => {
     e.stopPropagation();
     onTap();
   }, [onTap]);
@@ -16641,7 +16733,7 @@ var Card = ({
   const refToUse = refsToUse[index];
   const stopPrevious = useRef20([]);
   let newIndices = [...indices];
-  const applyPositions = useCallback20((except) => {
+  const applyPositions = useCallback21((except) => {
     let stopped = false;
     stopPrevious.current.forEach((s) => {
       s();
@@ -16714,7 +16806,7 @@ var Card = ({
       update();
     });
   }, [newIndices, onUpdate, positions, refsToUse, shouldBePositions]);
-  const onPointerDown = useCallback20((e) => {
+  const onPointerDown = useCallback21((e) => {
     e.currentTarget.setPointerCapture(e.pointerId);
     const cardLeft = refToUse.current.offsetLeft;
     const cardTop = refToUse.current.offsetTop;
@@ -16775,7 +16867,7 @@ var Card = ({
     }, { once: true });
     refToUse.current.addEventListener("pointermove", onMove);
   }, [applyPositions, index, positions, refToUse, shouldBePositions]);
-  const onPointerUp = useCallback20((e) => {
+  const onPointerUp = useCallback21((e) => {
     e.currentTarget.releasePointerCapture(e.pointerId);
   }, []);
   const { x, y } = getPositionForIndex(index);
@@ -16904,7 +16996,7 @@ var CurrentCountry = ({ theme, countryPaths, countryLabel }) => {
 init_esm();
 import {
   forwardRef as forwardRef15,
-  useCallback as useCallback21,
+  useCallback as useCallback24,
   useEffect as useEffect28,
   useImperativeHandle as useImperativeHandle13,
   useRef as useRef23
@@ -16912,12 +17004,13 @@ import {
 // src/components/homepage/Demo/DisplayedEmoji.tsx
 init_esm();
-import { useEffect as useEffect27, useMemo as useMemo34, useState as useState24 } from "react";
+import { useEffect as useEffect27, useMemo as useMemo34, useState as useState26 } from "react";
 import { jsx as jsx44 } from "react/jsx-runtime";
 var DisplayedEmoji = ({ emoji }) => {
-  const [data, setData] = useState24(null);
+  const [data, setData] = useState26(null);
   const { durationInFrames, fps } = useVideoConfig();
-  const [browser, setBrowser] = useState24(typeof document !== "undefined");
+  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";
@@ -16930,7 +17023,7 @@ var DisplayedEmoji = ({ emoji }) => {
     }
     throw new Error("Unknown emoji");
   }, [emoji]);
-  const [handle] = useState24(() => delayRender());
+  const [handle] = useState26(() => delayRender());
   useEffect27(() => {
     Promise.all([
       fetch(src).then((res) => res.json()),
@@ -16948,7 +17041,7 @@ var DisplayedEmoji = ({ emoji }) => {
     }).catch((err) => {
       cancelRender(err);
     });
-  }, [handle, src]);
+  }, [handle, src, continueRender]);
   useEffect27(() => {
     if (typeof document !== "undefined") {
       setBrowser(true);
@@ -17023,7 +17116,7 @@ var EmojiCardRefFn = ({ emojiIndex }, ref) => {
   const ref2 = useRef23(null);
   const ref3 = useRef23(null);
   const transforms = useRef23([-100, 0, 100]);
-  const onLeft = useCallback21(() => {
+  const onLeft = useCallback24(() => {
     if (!ref1.current || !ref2.current || !ref3.current) {
       return;
     }
@@ -17034,7 +17127,7 @@ var EmojiCardRefFn = ({ emojiIndex }, ref) => {
       transforms: transforms.current
     });
   }, []);
-  const onRight = useCallback21(() => {
+  const onRight = useCallback24(() => {
     if (!ref1.current || !ref2.current || !ref3.current) {
       return;
     }
@@ -17073,6 +17166,7 @@ var EmojiCardRefFn = ({ emojiIndex }, ref) => {
       transforms: transforms.current
     });
   }, []);
+  const env = useRemotionEnvironment();
   return /* @__PURE__ */ jsxs14(AbsoluteFill, {
     style: {
       justifyContent: "center",
@@ -17100,7 +17194,7 @@ var EmojiCardRefFn = ({ emojiIndex }, ref) => {
           whiteSpace: "nowrap",
           height: "100%"
         },
-        children: getRemotionEnvironment().isRendering ? /* @__PURE__ */ jsx46("div", {
+        children: env.isRendering ? /* @__PURE__ */ jsx46("div", {
           style: emojiStyle,
           children: /* @__PURE__ */ jsx46(DisplayedEmoji, {
             emoji: emojiIndex
@@ -17475,14 +17569,14 @@ var Cards = ({
   trending
 }) => {
   const container4 = useRef25(null);
-  const [refs] = useState26(() => {
+  const [refs] = useState27(() => {
     return new Array(4).fill(true).map(() => {
       return createRef4();
     });
   });
   const positions = useRef25(getInitialPositions());
   const shouldBePositions = useRef25(getInitialPositions());
-  const { isRendering } = getRemotionEnvironment();
+  const { isRendering } = useRemotionEnvironment();
   useEffect29(() => {
     const { current } = container4;
     if (!current) {
@@ -17500,11 +17594,11 @@ var Cards = ({
     };
   }, [onToggle]);
   const ref = useRef25(null);
-  const onLeft = useCallback24(() => {
+  const onLeft = useCallback26(() => {
     ref.current?.onRight();
     onRightPress();
   }, [onRightPress]);
-  const onRight = useCallback24(() => {
+  const onRight = useCallback26(() => {
     ref.current?.onLeft();
     onLeftPress();
   }, [onLeftPress]);
@@ -17573,8 +17667,8 @@ var HomepageVideoComp = ({
   onClickLeft,
   onClickRight
 }) => {
-  const [rerenders, setRerenders] = useState27(0);
-  const onUpdate = useCallback26((newIndices) => {
+  const [rerenders, setRerenders] = useState28(0);
+  const onUpdate = useCallback27((newIndices) => {
     setRerenders(rerenders + 1);
     updateCardOrder(newIndices);
   }, [rerenders, updateCardOrder]);
@@ -17644,7 +17738,7 @@ var DemoError = () => {
 };
 // src/components/homepage/Demo/DemoRender.tsx
-import React34, { useCallback as useCallback27 } from "react";
+import React37, { useCallback as useCallback28 } from "react";
 import { z } from "zod";
 // src/components/homepage/Demo/DemoErrorIcon.tsx
@@ -17718,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";
@@ -18000,10 +18094,10 @@ var style2 = {
   justifyContent: "center"
 };
 var RenderButton = ({ renderData, onError }) => {
-  const [state, setState] = React34.useState({
+  const [state, setState] = React37.useState({
     type: "idle"
   });
-  const triggerRender = useCallback27(async () => {
+  const triggerRender = useCallback28(async () => {
     if (renderData === null) {
       return;
     }
@@ -18180,12 +18274,12 @@ var DragAndDropNudge = () => {
 // src/components/homepage/Demo/PlayerSeekBar.tsx
 init_esm();
-import { useCallback as useCallback29, useEffect as useEffect33, useMemo as useMemo40, useRef as useRef26, useState as useState29 } from "react";
+import { useCallback as useCallback30, useEffect as useEffect33, useMemo as useMemo40, useRef as useRef26, useState as useState30 } from "react";
 // src/components/homepage/layout/use-el-size.ts
-import { useCallback as useCallback28, useEffect as useEffect31, useMemo as useMemo39, useState as useState28 } from "react";
+import { useCallback as useCallback29, useEffect as useEffect31, useMemo as useMemo39, useState as useState29 } from "react";
 var useElementSize2 = (ref) => {
-  const [size, setSize] = useState28(null);
+  const [size, setSize] = useState29(null);
   const observer = useMemo39(() => {
     if (typeof ResizeObserver === "undefined") {
       return;
@@ -18197,7 +18291,7 @@ var useElementSize2 = (ref) => {
       });
     });
   }, []);
-  const updateSize = useCallback28(() => {
+  const updateSize = useCallback29(() => {
     if (ref === null) {
       return;
     }
@@ -18262,7 +18356,7 @@ var findBodyInWhichDivIsLocated2 = (div) => {
   return current;
 };
 var useHoverState2 = (ref, hideControlsWhenPointerDoesntMove) => {
-  const [hovered, setHovered] = useState29(false);
+  const [hovered, setHovered] = useState30(false);
   useEffect33(() => {
     const { current } = ref;
     if (!current) {
@@ -18312,8 +18406,8 @@ var PlayerSeekBar2 = ({
   const containerRef = useRef26(null);
   const barHovered = useHoverState2(containerRef, false);
   const size = useElementSize2(containerRef.current);
-  const [playing, setPlaying] = useState29(false);
-  const [frame, setFrame] = useState29(0);
+  const [playing, setPlaying] = useState30(false);
+  const [frame, setFrame] = useState30(0);
   useEffect33(() => {
     const { current } = playerRef;
     if (!current) {
@@ -18345,11 +18439,11 @@ var PlayerSeekBar2 = ({
       current.removeEventListener("pause", onPause);
     };
   }, [playerRef]);
-  const [dragging, setDragging] = useState29({
+  const [dragging, setDragging] = useState30({
     dragging: false
   });
   const width2 = size?.width ?? 0;
-  const onPointerDown = useCallback29((e) => {
+  const onPointerDown = useCallback30((e) => {
     if (e.button !== 0) {
       return;
     }
@@ -18363,7 +18457,7 @@ var PlayerSeekBar2 = ({
     });
     onSeekStart();
   }, [durationInFrames, width2, playerRef, playing, onSeekStart]);
-  const onPointerMove = useCallback29((e) => {
+  const onPointerMove = useCallback30((e) => {
     if (!size) {
       throw new Error("Player has no size");
     }
@@ -18374,7 +18468,7 @@ var PlayerSeekBar2 = ({
     const _frame = getFrameFromX2(e.clientX - posLeft, durationInFrames, size.width);
     playerRef.current.seekTo(_frame);
   }, [dragging.dragging, durationInFrames, playerRef, size]);
-  const onPointerUp = useCallback29(() => {
+  const onPointerUp = useCallback30(() => {
     setDragging({
       dragging: false
     });
@@ -18458,7 +18552,7 @@ var PlayerSeekBar2 = ({
 };
 // src/components/homepage/Demo/PlayerVolume.tsx
-import { useCallback as useCallback30, useEffect as useEffect35, useRef as useRef27, useState as useState30 } from "react";
+import { useCallback as useCallback31, useEffect as useEffect35, useRef as useRef27, useState as useState31 } from "react";
 // src/components/homepage/Demo/icons.tsx
 import { jsx as jsx71 } from "react/jsx-runtime";
@@ -18516,8 +18610,8 @@ var IsMutedIcon = (props) => {
 // src/components/homepage/Demo/PlayerVolume.tsx
 import { jsx as jsx75 } from "react/jsx-runtime";
 var PlayerVolume = ({ playerRef }) => {
-  const [muted, setIsMuted] = useState30(() => playerRef.current?.isMuted() ?? true);
-  const [isHovered, setIsHovered] = useState30(false);
+  const [muted, setIsMuted] = useState31(() => playerRef.current?.isMuted() ?? true);
+  const [isHovered, setIsHovered] = useState31(false);
   const timerRef = useRef27(null);
   useEffect35(() => {
     const { current } = playerRef;
@@ -18539,7 +18633,7 @@ var PlayerVolume = ({ playerRef }) => {
       document.body.style.userSelect = "auto";
     }
   }, [isHovered]);
-  const onClick = useCallback30(() => {
+  const onClick = useCallback31(() => {
     if (timerRef.current !== null) {
       clearTimeout(timerRef.current);
       timerRef.current = null;
@@ -18577,7 +18671,7 @@ var PlayerVolume = ({ playerRef }) => {
 };
 // src/components/homepage/Demo/PlayPauseButton.tsx
-import React38, { useCallback as useCallback31, 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",
@@ -18594,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) {
@@ -18613,7 +18707,7 @@ var PlayPauseButton = ({ playerRef }) => {
       current.removeEventListener("pause", onPause);
     };
   }, [playerRef]);
-  const onToggle = useCallback31(() => {
+  const onToggle = useCallback33(() => {
     playerRef.current?.toggle();
   }, [playerRef]);
   const playPauseIconStyle = {
@@ -18632,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);
@@ -18640,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) {
@@ -18719,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;
@@ -18741,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]);
@@ -18806,12 +18900,12 @@ var playerWrapper = {
 };
 var Demo = () => {
   const { colorMode } = useColorMode();
-  const [data2, setData] = useState31(null);
+  const [data2, setData] = useState33(null);
   const ref = useRef28(null);
-  const [isFullscreen, setIsFullscreen] = useState31(false);
-  const [cardOrder, setCardOrder] = useState31([0, 1, 2, 3]);
-  const [emojiIndex, setEmojiIndex] = useState31(0);
-  const [error, setError] = useState31(false);
+  const [isFullscreen, setIsFullscreen] = useState33(false);
+  const [cardOrder, setCardOrder] = useState33([0, 1, 2, 3]);
+  const [emojiIndex, setEmojiIndex] = useState33(0);
+  const [error, setError] = useState33(false);
   useEffect38(() => {
     getDataAndProps().then((d) => {
       setData(d);
@@ -18833,7 +18927,7 @@ var Demo = () => {
       playerRef.removeEventListener("fullscreenchange", onFullscreenChange);
     };
   }, [data2]);
-  const updateCardOrder = useCallback33((newCardOrder) => {
+  const updateCardOrder = useCallback35((newCardOrder) => {
     setCardOrder(newCardOrder);
   }, []);
   const props = useMemo41(() => {
@@ -18855,7 +18949,7 @@ var Demo = () => {
       emojiIndex
     };
   }, [cardOrder, emojiIndex, colorMode, data2, updateCardOrder]);
-  const onError = useCallback33(() => {
+  const onError = useCallback35(() => {
     setError(true);
   }, []);
   return /* @__PURE__ */ jsxs33("div", {
@@ -18964,7 +19058,7 @@ import { forwardRef as forwardRef17, useEffect as useEffect40, useImperativeHand
 // src/components/homepage/VideoPlayerWithControls.tsx
 import Hls from "hls.js";
 import"plyr/dist/plyr.css";
-import { forwardRef as forwardRef16, useCallback as useCallback35, useEffect as useEffect39, useRef as useRef29, useState as useState33 } from "react";
+import { forwardRef as forwardRef16, useCallback as useCallback36, useEffect as useEffect39, useRef as useRef29, useState as useState35 } from "react";
 import { jsx as jsx87 } from "react/jsx-runtime";
 var useCombinedRefs = function(...refs) {
   const targetRef = useRef29(null);
@@ -18985,9 +19079,9 @@ var VideoPlayerWithControls = forwardRef16(({ playbackId, poster, currentTime, o
   const videoRef = useRef29(null);
   const metaRef = useCombinedRefs(ref, videoRef);
   const playerRef = useRef29(null);
-  const [playerInitTime] = useState33(Date.now());
-  const videoError = useCallback35((event) => onError(event), [onError]);
-  const onImageLoad = useCallback35((event) => {
+  const [playerInitTime] = useState35(Date.now());
+  const videoError = useCallback36((event) => onError(event), [onError]);
+  const onImageLoad = useCallback36((event) => {
     const [w, h] = [event.target.width, event.target.height];
     if (w && h) {
       onSize({ width: w, height: h });
@@ -19185,10 +19279,10 @@ var EditorStarterSection = () => {
 var EditorStarterSection_default = EditorStarterSection;
 // src/components/homepage/EvaluateRemotion.tsx
-import { useEffect as useEffect41, useState as useState35 } from "react";
+import { useEffect as useEffect41, useState as useState36 } from "react";
 import { jsx as jsx90, jsxs as jsxs36 } from "react/jsx-runtime";
 var EvaluateRemotionSection = () => {
-  const [dailyAvatars, setDailyAvatars] = useState35([]);
+  const [dailyAvatars, setDailyAvatars] = useState36([]);
   useEffect41(() => {
     const avatars = [
       "/img/freelancers/alex.jpeg",
@@ -19288,7 +19382,7 @@ var EvaluateRemotionSection = () => {
 var EvaluateRemotion_default = EvaluateRemotionSection;
 // src/components/homepage/IfYouKnowReact.tsx
-import { useEffect as useEffect43, useState as useState36 } from "react";
+import { useEffect as useEffect43, useState as useState37 } from "react";
 import { jsx as jsx91, jsxs as jsxs37 } from "react/jsx-runtime";
 var isWebkit = () => {
   if (typeof window === "undefined") {
@@ -19303,7 +19397,7 @@ var icon2 = {
   marginLeft: 10
 };
 var IfYouKnowReact = () => {
-  const [vid, setVid] = useState36("/img/compose.webm");
+  const [vid, setVid] = useState37("/img/compose.webm");
   useEffect43(() => {
     if (isWebkit()) {
       setVid("/img/compose.mp4");
@@ -19460,7 +19554,7 @@ var MoreVideoPowerSection = () => {
 };
 // src/components/homepage/NewsletterButton.tsx
-import { useCallback as useCallback36, useState as useState37 } from "react";
+import { useCallback as useCallback37, useState as useState38 } from "react";
 // src/components/homepage/Spacer.tsx
 import { jsx as jsx97 } from "react/jsx-runtime";
@@ -19473,10 +19567,10 @@ var Spacer = () => {
 // src/components/homepage/NewsletterButton.tsx
 import { jsx as jsx98, jsxs as jsxs39 } from "react/jsx-runtime";
 var NewsletterButton = () => {
-  const [email, setEmail] = useState37("");
-  const [submitting, setSubmitting] = useState37(false);
-  const [subscribed, setSubscribed] = useState37(false);
-  const handleSubmit = useCallback36(async (e) => {
+  const [email, setEmail] = useState38("");
+  const [submitting, setSubmitting] = useState38(false);
+  const [subscribed, setSubscribed] = useState38(false);
+  const handleSubmit = useCallback37(async (e) => {
     try {
       setSubmitting(true);
       e.preventDefault();
@@ -19553,7 +19647,7 @@ var NewsletterButton = () => {
 };
 // src/components/homepage/ParameterizeAndEdit.tsx
-import { useEffect as useEffect45, useRef as useRef31, useState as useState38 } from "react";
+import { useEffect as useEffect45, useRef as useRef31, useState as useState39 } from "react";
 import { jsx as jsx99, jsxs as jsxs40 } from "react/jsx-runtime";
 var icon3 = {
   height: 16,
@@ -19561,7 +19655,7 @@ var icon3 = {
 };
 var ParameterizeAndEdit = () => {
   const ref = useRef31(null);
-  const [vid, setVid] = useState38("/img/editing-vp9-chrome.webm");
+  const [vid, setVid] = useState39("/img/editing-vp9-chrome.webm");
   useEffect45(() => {
     if (isWebkit()) {
       setVid("/img/editing-safari.mp4");
@@ -19676,7 +19770,7 @@ var ParameterizeAndEdit = () => {
 };
 // src/components/homepage/RealMp4Videos.tsx
-import { useEffect as useEffect46, useRef as useRef33, useState as useState39 } from "react";
+import { useEffect as useEffect46, useRef as useRef33, useState as useState40 } from "react";
 import { jsx as jsx100, jsxs as jsxs41 } from "react/jsx-runtime";
 var icon4 = {
   height: 16,
@@ -19685,7 +19779,7 @@ var icon4 = {
 var RealMP4Videos = () => {
   const ref = useRef33(null);
   const videoRef = useRef33(null);
-  const [vid, setVid] = useState39("/img/render-progress.webm");
+  const [vid, setVid] = useState40("/img/render-progress.webm");
   useEffect46(() => {
     if (isWebkit()) {
       setVid("/img/render-progress.mp4");
@@ -19985,7 +20079,7 @@ var TrustedByBanner = () => {
 var TrustedByBanner_default = TrustedByBanner;
 // src/components/homepage/VideoAppsShowcase.tsx
-import { useEffect as useEffect47, useRef as useRef35, useState as useState40 } from "react";
+import { useEffect as useEffect47, useRef as useRef35, useState as useState41 } from "react";
 import { jsx as jsx104, jsxs as jsxs45 } from "react/jsx-runtime";
 var tabs = [
   "Music visualization",
@@ -20038,9 +20132,9 @@ var icon5 = {
   marginLeft: 10
 };
 var VideoAppsShowcase = () => {
-  const [activeTab, setActiveTab] = useState40(0);
-  const [isMuted, setIsMuted] = useState40(true);
-  const [isPlaying, setIsPlaying] = useState40(false);
+  const [activeTab, setActiveTab] = useState41(0);
+  const [isMuted, setIsMuted] = useState41(true);
+  const [isPlaying, setIsPlaying] = useState41(false);
   const videoRef = useRef35(null);
   const containerRef = useRef35(null);
   useEffect47(() => {
@@ -21323,7 +21417,7 @@ var ChooseTemplate = () => {
 };
 // src/components/homepage/GetStartedStrip.tsx
-import { useState as useState41 } from "react";
+import { useState as useState43 } from "react";
 // src/components/homepage/GitHubButton.tsx
 import { jsx as jsx130, jsxs as jsxs56 } from "react/jsx-runtime";
@@ -21358,7 +21452,7 @@ var GithubButton = () => {
 // src/components/homepage/GetStartedStrip.tsx
 import { jsx as jsx131, jsxs as jsxs57 } from "react/jsx-runtime";
 var GetStarted = () => {
-  const [clicked, setClicked] = useState41(null);
+  const [clicked, setClicked] = useState43(null);
   return /* @__PURE__ */ jsxs57("div", {
     className: "flex flex-col lg:flex-row items-center justify-center text-center w-full",
     children: [