@remotion/promo-pages 4.0.374 → 4.0.376

package/dist/Homepage.js

@@ -89,39 +89,41 @@ import {
 import React11, { useCallback as useCallback5, useImperativeHandle as useImperativeHandle3, useRef as useRef3 } from "react";
 import { jsx as jsx102 } from "react/jsx-runtime";
 import { jsx as jsx11 } from "react/jsx-runtime";
-import { useContext as useContext14, useEffect as useEffect5, useState as useState9 } from "react";
+import { useContext as useContext14, useLayoutEffect as useLayoutEffect4, useState as useState9 } from "react";
 import {
   createContext as createContext12,
   useCallback as useCallback6,
+  useImperativeHandle as useImperativeHandle5,
   useLayoutEffect as useLayoutEffect3,
   useMemo as useMemo11,
   useState as useState8
 } from "react";
+import { flushSync } from "react-dom";
 import { jsx as jsx12 } from "react/jsx-runtime";
 import { forwardRef as forwardRef6, useCallback as useCallback11, useContext as useContext27 } from "react";
 import React12, { createContext as createContext13, useMemo as useMemo12 } from "react";
 import { jsx as jsx13 } from "react/jsx-runtime";
 import { useContext as useContext15 } from "react";
-import { createContext as createContext14, useEffect as useEffect6, useState as useState10 } from "react";
+import { createContext as createContext14, useEffect as useEffect5, useState as useState10 } from "react";
 import { jsx as jsx14 } from "react/jsx-runtime";
 import { createContext as createContext15, useMemo as useMemo13, useReducer } from "react";
 import { jsx as jsx15 } from "react/jsx-runtime";
 import {
   forwardRef as forwardRef4,
   useContext as useContext25,
-  useEffect as useEffect14,
-  useImperativeHandle as useImperativeHandle5,
+  useEffect as useEffect13,
+  useImperativeHandle as useImperativeHandle6,
   useMemo as useMemo21,
   useRef as useRef12,
   useState as useState15
 } from "react";
-import { useContext as useContext17, useLayoutEffect as useLayoutEffect4, useRef as useRef7 } from "react";
+import { useContext as useContext17, useLayoutEffect as useLayoutEffect5, useRef as useRef7 } from "react";
 import React15, {
   createContext as createContext16,
   createRef as createRef2,
   useCallback as useCallback7,
   useContext as useContext16,
-  useEffect as useEffect7,
+  useEffect as useEffect6,
   useMemo as useMemo15,
   useRef as useRef5,
   useState as useState11
@@ -129,13 +131,13 @@ import React15, {
 import { useMemo as useMemo14 } from "react";
 import { jsx as jsx16, jsxs as jsxs2 } from "react/jsx-runtime";
 import { useRef as useRef6 } from "react";
-import { useContext as useContext19, useEffect as useEffect8, useMemo as useMemo16, useState as useState12 } from "react";
+import { useContext as useContext19, useEffect as useEffect7, useMemo as useMemo16, useState as useState12 } from "react";
 import { useContext as useContext18 } from "react";
 import {
   useCallback as useCallback10,
   useContext as useContext22,
-  useEffect as useEffect12,
-  useLayoutEffect as useLayoutEffect6,
+  useEffect as useEffect11,
+  useLayoutEffect as useLayoutEffect7,
   useRef as useRef11
 } from "react";
 import { useCallback as useCallback9, useMemo as useMemo19, useRef as useRef9 } from "react";
@@ -143,33 +145,33 @@ import { useContext as useContext21, useMemo as useMemo18 } from "react";
 import React16, {
   useCallback as useCallback8,
   useContext as useContext20,
-  useEffect as useEffect9,
-  useLayoutEffect as useLayoutEffect5,
+  useEffect as useEffect8,
+  useLayoutEffect as useLayoutEffect6,
   useMemo as useMemo17,
   useRef as useRef8,
   useState as useState13
 } from "react";
 import { jsx as jsx17 } from "react/jsx-runtime";
 import React17 from "react";
-import { useEffect as useEffect10, useState as useState14 } from "react";
-import { useEffect as useEffect11, useRef as useRef10 } from "react";
-import { useContext as useContext23, useEffect as useEffect13 } from "react";
+import { useEffect as useEffect9, useState as useState14 } from "react";
+import { useEffect as useEffect10, useRef as useRef10 } from "react";
+import { useContext as useContext23, useEffect as useEffect12 } from "react";
 import { createContext as createContext17, useContext as useContext24, useMemo as useMemo20 } from "react";
 import { jsx as jsx18 } from "react/jsx-runtime";
 import {
   forwardRef as forwardRef5,
   useContext as useContext26,
-  useEffect as useEffect15,
-  useImperativeHandle as useImperativeHandle6,
-  useLayoutEffect as useLayoutEffect7,
+  useEffect as useEffect14,
+  useImperativeHandle as useImperativeHandle7,
+  useLayoutEffect as useLayoutEffect8,
   useMemo as useMemo222,
   useRef as useRef13
 } from "react";
 import { jsx as jsx19 } from "react/jsx-runtime";
 import { jsx as jsx20 } from "react/jsx-runtime";
-import { Suspense, useContext as useContext29, useEffect as useEffect17 } from "react";
+import { Suspense, useContext as useContext29, useEffect as useEffect16 } from "react";
 import { createPortal } from "react-dom";
-import { createContext as createContext18, useContext as useContext28, useEffect as useEffect16, useMemo as useMemo23 } from "react";
+import { createContext as createContext18, useContext as useContext28, useEffect as useEffect15, useMemo as useMemo23 } from "react";
 import { jsx as jsx21 } from "react/jsx-runtime";
 import { jsx as jsx222, jsxs as jsxs22 } from "react/jsx-runtime";
 import React21, { useMemo as useMemo24 } from "react";
@@ -180,8 +182,8 @@ import {
   forwardRef as forwardRef8,
   useCallback as useCallback13,
   useContext as useContext30,
-  useImperativeHandle as useImperativeHandle7,
-  useLayoutEffect as useLayoutEffect8,
+  useImperativeHandle as useImperativeHandle8,
+  useLayoutEffect as useLayoutEffect9,
   useRef as useRef14
 } from "react";
 import { jsx as jsx25 } from "react/jsx-runtime";
@@ -189,23 +191,24 @@ import { createRef as createRef3 } from "react";
 import React25 from "react";
 import {
   useCallback as useCallback14,
-  useImperativeHandle as useImperativeHandle8,
+  useImperativeHandle as useImperativeHandle9,
   useMemo as useMemo25,
   useRef as useRef15,
   useState as useState17
 } from "react";
 import { jsx as jsx26 } from "react/jsx-runtime";
-import { useEffect as useEffect18, useMemo as useMemo27, useState as useState18 } from "react";
+import React26 from "react";
+import { useEffect as useEffect17, useMemo as useMemo27, useState as useState18 } from "react";
 import { createContext as createContext19, useContext as useContext31, useMemo as useMemo26 } from "react";
 import { jsx as jsx27 } from "react/jsx-runtime";
 import { jsx as jsx28 } from "react/jsx-runtime";
-import React27, { createContext as createContext20 } from "react";
+import React28, { createContext as createContext20 } from "react";
 import { useCallback as useCallback16 } from "react";
 import {
   useCallback as useCallback15,
   useContext as useContext32,
-  useEffect as useEffect19,
-  useLayoutEffect as useLayoutEffect9,
+  useEffect as useEffect18,
+  useLayoutEffect as useLayoutEffect10,
   useMemo as useMemo28,
   useState as useState19
 } from "react";
@@ -213,30 +216,30 @@ import { jsx as jsx29 } from "react/jsx-runtime";
 import {
   forwardRef as forwardRef9,
   useContext as useContext33,
-  useEffect as useEffect21,
-  useImperativeHandle as useImperativeHandle9,
+  useEffect as useEffect20,
+  useImperativeHandle as useImperativeHandle10,
   useMemo as useMemo29,
   useRef as useRef16,
   useState as useState20
 } from "react";
-import { useEffect as useEffect20 } from "react";
+import { useEffect as useEffect19 } from "react";
 import { jsx as jsx30 } from "react/jsx-runtime";
 import { jsx as jsx31 } from "react/jsx-runtime";
-import React31, { useMemo as useMemo30 } from "react";
+import React32, { useMemo as useMemo30 } from "react";
 import { jsx as jsx322 } from "react/jsx-runtime";
 import { Children, forwardRef as forwardRef10, useMemo as useMemo31 } from "react";
-import React32 from "react";
-import React33, { createContext as createContext21 } from "react";
+import React33 from "react";
+import React34, { createContext as createContext21 } from "react";
 import { jsx as jsx33 } from "react/jsx-runtime";
 import { jsx as jsx34 } from "react/jsx-runtime";
-import React35 from "react";
+import React36 from "react";
 import { forwardRef as forwardRef12, useCallback as useCallback17, useContext as useContext35 } from "react";
 import {
   forwardRef as forwardRef11,
   useContext as useContext34,
-  useEffect as useEffect22,
-  useImperativeHandle as useImperativeHandle10,
-  useLayoutEffect as useLayoutEffect10,
+  useEffect as useEffect21,
+  useImperativeHandle as useImperativeHandle11,
+  useLayoutEffect as useLayoutEffect11,
   useMemo as useMemo32,
   useRef as useRef17
 } from "react";
@@ -451,18 +454,18 @@ function exponentialBackoff(errorCount) {
   return 1000 * 2 ** (errorCount - 1);
 }
 function useRemotionContexts() {
-  const compositionManagerCtx = React31.useContext(CompositionManager);
-  const timelineContext = React31.useContext(TimelineContext);
-  const setTimelineContext = React31.useContext(SetTimelineContext);
-  const sequenceContext = React31.useContext(SequenceContext);
-  const nonceContext = React31.useContext(NonceContext);
-  const canUseRemotionHooksContext = React31.useContext(CanUseRemotionHooks);
-  const preloadContext = React31.useContext(PreloadContext);
-  const resolveCompositionContext = React31.useContext(ResolveCompositionContext);
-  const renderAssetManagerContext = React31.useContext(RenderAssetManager);
-  const sequenceManagerContext = React31.useContext(SequenceManager);
-  const bufferManagerContext = React31.useContext(BufferingContextReact);
-  const logLevelContext = React31.useContext(LogLevelContext);
+  const compositionManagerCtx = React32.useContext(CompositionManager);
+  const timelineContext = React32.useContext(TimelineContext);
+  const setTimelineContext = React32.useContext(SetTimelineContext);
+  const sequenceContext = React32.useContext(SequenceContext);
+  const nonceContext = React32.useContext(NonceContext);
+  const canUseRemotionHooksContext = React32.useContext(CanUseRemotionHooks);
+  const preloadContext = React32.useContext(PreloadContext);
+  const resolveCompositionContext = React32.useContext(ResolveCompositionContext);
+  const renderAssetManagerContext = React32.useContext(RenderAssetManager);
+  const sequenceManagerContext = React32.useContext(SequenceManager);
+  const bufferManagerContext = React32.useContext(BufferingContextReact);
+  const logLevelContext = React32.useContext(LogLevelContext);
   return useMemo30(() => ({
     compositionManagerCtx,
     timelineContext,
@@ -753,7 +756,7 @@ var __defProp2, __export2 = (target, all) => {
   });
 }, useIsPlayer = () => {
   return useContext(IsPlayerContext);
-}, VERSION = "4.0.374", checkMultipleRemotionVersions = () => {
+}, VERSION = "4.0.376", checkMultipleRemotionVersions = () => {
   if (typeof globalThis === "undefined") {
     return;
   }
@@ -1046,6 +1049,9 @@ Check that all your Remotion packages are on the same version. If your dependenc
   if (override) {
     return override;
   }
+  if (typeof window === "undefined" || typeof window.remotion_inputProps === "undefined") {
+    throw new Error("Cannot call `getInputProps()` - window.remotion_inputProps is not set. This API is only available if you are in the Studio, or while you are rendering server-side.");
+  }
   const param = window.remotion_inputProps;
   if (!param) {
     return {};
@@ -1106,7 +1112,7 @@ Check that all your Remotion packages are on the same version. If your dependenc
   calculateMetadata,
   signal,
   defaultProps,
-  originalProps,
+  inputProps: originalProps,
   compositionId,
   compositionDurationInFrames,
   compositionFps,
@@ -1203,7 +1209,7 @@ 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 }) => {
+}, PROPS_UPDATED_EXTERNALLY = "remotion.propsUpdatedExternally", ResolveCompositionConfigInStudio = ({ children }) => {
   const [currentRenderModalComposition, setCurrentRenderModalComposition] = useState4(null);
   const { compositions, canvasContent, currentCompositionMetadata } = useContext4(CompositionManager);
   const { fastRefreshes, manualRefreshes } = useContext4(NonceContext);
@@ -1243,7 +1249,7 @@ Check that all your Remotion packages are on the same version. If your dependenc
     const result = resolveVideoConfigOrCatch({
       compositionId,
       calculateMetadata,
-      originalProps: combinedProps,
+      inputProps: combinedProps,
       signal,
       defaultProps,
       compositionDurationInFrames,
@@ -1499,7 +1505,7 @@ Check that all your Remotion packages are on the same version. If your dependenc
           props: {
             ...composition.defaultProps ?? {},
             ...selectedEditorProps ?? {},
-            ...typeof window === "undefined" || env.isPlayer ? {} : getInputProps() ?? {}
+            ...typeof window === "undefined" || env.isPlayer || !window.remotion_inputProps ? {} : getInputProps() ?? {}
           },
           defaultCodec: null,
           defaultOutName: null,
@@ -1509,6 +1515,9 @@ Check that all your Remotion packages are on the same version. If your dependenc
         }
       };
     }
+    if (!context) {
+      return null;
+    }
     if (!context[composition.id]) {
       return null;
     }
@@ -2421,7 +2430,7 @@ Check that all your Remotion packages are on the same version. If your dependenc
     return;
   }
   validateContent(artifact.content);
-}, RenderAssetManager, RenderAssetManagerProvider = ({ children }) => {
+}, RenderAssetManager, RenderAssetManagerProvider = ({ children, collectAssets }) => {
   const [renderAssets, setRenderAssets] = useState8([]);
   const registerRenderAsset = useCallback6((renderAsset) => {
     validateRenderAsset(renderAsset);
@@ -2429,6 +2438,18 @@ Check that all your Remotion packages are on the same version. If your dependenc
       return [...assets, renderAsset];
     });
   }, []);
+  if (collectAssets) {
+    useImperativeHandle5(collectAssets, () => {
+      return {
+        collectAssets: () => {
+          flushSync(() => {
+            setRenderAssets([]);
+          });
+          return renderAssets;
+        }
+      };
+    }, [renderAssets]);
+  }
   const unregisterRenderAsset = useCallback6((id) => {
     setRenderAssets((assts) => {
       return assts.filter((a) => a.id !== id);
@@ -2460,7 +2481,7 @@ Check that all your Remotion packages are on the same version. If your dependenc
   const [id] = useState9(() => {
     return String(Math.random());
   });
-  useEffect5(() => {
+  useLayoutEffect4(() => {
     if (!env.isRendering) {
       return;
     }
@@ -2594,7 +2615,7 @@ Check that all your Remotion packages are on the same version. If your dependenc
   updaters.forEach((u) => u());
 }, PrefetchProvider = ({ children }) => {
   const [_preloads, _setPreloads] = useState10(() => preloads);
-  useEffect6(() => {
+  useEffect5(() => {
     const updaterFunction = () => {
       _setPreloads(preloads);
     };
@@ -3187,7 +3208,7 @@ Check that all your Remotion packages are on the same version. If your dependenc
     audios.current = [];
     rerenderAudios();
   }, [numberOfAudioTags, rerenderAudios]);
-  useEffect7(() => {
+  useEffect6(() => {
     return () => {
       resetAudio();
     };
@@ -3370,7 +3391,7 @@ Check that all your Remotion packages are on the same version. If your dependenc
   }
   const { audioContext } = sharedAudioContext;
   if (typeof window !== "undefined") {
-    useLayoutEffect4(() => {
+    useLayoutEffect5(() => {
       if (!audioContext) {
         return;
       }
@@ -3499,7 +3520,7 @@ Check that all your Remotion packages are on the same version. If your dependenc
       });
     }).join(",");
   }, [duration, startsAt, volume, mediaVolume]);
-  useEffect8(() => {
+  useEffect7(() => {
     if (typeof volume === "number" && volume !== initialVolume) {
       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`);
     }
@@ -3552,7 +3573,7 @@ Check that all your Remotion packages are on the same version. If your dependenc
     trimBefore: undefined,
     playbackRate
   });
-  useEffect8(() => {
+  useEffect7(() => {
     if (!src) {
       throw new Error("No src passed");
     }
@@ -3642,7 +3663,7 @@ Check that all your Remotion packages are on the same version. If your dependenc
       }
     };
   }, []);
-  useEffect9(() => {
+  useEffect8(() => {
     if (blocks.length > 0) {
       onBufferingCallbacks.forEach((c) => c());
       playbackLogging({
@@ -3654,7 +3675,7 @@ Check that all your Remotion packages are on the same version. If your dependenc
     }
   }, [blocks]);
   if (typeof window !== "undefined") {
-    useLayoutEffect5(() => {
+    useLayoutEffect6(() => {
       if (blocks.length === 0) {
         onResumeCallbacks.forEach((c) => c());
         playbackLogging({
@@ -3678,7 +3699,7 @@ Check that all your Remotion packages are on the same version. If your dependenc
   });
 }, useIsPlayerBuffering = (bufferManager) => {
   const [isBuffering, setIsBuffering] = useState13(bufferManager.buffering.current);
-  useEffect9(() => {
+  useEffect8(() => {
     const onBuffer = () => {
       setIsBuffering(true);
     };
@@ -3841,7 +3862,7 @@ Check that all your Remotion packages are on the same version. If your dependenc
 }) => {
   const buffer = useBufferState();
   const [isBuffering, setIsBuffering] = useState14(false);
-  useEffect10(() => {
+  useEffect9(() => {
     let cleanupFns = [];
     const { current } = element;
     if (!current) {
@@ -3973,7 +3994,7 @@ Check that all your Remotion packages are on the same version. If your dependenc
   onVariableFpsVideoDetected
 }) => {
   const currentTime = useRef10(null);
-  useEffect11(() => {
+  useEffect10(() => {
     const { current } = mediaRef;
     if (current) {
       currentTime.current = {
@@ -4155,7 +4176,7 @@ Check that all your Remotion packages are on the same version. If your dependenc
     return acceptableTimeshift ?? defaultAcceptableTimeshift;
   })();
   const isPlayerBuffering = useIsPlayerBuffering(buffering);
-  useEffect12(() => {
+  useEffect11(() => {
     if (mediaRef.current?.paused) {
       return;
     }
@@ -4194,13 +4215,13 @@ Check that all your Remotion packages are on the same version. If your dependenc
     isPostmounting
   ]);
   const env = useRemotionEnvironment();
-  useLayoutEffect6(() => {
+  useLayoutEffect7(() => {
     const playbackRateToSet = Math.max(0, playbackRate);
     if (mediaRef.current && mediaRef.current.playbackRate !== playbackRateToSet) {
       mediaRef.current.playbackRate = playbackRateToSet;
     }
   }, [mediaRef, playbackRate]);
-  useEffect12(() => {
+  useEffect11(() => {
     const tagName = mediaType === "audio" ? "<Html5Audio>" : "<Html5Video>";
     if (!mediaRef.current) {
       throw new Error(`No ${mediaType} ref found`);
@@ -4328,7 +4349,7 @@ Check that all your Remotion packages are on the same version. If your dependenc
   const logLevel = useLogLevel();
   const mountTime = useMountTime();
   const env = useRemotionEnvironment();
-  useEffect13(() => {
+  useEffect12(() => {
     const tag = {
       id,
       play: (reason) => {
@@ -4516,12 +4537,12 @@ Check that all your Remotion packages are on the same version. If your dependenc
     volume: userPreferredVolume,
     shouldUseWebAudioApi: useWebAudioApi ?? false
   });
-  useImperativeHandle5(ref, () => {
+  useImperativeHandle6(ref, () => {
     return audioRef.current;
   }, [audioRef]);
   const currentOnDurationCallback = useRef12(onDuration);
   currentOnDurationCallback.current = onDuration;
-  useEffect14(() => {
+  useEffect13(() => {
     const { current } = audioRef;
     if (!current) {
       return;
@@ -4585,10 +4606,10 @@ Check that all your Remotion packages are on the same version. If your dependenc
     mediaVolume: 1
   });
   warnAboutTooHighVolume(volume);
-  useImperativeHandle6(ref, () => {
+  useImperativeHandle7(ref, () => {
     return audioRef.current;
   }, []);
-  useEffect15(() => {
+  useEffect14(() => {
     if (!props.src) {
       throw new Error("No src passed");
     }
@@ -4632,7 +4653,7 @@ Check that all your Remotion packages are on the same version. If your dependenc
   ]);
   const { src } = props;
   const needsToRenderAudioTag = ref || _remotionInternalNeedsDurationCalculation;
-  useLayoutEffect7(() => {
+  useLayoutEffect8(() => {
     if (window.process?.env?.NODE_ENV === "test") {
       return;
     }
@@ -4892,7 +4913,7 @@ Check that all your Remotion packages are on the same version. If your dependenc
   }
 }, Fallback = () => {
   const { continueRender: continueRender2, delayRender: delayRender2 } = useDelayRender();
-  useEffect17(() => {
+  useEffect16(() => {
     const fallback = delayRender2("Waiting for Root component to unsuspend");
     return () => continueRender2(fallback);
   }, [continueRender2, delayRender2]);
@@ -4929,7 +4950,7 @@ Check that all your Remotion packages are on the same version. If your dependenc
     throw new Error("<Composition> mounted inside another composition. See https://remotion.dev/docs/wrong-composition-mount for help.");
   }
   const { folderName, parentName } = useContext29(FolderContext);
-  useEffect17(() => {
+  useEffect16(() => {
     if (!id) {
       throw new Error("No id for composition passed.");
     }
@@ -4968,7 +4989,7 @@ Check that all your Remotion packages are on the same version. If your dependenc
     registerComposition,
     unregisterComposition
   ]);
-  useEffect17(() => {
+  useEffect16(() => {
     window.dispatchEvent(new CustomEvent(PROPS_UPDATED_EXTERNALLY, {
       detail: {
         resetUnsaved: id
@@ -5066,7 +5087,7 @@ Check that all your Remotion packages are on the same version. If your dependenc
   if (!_propsValid) {
     throw new Error("typecheck error");
   }
-  useImperativeHandle7(ref, () => {
+  useImperativeHandle8(ref, () => {
     return imageRef.current;
   }, []);
   const actualSrc = usePreload(src);
@@ -5108,7 +5129,7 @@ Check that all your Remotion packages are on the same version. If your dependenc
   if (typeof window !== "undefined") {
     const isPremounting = Boolean(sequenceContext?.premounting);
     const isPostmounting = Boolean(sequenceContext?.postmounting);
-    useLayoutEffect8(() => {
+    useLayoutEffect9(() => {
       if (window.process?.env?.NODE_ENV === "test") {
         if (imageRef.current) {
           imageRef.current.src = actualSrc;
@@ -5233,7 +5254,7 @@ Check that all your Remotion packages are on the same version. If your dependenc
       return prevFolders.filter((p) => !(p.name === name && p.parent === parent));
     });
   }, []);
-  useImperativeHandle8(compositionsRef, () => {
+  useImperativeHandle9(compositionsRef, () => {
     return {
       getCompositions: () => currentcompositionsRef.current
     };
@@ -5326,7 +5347,7 @@ Check that all your Remotion packages are on the same version. If your dependenc
   `;
 }, REMOTION_STUDIO_CONTAINER_ELEMENT = "__remotion-studio-container", getPreviewDomElement = () => {
   return document.getElementById(REMOTION_STUDIO_CONTAINER_ELEMENT);
-}, Root = null, listeners, getRoot = () => {
+}, MaxMediaCacheSizeContext, Root = null, listeners, getRoot = () => {
   return Root;
 }, waitForRoot = (fn) => {
   if (Root) {
@@ -5367,7 +5388,7 @@ Check that all your Remotion packages are on the same version. If your dependenc
     value,
     children
   });
-}, RemotionRoot = ({
+}, RemotionRootContexts = ({
   children,
   numberOfAudioTags,
   logLevel,
@@ -5393,7 +5414,7 @@ Check that all your Remotion packages are on the same version. If your dependenc
       }
     };
   }, []);
-  useEffect18(() => {
+  useEffect17(() => {
     if (typeof __webpack_module__ !== "undefined") {
       if (__webpack_module__.hot) {
         __webpack_module__.hot.addStatusHandler((status) => {
@@ -5421,16 +5442,12 @@ Check that all your Remotion packages are on the same version. If your dependenc
             children: /* @__PURE__ */ jsx28(EditorPropsProvider, {
               children: /* @__PURE__ */ jsx28(PrefetchProvider, {
                 children: /* @__PURE__ */ jsx28(SequenceManagerProvider, {
-                  children: /* @__PURE__ */ jsx28(RenderAssetManagerProvider, {
-                    children: /* @__PURE__ */ jsx28(ResolveCompositionConfig, {
-                      children: /* @__PURE__ */ jsx28(SharedAudioContextProvider, {
-                        numberOfAudioTags,
-                        audioLatencyHint,
-                        children: /* @__PURE__ */ jsx28(DurationsContextProvider, {
-                          children: /* @__PURE__ */ jsx28(BufferingProvider, {
-                            children
-                          })
-                        })
+                  children: /* @__PURE__ */ jsx28(SharedAudioContextProvider, {
+                    numberOfAudioTags,
+                    audioLatencyHint,
+                    children: /* @__PURE__ */ jsx28(DurationsContextProvider, {
+                      children: /* @__PURE__ */ jsx28(BufferingProvider, {
+                        children
                       })
                     })
                   })
@@ -5532,7 +5549,7 @@ Check that all your Remotion packages are on the same version. If your dependenc
     mediaVolume: 1
   });
   warnAboutTooHighVolume(volume);
-  useEffect19(() => {
+  useEffect18(() => {
     if (!src) {
       throw new Error("No src passed");
     }
@@ -5589,7 +5606,7 @@ Check that all your Remotion packages are on the same version. If your dependenc
   }, [toneMapped, currentTime, src, transparent]);
   const [imageSrc, setImageSrc] = useState19(null);
   const { delayRender: delayRender2, continueRender: continueRender2 } = useDelayRender();
-  useLayoutEffect9(() => {
+  useLayoutEffect10(() => {
     if (!window.remotion_videoEnabled) {
       return;
     }
@@ -5692,7 +5709,7 @@ Check that all your Remotion packages are on the same version. If your dependenc
   ref,
   onVideoFrame
 }) => {
-  useEffect20(() => {
+  useEffect19(() => {
     const { current } = ref;
     if (!current) {
       return;
@@ -5829,7 +5846,7 @@ Check that all your Remotion packages are on the same version. If your dependenc
     duration,
     fps
   });
-  useImperativeHandle9(ref, () => {
+  useImperativeHandle10(ref, () => {
     return videoRef.current;
   }, []);
   useState20(() => playbackLogging({
@@ -5838,7 +5855,7 @@ Check that all your Remotion packages are on the same version. If your dependenc
     tag: "video",
     mountTime
   }));
-  useEffect21(() => {
+  useEffect20(() => {
     const { current } = videoRef;
     if (!current) {
       return;
@@ -5869,7 +5886,7 @@ Check that all your Remotion packages are on the same version. If your dependenc
   const currentOnDurationCallback = useRef16(onDuration);
   currentOnDurationCallback.current = onDuration;
   useEmitVideoFrame({ ref: videoRef, onVideoFrame });
-  useEffect21(() => {
+  useEffect20(() => {
     const { current } = videoRef;
     if (!current) {
       return;
@@ -5886,7 +5903,7 @@ Check that all your Remotion packages are on the same version. If your dependenc
       current.removeEventListener("loadedmetadata", onLoadedMetadata);
     };
   }, [src]);
-  useEffect21(() => {
+  useEffect20(() => {
     const { current } = videoRef;
     if (!current) {
       return;
@@ -6131,9 +6148,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 = React32.Children.toArray(children);
+  const childrenArray = React33.Children.toArray(children);
   return childrenArray.reduce((flatChildren, child) => {
-    if (child.type === React32.Fragment) {
+    if (child.type === React33.Fragment) {
       return flatChildren.concat(flattenChildren(child.props.children));
     }
     flatChildren.push(child);
@@ -6150,7 +6167,7 @@ Check that all your Remotion packages are on the same version. If your dependenc
     children
   });
 }, useRequireToBeInsideSeries = () => {
-  const isInsideSeries = React33.useContext(IsInsideSeriesContext);
+  const isInsideSeries = React34.useContext(IsInsideSeriesContext);
   if (!isInsideSeries) {
     throw new Error("This component must be inside a <Series /> component.");
   }
@@ -6464,7 +6481,7 @@ Check that all your Remotion packages are on the same version. If your dependenc
     mediaVolume: 1
   });
   warnAboutTooHighVolume(volume);
-  useEffect22(() => {
+  useEffect21(() => {
     if (!props2.src) {
       throw new Error("No src passed");
     }
@@ -6504,10 +6521,10 @@ Check that all your Remotion packages are on the same version. If your dependenc
     sequenceContext?.relativeFrom,
     audioStreamIndex
   ]);
-  useImperativeHandle10(ref, () => {
+  useImperativeHandle11(ref, () => {
     return videoRef.current;
   }, []);
-  useEffect22(() => {
+  useEffect21(() => {
     if (!window.remotion_videoEnabled) {
       return;
     }
@@ -6591,7 +6608,7 @@ Check that all your Remotion packages are on the same version. If your dependenc
   ]);
   const { src } = props2;
   if (environment.isRendering) {
-    useLayoutEffect10(() => {
+    useLayoutEffect11(() => {
       if (window.process?.env?.NODE_ENV === "test") {
         return;
       }
@@ -7061,9 +7078,10 @@ var init_esm = __esm(() => {
     OBJECTFIT_CONTAIN_CLASS_NAME: () => OBJECTFIT_CONTAIN_CLASS_NAME
   });
   injected = {};
+  MaxMediaCacheSizeContext = React26.createContext(null);
   listeners = [];
   MediaEnabledContext = createContext19(null);
-  CurrentScaleContext = React27.createContext(null);
+  CurrentScaleContext = React28.createContext(null);
   PreviewSizeContext = createContext20({
     setSize: () => {
       return;
@@ -7074,6 +7092,7 @@ var init_esm = __esm(() => {
   addSequenceStackTraces(OffthreadVideo);
   compositionSelectorRef = createRef3();
   Internals = {
+    MaxMediaCacheSizeContext,
     useUnsafeVideoConfig,
     useFrameForVolumeProp,
     useTimelinePosition,
@@ -7088,7 +7107,7 @@ var init_esm = __esm(() => {
     CompositionSetters,
     SequenceManager,
     SequenceVisibilityToggleContext,
-    RemotionRoot,
+    RemotionRootContexts,
     CompositionManagerProvider,
     useVideo,
     getRoot,
@@ -7129,7 +7148,7 @@ var init_esm = __esm(() => {
     resolveVideoConfig,
     useResolvedVideoConfig,
     resolveCompositionsRef,
-    ResolveCompositionConfig,
+    ResolveCompositionConfigInStudio,
     REMOTION_STUDIO_CONTAINER_ELEMENT,
     RenderAssetManager,
     persistCurrentFrame,
@@ -7166,7 +7185,8 @@ var init_esm = __esm(() => {
     useIsPlayerBuffering,
     TimelinePosition: exports_timeline_position_state,
     DelayRenderContextType,
-    TimelineContext
+    TimelineContext,
+    RenderAssetManagerProvider
   };
   PERCENTAGE = NUMBER + "%";
   IsInsideSeriesContext = createContext21(false);
@@ -7236,7 +7256,7 @@ __export(exports_esm, {
   Lottie: () => Lottie
 });
 import lottie from "lottie-web";
-import { useEffect as useEffect40, useRef as useRef36, useState as useState37 } from "react";
+import { useEffect as useEffect39, useRef as useRef36, useState as useState37 } from "react";
 import { jsx as jsx59 } from "react/jsx-runtime";
 var getLottieMetadata = (animationData) => {
   const width2 = animationData.w;
@@ -7308,14 +7328,14 @@ var getLottieMetadata = (animationData) => {
   onAnimationLoadedRef.current = onAnimationLoaded;
   const { delayRender, continueRender } = useDelayRender();
   const [handle] = useState37(() => delayRender("Waiting for Lottie animation to load"));
-  useEffect40(() => {
+  useEffect39(() => {
     return () => {
       continueRender(handle);
     };
   }, [handle, continueRender]);
   const frame = useCurrentFrame();
   currentFrameRef.current = frame;
-  useEffect40(() => {
+  useEffect39(() => {
     if (!containerRef.current) {
       return;
     }
@@ -7360,17 +7380,17 @@ var getLottieMetadata = (animationData) => {
     renderer,
     continueRender
   ]);
-  useEffect40(() => {
+  useEffect39(() => {
     if (animationRef.current && direction) {
       animationRef.current.setDirection(direction === "backward" ? -1 : 1);
     }
   }, [direction]);
-  useEffect40(() => {
+  useEffect39(() => {
     if (animationRef.current && playbackRate) {
       animationRef.current.setSpeed(playbackRate);
     }
   }, [playbackRate]);
-  useEffect40(() => {
+  useEffect39(() => {
     if (!animationRef.current) {
       return;
     }
@@ -8747,7 +8767,7 @@ var getDefaultConfig = () => {
 var twMerge = /* @__PURE__ */ createTailwindMerge(getDefaultConfig);
 
 // ../design/dist/esm/index.mjs
-import React7, { useEffect as useEffect23, useMemo as useMemo33, useState as useState21 } from "react";
+import React7, { useEffect as useEffect22, useMemo as useMemo33, useState as useState21 } from "react";
 
 // ../paths/dist/esm/index.mjs
 var cutLInstruction = ({
@@ -12888,7 +12908,7 @@ var extrudeAndTransformElement = (options) => {
 init_esm();
 import { jsx as jsx37, Fragment } from "react/jsx-runtime";
 import { jsx as jsx210, jsxs as jsxs3 } from "react/jsx-runtime";
-import { useEffect as useEffect24, useMemo as useMemo210, useRef as useRef18 } from "react";
+import { useEffect as useEffect23, useMemo as useMemo210, useRef as useRef18 } from "react";
 import { jsx as jsx38 } from "react/jsx-runtime";
 import { jsx as jsx43, jsxs as jsxs23 } from "react/jsx-runtime";
 import React42 from "react";
@@ -12898,7 +12918,7 @@ import { jsx as jsx73, jsxs as jsxs32 } from "react/jsx-runtime";
 import React52 from "react";
 import { jsx as jsx83 } from "react/jsx-runtime";
 import { jsx as jsx93 } from "react/jsx-runtime";
-import * as React34 from "react";
+import * as React342 from "react";
 import * as ReactDOM4 from "react-dom";
 import React9 from "react";
 import * as React62 from "react";
@@ -12934,20 +12954,20 @@ import ReactDOM3 from "react-dom";
 import { jsx as jsx192 } from "react/jsx-runtime";
 import * as React24 from "react";
 import * as React252 from "react";
-import * as React26 from "react";
+import * as React262 from "react";
 import { jsx as jsx202 } from "react/jsx-runtime";
 import * as React332 from "react";
 import * as React29 from "react";
 import { useState as useState112 } from "react";
-import * as React272 from "react";
-import * as React28 from "react";
+import * as React27 from "react";
+import * as React282 from "react";
 import * as React322 from "react";
-import * as React312 from "react";
+import * as React31 from "react";
 import * as React30 from "react";
 import { Fragment as Fragment52, jsx as jsx212, jsxs as jsxs4 } from "react/jsx-runtime";
 import { forwardRef as forwardRef132, createElement as createElement7 } from "react";
 import { forwardRef as forwardRef122, createElement as createElement6 } from "react";
-import * as React352 from "react";
+import * as React35 from "react";
 import { jsx as jsx223, jsxs as jsxs5 } from "react/jsx-runtime";
 import { jsx as jsx232 } from "react/jsx-runtime";
 import { jsx as jsx242 } from "react/jsx-runtime";
@@ -12974,7 +12994,7 @@ var useHoverTransforms = (ref, disabled) => {
     isActive: false
   });
   const eventTarget = useMemo33(() => new EventTarget, []);
-  useEffect23(() => {
+  useEffect22(() => {
     if (disabled) {
       eventTarget.dispatchEvent(new Event("disabled"));
     } else {
@@ -13121,7 +13141,7 @@ var getAngle = (ref, coordinates) => {
 var lastCoordinates = null;
 var useMousePosition = (ref) => {
   const [angle, setAngle] = useState21(getAngle(ref.current, lastCoordinates));
-  useEffect23(() => {
+  useEffect22(() => {
     const element = ref.current;
     if (!element) {
       return;
@@ -13180,6 +13200,7 @@ var Outer = ({
   const depth = depthFromHover;
   const frontFace = reduceMatrices([
     translateZ(-depth / 2 + depthFromClick),
+    translateZ(1.1),
     transformation
   ]);
   const centerOriented = reduceMatrices([
@@ -13241,7 +13262,7 @@ var Spinner = ({ size, duration }) => {
     };
   }, [size]);
   const pathsRef = useRef18([]);
-  useEffect24(() => {
+  useEffect23(() => {
     const animate = () => {
       const now = performance.now();
       for (let index = 0;index < lines; index++) {
@@ -13321,7 +13342,7 @@ var Button = ({ children, className, disabled, depth, loading, ...buttonProps })
     ...buttonProps,
     children: [
       /* @__PURE__ */ jsx43("div", {
-        className: cn(loading && "invisible"),
+        className: cn(loading && "invisible", "inline-flex"),
         children
       }),
       loading ? /* @__PURE__ */ jsx43("div", {
@@ -16319,7 +16340,7 @@ function usePrevious(value) {
   }, [value]);
 }
 var NAME2 = "VisuallyHidden";
-var VisuallyHidden = React26.forwardRef((props, forwardedRef) => {
+var VisuallyHidden = React262.forwardRef((props, forwardedRef) => {
   return /* @__PURE__ */ jsx202(Primitive.span, {
     ...props,
     ref: forwardedRef,
@@ -16527,7 +16548,7 @@ function useCallbackRef2(initialValue, callback) {
   ref.callback = callback;
   return ref.facade;
 }
-var useIsomorphicLayoutEffect = typeof window !== "undefined" ? React272.useLayoutEffect : React272.useEffect;
+var useIsomorphicLayoutEffect = typeof window !== "undefined" ? React27.useLayoutEffect : React27.useEffect;
 var currentValues = new WeakMap;
 function useMergeRefs(refs, defaultValue) {
   var callbackRef = useCallbackRef2(defaultValue || null, function(newValue) {
@@ -16649,7 +16670,7 @@ var SideCar = function(_a) {
   if (!Target) {
     throw new Error("Sidecar medium not found");
   }
-  return React28.createElement(Target, __assign({}, rest));
+  return React282.createElement(Target, __assign({}, rest));
 };
 SideCar.isSideCarExport = true;
 function exportSidecar(medium, exported) {
@@ -16844,7 +16865,7 @@ var getCurrentUseCounter = function() {
   return isFinite(counter) ? counter : 0;
 };
 var useLockAttribute = function() {
-  React312.useEffect(function() {
+  React31.useEffect(function() {
     document.body.setAttribute(lockAttribute, (getCurrentUseCounter() + 1).toString());
     return function() {
       var newCounter = getCurrentUseCounter() - 1;
@@ -16859,10 +16880,10 @@ var useLockAttribute = function() {
 var RemoveScrollBar = function(_a) {
   var { noRelative, noImportant, gapMode: _b } = _a, gapMode = _b === undefined ? "margin" : _b;
   useLockAttribute();
-  var gap = React312.useMemo(function() {
+  var gap = React31.useMemo(function() {
     return getGapWidth(gapMode);
   }, [gapMode]);
-  return React312.createElement(Style, { styles: getStyles(gap, !noRelative, gapMode, !noImportant ? "!important" : "") });
+  return React31.createElement(Style, { styles: getStyles(gap, !noRelative, gapMode, !noImportant ? "!important" : "") });
 };
 var passiveSupported = false;
 if (typeof window !== "undefined") {
@@ -17163,9 +17184,9 @@ var Select = (props) => {
     required
   } = props;
   const popperScope = usePopperScope(__scopeSelect);
-  const [trigger, setTrigger] = React34.useState(null);
-  const [valueNode, setValueNode] = React34.useState(null);
-  const [valueNodeHasChildren, setValueNodeHasChildren] = React34.useState(false);
+  const [trigger, setTrigger] = React342.useState(null);
+  const [valueNode, setValueNode] = React342.useState(null);
+  const [valueNodeHasChildren, setValueNodeHasChildren] = React342.useState(false);
   const direction = useDirection(dir);
   const [open = false, setOpen] = useControllableState({
     prop: openProp,
@@ -17177,9 +17198,9 @@ var Select = (props) => {
     defaultProp: defaultValue,
     onChange: onValueChange
   });
-  const triggerPointerDownPosRef = React34.useRef(null);
+  const triggerPointerDownPosRef = React342.useRef(null);
   const isFormControl = trigger ? Boolean(trigger.closest("form")) : true;
-  const [nativeOptionsSet, setNativeOptionsSet] = React34.useState(/* @__PURE__ */ new Set);
+  const [nativeOptionsSet, setNativeOptionsSet] = React342.useState(/* @__PURE__ */ new Set);
   const nativeSelectKey = Array.from(nativeOptionsSet).map((option) => option.props.value).join(";");
   return /* @__PURE__ */ jsx212(Root22, { ...popperScope, children: /* @__PURE__ */ jsxs4(SelectProvider, {
     required,
@@ -17201,10 +17222,10 @@ var Select = (props) => {
     children: [
       /* @__PURE__ */ jsx212(Collection.Provider, { scope: __scopeSelect, children: /* @__PURE__ */ jsx212(SelectNativeOptionsProvider, {
         scope: props.__scopeSelect,
-        onNativeOptionAdd: React34.useCallback((option) => {
+        onNativeOptionAdd: React342.useCallback((option) => {
           setNativeOptionsSet((prev) => new Set(prev).add(option));
         }, []),
-        onNativeOptionRemove: React34.useCallback((option) => {
+        onNativeOptionRemove: React342.useCallback((option) => {
           setNativeOptionsSet((prev) => {
             const optionsSet = new Set(prev);
             optionsSet.delete(option);
@@ -17232,7 +17253,7 @@ var Select = (props) => {
 };
 Select.displayName = SELECT_NAME;
 var TRIGGER_NAME = "SelectTrigger";
-var SelectTrigger = React34.forwardRef((props, forwardedRef) => {
+var SelectTrigger = React342.forwardRef((props, forwardedRef) => {
   const { __scopeSelect, disabled = false, ...triggerProps } = props;
   const popperScope = usePopperScope(__scopeSelect);
   const context = useSelectContext(TRIGGER_NAME, __scopeSelect);
@@ -17300,7 +17321,7 @@ var SelectTrigger = React34.forwardRef((props, forwardedRef) => {
 });
 SelectTrigger.displayName = TRIGGER_NAME;
 var VALUE_NAME = "SelectValue";
-var SelectValue = React34.forwardRef((props, forwardedRef) => {
+var SelectValue = React342.forwardRef((props, forwardedRef) => {
   const { __scopeSelect, className, style, children, placeholder = "", ...valueProps } = props;
   const context = useSelectContext(VALUE_NAME, __scopeSelect);
   const { onValueNodeHasChildrenChange } = context;
@@ -17318,7 +17339,7 @@ var SelectValue = React34.forwardRef((props, forwardedRef) => {
 });
 SelectValue.displayName = VALUE_NAME;
 var ICON_NAME = "SelectIcon";
-var SelectIcon = React34.forwardRef((props, forwardedRef) => {
+var SelectIcon = React342.forwardRef((props, forwardedRef) => {
   const { __scopeSelect, children, ...iconProps } = props;
   return /* @__PURE__ */ jsx212(Primitive.span, { "aria-hidden": true, ...iconProps, ref: forwardedRef, children: children || "▼" });
 });
@@ -17329,9 +17350,9 @@ var SelectPortal = (props) => {
 };
 SelectPortal.displayName = PORTAL_NAME2;
 var CONTENT_NAME2 = "SelectContent";
-var SelectContent = React34.forwardRef((props, forwardedRef) => {
+var SelectContent = React342.forwardRef((props, forwardedRef) => {
   const context = useSelectContext(CONTENT_NAME2, props.__scopeSelect);
-  const [fragment, setFragment] = React34.useState();
+  const [fragment, setFragment] = React342.useState();
   useLayoutEffect22(() => {
     setFragment(new DocumentFragment);
   }, []);
@@ -17345,7 +17366,7 @@ SelectContent.displayName = CONTENT_NAME2;
 var CONTENT_MARGIN = 10;
 var [SelectContentProvider, useSelectContentContext] = createSelectContext(CONTENT_NAME2);
 var CONTENT_IMPL_NAME = "SelectContentImpl";
-var SelectContentImpl = React34.forwardRef((props, forwardedRef) => {
+var SelectContentImpl = React342.forwardRef((props, forwardedRef) => {
   const {
     __scopeSelect,
     position = "item-aligned",
@@ -17365,20 +17386,20 @@ var SelectContentImpl = React34.forwardRef((props, forwardedRef) => {
     ...contentProps
   } = props;
   const context = useSelectContext(CONTENT_NAME2, __scopeSelect);
-  const [content, setContent] = React34.useState(null);
-  const [viewport, setViewport] = React34.useState(null);
+  const [content, setContent] = React342.useState(null);
+  const [viewport, setViewport] = React342.useState(null);
   const composedRefs = useComposedRefs(forwardedRef, (node) => setContent(node));
-  const [selectedItem, setSelectedItem] = React34.useState(null);
-  const [selectedItemText, setSelectedItemText] = React34.useState(null);
+  const [selectedItem, setSelectedItem] = React342.useState(null);
+  const [selectedItemText, setSelectedItemText] = React342.useState(null);
   const getItems = useCollection(__scopeSelect);
-  const [isPositioned, setIsPositioned] = React34.useState(false);
-  const firstValidItemFoundRef = React34.useRef(false);
-  React34.useEffect(() => {
+  const [isPositioned, setIsPositioned] = React342.useState(false);
+  const firstValidItemFoundRef = React342.useRef(false);
+  React342.useEffect(() => {
     if (content)
       return hideOthers(content);
   }, [content]);
   useFocusGuards();
-  const focusFirst2 = React34.useCallback((candidates) => {
+  const focusFirst2 = React342.useCallback((candidates) => {
     const [firstItem, ...restItems] = getItems().map((item) => item.ref.current);
     const [lastItem] = restItems.slice(-1);
     const PREVIOUSLY_FOCUSED_ELEMENT = document.activeElement;
@@ -17395,14 +17416,14 @@ var SelectContentImpl = React34.forwardRef((props, forwardedRef) => {
         return;
     }
   }, [getItems, viewport]);
-  const focusSelectedItem = React34.useCallback(() => focusFirst2([selectedItem, content]), [focusFirst2, selectedItem, content]);
-  React34.useEffect(() => {
+  const focusSelectedItem = React342.useCallback(() => focusFirst2([selectedItem, content]), [focusFirst2, selectedItem, content]);
+  React342.useEffect(() => {
     if (isPositioned) {
       focusSelectedItem();
     }
   }, [isPositioned, focusSelectedItem]);
   const { onOpenChange, triggerPointerDownPosRef } = context;
-  React34.useEffect(() => {
+  React342.useEffect(() => {
     if (content) {
       let pointerMoveDelta = { x: 0, y: 0 };
       const handlePointerMove = (event) => {
@@ -17432,7 +17453,7 @@ var SelectContentImpl = React34.forwardRef((props, forwardedRef) => {
       };
     }
   }, [content, onOpenChange, triggerPointerDownPosRef]);
-  React34.useEffect(() => {
+  React342.useEffect(() => {
     const close = () => onOpenChange(false);
     window.addEventListener("blur", close);
     window.addEventListener("resize", close);
@@ -17449,7 +17470,7 @@ var SelectContentImpl = React34.forwardRef((props, forwardedRef) => {
       setTimeout(() => nextItem.ref.current.focus());
     }
   });
-  const itemRefCallback = React34.useCallback((node, value, disabled) => {
+  const itemRefCallback = React342.useCallback((node, value, disabled) => {
     const isFirstValidItem = !firstValidItemFoundRef.current && !disabled;
     const isSelectedItem = context.value !== undefined && context.value === value;
     if (isSelectedItem || isFirstValidItem) {
@@ -17458,8 +17479,8 @@ var SelectContentImpl = React34.forwardRef((props, forwardedRef) => {
         firstValidItemFoundRef.current = true;
     }
   }, [context.value]);
-  const handleItemLeave = React34.useCallback(() => content?.focus(), [content]);
-  const itemTextRefCallback = React34.useCallback((node, value, disabled) => {
+  const handleItemLeave = React342.useCallback(() => content?.focus(), [content]);
+  const itemTextRefCallback = React342.useCallback((node, value, disabled) => {
     const isFirstValidItem = !firstValidItemFoundRef.current && !disabled;
     const isSelectedItem = context.value !== undefined && context.value === value;
     if (isSelectedItem || isFirstValidItem) {
@@ -17554,18 +17575,18 @@ var SelectContentImpl = React34.forwardRef((props, forwardedRef) => {
 });
 SelectContentImpl.displayName = CONTENT_IMPL_NAME;
 var ITEM_ALIGNED_POSITION_NAME = "SelectItemAlignedPosition";
-var SelectItemAlignedPosition = React34.forwardRef((props, forwardedRef) => {
+var SelectItemAlignedPosition = React342.forwardRef((props, forwardedRef) => {
   const { __scopeSelect, onPlaced, ...popperProps } = props;
   const context = useSelectContext(CONTENT_NAME2, __scopeSelect);
   const contentContext = useSelectContentContext(CONTENT_NAME2, __scopeSelect);
-  const [contentWrapper, setContentWrapper] = React34.useState(null);
-  const [content, setContent] = React34.useState(null);
+  const [contentWrapper, setContentWrapper] = React342.useState(null);
+  const [content, setContent] = React342.useState(null);
   const composedRefs = useComposedRefs(forwardedRef, (node) => setContent(node));
   const getItems = useCollection(__scopeSelect);
-  const shouldExpandOnScrollRef = React34.useRef(false);
-  const shouldRepositionRef = React34.useRef(true);
+  const shouldExpandOnScrollRef = React342.useRef(false);
+  const shouldRepositionRef = React342.useRef(true);
   const { viewport, selectedItem, selectedItemText, focusSelectedItem } = contentContext;
-  const position = React34.useCallback(() => {
+  const position = React342.useCallback(() => {
     if (context.trigger && context.valueNode && contentWrapper && content && viewport && selectedItem && selectedItemText) {
       const triggerRect = context.trigger.getBoundingClientRect();
       const contentRect = content.getBoundingClientRect();
@@ -17646,12 +17667,12 @@ var SelectItemAlignedPosition = React34.forwardRef((props, forwardedRef) => {
     onPlaced
   ]);
   useLayoutEffect22(() => position(), [position]);
-  const [contentZIndex, setContentZIndex] = React34.useState();
+  const [contentZIndex, setContentZIndex] = React342.useState();
   useLayoutEffect22(() => {
     if (content)
       setContentZIndex(window.getComputedStyle(content).zIndex);
   }, [content]);
-  const handleScrollButtonChange = React34.useCallback((node) => {
+  const handleScrollButtonChange = React342.useCallback((node) => {
     if (node && shouldRepositionRef.current === true) {
       position();
       focusSelectedItem?.();
@@ -17685,7 +17706,7 @@ var SelectItemAlignedPosition = React34.forwardRef((props, forwardedRef) => {
 });
 SelectItemAlignedPosition.displayName = ITEM_ALIGNED_POSITION_NAME;
 var POPPER_POSITION_NAME = "SelectPopperPosition";
-var SelectPopperPosition = React34.forwardRef((props, forwardedRef) => {
+var SelectPopperPosition = React342.forwardRef((props, forwardedRef) => {
   const {
     __scopeSelect,
     align = "start",
@@ -17715,12 +17736,12 @@ var SelectPopperPosition = React34.forwardRef((props, forwardedRef) => {
 SelectPopperPosition.displayName = POPPER_POSITION_NAME;
 var [SelectViewportProvider, useSelectViewportContext] = createSelectContext(CONTENT_NAME2, {});
 var VIEWPORT_NAME = "SelectViewport";
-var SelectViewport = React34.forwardRef((props, forwardedRef) => {
+var SelectViewport = React342.forwardRef((props, forwardedRef) => {
   const { __scopeSelect, nonce, ...viewportProps } = props;
   const contentContext = useSelectContentContext(VIEWPORT_NAME, __scopeSelect);
   const viewportContext = useSelectViewportContext(VIEWPORT_NAME, __scopeSelect);
   const composedRefs = useComposedRefs(forwardedRef, contentContext.onViewportChange);
-  const prevScrollTopRef = React34.useRef(0);
+  const prevScrollTopRef = React342.useRef(0);
   return /* @__PURE__ */ jsxs4(Fragment52, { children: [
     /* @__PURE__ */ jsx212("style", {
       dangerouslySetInnerHTML: {
@@ -17769,14 +17790,14 @@ var SelectViewport = React34.forwardRef((props, forwardedRef) => {
 SelectViewport.displayName = VIEWPORT_NAME;
 var GROUP_NAME = "SelectGroup";
 var [SelectGroupContextProvider, useSelectGroupContext] = createSelectContext(GROUP_NAME);
-var SelectGroup = React34.forwardRef((props, forwardedRef) => {
+var SelectGroup = React342.forwardRef((props, forwardedRef) => {
   const { __scopeSelect, ...groupProps } = props;
   const groupId = useId();
   return /* @__PURE__ */ jsx212(SelectGroupContextProvider, { scope: __scopeSelect, id: groupId, children: /* @__PURE__ */ jsx212(Primitive.div, { role: "group", "aria-labelledby": groupId, ...groupProps, ref: forwardedRef }) });
 });
 SelectGroup.displayName = GROUP_NAME;
 var LABEL_NAME = "SelectLabel";
-var SelectLabel = React34.forwardRef((props, forwardedRef) => {
+var SelectLabel = React342.forwardRef((props, forwardedRef) => {
   const { __scopeSelect, ...labelProps } = props;
   const groupContext = useSelectGroupContext(LABEL_NAME, __scopeSelect);
   return /* @__PURE__ */ jsx212(Primitive.div, { id: groupContext.id, ...labelProps, ref: forwardedRef });
@@ -17784,7 +17805,7 @@ var SelectLabel = React34.forwardRef((props, forwardedRef) => {
 SelectLabel.displayName = LABEL_NAME;
 var ITEM_NAME = "SelectItem";
 var [SelectItemContextProvider, useSelectItemContext] = createSelectContext(ITEM_NAME);
-var SelectItem = React34.forwardRef((props, forwardedRef) => {
+var SelectItem = React342.forwardRef((props, forwardedRef) => {
   const {
     __scopeSelect,
     value,
@@ -17795,8 +17816,8 @@ var SelectItem = React34.forwardRef((props, forwardedRef) => {
   const context = useSelectContext(ITEM_NAME, __scopeSelect);
   const contentContext = useSelectContentContext(ITEM_NAME, __scopeSelect);
   const isSelected = context.value === value;
-  const [textValue, setTextValue] = React34.useState(textValueProp ?? "");
-  const [isFocused, setIsFocused] = React34.useState(false);
+  const [textValue, setTextValue] = React342.useState(textValueProp ?? "");
+  const [isFocused, setIsFocused] = React342.useState(false);
   const composedRefs = useComposedRefs(forwardedRef, (node) => contentContext.itemRefCallback?.(node, value, disabled));
   const textId = useId();
   const handleSelect = () => {
@@ -17814,7 +17835,7 @@ var SelectItem = React34.forwardRef((props, forwardedRef) => {
     disabled,
     textId,
     isSelected,
-    onItemTextChange: React34.useCallback((node) => {
+    onItemTextChange: React342.useCallback((node) => {
       setTextValue((prevTextValue) => prevTextValue || (node?.textContent ?? "").trim());
     }, []),
     children: /* @__PURE__ */ jsx212(Collection.ItemSlot, {
@@ -17863,16 +17884,16 @@ var SelectItem = React34.forwardRef((props, forwardedRef) => {
 });
 SelectItem.displayName = ITEM_NAME;
 var ITEM_TEXT_NAME = "SelectItemText";
-var SelectItemText = React34.forwardRef((props, forwardedRef) => {
+var SelectItemText = React342.forwardRef((props, forwardedRef) => {
   const { __scopeSelect, className, style, ...itemTextProps } = props;
   const context = useSelectContext(ITEM_TEXT_NAME, __scopeSelect);
   const contentContext = useSelectContentContext(ITEM_TEXT_NAME, __scopeSelect);
   const itemContext = useSelectItemContext(ITEM_TEXT_NAME, __scopeSelect);
   const nativeOptionsContext = useSelectNativeOptionsContext(ITEM_TEXT_NAME, __scopeSelect);
-  const [itemTextNode, setItemTextNode] = React34.useState(null);
+  const [itemTextNode, setItemTextNode] = React342.useState(null);
   const composedRefs = useComposedRefs(forwardedRef, (node) => setItemTextNode(node), itemContext.onItemTextChange, (node) => contentContext.itemTextRefCallback?.(node, itemContext.value, itemContext.disabled));
   const textContent = itemTextNode?.textContent;
-  const nativeOption = React34.useMemo(() => /* @__PURE__ */ jsx212("option", { value: itemContext.value, disabled: itemContext.disabled, children: textContent }, itemContext.value), [itemContext.disabled, itemContext.value, textContent]);
+  const nativeOption = React342.useMemo(() => /* @__PURE__ */ jsx212("option", { value: itemContext.value, disabled: itemContext.disabled, children: textContent }, itemContext.value), [itemContext.disabled, itemContext.value, textContent]);
   const { onNativeOptionAdd, onNativeOptionRemove } = nativeOptionsContext;
   useLayoutEffect22(() => {
     onNativeOptionAdd(nativeOption);
@@ -17885,17 +17906,17 @@ var SelectItemText = React34.forwardRef((props, forwardedRef) => {
 });
 SelectItemText.displayName = ITEM_TEXT_NAME;
 var ITEM_INDICATOR_NAME = "SelectItemIndicator";
-var SelectItemIndicator = React34.forwardRef((props, forwardedRef) => {
+var SelectItemIndicator = React342.forwardRef((props, forwardedRef) => {
   const { __scopeSelect, ...itemIndicatorProps } = props;
   const itemContext = useSelectItemContext(ITEM_INDICATOR_NAME, __scopeSelect);
   return itemContext.isSelected ? /* @__PURE__ */ jsx212(Primitive.span, { "aria-hidden": true, ...itemIndicatorProps, ref: forwardedRef }) : null;
 });
 SelectItemIndicator.displayName = ITEM_INDICATOR_NAME;
 var SCROLL_UP_BUTTON_NAME = "SelectScrollUpButton";
-var SelectScrollUpButton = React34.forwardRef((props, forwardedRef) => {
+var SelectScrollUpButton = React342.forwardRef((props, forwardedRef) => {
   const contentContext = useSelectContentContext(SCROLL_UP_BUTTON_NAME, props.__scopeSelect);
   const viewportContext = useSelectViewportContext(SCROLL_UP_BUTTON_NAME, props.__scopeSelect);
-  const [canScrollUp, setCanScrollUp] = React34.useState(false);
+  const [canScrollUp, setCanScrollUp] = React342.useState(false);
   const composedRefs = useComposedRefs(forwardedRef, viewportContext.onScrollButtonChange);
   useLayoutEffect22(() => {
     if (contentContext.viewport && contentContext.isPositioned) {
@@ -17923,10 +17944,10 @@ var SelectScrollUpButton = React34.forwardRef((props, forwardedRef) => {
 });
 SelectScrollUpButton.displayName = SCROLL_UP_BUTTON_NAME;
 var SCROLL_DOWN_BUTTON_NAME = "SelectScrollDownButton";
-var SelectScrollDownButton = React34.forwardRef((props, forwardedRef) => {
+var SelectScrollDownButton = React342.forwardRef((props, forwardedRef) => {
   const contentContext = useSelectContentContext(SCROLL_DOWN_BUTTON_NAME, props.__scopeSelect);
   const viewportContext = useSelectViewportContext(SCROLL_DOWN_BUTTON_NAME, props.__scopeSelect);
-  const [canScrollDown, setCanScrollDown] = React34.useState(false);
+  const [canScrollDown, setCanScrollDown] = React342.useState(false);
   const composedRefs = useComposedRefs(forwardedRef, viewportContext.onScrollButtonChange);
   useLayoutEffect22(() => {
     if (contentContext.viewport && contentContext.isPositioned) {
@@ -17954,18 +17975,18 @@ var SelectScrollDownButton = React34.forwardRef((props, forwardedRef) => {
   }) : null;
 });
 SelectScrollDownButton.displayName = SCROLL_DOWN_BUTTON_NAME;
-var SelectScrollButtonImpl = React34.forwardRef((props, forwardedRef) => {
+var SelectScrollButtonImpl = React342.forwardRef((props, forwardedRef) => {
   const { __scopeSelect, onAutoScroll, ...scrollIndicatorProps } = props;
   const contentContext = useSelectContentContext("SelectScrollButton", __scopeSelect);
-  const autoScrollTimerRef = React34.useRef(null);
+  const autoScrollTimerRef = React342.useRef(null);
   const getItems = useCollection(__scopeSelect);
-  const clearAutoScrollTimer = React34.useCallback(() => {
+  const clearAutoScrollTimer = React342.useCallback(() => {
     if (autoScrollTimerRef.current !== null) {
       window.clearInterval(autoScrollTimerRef.current);
       autoScrollTimerRef.current = null;
     }
   }, []);
-  React34.useEffect(() => {
+  React342.useEffect(() => {
     return () => clearAutoScrollTimer();
   }, [clearAutoScrollTimer]);
   useLayoutEffect22(() => {
@@ -17994,13 +18015,13 @@ var SelectScrollButtonImpl = React34.forwardRef((props, forwardedRef) => {
   });
 });
 var SEPARATOR_NAME = "SelectSeparator";
-var SelectSeparator = React34.forwardRef((props, forwardedRef) => {
+var SelectSeparator = React342.forwardRef((props, forwardedRef) => {
   const { __scopeSelect, ...separatorProps } = props;
   return /* @__PURE__ */ jsx212(Primitive.div, { "aria-hidden": true, ...separatorProps, ref: forwardedRef });
 });
 SelectSeparator.displayName = SEPARATOR_NAME;
 var ARROW_NAME2 = "SelectArrow";
-var SelectArrow = React34.forwardRef((props, forwardedRef) => {
+var SelectArrow = React342.forwardRef((props, forwardedRef) => {
   const { __scopeSelect, ...arrowProps } = props;
   const popperScope = usePopperScope(__scopeSelect);
   const context = useSelectContext(ARROW_NAME2, __scopeSelect);
@@ -18011,12 +18032,12 @@ SelectArrow.displayName = ARROW_NAME2;
 function shouldShowPlaceholder(value) {
   return value === "" || value === undefined;
 }
-var BubbleSelect = React34.forwardRef((props, forwardedRef) => {
+var BubbleSelect = React342.forwardRef((props, forwardedRef) => {
   const { value, ...selectProps } = props;
-  const ref = React34.useRef(null);
+  const ref = React342.useRef(null);
   const composedRefs = useComposedRefs(forwardedRef, ref);
   const prevValue = usePrevious(value);
-  React34.useEffect(() => {
+  React342.useEffect(() => {
     const select = ref.current;
     const selectProto = window.HTMLSelectElement.prototype;
     const descriptor = Object.getOwnPropertyDescriptor(selectProto, "value");
@@ -18032,9 +18053,9 @@ var BubbleSelect = React34.forwardRef((props, forwardedRef) => {
 BubbleSelect.displayName = "BubbleSelect";
 function useTypeaheadSearch(onSearchChange) {
   const handleSearchChange = useCallbackRef(onSearchChange);
-  const searchRef = React34.useRef("");
-  const timerRef = React34.useRef(0);
-  const handleTypeaheadSearch = React34.useCallback((key) => {
+  const searchRef = React342.useRef("");
+  const timerRef = React342.useRef(0);
+  const handleTypeaheadSearch = React342.useCallback((key) => {
     const search = searchRef.current + key;
     handleSearchChange(search);
     (function updateSearch(value) {
@@ -18044,11 +18065,11 @@ function useTypeaheadSearch(onSearchChange) {
         timerRef.current = window.setTimeout(() => updateSearch(""), 1000);
     })(search);
   }, [handleSearchChange]);
-  const resetTypeahead = React34.useCallback(() => {
+  const resetTypeahead = React342.useCallback(() => {
     searchRef.current = "";
     window.clearTimeout(timerRef.current);
   }, []);
-  React34.useEffect(() => {
+  React342.useEffect(() => {
     return () => window.clearTimeout(timerRef.current);
   }, []);
   return [searchRef, handleTypeaheadSearch, resetTypeahead];
@@ -18137,7 +18158,7 @@ var ChevronDown = createLucideIcon("ChevronDown", [
 var ChevronUp = createLucideIcon("ChevronUp", [["path", { d: "m18 15-6-6-6 6", key: "153udz" }]]);
 var Select2 = Root222;
 var SelectValue2 = Value;
-var SelectTrigger2 = React352.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs5(Trigger, {
+var SelectTrigger2 = React35.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs5(Trigger, {
   ref,
   className: cn("flex h-10 w-full items-center justify-between rounded-md border-black border-2 border-b-4 bg-card-bg px-3 py-5 text-sm ring-offset-background placeholder:text-muted-foreground focus:outline-hidden focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1 font-brand", className),
   ...props,
@@ -18152,7 +18173,7 @@ var SelectTrigger2 = React352.forwardRef(({ className, children, ...props }, ref
   ]
 }));
 SelectTrigger2.displayName = Trigger.displayName;
-var SelectScrollUpButton2 = React352.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx223(ScrollUpButton, {
+var SelectScrollUpButton2 = React35.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx223(ScrollUpButton, {
   ref,
   className: cn("flex cursor-default items-center justify-center py-1", className),
   ...props,
@@ -18161,7 +18182,7 @@ var SelectScrollUpButton2 = React352.forwardRef(({ className, ...props }, ref) =
   })
 }));
 SelectScrollUpButton2.displayName = ScrollUpButton.displayName;
-var SelectScrollDownButton2 = React352.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx223(ScrollDownButton, {
+var SelectScrollDownButton2 = React35.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx223(ScrollDownButton, {
   ref,
   className: cn("flex cursor-default items-center justify-center py-1", className),
   ...props,
@@ -18170,7 +18191,7 @@ var SelectScrollDownButton2 = React352.forwardRef(({ className, ...props }, ref)
   })
 }));
 SelectScrollDownButton2.displayName = ScrollDownButton.displayName;
-var SelectContent2 = React352.forwardRef(({ className, children, position = "popper", ...props }, ref) => /* @__PURE__ */ jsx223(Portal2, {
+var SelectContent2 = React35.forwardRef(({ className, children, position = "popper", ...props }, ref) => /* @__PURE__ */ jsx223(Portal2, {
   children: /* @__PURE__ */ jsxs5(Content2, {
     ref,
     className: cn(" border-2 border-black relative z-50 max-h-96 min-w-32 overflow-hidden rounded-md font-brand bg-card-bg text-text shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2", position === "popper" && "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1", className),
@@ -18187,13 +18208,13 @@ var SelectContent2 = React352.forwardRef(({ className, children, position = "pop
   })
 }));
 SelectContent2.displayName = Content2.displayName;
-var SelectLabel2 = React352.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx223(Label, {
+var SelectLabel2 = React35.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx223(Label, {
   ref,
   className: cn("py-1.5 pl-8 pr-2 text-sm font-semibold", className),
   ...props
 }));
 SelectLabel2.displayName = Label.displayName;
-var SelectItem2 = React352.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs5(Item, {
+var SelectItem2 = React35.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs5(Item, {
   ref,
   className: cn("relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-hidden focus:bg-slate-200 dark:focus:bg-white/10 data-disabled:pointer-events-none data-disabled:opacity-50 font-brand", className),
   ...props,
@@ -18212,7 +18233,7 @@ var SelectItem2 = React352.forwardRef(({ className, children, ...props }, ref) =
   ]
 }));
 SelectItem2.displayName = Item.displayName;
-var SelectSeparator2 = React352.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx223(Separator, {
+var SelectSeparator2 = React35.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx223(Separator, {
   ref,
   className: cn("-mx-1 my-1 h-px bg-muted", className),
   ...props
@@ -18242,7 +18263,7 @@ var Triangle2 = (props) => {
 };
 
 // src/components/homepage/FreePricing.tsx
-import React38, { useCallback as useCallback26, useMemo as useMemo41 } from "react";
+import React39, { useCallback as useCallback26, useMemo as useMemo41 } from "react";
 
 // ../../node_modules/.bun/tailwind-merge@2.5.2/node_modules/tailwind-merge/dist/bundle-mjs.mjs
 var CLASS_PART_SEPARATOR2 = "-";
@@ -19801,8 +19822,8 @@ var icon = {
   marginLeft: 4
 };
 var CompanyPricing = () => {
-  const [devSeatCount, setDevSeatCount] = React38.useState(1);
-  const [cloudRenders, setCloudRenders] = React38.useState(1000);
+  const [devSeatCount, setDevSeatCount] = React39.useState(1);
+  const [cloudRenders, setCloudRenders] = React39.useState(1000);
   const formatPrice = useCallback26((price) => {
     const formatter = new Intl.NumberFormat("en-US", {
       style: "currency",
@@ -20038,7 +20059,7 @@ var Pricing = () => {
 };
 
 // src/components/homepage/BackgroundAnimation.tsx
-import { useEffect as useEffect37 } from "react";
+import { useEffect as useEffect36 } from "react";
 import { jsx as jsx46, jsxs as jsxs11 } from "react/jsx-runtime";
 "use client";
 var rx = 0.2;
@@ -20064,7 +20085,7 @@ var BackgroundAnimation = () => {
       }
     }  
   `;
-  useEffect37(() => {
+  useEffect36(() => {
     const _style = document.createElement("style");
     _style.innerHTML = css;
     document.head.appendChild(_style);
@@ -20485,12 +20506,12 @@ init_esm();
 init_esm();
 import { jsx as jsx50, jsxs as jsxs14 } from "react/jsx-runtime";
 import { jsx as jsx213, jsxs as jsxs24, Fragment as Fragment6 } from "react/jsx-runtime";
-import React40 from "react";
+import React41 from "react";
 import { useContext as useContext210, useEffect as useEffect210, useState as useState35 } from "react";
-import { useContext as useContext40, useEffect as useEffect38 } from "react";
+import { useContext as useContext40, useEffect as useEffect37 } from "react";
 import { jsx as jsx310 } from "react/jsx-runtime";
 import { useCallback as useCallback27, useRef as useRef32 } from "react";
-import { useEffect as useEffect39, useState as useState210 } from "react";
+import { useEffect as useEffect38, useState as useState210 } from "react";
 import { useContext as useContext42, useEffect as useEffect62, useRef as useRef42 } from "react";
 import { useEffect as useEffect42 } from "react";
 import { useCallback as useCallback28, useContext as useContext37, useMemo as useMemo42, useRef as useRef24, useState as useState36 } from "react";
@@ -20500,7 +20521,7 @@ import {
   forwardRef as forwardRef26,
   useEffect as useEffect142,
   useImperativeHandle as useImperativeHandle22,
-  useLayoutEffect as useLayoutEffect14,
+  useLayoutEffect as useLayoutEffect15,
   useMemo as useMemo142,
   useRef as useRef112,
   useState as useState132
@@ -20511,7 +20532,7 @@ import React102, {
   useCallback as useCallback112,
   useContext as useContext62,
   useEffect as useEffect132,
-  useImperativeHandle as useImperativeHandle11,
+  useImperativeHandle as useImperativeHandle12,
   useMemo as useMemo122,
   useRef as useRef102,
   useState as useState113
@@ -20519,7 +20540,7 @@ import React102, {
 import { useCallback as useCallback82, useEffect as useEffect112, useMemo as useMemo92, useRef as useRef82, useState as useState102 } from "react";
 import { jsx as jsx45 } from "react/jsx-runtime";
 import { useCallback as useCallback52, useMemo as useMemo43, useRef as useRef52, useState as useState62 } from "react";
-import React37, { useCallback as useCallback42, useMemo as useMemo34, useState as useState52 } from "react";
+import React38, { useCallback as useCallback42, useMemo as useMemo34, useState as useState52 } from "react";
 import { jsx as jsx54, jsxs as jsxs33 } from "react/jsx-runtime";
 import { jsx as jsx64, jsxs as jsxs42 } from "react/jsx-runtime";
 import {
@@ -21514,8 +21535,8 @@ var calculateOuter = ({
     overflow: overflowVisible ? "visible" : "hidden"
   };
 };
-var PlayerEventEmitterContext = React40.createContext(undefined);
-var ThumbnailEmitterContext = React40.createContext(undefined);
+var PlayerEventEmitterContext = React41.createContext(undefined);
+var ThumbnailEmitterContext = React41.createContext(undefined);
 
 class PlayerEmitter {
   listeners = {
@@ -21633,7 +21654,7 @@ var useBufferStateEmitter = (emitter) => {
   if (!bufferManager) {
     throw new Error("BufferingContextReact not found");
   }
-  useEffect38(() => {
+  useEffect37(() => {
     const clear1 = bufferManager.listenForBuffering(() => {
       bufferManager.buffering.current = true;
       emitter.dispatchWaiting({});
@@ -21667,7 +21688,7 @@ var PlayerEmitterProvider = ({ children, currentPlaybackRate }) => {
 };
 var useHoverState = (ref, hideControlsWhenPointerDoesntMove) => {
   const [hovered, setHovered] = useState210(false);
-  useEffect39(() => {
+  useEffect38(() => {
     const { current } = ref;
     if (!current) {
       return;
@@ -22315,7 +22336,7 @@ var DefaultVolumeSlider = ({
       ...common
     };
   }, [isVertical]);
-  const randomId = typeof React37.useId === "undefined" ? "volume-slider" : React37.useId();
+  const randomId = typeof React38.useId === "undefined" ? "volume-slider" : React38.useId();
   const [randomClass] = useState52(() => `__remotion-volume-slider-${random(randomId)}`.replace(".", ""));
   const onVolumeChange = useCallback42((e) => {
     setVolume(parseFloat(e.target.value));
@@ -23599,7 +23620,7 @@ var PlayerUI = ({
       stopped = true;
     };
   }, [bufferStateDelayInMilliseconds, player.emitter]);
-  useImperativeHandle11(ref, () => {
+  useImperativeHandle12(ref, () => {
     const methods = {
       play: player.play,
       pause: () => {
@@ -23899,7 +23920,8 @@ var SharedPlayerContexts = ({
   initiallyMuted,
   logLevel,
   audioLatencyHint,
-  volumePersistenceKey
+  volumePersistenceKey,
+  inputProps
 }) => {
   const compositionManagerContext = useMemo132(() => {
     const context = {
@@ -23919,11 +23941,29 @@ var SharedPlayerContexts = ({
         }
       ],
       folders: [],
-      currentCompositionMetadata: null,
+      currentCompositionMetadata: {
+        defaultCodec: null,
+        defaultOutName: null,
+        defaultPixelFormat: null,
+        defaultProResProfile: null,
+        defaultVideoImageFormat: null,
+        durationInFrames,
+        fps,
+        height: compositionHeight,
+        width: compositionWidth,
+        props: inputProps
+      },
       canvasContent: { type: "composition", compositionId: "player-comp" }
     };
     return context;
-  }, [component, durationInFrames, compositionHeight, compositionWidth, fps]);
+  }, [
+    component,
+    durationInFrames,
+    compositionHeight,
+    compositionWidth,
+    fps,
+    inputProps
+  ]);
   const [mediaMuted, setMediaMuted] = useState122(() => initiallyMuted);
   const [mediaVolume, setMediaVolume] = useState122(() => getPreferredVolume(volumePersistenceKey ?? null));
   const mediaVolumeContextValue = useMemo132(() => {
@@ -23966,19 +24006,17 @@ var SharedPlayerContexts = ({
           value: timelineContext,
           children: /* @__PURE__ */ jsx133(Internals.CompositionManager.Provider, {
             value: compositionManagerContext,
-            children: /* @__PURE__ */ jsx133(Internals.ResolveCompositionConfig, {
-              children: /* @__PURE__ */ jsx133(Internals.PrefetchProvider, {
-                children: /* @__PURE__ */ jsx133(Internals.DurationsContextProvider, {
-                  children: /* @__PURE__ */ jsx133(Internals.MediaVolumeContext.Provider, {
-                    value: mediaVolumeContextValue,
-                    children: /* @__PURE__ */ jsx133(Internals.SetMediaVolumeContext.Provider, {
-                      value: setMediaVolumeContextValue,
-                      children: /* @__PURE__ */ jsx133(Internals.SharedAudioContextProvider, {
-                        numberOfAudioTags: numberOfSharedAudioTags,
-                        audioLatencyHint,
-                        children: /* @__PURE__ */ jsx133(Internals.BufferingProvider, {
-                          children
-                        })
+            children: /* @__PURE__ */ jsx133(Internals.PrefetchProvider, {
+              children: /* @__PURE__ */ jsx133(Internals.DurationsContextProvider, {
+                children: /* @__PURE__ */ jsx133(Internals.MediaVolumeContext.Provider, {
+                  value: mediaVolumeContextValue,
+                  children: /* @__PURE__ */ jsx133(Internals.SetMediaVolumeContext.Provider, {
+                    value: setMediaVolumeContextValue,
+                    children: /* @__PURE__ */ jsx133(Internals.SharedAudioContextProvider, {
+                      numberOfAudioTags: numberOfSharedAudioTags,
+                      audioLatencyHint,
+                      children: /* @__PURE__ */ jsx133(Internals.BufferingProvider, {
+                        children
                       })
                     })
                   })
@@ -24255,7 +24293,7 @@ var PlayerFn = ({
     };
   }, [setFrame]);
   if (typeof window !== "undefined") {
-    useLayoutEffect14(() => {
+    useLayoutEffect15(() => {
       Internals.CSSUtils.injectCSS(Internals.CSSUtils.makeDefaultPreviewCSS(`.${playerCssClassname(overrideInternalClassName)}`, "#fff"));
     }, [overrideInternalClassName]);
   }
@@ -24278,6 +24316,7 @@ var PlayerFn = ({
       logLevel,
       audioLatencyHint,
       volumePersistenceKey,
+      inputProps: actualInputProps,
       children: /* @__PURE__ */ jsx143(Internals.SetTimelineContext.Provider, {
         value: setTimelineContextValue,
         children: /* @__PURE__ */ jsx143(PlayerEmitterProvider, {
@@ -24525,6 +24564,7 @@ var ThumbnailFn = ({
       initiallyMuted: true,
       logLevel,
       audioLatencyHint: "playback",
+      inputProps: passedInputProps,
       children: /* @__PURE__ */ jsx163(ThumbnailEmitterContext.Provider, {
         value: emitter,
         children: /* @__PURE__ */ jsx163(ThumbnailUI_default, {
@@ -24548,7 +24588,7 @@ var Thumbnail = forward2(ThumbnailFn);
 // src/components/homepage/Demo/index.tsx
 import {
   useCallback as useCallback43,
-  useEffect as useEffect55,
+  useEffect as useEffect53,
   useMemo as useMemo53,
   useRef as useRef41,
   useState as useState47
@@ -25300,9 +25340,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 React41, { useContext as useContext41, useMemo as useMemo44 } from "react";
+import React43, { useContext as useContext41, useMemo as useMemo44 } from "react";
 import { jsx as jsx51 } from "react/jsx-runtime";
-var Context = React41.createContext(undefined);
+var Context = React43.createContext(undefined);
 var ColorModeProvider = ({
   children,
   colorMode,
@@ -25326,14 +25366,14 @@ function useColorMode() {
 
 // src/components/homepage/Demo/Comp.tsx
 init_esm();
-import { useCallback as useCallback36, useEffect as useEffect47, useMemo as useMemo48, useState as useState41 } from "react";
+import { useCallback as useCallback36, useEffect as useEffect46, useMemo as useMemo48, useState as useState41 } from "react";
 
 // src/components/homepage/Demo/Cards.tsx
 init_esm();
 import {
   createRef as createRef4,
   useCallback as useCallback35,
-  useEffect as useEffect46,
+  useEffect as useEffect45,
   useRef as useRef38,
   useState as useState40
 } from "react";
@@ -25704,14 +25744,14 @@ init_esm();
 import {
   forwardRef as forwardRef29,
   useCallback as useCallback33,
-  useEffect as useEffect45,
-  useImperativeHandle as useImperativeHandle13,
+  useEffect as useEffect43,
+  useImperativeHandle as useImperativeHandle14,
   useRef as useRef37
 } from "react";
 
 // src/components/homepage/Demo/DisplayedEmoji.tsx
 init_esm();
-import { useEffect as useEffect43, useMemo as useMemo46, useState as useState39 } from "react";
+import { useEffect as useEffect41, useMemo as useMemo46, useState as useState39 } from "react";
 import { jsx as jsx60 } from "react/jsx-runtime";
 var DisplayedEmoji = ({ emoji }) => {
   const [data, setData] = useState39(null);
@@ -25731,7 +25771,7 @@ var DisplayedEmoji = ({ emoji }) => {
     throw new Error("Unknown emoji");
   }, [emoji]);
   const [handle] = useState39(() => delayRender());
-  useEffect43(() => {
+  useEffect41(() => {
     Promise.all([
       fetch(src).then((res) => res.json()),
       Promise.resolve().then(() => (init_esm2(), exports_esm)).then(({ Lottie: Lottie2, getLottieMetadata: getLottieMetadata2 }) => ({
@@ -25749,7 +25789,7 @@ var DisplayedEmoji = ({ emoji }) => {
       cancelRender(err);
     });
   }, [handle, src, continueRender]);
-  useEffect43(() => {
+  useEffect41(() => {
     if (typeof document !== "undefined") {
       setBrowser(true);
     }
@@ -25845,7 +25885,7 @@ var EmojiCardRefFn = ({ emojiIndex }, ref) => {
       transforms: transforms.current
     });
   }, []);
-  useEffect45(() => {
+  useEffect43(() => {
     if (!ref1.current || !ref2.current || !ref3.current) {
       return;
     }
@@ -25856,13 +25896,13 @@ var EmojiCardRefFn = ({ emojiIndex }, ref) => {
       transforms: transforms.current
     });
   }, []);
-  useImperativeHandle13(ref, () => {
+  useImperativeHandle14(ref, () => {
     return {
       onLeft,
       onRight
     };
   }, [onLeft, onRight]);
-  useEffect45(() => {
+  useEffect43(() => {
     if (!ref1.current || !ref2.current || !ref3.current) {
       return;
     }
@@ -26284,7 +26324,7 @@ var Cards = ({
   const positions = useRef38(getInitialPositions());
   const shouldBePositions = useRef38(getInitialPositions());
   const { isRendering } = useRemotionEnvironment();
-  useEffect46(() => {
+  useEffect45(() => {
     const { current } = container4;
     if (!current) {
       return;
@@ -26397,7 +26437,7 @@ var HomepageVideoComp = ({
     }
     return sadAudio;
   }, [emoji]);
-  useEffect47(() => {
+  useEffect46(() => {
     const a = prefetch(fireAudio);
     const b = prefetch(partyHornAudio);
     const c = prefetch(sadAudio);
@@ -26445,7 +26485,7 @@ var DemoError = () => {
 };
 
 // src/components/homepage/Demo/DemoRender.tsx
-import React53, { useCallback as useCallback37 } from "react";
+import React55, { useCallback as useCallback37 } from "react";
 import { z } from "zod";
 
 // src/components/homepage/Demo/DemoErrorIcon.tsx
@@ -26643,7 +26683,7 @@ var style2 = {
   justifyContent: "center"
 };
 var RenderButton = ({ renderData, onError }) => {
-  const [state, setState] = React53.useState({
+  const [state, setState] = React55.useState({
     type: "idle"
   });
   const triggerRender = useCallback37(async () => {
@@ -26823,10 +26863,10 @@ var DragAndDropNudge = () => {
 
 // src/components/homepage/Demo/PlayerSeekBar.tsx
 init_esm();
-import { useCallback as useCallback39, useEffect as useEffect49, useMemo as useMemo51, useRef as useRef39, useState as useState45 } from "react";
+import { useCallback as useCallback39, useEffect as useEffect48, useMemo as useMemo51, useRef as useRef39, useState as useState45 } from "react";
 
 // src/components/homepage/layout/use-el-size.ts
-import { useCallback as useCallback38, useEffect as useEffect48, useMemo as useMemo50, useState as useState43 } from "react";
+import { useCallback as useCallback38, useEffect as useEffect47, useMemo as useMemo50, useState as useState43 } from "react";
 var useElementSize2 = (ref) => {
   const [size4, setSize] = useState43(null);
   const observer = useMemo50(() => {
@@ -26850,7 +26890,7 @@ var useElementSize2 = (ref) => {
       height: rect[0].height
     });
   }, [ref]);
-  useEffect48(() => {
+  useEffect47(() => {
     updateSize();
     if (!observer) {
       return;
@@ -26906,7 +26946,7 @@ var findBodyInWhichDivIsLocated2 = (div) => {
 };
 var useHoverState2 = (ref, hideControlsWhenPointerDoesntMove) => {
   const [hovered, setHovered] = useState45(false);
-  useEffect49(() => {
+  useEffect48(() => {
     const { current } = ref;
     if (!current) {
       return;
@@ -26957,7 +26997,7 @@ var PlayerSeekBar2 = ({
   const size4 = useElementSize2(containerRef.current);
   const [playing, setPlaying] = useState45(false);
   const [frame, setFrame] = useState45(0);
-  useEffect49(() => {
+  useEffect48(() => {
     const { current } = playerRef;
     if (!current) {
       return;
@@ -26970,7 +27010,7 @@ var PlayerSeekBar2 = ({
       current.removeEventListener("frameupdate", onFrameUpdate);
     };
   }, [playerRef]);
-  useEffect49(() => {
+  useEffect48(() => {
     const { current } = playerRef;
     if (!current) {
       return;
@@ -27031,7 +27071,7 @@ var PlayerSeekBar2 = ({
     }
     onSeekEnd();
   }, [dragging, onSeekEnd, playerRef]);
-  useEffect49(() => {
+  useEffect48(() => {
     if (!dragging.dragging) {
       return;
     }
@@ -27101,7 +27141,7 @@ var PlayerSeekBar2 = ({
 };
 
 // src/components/homepage/Demo/PlayerVolume.tsx
-import { useCallback as useCallback40, useEffect as useEffect50, useRef as useRef40, useState as useState46 } from "react";
+import { useCallback as useCallback40, useEffect as useEffect49, useRef as useRef40, useState as useState46 } from "react";
 
 // src/components/homepage/Demo/icons.tsx
 import { jsx as jsx90 } from "react/jsx-runtime";
@@ -27162,7 +27202,7 @@ var PlayerVolume = ({ playerRef }) => {
   const [muted, setIsMuted] = useState46(() => playerRef.current?.isMuted() ?? true);
   const [isHovered, setIsHovered] = useState46(false);
   const timerRef = useRef40(null);
-  useEffect50(() => {
+  useEffect49(() => {
     const { current } = playerRef;
     if (!current) {
       return;
@@ -27175,7 +27215,7 @@ var PlayerVolume = ({ playerRef }) => {
       current.removeEventListener("mutechange", onMutedChange);
     };
   }, [playerRef]);
-  useEffect50(() => {
+  useEffect49(() => {
     if (isHovered) {
       document.body.style.userSelect = "none";
     } else {
@@ -27220,7 +27260,7 @@ var PlayerVolume = ({ playerRef }) => {
 };
 
 // src/components/homepage/Demo/PlayPauseButton.tsx
-import React57, { useCallback as useCallback41, useEffect as useEffect51 } from "react";
+import React58, { useCallback as useCallback41, useEffect as useEffect50 } from "react";
 import { jsx as jsx95 } from "react/jsx-runtime";
 var playerButtonStyle2 = {
   appearance: "none",
@@ -27237,8 +27277,8 @@ var playerButtonStyle2 = {
   color: PALETTE.TEXT_COLOR
 };
 var PlayPauseButton = ({ playerRef }) => {
-  const [playing, setPlaying] = React57.useState(true);
-  useEffect51(() => {
+  const [playing, setPlaying] = React58.useState(true);
+  useEffect50(() => {
     const { current } = playerRef;
     if (!current) {
       return;
@@ -27275,7 +27315,7 @@ var PlayPauseButton = ({ playerRef }) => {
 };
 
 // src/components/homepage/Demo/TimeDisplay.tsx
-import React58, { useEffect as useEffect53 } from "react";
+import React59, { useEffect as useEffect51 } from "react";
 import { jsx as jsx97 } from "react/jsx-runtime";
 var formatTime2 = (timeInSeconds) => {
   const minutes = Math.floor(timeInSeconds / 60);
@@ -27283,8 +27323,8 @@ var formatTime2 = (timeInSeconds) => {
   return `${String(minutes)}:${String(seconds).padStart(2, "0")}`;
 };
 var TimeDisplay = ({ fps, playerRef }) => {
-  const [time, setTime] = React58.useState(0);
-  useEffect53(() => {
+  const [time, setTime] = React59.useState(0);
+  useEffect51(() => {
     const { current } = playerRef;
     if (!current) {
       return;
@@ -27362,7 +27402,7 @@ var PlayerControls = ({ playerRef, durationInFrames, fps, children }) => {
 };
 
 // src/components/homepage/Demo/ThemeNudge.tsx
-import React59 from "react";
+import React60 from "react";
 import { jsx as jsx99, jsxs as jsxs38 } from "react/jsx-runtime";
 var origWidth3 = 21;
 var scale3 = 0.4;
@@ -27384,7 +27424,7 @@ var Icon6 = () => {
 };
 var ThemeNudge = () => {
   const { colorMode, setColorMode } = useColorMode();
-  const toggleTheme = React59.useCallback((e) => {
+  const toggleTheme = React60.useCallback((e) => {
     e.preventDefault();
     setColorMode(colorMode === "dark" ? "light" : "dark");
   }, [colorMode, setColorMode]);
@@ -27455,7 +27495,7 @@ var Demo = () => {
   const [cardOrder, setCardOrder] = useState47([0, 1, 2, 3]);
   const [emojiIndex, setEmojiIndex] = useState47(0);
   const [error2, setError] = useState47(false);
-  useEffect55(() => {
+  useEffect53(() => {
     getDataAndProps().then((d2) => {
       setData(d2);
     }).catch((err) => {
@@ -27463,7 +27503,7 @@ var Demo = () => {
       setError(true);
     });
   }, []);
-  useEffect55(() => {
+  useEffect53(() => {
     const { current: playerRef } = ref;
     if (!playerRef || !data2) {
       return;
@@ -27597,16 +27637,16 @@ var ClearButton = (props) => {
 
 // src/components/homepage/MuxVideo.tsx
 import Hls2 from "hls.js";
-import { forwardRef as forwardRef31, useEffect as useEffect57, useImperativeHandle as useImperativeHandle14, useRef as useRef45 } from "react";
+import { forwardRef as forwardRef31, useEffect as useEffect56, useImperativeHandle as useImperativeHandle15, useRef as useRef45 } from "react";
 
 // src/components/homepage/VideoPlayerWithControls.tsx
 import Hls from "hls.js";
 import"plyr/dist/plyr.css";
-import { forwardRef as forwardRef30, useCallback as useCallback45, useEffect as useEffect56, useRef as useRef43, useState as useState48 } from "react";
+import { forwardRef as forwardRef30, useCallback as useCallback45, useEffect as useEffect55, useRef as useRef43, useState as useState48 } from "react";
 import { jsx as jsx105 } from "react/jsx-runtime";
 var useCombinedRefs = function(...refs) {
   const targetRef = useRef43(null);
-  useEffect56(() => {
+  useEffect55(() => {
     refs.forEach((ref) => {
       if (!ref)
         return;
@@ -27635,12 +27675,12 @@ var VideoPlayerWithControls = forwardRef30(({ playbackId, poster, currentTime, o
       console.error("Error getting img dimensions", event);
     }
   }, [onLoaded, onSize]);
-  useEffect56(() => {
+  useEffect55(() => {
     const img = new Image;
     img.onload = (evt) => onImageLoad(evt);
     img.src = poster;
   }, [onImageLoad, poster]);
-  useEffect56(() => {
+  useEffect55(() => {
     const video = videoRef.current;
     const src = `https://stream.mux.com/${playbackId}.m3u8`;
     let hls;
@@ -27683,7 +27723,7 @@ var VideoPlayerWithControls = forwardRef30(({ playbackId, poster, currentTime, o
       }
     };
   }, [playbackId, playerInitTime, videoError, videoRef]);
-  useEffect56(() => {
+  useEffect55(() => {
     const video = videoRef.current;
     if (currentTime && video) {
       video.currentTime = currentTime;
@@ -27709,8 +27749,8 @@ var getVideoToPlayUrl = (muxId) => {
 var MuxVideoForward = ({ muxId, ...props }, ref) => {
   const videoRef = useRef45(null);
   const vidUrl = getVideoToPlayUrl(muxId);
-  useImperativeHandle14(ref, () => videoRef.current, []);
-  useEffect57(() => {
+  useImperativeHandle15(ref, () => videoRef.current, []);
+  useEffect56(() => {
     let hls;
     if (videoRef.current) {
       const { current } = videoRef;
@@ -27823,11 +27863,11 @@ var EditorStarterSection = () => {
 var EditorStarterSection_default = EditorStarterSection;
 
 // src/components/homepage/EvaluateRemotion.tsx
-import { useEffect as useEffect58, useState as useState49 } from "react";
+import { useEffect as useEffect57, useState as useState49 } from "react";
 import { jsx as jsx109, jsxs as jsxs41 } from "react/jsx-runtime";
 var EvaluateRemotionSection = () => {
   const [dailyAvatars, setDailyAvatars] = useState49([]);
-  useEffect58(() => {
+  useEffect57(() => {
     const avatars = [
       "/img/freelancers/alex.jpeg",
       "/img/freelancers/antoine.jpeg",
@@ -27926,7 +27966,7 @@ var EvaluateRemotionSection = () => {
 var EvaluateRemotion_default = EvaluateRemotionSection;
 
 // src/components/homepage/IfYouKnowReact.tsx
-import { useEffect as useEffect59, useState as useState50 } from "react";
+import { useEffect as useEffect58, useState as useState50 } from "react";
 import { jsx as jsx110, jsxs as jsxs43 } from "react/jsx-runtime";
 var isWebkit = () => {
   if (typeof window === "undefined") {
@@ -27942,7 +27982,7 @@ var icon2 = {
 };
 var IfYouKnowReact = () => {
   const [vid, setVid] = useState50("/img/compose.webm");
-  useEffect59(() => {
+  useEffect58(() => {
     if (isWebkit()) {
       setVid("/img/compose.mp4");
     }
@@ -28089,7 +28129,7 @@ var NewsletterButton = () => {
 };
 
 // src/components/homepage/ParameterizeAndEdit.tsx
-import { useEffect as useEffect60, useRef as useRef46, useState as useState53 } from "react";
+import { useEffect as useEffect59, useRef as useRef46, useState as useState53 } from "react";
 import { jsx as jsx114, jsxs as jsxs46 } from "react/jsx-runtime";
 var icon3 = {
   height: 16,
@@ -28098,7 +28138,7 @@ var icon3 = {
 var ParameterizeAndEdit = () => {
   const ref = useRef46(null);
   const [vid, setVid] = useState53("/img/editing-vp9-chrome.webm");
-  useEffect60(() => {
+  useEffect59(() => {
     if (isWebkit()) {
       setVid("/img/editing-safari.mp4");
     }
@@ -28212,7 +28252,7 @@ var ParameterizeAndEdit = () => {
 };
 
 // src/components/homepage/RealMp4Videos.tsx
-import { useEffect as useEffect61, useRef as useRef47, useState as useState55 } from "react";
+import { useEffect as useEffect60, useRef as useRef47, useState as useState55 } from "react";
 import { jsx as jsx116, jsxs as jsxs47 } from "react/jsx-runtime";
 var icon4 = {
   height: 16,
@@ -28222,12 +28262,12 @@ var RealMP4Videos = () => {
   const ref = useRef47(null);
   const videoRef = useRef47(null);
   const [vid, setVid] = useState55("/img/render-progress.webm");
-  useEffect61(() => {
+  useEffect60(() => {
     if (isWebkit()) {
       setVid("/img/render-progress.mp4");
     }
   }, []);
-  useEffect61(() => {
+  useEffect60(() => {
     const { current } = ref;
     if (!current) {
       return;
@@ -28473,7 +28513,7 @@ var TrustedByBanner = () => {
 var TrustedByBanner_default = TrustedByBanner;
 
 // src/components/homepage/VideoAppsShowcase.tsx
-import { useEffect as useEffect63, useRef as useRef48, useState as useState56 } from "react";
+import { useEffect as useEffect61, useRef as useRef48, useState as useState56 } from "react";
 import { jsx as jsx118, jsxs as jsxs49 } from "react/jsx-runtime";
 var tabs = [
   "Music visualization",
@@ -28531,7 +28571,7 @@ var VideoAppsShowcase = () => {
   const [isPlaying, setIsPlaying] = useState56(false);
   const videoRef = useRef48(null);
   const containerRef = useRef48(null);
-  useEffect63(() => {
+  useEffect61(() => {
     const video = videoRef.current;
     if (video) {
       video.pause();