@remotion/promo-pages 4.0.458 → 4.0.460

package/dist/Homepage.js

@@ -971,6 +971,7 @@ import { createContext as createContext14 } from "react";
 import React12, { useCallback as useCallback5, useMemo as useMemo14, useRef as useRef6, useState as useState4 } from "react";
 import { jsx as jsx11 } from "react/jsx-runtime";
 import React13, { forwardRef as forwardRef2, useState as useState5, useContext as useContext15, useMemo as useMemo15 } from "react";
+import { createContext as createContext15 } from "react";
 import { jsx as jsx12 } from "react/jsx-runtime";
 import {
   forwardRef as forwardRef4,
@@ -984,7 +985,7 @@ import React15, { useCallback as useCallback6, useImperativeHandle, useRef as us
 import { jsx as jsx13 } from "react/jsx-runtime";
 import { jsx as jsx14 } from "react/jsx-runtime";
 import {
-  createContext as createContext15,
+  createContext as createContext16,
   forwardRef as forwardRef5,
   useCallback as useCallback7,
   useContext as useContext17,
@@ -996,7 +997,7 @@ import {
 import { jsx as jsx15 } from "react/jsx-runtime";
 import { useContext as useContext18, useLayoutEffect as useLayoutEffect5, useState as useState10 } from "react";
 import {
-  createContext as createContext16,
+  createContext as createContext17,
   useCallback as useCallback8,
   useImperativeHandle as useImperativeHandle3,
   useLayoutEffect as useLayoutEffect4,
@@ -1006,17 +1007,17 @@ import {
 } from "react";
 import { jsx as jsx16 } from "react/jsx-runtime";
 import { forwardRef as forwardRef8, useCallback as useCallback13, useContext as useContext30 } from "react";
-import React17, { createContext as createContext17, useMemo as useMemo19 } from "react";
+import React17, { createContext as createContext18, useMemo as useMemo19 } from "react";
 import { jsx as jsx17 } from "react/jsx-runtime";
 import { useContext as useContext19 } from "react";
-import { createContext as createContext18, useEffect as useEffect7, useState as useState11 } from "react";
+import { createContext as createContext19, useEffect as useEffect7, useState as useState11 } from "react";
 import { jsx as jsx18 } from "react/jsx-runtime";
-import { createContext as createContext19, useMemo as useMemo20, useReducer } from "react";
+import { createContext as createContext20, useMemo as useMemo20, useReducer } from "react";
 import { jsx as jsx19 } from "react/jsx-runtime";
 import React23, {
   forwardRef as forwardRef6,
   useContext as useContext28,
-  useEffect as useEffect15,
+  useEffect as useEffect14,
   useImperativeHandle as useImperativeHandle4,
   useMemo as useMemo28,
   useRef as useRef18,
@@ -1024,7 +1025,7 @@ import React23, {
 } from "react";
 import { useContext as useContext21, useLayoutEffect as useLayoutEffect6, useRef as useRef13 } from "react";
 import React20, {
-  createContext as createContext20,
+  createContext as createContext21,
   createRef as createRef2,
   useCallback as useCallback9,
   useContext as useContext20,
@@ -1032,15 +1033,15 @@ import React20, {
   useRef as useRef11,
   useState as useState12
 } from "react";
-import { useEffect as useEffect8, useMemo as useMemo21 } from "react";
+import { useMemo as useMemo21 } from "react";
 import { jsx as jsx20, jsxs as jsxs22 } from "react/jsx-runtime";
 import { useRef as useRef12 } from "react";
-import { useContext as useContext23, useEffect as useEffect9, useMemo as useMemo23, useState as useState13 } from "react";
+import { useContext as useContext23, useEffect as useEffect8, useMemo as useMemo23, useState as useState13 } from "react";
 import { useContext as useContext22 } from "react";
 import {
   useCallback as useCallback12,
   useContext as useContext26,
-  useEffect as useEffect13,
+  useEffect as useEffect12,
   useLayoutEffect as useLayoutEffect8,
   useRef as useRef17
 } from "react";
@@ -1049,7 +1050,7 @@ import { useContext as useContext25, useMemo as useMemo25 } from "react";
 import React21, {
   useCallback as useCallback10,
   useContext as useContext24,
-  useEffect as useEffect10,
+  useEffect as useEffect9,
   useLayoutEffect as useLayoutEffect7,
   useMemo as useMemo24,
   useRef as useRef14,
@@ -1057,15 +1058,15 @@ import React21, {
 } from "react";
 import { jsx as jsx21 } from "react/jsx-runtime";
 import React22 from "react";
-import { useEffect as useEffect11, useState as useState15 } from "react";
-import { useEffect as useEffect12, useRef as useRef16 } from "react";
-import { useEffect as useEffect14 } from "react";
-import { createContext as createContext21, useContext as useContext27, useMemo as useMemo27 } from "react";
+import { useEffect as useEffect10, useState as useState15 } from "react";
+import { useEffect as useEffect11, useRef as useRef16 } from "react";
+import { useEffect as useEffect13 } from "react";
+import { createContext as createContext22, useContext as useContext27, useMemo as useMemo27 } from "react";
 import { jsx as jsx222 } from "react/jsx-runtime";
 import {
   forwardRef as forwardRef7,
   useContext as useContext29,
-  useEffect as useEffect16,
+  useEffect as useEffect15,
   useImperativeHandle as useImperativeHandle5,
   useLayoutEffect as useLayoutEffect9,
   useMemo as useMemo29,
@@ -1096,17 +1097,16 @@ import {
 import { jsx as jsx27 } from "react/jsx-runtime";
 import React29 from "react";
 import { useMemo as useMemo32 } from "react";
-import { createContext as createContext22, useContext as useContext32, useMemo as useMemo31 } from "react";
+import { createContext as createContext23, useContext as useContext32, useMemo as useMemo31 } from "react";
 import { jsx as jsx28 } from "react/jsx-runtime";
 import { jsx as jsx29 } from "react/jsx-runtime";
 import React31 from "react";
-import React32, { createContext as createContext23 } from "react";
-import { useContext as useContext33 } from "react";
+import React32, { createContext as createContext24 } from "react";
 import { useCallback as useCallback18 } from "react";
 import {
   useCallback as useCallback17,
-  useContext as useContext34,
-  useEffect as useEffect17,
+  useContext as useContext33,
+  useEffect as useEffect16,
   useLayoutEffect as useLayoutEffect11,
   useMemo as useMemo33,
   useState as useState20
@@ -1114,29 +1114,29 @@ import {
 import { jsx as jsx30 } from "react/jsx-runtime";
 import React34, {
   forwardRef as forwardRef10,
-  useContext as useContext35,
-  useEffect as useEffect19,
+  useContext as useContext34,
+  useEffect as useEffect18,
   useImperativeHandle as useImperativeHandle8,
   useMemo as useMemo34,
   useRef as useRef22,
   useState as useState21
 } from "react";
-import { useEffect as useEffect18 } from "react";
+import { useEffect as useEffect17 } from "react";
 import { jsx as jsx31 } from "react/jsx-runtime";
 import { jsx as jsx32 } from "react/jsx-runtime";
 import React36, { useMemo as useMemo35 } from "react";
 import { jsx as jsx33 } from "react/jsx-runtime";
 import { Children, forwardRef as forwardRef11, useMemo as useMemo36 } from "react";
 import React37 from "react";
-import React38, { createContext as createContext24 } from "react";
+import React38, { createContext as createContext25 } from "react";
 import { jsx as jsx34 } from "react/jsx-runtime";
 import { jsx as jsx35 } from "react/jsx-runtime";
 import React40 from "react";
-import { forwardRef as forwardRef13, useCallback as useCallback19, useContext as useContext37 } from "react";
+import { forwardRef as forwardRef13, useCallback as useCallback19, useContext as useContext36 } from "react";
 import {
   forwardRef as forwardRef12,
-  useContext as useContext36,
-  useEffect as useEffect20,
+  useContext as useContext35,
+  useEffect as useEffect19,
   useImperativeHandle as useImperativeHandle9,
   useLayoutEffect as useLayoutEffect12,
   useMemo as useMemo37,
@@ -2673,7 +2673,7 @@ var getComponentsToAddStacksTo = () => componentsToAddStacksTo;
 var addSequenceStackTraces = (component) => {
   componentsToAddStacksTo.push(component);
 };
-var VERSION = "4.0.458";
+var VERSION = "4.0.460";
 var checkMultipleRemotionVersions = () => {
   if (typeof globalThis === "undefined") {
     return;
@@ -2892,6 +2892,9 @@ var sequenceSchemaDefaultLayoutNone = {
     default: "none"
   }
 };
+var nodePathToString = (nodePath) => {
+  return nodePath.join(".");
+};
 var SequenceManager = React12.createContext({
   registerSequence: () => {
     throw new Error("SequenceManagerContext not initialized");
@@ -2907,19 +2910,48 @@ var SequenceVisibilityToggleContext = React12.createContext({
     throw new Error("SequenceVisibilityToggle not initialized");
   }
 });
-var VisualModeOverridesContext = React12.createContext({
-  dragOverrides: {},
+var getCodeValues = (codeValues, nodePath) => {
+  const status = codeValues[nodePathToString(nodePath)];
+  if (!status) {
+    return;
+  }
+  if (!status.canUpdate) {
+    return;
+  }
+  return status.props;
+};
+var getIsJsxInMapCallback = (codeValues, nodePath) => {
+  const status = codeValues[nodePathToString(nodePath)];
+  if (!status) {
+    return false;
+  }
+  if (!status.canUpdate) {
+    return false;
+  }
+  return status.jsxInMapCallback;
+};
+var VisualModeGettersContext = React12.createContext({
+  getDragOverrides: () => {
+    throw new Error("VisualModeGettersContext not initialized");
+  },
+  getCodeValues: () => {
+    throw new Error("VisualModeGettersContext not initialized");
+  },
+  getIsJsxInMapCallback: () => {
+    throw new Error("VisualModeGettersContext not initialized");
+  },
+  visualModeEnabled: false
+});
+var VisualModeSettersContext = React12.createContext({
   setDragOverrides: () => {
-    throw new Error("VisualModeOverridesContext not initialized");
+    throw new Error("VisualModeSettersContext not initialized");
   },
   clearDragOverrides: () => {
-    throw new Error("VisualModeOverridesContext not initialized");
+    throw new Error("VisualModeSettersContext not initialized");
   },
-  codeValues: {},
   setCodeValues: () => {
-    throw new Error("VisualModeOverridesContext not initialized");
-  },
-  visualModeEnabled: false
+    throw new Error("VisualModeSettersContext not initialized");
+  }
 });
 var SequenceManagerProvider = ({ children, visualModeEnabled }) => {
   const [sequences, setSequences] = useState4([]);
@@ -2928,39 +2960,33 @@ var SequenceManagerProvider = ({ children, visualModeEnabled }) => {
   const controlOverridesRef = useRef6(dragOverrides);
   controlOverridesRef.current = dragOverrides;
   const [codeValues, setCodeValuesMapState] = useState4({});
-  const setDragOverrides = useCallback5((sequenceId, key, value) => {
+  const setDragOverrides = useCallback5((nodePath, key, value) => {
     setControlOverrides((prev) => ({
       ...prev,
-      [sequenceId]: {
-        ...prev[sequenceId],
+      [nodePathToString(nodePath)]: {
+        ...prev[nodePathToString(nodePath)],
         [key]: value
       }
     }));
   }, []);
-  const clearDragOverrides = useCallback5((sequenceId) => {
+  const clearDragOverrides = useCallback5((nodePath) => {
     setControlOverrides((prev) => {
-      if (!prev[sequenceId]) {
+      const key = nodePathToString(nodePath);
+      if (!prev[key]) {
         return prev;
       }
       const next = { ...prev };
-      delete next[sequenceId];
+      delete next[key];
       return next;
     });
   }, []);
-  const setCodeValues = useCallback5((sequenceId, values) => {
+  const setCodeValues = useCallback5((nodePath, values) => {
     setCodeValuesMapState((prev) => {
-      if (prev[sequenceId] === values) {
+      const key = nodePathToString(nodePath);
+      if (prev[key] === values) {
         return prev;
       }
-      if (values === null) {
-        if (!(sequenceId in prev)) {
-          return prev;
-        }
-        const next = { ...prev };
-        delete next[sequenceId];
-        return next;
-      }
-      return { ...prev, [sequenceId]: values };
+      return { ...prev, [key]: values };
     });
   }, []);
   const registerSequence = useCallback5((seq) => {
@@ -2984,30 +3010,31 @@ var SequenceManagerProvider = ({ children, visualModeEnabled }) => {
       setHidden
     };
   }, [hidden]);
-  const overrideContext = useMemo14(() => {
+  const gettersContext = useMemo14(() => {
     return {
       visualModeEnabled,
-      dragOverrides,
+      getDragOverrides: (nodePath) => dragOverrides[nodePathToString(nodePath)] ?? {},
+      getCodeValues: (nodePath) => getCodeValues(codeValues, nodePath),
+      getIsJsxInMapCallback: (nodePath) => getIsJsxInMapCallback(codeValues, nodePath)
+    };
+  }, [visualModeEnabled, dragOverrides, codeValues]);
+  const settersContext = useMemo14(() => {
+    return {
       setDragOverrides,
       clearDragOverrides,
-      codeValues,
       setCodeValues
     };
-  }, [
-    visualModeEnabled,
-    dragOverrides,
-    setDragOverrides,
-    clearDragOverrides,
-    codeValues,
-    setCodeValues
-  ]);
+  }, [setDragOverrides, clearDragOverrides, setCodeValues]);
   return /* @__PURE__ */ jsx11(SequenceManager.Provider, {
     value: sequenceContext,
     children: /* @__PURE__ */ jsx11(SequenceVisibilityToggleContext.Provider, {
       value: hiddenContext,
-      children: /* @__PURE__ */ jsx11(VisualModeOverridesContext.Provider, {
-        value: overrideContext,
-        children
+      children: /* @__PURE__ */ jsx11(VisualModeGettersContext.Provider, {
+        value: gettersContext,
+        children: /* @__PURE__ */ jsx11(VisualModeSettersContext.Provider, {
+          value: settersContext,
+          children
+        })
       })
     })
   });
@@ -3052,6 +3079,14 @@ var getFlatSchemaWithAllKeys = (schema) => {
   }
   return out;
 };
+var OverrideIdsToNodePathsGettersContext = createContext15({
+  overrideIdToNodePathMappings: {}
+});
+var OverrideIdsToNodePathsSettersContext = createContext15({
+  setOverrideIdToNodePath: () => {
+    throw new Error("OverrideIdsToNodePathsSettersContext not initialized");
+  }
+});
 var getEffectiveVisualModeValue = ({
   codeValue,
   runtimeValue,
@@ -3156,6 +3191,7 @@ var mergeValues = ({
   }
   return merged;
 };
+var stackToOverrideMap = {};
 var wrapInSchema = (Component, schema) => {
   if (typeof process === "undefined" || !process.env?.EXPERIMENTAL_VISUAL_MODE_ENABLED) {
     return Component;
@@ -3164,7 +3200,8 @@ var wrapInSchema = (Component, schema) => {
   const flatKeys = Object.keys(flatSchema);
   const Wrapped = forwardRef2((props, ref) => {
     const env = useRemotionEnvironment();
-    const { visualModeEnabled, dragOverrides, codeValues } = useContext15(VisualModeOverridesContext);
+    const { visualModeEnabled, getDragOverrides, getCodeValues: getCodeValues2 } = useContext15(VisualModeGettersContext);
+    const nodePathMapping = useContext15(OverrideIdsToNodePathsGettersContext);
     if (!env.isStudio || env.isReadOnlyStudio || env.isRendering || !visualModeEnabled) {
       return React13.createElement(Component, {
         ...props,
@@ -3178,7 +3215,20 @@ var wrapInSchema = (Component, schema) => {
         ref
       });
     }
-    const [overrideId] = useState5(() => String(Math.random()));
+    const [overrideId] = useState5(() => {
+      const { stack } = props;
+      if (!stack) {
+        return String(Math.random());
+      }
+      const existingOverrideId = stackToOverrideMap[stack];
+      if (existingOverrideId) {
+        return existingOverrideId;
+      }
+      const newOverrideId = String(Math.random());
+      stackToOverrideMap[stack] = newOverrideId;
+      return newOverrideId;
+    });
+    const nodePath = nodePathMapping.overrideIdToNodePathMappings[overrideId] ?? null;
     const runtimeValues = flatKeys.map((k) => getNestedValue(props, k));
     const currentRuntimeValueDotNotation = useMemo15(() => readValuesFromProps(props, flatKeys), runtimeValues);
     const controls = useMemo15(() => {
@@ -3192,10 +3242,15 @@ var wrapInSchema = (Component, schema) => {
       return computeEffectiveSchemaValuesDotNotation({
         schema,
         currentValue: currentRuntimeValueDotNotation,
-        overrideValues: dragOverrides[overrideId] ?? {},
-        propStatus: codeValues[overrideId]
+        overrideValues: nodePath === null ? {} : getDragOverrides(nodePath),
+        propStatus: nodePath === null ? undefined : getCodeValues2(nodePath)
       });
-    }, [currentRuntimeValueDotNotation, dragOverrides, overrideId, codeValues]);
+    }, [
+      currentRuntimeValueDotNotation,
+      getDragOverrides,
+      nodePath,
+      getCodeValues2
+    ]);
     const activeKeys = selectActiveKeys(schema, valuesDotNotation);
     const mergedProps = mergeValues({
       props,
@@ -3859,7 +3914,7 @@ var defaultOnPaint = ({
   const transform = ctx.drawElementImage(elementImage, 0, 0);
   element.style.transform = transform.toString();
 };
-var HtmlInCanvasAncestorContext = createContext15(false);
+var HtmlInCanvasAncestorContext = createContext16(false);
 var HtmlInCanvasInner = forwardRef5(({
   width,
   height,
@@ -4076,7 +4131,7 @@ var validateRenderAsset = (artifact) => {
   }
   validateContent(artifact.content);
 };
-var RenderAssetManager = createContext16({
+var RenderAssetManager = createContext17({
   registerRenderAsset: () => {
     return;
   },
@@ -4214,7 +4269,7 @@ var calculateMediaDuration = ({
   const actualDuration = duration / playbackRate;
   return Math.floor(actualDuration);
 };
-var LoopContext = createContext17(null);
+var LoopContext = createContext18(null);
 var useLoop = () => {
   return React17.useContext(LoopContext);
 };
@@ -4285,7 +4340,7 @@ var playbackLogging = ({
   const tags = [mountTime ? Date.now() - mountTime + "ms " : null, tag].filter(Boolean).join(" ");
   Log.trace({ logLevel, tag: null }, `[${tags}]`, message);
 };
-var PreloadContext = createContext18({});
+var PreloadContext = createContext19({});
 var preloads = {};
 var updaters = [];
 var setPreloads = (updater) => {
@@ -4606,7 +4661,7 @@ var durationReducer = (state, action) => {
       return state;
   }
 };
-var DurationsContext = createContext19({
+var DurationsContext = createContext20({
   durations: {},
   setDurations: () => {
     throw new Error("context missing");
@@ -4772,11 +4827,6 @@ var useSingletonAudioContext = ({
       gainNode
     };
   }, [logLevel, latencyHint, env.isRendering, audioEnabled]);
-  useEffect8(() => {
-    return () => {
-      context?.audioContext?.close();
-    };
-  }, [context]);
   return context;
 };
 var waitUntilActuallyResumed = (audioContext, logLevel) => {
@@ -4825,8 +4875,8 @@ var didPropChange = (key, newProp, prevProp) => {
   }
   return true;
 };
-var SharedAudioContext = createContext20(null);
-var SharedAudioTagsContext = createContext20(null);
+var SharedAudioContext = createContext21(null);
+var SharedAudioTagsContext = createContext21(null);
 var SharedAudioContextProvider = ({ children, audioLatencyHint, audioEnabled }) => {
   const logLevel = useLogLevel();
   const ctxAndGain = useSingletonAudioContext({
@@ -4871,8 +4921,9 @@ var SharedAudioContextProvider = ({ children, audioLatencyHint, audioEnabled })
       if (!ctxAndGain) {
         throw new Error("Audio context not found");
       }
+      const saveForLater = ctxAndGain.audioContext.state === "suspended" && !isResuming.current;
       if (duration > 0) {
-        if (ctxAndGain.audioContext.state === "suspended") {
+        if (saveForLater) {
           nodesToResume.current.set(node, {
             scheduledTime,
             offset,
@@ -4890,7 +4941,7 @@ var SharedAudioContextProvider = ({ children, audioLatencyHint, audioEnabled })
       const prev = prevEndTimes.current;
       const scheduledMismatch = prev.scheduledEndTime !== null && Math.abs(scheduledTime - prev.scheduledEndTime) > 0.001;
       const mediaMismatch = prev.mediaEndTime !== null && Math.abs(mediaTime - prev.mediaEndTime) > 0.001;
-      Log.verbose({ logLevel, tag: "audio-scheduling" }, "scheduled %c%s%c %s %c%s%c %s %c%s%c %s %s %s", scheduledMismatch ? "color: red; font-weight: bold" : "", scheduledTime.toFixed(4), "", scheduledEndTime.toFixed(4), mediaMismatch ? "color: red; font-weight: bold" : "", mediaTime.toFixed(4), "", mediaEndTime.toFixed(4), duration < 0 ? "color: red; font-weight: bold" : timeDiff < 0 ? "color: red; font-weight: bold" : "color: blue; font-weight: bold", duration < 0 ? "missed " + Math.abs(offset).toFixed(2) + "s" : Math.abs(timeDiff).toFixed(2) + (timeDiff < 0 ? " delay" : " ahead"), "", "current=" + currentTime.toFixed(4), "offset=" + offset.toFixed(4), "latency=" + latency.toFixed(4), "state=" + ctxAndGain.audioContext.state, originalUnloopedMediaTimestamp !== mediaTime ? "original_ts=" + originalUnloopedMediaTimestamp.toFixed(4) : "");
+      Log.verbose({ logLevel, tag: "audio-scheduling" }, "scheduled %c%s%c %s %c%s%c %s %c%s%c %s %s %s %s %s", scheduledMismatch ? "color: red; font-weight: bold" : "", scheduledTime.toFixed(4), "", scheduledEndTime.toFixed(4), mediaMismatch ? "color: red; font-weight: bold" : "", mediaTime.toFixed(4), "", mediaEndTime.toFixed(4), duration < 0 ? "color: red; font-weight: bold" : timeDiff < 0 ? "color: red; font-weight: bold" : "color: blue; font-weight: bold", duration < 0 ? "missed " + Math.abs(offset).toFixed(2) + "s" : Math.abs(timeDiff).toFixed(2) + (timeDiff < 0 ? " delay" : " ahead"), "", "current=" + currentTime.toFixed(4), "actualcurrent=" + ctxAndGain.audioContext.currentTime.toFixed(4), "offset=" + offset.toFixed(4), "latency=" + latency.toFixed(4), "state=" + ctxAndGain.audioContext.state, originalUnloopedMediaTimestamp !== mediaTime ? "original_ts=" + originalUnloopedMediaTimestamp.toFixed(4) : "", "action=" + (saveForLater ? "schedule" : "start"), "");
       prev.scheduledEndTime = scheduledEndTime;
       prev.mediaEndTime = mediaEndTime;
       return duration > 0 ? {
@@ -4910,6 +4961,13 @@ var SharedAudioContextProvider = ({ children, audioLatencyHint, audioEnabled })
       return Promise.resolve();
     }
     audioContextIsPlayingEventually.current = true;
+    ctxAndGain.gainNode.gain.cancelScheduledValues(ctxAndGain.audioContext.currentTime);
+    ctxAndGain.gainNode.gain.setValueAtTime(0, ctxAndGain.audioContext.currentTime);
+    ctxAndGain.gainNode.gain.linearRampToValueAtTime(1, ctxAndGain.audioContext.currentTime + 0.03);
+    nodesToResume.current.forEach((r, node) => {
+      node.start(r.scheduledTime, r.offset, r.duration);
+    });
+    nodesToResume.current.clear();
     const resumePromise = ctxAndGain.audioContext.resume();
     isResuming.current = new Promise((resolve) => {
       waitUntilActuallyResumed(ctxAndGain.audioContext, logLevel).then(resolve);
@@ -4920,11 +4978,6 @@ var SharedAudioContextProvider = ({ children, audioLatencyHint, audioEnabled })
     }).finally(() => {
       isResuming.current = null;
     });
-    ctxAndGain.gainNode.gain.cancelScheduledValues(ctxAndGain.audioContext.currentTime);
-    ctxAndGain.gainNode.gain.setValueAtTime(0, ctxAndGain.audioContext.currentTime);
-    ctxAndGain.gainNode.gain.linearRampToValueAtTime(1, ctxAndGain.audioContext.currentTime + 0.03);
-    nodesToResume.current.forEach((r, node) => node.start(r.scheduledTime, r.offset, r.duration));
-    nodesToResume.current.clear();
     return resumePromise.catch(() => {});
   }, [ctxAndGain, logLevel]);
   const getIsResumingAudioContext = useCallback9(() => {
@@ -5507,7 +5560,7 @@ var useBasicMediaInTimeline = ({
       });
     }).join(",");
   }, [duration, mediaStartsAt, volume, mediaVolume]);
-  useEffect9(() => {
+  useEffect8(() => {
     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`);
     }
@@ -5570,7 +5623,7 @@ var useImageInTimeline = ({
     loop: false
   });
   const { isStudio } = useRemotionEnvironment();
-  useEffect9(() => {
+  useEffect8(() => {
     if (!src) {
       throw new Error("No src passed");
     }
@@ -5653,7 +5706,7 @@ var useMediaInTimeline = ({
     loop: false
   });
   const { isStudio } = useRemotionEnvironment();
-  useEffect9(() => {
+  useEffect8(() => {
     if (!src) {
       throw new Error("No src passed");
     }
@@ -5726,9 +5779,14 @@ var useBufferManager = (logLevel, mountTime) => {
         }
       };
     }
+    let unblocked = false;
     setBlocks((b) => [...b, block]);
     return {
       unblock: () => {
+        if (unblocked) {
+          return;
+        }
+        unblocked = true;
         setBlocks((b) => {
           const newArr = b.filter((bx) => bx !== block);
           if (newArr.length === b.length) {
@@ -5755,7 +5813,7 @@ var useBufferManager = (logLevel, mountTime) => {
       }
     };
   }, []);
-  useEffect10(() => {
+  useEffect9(() => {
     if (rendering) {
       return;
     }
@@ -5800,7 +5858,7 @@ var BufferingProvider = ({ children }) => {
 };
 var useIsPlayerBuffering = (bufferManager) => {
   const [isBuffering, setIsBuffering] = useState14(bufferManager.buffering.current);
-  useEffect10(() => {
+  useEffect9(() => {
     const onBuffer = () => {
       setIsBuffering(true);
     };
@@ -5822,18 +5880,30 @@ var useIsPlayerBuffering = (bufferManager) => {
 };
 var useBufferState = () => {
   const buffer = useContext25(BufferingContextReact);
+  const logLevel = useLogLevel();
   const addBlock = buffer ? buffer.addBlock : null;
   return useMemo25(() => ({
     delayPlayback: () => {
       if (!addBlock) {
         throw new Error("Tried to enable the buffering state, but a Remotion context was not found. This API can only be called in a component that was passed to the Remotion Player or a <Composition>. Or you might have experienced a version mismatch - run `npx remotion versions` and ensure all packages have the same version. This error is thrown by the buffer state https://remotion.dev/docs/player/buffer-state");
       }
+      Log.trace({ logLevel, tag: "[buffer-state]" }, "Adding buffer handle", new Error().stack);
       const { unblock } = addBlock({
         id: String(Math.random())
       });
-      return { unblock };
+      let unblocked = false;
+      return {
+        unblock: () => {
+          if (unblocked) {
+            return;
+          }
+          unblocked = true;
+          Log.trace({ logLevel, tag: "[buffer-state]" }, "Removing buffer handle");
+          unblock();
+        }
+      };
     }
-  }), [addBlock]);
+  }), [addBlock, logLevel]);
 };
 var isSafariWebkit = () => {
   const isSafari2 = /^((?!chrome|android).)*safari/i.test(window.navigator.userAgent);
@@ -5969,7 +6039,7 @@ var useMediaBuffering = ({
 }) => {
   const buffer = useBufferState();
   const [isBuffering, setIsBuffering] = useState15(false);
-  useEffect11(() => {
+  useEffect10(() => {
     let cleanupFns = [];
     const { current } = element;
     if (!current) {
@@ -6102,7 +6172,7 @@ var useRequestVideoCallbackTime = ({
   onVariableFpsVideoDetected
 }) => {
   const currentTime = useRef16(null);
-  useEffect12(() => {
+  useEffect11(() => {
     const { current } = mediaRef;
     if (current) {
       currentTime.current = {
@@ -6388,7 +6458,7 @@ var useMediaPlayback = ({
     return acceptableTimeshift ?? defaultAcceptableTimeshift;
   })();
   const isPlayerBuffering = useIsPlayerBuffering(buffering);
-  useEffect13(() => {
+  useEffect12(() => {
     if (mediaRef.current?.paused) {
       return;
     }
@@ -6433,7 +6503,7 @@ var useMediaPlayback = ({
       mediaRef.current.playbackRate = playbackRateToSet;
     }
   }, [mediaRef, playbackRate]);
-  useEffect13(() => {
+  useEffect12(() => {
     const tagName = mediaType === "audio" ? "<Html5Audio>" : "<Html5Video>";
     if (!mediaRef.current) {
       throw new Error(`No ${mediaType} ref found`);
@@ -6562,7 +6632,7 @@ var useMediaTag = ({
   const logLevel = useLogLevel();
   const mountTime = useMountTime();
   const env = useRemotionEnvironment();
-  useEffect14(() => {
+  useEffect13(() => {
     const tag = {
       id,
       play: (reason) => {
@@ -6601,11 +6671,11 @@ var useMediaTag = ({
     env.isPlayer
   ]);
 };
-var MediaVolumeContext = createContext21({
+var MediaVolumeContext = createContext22({
   mediaMuted: false,
   mediaVolume: 1
 });
-var SetMediaVolumeContext = createContext21({
+var SetMediaVolumeContext = createContext22({
   setMediaMuted: () => {
     throw new Error("default");
   },
@@ -6781,7 +6851,7 @@ var AudioForDevelopmentForwardRefFunction = (props, ref) => {
   }, [audioRef]);
   const currentOnDurationCallback = useRef18(onDuration);
   currentOnDurationCallback.current = onDuration;
-  useEffect15(() => {
+  useEffect14(() => {
     const { current } = audioRef;
     if (!current) {
       return;
@@ -6850,7 +6920,7 @@ var AudioForRenderingRefForwardingFunction = (props, ref) => {
   useImperativeHandle5(ref, () => {
     return audioRef.current;
   }, []);
-  useEffect16(() => {
+  useEffect15(() => {
     if (!props.src) {
       throw new Error("No src passed");
     }
@@ -7439,7 +7509,7 @@ var waitForRoot = (fn) => {
     listeners = listeners.filter((l) => l !== fn);
   };
 };
-var MediaEnabledContext = createContext22(null);
+var MediaEnabledContext = createContext23(null);
 var useVideoEnabled = () => {
   const context = useContext32(MediaEnabledContext);
   if (!context) {
@@ -7721,7 +7791,7 @@ var setupEnvVariables = () => {
   });
 };
 var CurrentScaleContext = React32.createContext(null);
-var PreviewSizeContext = createContext23({
+var PreviewSizeContext = createContext24({
   setSize: () => {
     return;
   },
@@ -7744,14 +7814,6 @@ var calculateScale = ({
   }
   return Number(previewSize);
 };
-var useSequenceControlOverride = (key) => {
-  const seqContext = useContext33(SequenceContext);
-  const { dragOverrides: overrides } = useContext33(VisualModeOverridesContext);
-  if (!seqContext) {
-    return;
-  }
-  return overrides[seqContext.id]?.[key];
-};
 var getOffthreadVideoSource = ({
   src,
   transparent,
@@ -7783,9 +7845,9 @@ var OffthreadVideoForRendering = ({
   const frame = useCurrentFrame();
   const volumePropsFrame = useFrameForVolumeProp(loopVolumeCurveBehavior);
   const videoConfig = useUnsafeVideoConfig();
-  const sequenceContext = useContext34(SequenceContext);
+  const sequenceContext = useContext33(SequenceContext);
   const mediaStartsAt = useMediaStartsAt();
-  const { registerRenderAsset, unregisterRenderAsset } = useContext34(RenderAssetManager);
+  const { registerRenderAsset, unregisterRenderAsset } = useContext33(RenderAssetManager);
   if (!src) {
     throw new TypeError("No `src` was passed to <OffthreadVideo>.");
   }
@@ -7804,7 +7866,7 @@ var OffthreadVideoForRendering = ({
     mediaVolume: 1
   });
   warnAboutTooHighVolume(volume);
-  useEffect17(() => {
+  useEffect16(() => {
     if (!src) {
       throw new Error("No src passed");
     }
@@ -7965,7 +8027,7 @@ var useEmitVideoFrame = ({
   ref,
   onVideoFrame
 }) => {
-  useEffect18(() => {
+  useEffect17(() => {
     const { current } = ref;
     if (!current) {
       return;
@@ -7997,7 +8059,7 @@ class MediaPlaybackError extends Error {
   }
 }
 var VideoForDevelopmentRefForwardingFunction = (props2, ref) => {
-  const context = useContext35(SharedAudioContext);
+  const context = useContext34(SharedAudioContext);
   if (!context) {
     throw new Error("SharedAudioContext not found");
   }
@@ -8053,8 +8115,8 @@ var VideoForDevelopmentRefForwardingFunction = (props2, ref) => {
   }
   const volumePropFrame = useFrameForVolumeProp(loopVolumeCurveBehavior ?? "repeat");
   const { fps, durationInFrames } = useVideoConfig();
-  const parentSequence = useContext35(SequenceContext);
-  const { hidden } = useContext35(SequenceVisibilityToggleContext);
+  const parentSequence = useContext34(SequenceContext);
+  const { hidden } = useContext34(SequenceVisibilityToggleContext);
   const logLevel = useLogLevel();
   const mountTime = useMountTime();
   const [timelineId] = useState21(() => String(Math.random()));
@@ -8129,7 +8191,7 @@ var VideoForDevelopmentRefForwardingFunction = (props2, ref) => {
     tag: "video",
     mountTime
   }));
-  useEffect19(() => {
+  useEffect18(() => {
     const { current } = videoRef;
     if (!current) {
       return;
@@ -8172,7 +8234,7 @@ var VideoForDevelopmentRefForwardingFunction = (props2, ref) => {
   const currentOnDurationCallback = useRef22(onDuration);
   currentOnDurationCallback.current = onDuration;
   useEmitVideoFrame({ ref: videoRef, onVideoFrame });
-  useEffect19(() => {
+  useEffect18(() => {
     const { current } = videoRef;
     if (!current) {
       return;
@@ -8189,7 +8251,7 @@ var VideoForDevelopmentRefForwardingFunction = (props2, ref) => {
       current.removeEventListener("loadedmetadata", onLoadedMetadata);
     };
   }, [src]);
-  useEffect19(() => {
+  useEffect18(() => {
     const { current } = videoRef;
     if (!current) {
       return;
@@ -8478,7 +8540,8 @@ var Internals = {
   VideoForPreview,
   CompositionManager,
   CompositionSetters,
-  VisualModeOverridesContext,
+  VisualModeGettersContext,
+  VisualModeSettersContext,
   SequenceManager,
   SequenceStackTracesUpdateContext,
   SequenceVisibilityToggleContext,
@@ -8487,7 +8550,6 @@ var Internals = {
   sequenceStyleSchema,
   flattenActiveSchema,
   getFlatSchemaWithAllKeys,
-  useSequenceControlOverride,
   RemotionRootContexts,
   CompositionManagerProvider,
   useVideo,
@@ -8580,7 +8642,9 @@ var Internals = {
   useMemoizedEffects,
   defineEffect,
   createDescriptor,
-  computeEffectiveSchemaValuesDotNotation
+  computeEffectiveSchemaValuesDotNotation,
+  OverrideIdsToNodePathsGettersContext,
+  OverrideIdsToNodePathsSettersContext
 };
 var NUMBER = "[-+]?\\d*\\.?\\d+";
 var PERCENTAGE = NUMBER + "%";
@@ -8618,7 +8682,7 @@ var flattenChildren = (children) => {
     return flatChildren;
   }, []);
 };
-var IsInsideSeriesContext = createContext24(false);
+var IsInsideSeriesContext = createContext25(false);
 var IsInsideSeriesContainer = ({ children }) => {
   return /* @__PURE__ */ jsx34(IsInsideSeriesContext.Provider, {
     value: true,
@@ -8660,9 +8724,6 @@ var SeriesInner = (props2) => {
         throw new TypeError(`The <Series /> component only accepts a list of <Series.Sequence /> components as its children, but got ${castedChild} instead`);
       }
       const debugInfo = `index = ${i}, duration = ${castedChild.props.durationInFrames}`;
-      if (!castedChild?.props.children) {
-        throw new TypeError(`A <Series.Sequence /> component (${debugInfo}) was detected to not have any children. Delete it to fix this error.`);
-      }
       const durationInFramesProp = castedChild.props.durationInFrames;
       const {
         durationInFrames,
@@ -9178,13 +9239,13 @@ var VideoForRenderingForwardFunction = ({
   const volumePropsFrame = useFrameForVolumeProp(loopVolumeCurveBehavior ?? "repeat");
   const videoConfig = useUnsafeVideoConfig();
   const videoRef = useRef23(null);
-  const sequenceContext = useContext36(SequenceContext);
+  const sequenceContext = useContext35(SequenceContext);
   const mediaStartsAt = useMediaStartsAt();
   const environment = useRemotionEnvironment();
   const logLevel = useLogLevel();
   const mountTime = useMountTime();
   const { delayRender: delayRender2, continueRender: continueRender2 } = useDelayRender();
-  const { registerRenderAsset, unregisterRenderAsset } = useContext36(RenderAssetManager);
+  const { registerRenderAsset, unregisterRenderAsset } = useContext35(RenderAssetManager);
   const id = useMemo37(() => `video-${random(props2.src ?? "")}-${sequenceContext?.cumulatedFrom}-${sequenceContext?.relativeFrom}-${sequenceContext?.durationInFrames}`, [
     props2.src,
     sequenceContext?.cumulatedFrom,
@@ -9200,7 +9261,7 @@ var VideoForRenderingForwardFunction = ({
     mediaVolume: 1
   });
   warnAboutTooHighVolume(volume);
-  useEffect20(() => {
+  useEffect19(() => {
     if (!props2.src) {
       throw new Error("No src passed");
     }
@@ -9243,7 +9304,7 @@ var VideoForRenderingForwardFunction = ({
   useImperativeHandle9(ref, () => {
     return videoRef.current;
   }, []);
-  useEffect20(() => {
+  useEffect19(() => {
     if (!window.remotion_videoEnabled) {
       return;
     }
@@ -9394,7 +9455,7 @@ var VideoForwardingFunction = (props2, ref) => {
   if (environment.isClientSideRendering) {
     throw new Error("<Html5Video> is not supported in @remotion/web-renderer. Use <Video> from @remotion/media instead. See https://remotion.dev/docs/client-side-rendering/limitations");
   }
-  const { durations, setDurations } = useContext37(DurationsContext);
+  const { durations, setDurations } = useContext36(DurationsContext);
   if (typeof ref === "string") {
     throw new Error("string refs are not supported");
   }
@@ -11287,7 +11348,7 @@ var getDefaultConfig = () => {
 var twMerge = /* @__PURE__ */ createTailwindMerge(getDefaultConfig);
 
 // ../design/dist/esm/index.mjs
-import React33, { useEffect as useEffect21, useMemo as useMemo41, useState as useState23 } from "react";
+import React33, { useEffect as useEffect20, useMemo as useMemo41, useState as useState23 } from "react";
 
 // ../paths/dist/esm/index.mjs
 var cutLInstruction = ({
@@ -15882,7 +15943,7 @@ var useHoverTransforms = (ref, disabled) => {
     isActive: false
   });
   const eventTarget = useMemo41(() => new EventTarget, []);
-  useEffect21(() => {
+  useEffect20(() => {
     if (disabled) {
       eventTarget.dispatchEvent(new Event("disabled"));
     } else {
@@ -16029,7 +16090,7 @@ var getAngle = (ref, coordinates) => {
 var lastCoordinates = null;
 var useMousePosition = (ref) => {
   const [angle, setAngle] = useState23(getAngle(ref.current, lastCoordinates));
-  useEffect21(() => {
+  useEffect20(() => {
     const element = ref.current;
     if (!element) {
       return;
@@ -24265,7 +24326,7 @@ var Pricing = () => {
 };
 
 // src/components/homepage/BackgroundAnimation.tsx
-import { useEffect as useEffect40 } from "react";
+import { useEffect as useEffect41 } from "react";
 import { jsx as jsx49, jsxs as jsxs10 } from "react/jsx-runtime";
 "use client";
 var rx = 0.2;
@@ -24291,7 +24352,7 @@ var BackgroundAnimation = () => {
       }
     }  
   `;
-  useEffect40(() => {
+  useEffect41(() => {
     const _style = document.createElement("style");
     _style.innerHTML = css;
     document.head.appendChild(_style);
@@ -24397,7 +24458,7 @@ var InstallsPerMonth = () => {
         },
         children: [
           /* @__PURE__ */ jsx50(StatItemContent, {
-            content: "1.4M",
+            content: "3M",
             width: "100px",
             fontSize: "2.5rem",
             fontWeight: "bold"
@@ -24419,7 +24480,7 @@ var InstallsPerMonth = () => {
         ]
       }),
       /* @__PURE__ */ jsx50(StatItemContent, {
-        content: "installs per month",
+        content: "installs",
         width: "75%",
         fontSize: "1.0rem",
         fontWeight: "bold"
@@ -24505,7 +24566,7 @@ var GitHubStars = () => {
             width: "45px"
           }),
           /* @__PURE__ */ jsx50(StatItemContent, {
-            content: "45k",
+            content: "46k",
             width: "80px",
             fontSize: "2.5rem",
             fontWeight: "bold"
@@ -24697,16 +24758,16 @@ var CommunityStats_default = CommunityStats;
 import { jsx as jsx56, jsxs as jsxs13 } from "react/jsx-runtime";
 import { jsx as jsx214, jsxs as jsxs24, Fragment as Fragment11 } from "react/jsx-runtime";
 import React56 from "react";
-import { useContext as useContext210, useEffect as useEffect41, useState as useState40 } from "react";
-import { useContext as useContext44, useLayoutEffect as useLayoutEffect17 } from "react";
+import { useContext as useContext210, useEffect as useEffect42, useState as useState40 } from "react";
+import { useContext as useContext43, useLayoutEffect as useLayoutEffect17 } from "react";
 import { jsx as jsx313 } from "react/jsx-runtime";
 import { useCallback as useCallback34, useRef as useRef42 } from "react";
-import { useEffect as useEffect210, useState as useState24 } from "react";
+import { useEffect as useEffect24, useState as useState24 } from "react";
 import { useLayoutEffect as useLayoutEffect23 } from "react";
-import { useContext as useContext45, useEffect as useEffect52, useRef as useRef52 } from "react";
+import { useContext as useContext44, useEffect as useEffect52, useRef as useRef52 } from "react";
 import { useEffect as useEffect310, useRef as useRef310 } from "react";
-import { useCallback as useCallback24, useContext as useContext39, useMemo as useMemo51, useRef as useRef26, useState as useState310 } from "react";
-import { useEffect as useEffect42, useRef as useRef43 } from "react";
+import { useCallback as useCallback24, useContext as useContext38, useMemo as useMemo51, useRef as useRef26, useState as useState310 } from "react";
+import { useEffect as useEffect43, useRef as useRef43 } from "react";
 import { useCallback as useCallback35, useEffect as useEffect62, useMemo as useMemo212, useState as useState42 } from "react";
 import {
   forwardRef as forwardRef210,
@@ -25991,7 +26052,7 @@ class ThumbnailEmitter {
   };
 }
 var useBufferStateEmitter = (emitter) => {
-  const bufferManager = useContext44(Internals.BufferingContextReact);
+  const bufferManager = useContext43(Internals.BufferingContextReact);
   if (!bufferManager) {
     throw new Error("BufferingContextReact not found");
   }
@@ -26016,7 +26077,7 @@ var PlayerEmitterProvider = ({ children, currentPlaybackRate }) => {
   if (!bufferManager) {
     throw new Error("BufferingContextReact not found");
   }
-  useEffect41(() => {
+  useEffect42(() => {
     if (currentPlaybackRate) {
       emitter.dispatchRateChange(currentPlaybackRate);
     }
@@ -26029,7 +26090,7 @@ var PlayerEmitterProvider = ({ children, currentPlaybackRate }) => {
 };
 var useHoverState = (ref, hideControlsWhenPointerDoesntMove) => {
   const [hovered, setHovered] = useState24(false);
-  useEffect210(() => {
+  useEffect24(() => {
     const { current } = ref;
     if (!current) {
       return;
@@ -26074,21 +26135,21 @@ var usePlayer = () => {
   const playStart = useRef26(frame);
   const setFrame = Internals.Timeline.useTimelineSetFrame();
   const setTimelinePosition = Internals.Timeline.useTimelineSetFrame();
-  const audioContext = useContext39(Internals.SharedAudioContext);
-  const audioTagsContext = useContext39(Internals.SharedAudioTagsContext);
+  const audioContext = useContext38(Internals.SharedAudioContext);
+  const audioTagsContext = useContext38(Internals.SharedAudioTagsContext);
   const { audioAndVideoTags } = Internals.useTimelineContext();
   const frameRef = useRef26(frame);
   frameRef.current = frame;
   const video = Internals.useVideo();
   const config = Internals.useUnsafeVideoConfig();
-  const emitter = useContext39(PlayerEventEmitterContext);
+  const emitter = useContext38(PlayerEventEmitterContext);
   const lastFrame = (config?.durationInFrames ?? 1) - 1;
   const isLastFrame = frame === lastFrame;
   const isFirstFrame = frame === 0;
   if (!emitter) {
     throw new TypeError("Expected Player event emitter context");
   }
-  const bufferingContext = useContext39(Internals.BufferingContextReact);
+  const bufferingContext = useContext38(Internals.BufferingContextReact);
   if (!bufferingContext) {
     throw new Error("Missing the buffering context. Most likely you have a Remotion version mismatch.");
   }
@@ -26390,7 +26451,7 @@ var getIsBackgrounded = () => {
 };
 var useIsBackgrounded = () => {
   const isBackgrounded = useRef43(getIsBackgrounded());
-  useEffect42(() => {
+  useEffect43(() => {
     const onVisibilityChange = () => {
       isBackgrounded.current = getIsBackgrounded();
     };
@@ -26407,17 +26468,18 @@ var setGlobalTimeAnchor = ({
   audioSyncAnchor,
   absoluteTimeInSeconds,
   globalPlaybackRate,
-  logLevel
+  logLevel,
+  force
 }) => {
   const newAnchor = audioContext.currentTime - absoluteTimeInSeconds / globalPlaybackRate;
   const shift4 = (newAnchor - audioSyncAnchor.value) * globalPlaybackRate;
   const { outputLatency } = audioContext;
   const safeOutputLatency = outputLatency === 0 ? 0.3 : outputLatency;
   const latency = audioContext.baseLatency + safeOutputLatency;
-  if (Math.abs(shift4) < ALLOWED_GLOBAL_TIME_ANCHOR_SHIFT + latency) {
+  if (Math.abs(shift4) < ALLOWED_GLOBAL_TIME_ANCHOR_SHIFT + latency && !force) {
     return false;
   }
-  Internals.Log.verbose({ logLevel, tag: "audio-scheduling" }, "Anchor changed from %s to %s with shift %s", audioSyncAnchor.value, newAnchor, shift4);
+  Internals.Log.verbose({ logLevel, tag: "audio-scheduling" }, "Anchor " + (force ? "forcibly " : "") + "changed from %s to %s with shift %s", audioSyncAnchor.value, newAnchor, shift4);
   audioSyncAnchor.value = newAnchor;
   return true;
 };
@@ -26435,11 +26497,11 @@ var usePlayback = ({
   const frame = Internals.Timeline.useTimelinePosition();
   const { playing, pause, emitter, isPlaying } = usePlayer();
   const setFrame = Internals.Timeline.useTimelineSetFrame();
-  const sharedAudioContext = useContext45(Internals.SharedAudioContext);
+  const sharedAudioContext = useContext44(Internals.SharedAudioContext);
   const logLevel = Internals.useLogLevel();
   const isBackgroundedRef = useIsBackgrounded();
   const lastTimeUpdateTimestamp = useRef52(0);
-  const context = useContext45(Internals.BufferingContextReact);
+  const context = useContext44(Internals.BufferingContextReact);
   if (!context) {
     throw new Error("Missing the buffering context. Most likely you have a Remotion version mismatch.");
   }
@@ -26458,17 +26520,56 @@ var usePlayback = ({
     if (!config) {
       return;
     }
+    if (muted) {
+      return;
+    }
     const changed = setGlobalTimeAnchor({
       audioContext: sharedAudioContext.audioContext,
       audioSyncAnchor: sharedAudioContext.audioSyncAnchor,
       absoluteTimeInSeconds: frame / config.fps,
       globalPlaybackRate: playbackRate,
-      logLevel
+      logLevel,
+      force: false
     });
     if (changed) {
       sharedAudioContext.audioSyncAnchorEmitter.dispatch("changed");
     }
-  }, [config, frame, logLevel, playbackRate, sharedAudioContext]);
+  }, [config, frame, logLevel, playbackRate, sharedAudioContext, muted]);
+  useLayoutEffect23(() => {
+    const audioContext = sharedAudioContext?.audioContext;
+    if (!audioContext) {
+      return;
+    }
+    if (!config) {
+      return;
+    }
+    if (muted) {
+      return;
+    }
+    const callback = () => {
+      if (audioContext.state !== "running") {
+        setGlobalTimeAnchor({
+          audioContext,
+          audioSyncAnchor: sharedAudioContext.audioSyncAnchor,
+          absoluteTimeInSeconds: getCurrentFrame() / config.fps,
+          globalPlaybackRate: playbackRate,
+          logLevel,
+          force: true
+        });
+      }
+    };
+    audioContext?.addEventListener("statechange", callback);
+    return () => {
+      audioContext?.removeEventListener("statechange", callback);
+    };
+  }, [
+    config,
+    getCurrentFrame,
+    logLevel,
+    muted,
+    playbackRate,
+    sharedAudioContext
+  ]);
   useEffect52(() => {
     if (!config) {
       return;
@@ -26502,7 +26603,7 @@ var usePlayback = ({
         sharedAudioContext?.suspend?.();
         return;
       }
-      if (!muted) {
+      if (!muted && !context.buffering.current) {
         sharedAudioContext?.resume?.();
       }
       const time = performance.now() - startedTime;
@@ -26520,7 +26621,7 @@ var usePlayback = ({
         shouldLoop: loop
       });
       framesAdvanced += framesToAdvance;
-      if (nextFrame !== getCurrentFrame() && (!hasEnded || moveToBeginningWhenEnded)) {
+      if (nextFrame !== getCurrentFrame() && (!hasEnded || moveToBeginningWhenEnded) && !context.buffering.current) {
         setFrame((c) => ({ ...c, [config.id]: nextFrame }));
       }
       if (hasEnded) {
@@ -26535,27 +26636,16 @@ var usePlayback = ({
       const getIsResumingAudioContext = sharedAudioContext?.getIsResumingAudioContext?.() ?? null;
       if (getIsResumingAudioContext !== null && !muted) {
         getIsResumingAudioContext.then(() => {
-          if (!sharedAudioContext?.audioContext) {
-            return;
-          }
-          if (!sharedAudioContext.audioSyncAnchor) {
-            return;
-          }
-          setGlobalTimeAnchor({
-            audioContext: sharedAudioContext.audioContext,
-            audioSyncAnchor: sharedAudioContext.audioSyncAnchor,
-            absoluteTimeInSeconds: getCurrentFrame() / config.fps,
-            globalPlaybackRate: playbackRate,
-            logLevel
-          });
           startedTime = performance.now();
           framesAdvanced = 0;
           queueNextFrame();
         });
         return;
       }
-      if (context.buffering.current && !muted) {
-        sharedAudioContext?.suspend?.();
+      if (context.buffering.current) {
+        if (!muted) {
+          sharedAudioContext?.suspend?.();
+        }
         const stopListening = context.listenForResume(() => {
           stopListening.remove();
           startedTime = performance.now();
@@ -29077,7 +29167,7 @@ var Thumbnail = forward2(ThumbnailFn);
 // src/components/homepage/Demo/index.tsx
 import {
   useCallback as useCallback49,
-  useEffect as useEffect57,
+  useEffect as useEffect58,
   useMemo as useMemo64,
   useRef as useRef53,
   useState as useState56
@@ -29829,7 +29919,7 @@ 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 React57, { useContext as useContext46, useMemo as useMemo53 } from "react";
+import React57, { useContext as useContext45, useMemo as useMemo53 } from "react";
 import { jsx as jsx57 } from "react/jsx-runtime";
 var Context = React57.createContext(undefined);
 var ColorModeProvider = ({
@@ -29846,7 +29936,7 @@ var ColorModeProvider = ({
   });
 };
 function useColorMode() {
-  const context = useContext46(Context);
+  const context = useContext45(Context);
   if (context === null || context === undefined) {
     throw new Error("ColorModeProvider");
   }
@@ -29856,13 +29946,13 @@ function useColorMode() {
 // ../media/dist/esm/index.mjs
 import { useState as useState312 } from "react";
 import { useMemo as useMemo311 } from "react";
-import { useContext as useContext212, useEffect as useEffect43, useMemo as useMemo55, useRef as useRef44, useState as useState41 } from "react";
+import { useContext as useContext212, useEffect as useEffect44, useMemo as useMemo55, useRef as useRef44, useState as useState41 } from "react";
 import { ALL_FORMATS, Input as Input2, UrlSource } from "mediabunny";
 import { AudioBufferSink, InputDisposedError } from "mediabunny";
 import { CanvasSink } from "mediabunny";
-import { useContext as useContext48, useLayoutEffect as useLayoutEffect18 } from "react";
+import { useContext as useContext47, useLayoutEffect as useLayoutEffect18 } from "react";
 import { jsx as jsx58 } from "react/jsx-runtime";
-import { useContext as useContext311, useLayoutEffect as useLayoutEffect24, useMemo as useMemo213, useState as useState210 } from "react";
+import { useContext as useContext310, useLayoutEffect as useLayoutEffect24, useMemo as useMemo213, useState as useState210 } from "react";
 import React211 from "react";
 import {
   ALL_FORMATS as ALL_FORMATS2,
@@ -29878,8 +29968,8 @@ import { jsx as jsx216 } from "react/jsx-runtime";
 import { jsx as jsx315 } from "react/jsx-runtime";
 import { useMemo as useMemo63, useState as useState63 } from "react";
 import {
-  useContext as useContext47,
-  useEffect as useEffect212,
+  useContext as useContext46,
+  useEffect as useEffect210,
   useLayoutEffect as useLayoutEffect34,
   useMemo as useMemo412,
   useRef as useRef210,
@@ -30300,6 +30390,12 @@ var audioIteratorManager = ({
   let audioIteratorsCreated = 0;
   let totalAudioScheduledInSeconds = 0;
   let currentDelayHandle = null;
+  const unblockCurrentDelayHandle = () => {
+    if (currentDelayHandle) {
+      currentDelayHandle.unblock();
+      currentDelayHandle = null;
+    }
+  };
   const pendingScheduleWaiters = [];
   const notifyNodeScheduled = () => {
     for (let i = pendingScheduleWaiters.length - 1;i >= 0; i--) {
@@ -30400,6 +30496,7 @@ var audioIteratorManager = ({
     waitForTurn({
       getPriority: () => {
         if (iterator.isDestroyed()) {
+          onDestroyed();
           return null;
         }
         const guessedNextTimestamp = iterator.guessNextTimestamp();
@@ -30452,9 +30549,11 @@ var audioIteratorManager = ({
       },
       onError: (e) => {
         if (e instanceof InputDisposedError) {
+          onDestroyed();
           return;
         }
         if (e instanceof StaleWaiterError) {
+          onDestroyed();
           return;
         }
         throw e;
@@ -30480,6 +30579,7 @@ var audioIteratorManager = ({
       return;
     }
     audioBufferIterator?.destroy();
+    unblockCurrentDelayHandle();
     const delayHandle = delayPlaybackHandleIfNotPremounting();
     currentDelayHandle = delayHandle;
     const iterator = makeAudioIterator({
@@ -30494,6 +30594,7 @@ var audioIteratorManager = ({
     });
     audioIteratorsCreated++;
     audioBufferIterator = iterator;
+    let chunksScheduled = 0;
     proceedScheduling({
       iterator,
       nonce,
@@ -30501,7 +30602,10 @@ var audioIteratorManager = ({
       playbackRate,
       scheduleAudioNode,
       onScheduled: () => {
-        delayHandle.unblock();
+        chunksScheduled++;
+        if (chunksScheduled === 6) {
+          delayHandle.unblock();
+        }
       },
       onDestroyed: () => {
         delayHandle.unblock();
@@ -30529,6 +30633,9 @@ var audioIteratorManager = ({
     fps,
     getAudioContextCurrentTimeMockedInTest
   }) => {
+    if (nonce.isStale()) {
+      return;
+    }
     if (currentSeek.time === newTime && currentSeek.playbackRate === playbackRate && currentSeek.trimBefore === trimBefore && currentSeek.trimAfter === trimAfter && currentSeek.sequenceOffset === sequenceOffset && currentSeek.sequenceDurationInFrames === sequenceDurationInFrames && currentSeek.loop === loop && currentSeek.fps === fps) {
       return;
     }
@@ -30580,10 +30687,7 @@ var audioIteratorManager = ({
     destroyIterator: () => {
       audioBufferIterator?.destroy();
       audioBufferIterator = null;
-      if (currentDelayHandle) {
-        currentDelayHandle.unblock();
-        currentDelayHandle = null;
-      }
+      unblockCurrentDelayHandle();
     },
     seek: seek2,
     getAudioIteratorsCreated: () => audioIteratorsCreated,
@@ -31631,7 +31735,7 @@ var useCommonEffects = ({
   logLevel,
   label: label3
 }) => {
-  const sharedAudioContext = useContext48(Internals.SharedAudioContext);
+  const sharedAudioContext = useContext47(Internals.SharedAudioContext);
   useLayoutEffect18(() => {
     const mediaPlayer = mediaPlayerRef.current;
     if (!mediaPlayer)
@@ -31856,7 +31960,7 @@ var AudioForPreviewAssertedShowing = ({
     logLevel,
     label: "AudioForPreview"
   });
-  useEffect43(() => {
+  useEffect44(() => {
     if (!sharedAudioContext)
       return;
     if (!sharedAudioContext.audioContext)
@@ -33907,7 +34011,7 @@ var AudioForRendering2 = ({
   const frame = useCurrentFrame();
   const absoluteFrame = Internals.useTimelinePosition();
   const videoConfig = Internals.useUnsafeVideoConfig();
-  const { registerRenderAsset, unregisterRenderAsset } = useContext311(Internals.RenderAssetManager);
+  const { registerRenderAsset, unregisterRenderAsset } = useContext310(Internals.RenderAssetManager);
   const startsAt = Internals.useMediaStartsAt();
   const environment = useRemotionEnvironment();
   if (!videoConfig) {
@@ -33919,7 +34023,7 @@ var AudioForRendering2 = ({
   const { fps } = videoConfig;
   const { delayRender: delayRender2, continueRender } = useDelayRender();
   const [replaceWithHtml5Audio, setReplaceWithHtml5Audio] = useState210(false);
-  const sequenceContext = useContext311(Internals.SequenceContext);
+  const sequenceContext = useContext310(Internals.SequenceContext);
   const id = useMemo213(() => `media-audio-${random(src)}-${sequenceContext?.cumulatedFrom}-${sequenceContext?.relativeFrom}-${sequenceContext?.durationInFrames}`, [
     src,
     sequenceContext?.cumulatedFrom,
@@ -34272,7 +34376,7 @@ var VideoForPreviewAssertedShowing = ({
   const [shouldFallbackToNativeVideo, setShouldFallbackToNativeVideo] = useState43(false);
   const [playing] = Timeline2.usePlayingState();
   const { playbackRate: globalPlaybackRate } = Internals.usePlaybackRate();
-  const sharedAudioContext = useContext47(SharedAudioContext22);
+  const sharedAudioContext = useContext46(SharedAudioContext22);
   const buffer = useBufferState();
   const [mediaMuted] = useMediaMutedState22();
   const [mediaVolume] = useMediaVolumeState22();
@@ -34293,7 +34397,7 @@ var VideoForPreviewAssertedShowing = ({
   effectChainStateRef.current = effectChainState;
   const frameRef = useRef210(frame);
   frameRef.current = frame;
-  const parentSequence = useContext47(SequenceContext22);
+  const parentSequence = useContext46(SequenceContext22);
   const isPremounting = Boolean(parentSequence?.premounting);
   const isPostmounting = Boolean(parentSequence?.postmounting);
   const sequenceOffset = ((parentSequence?.cumulatedFrom ?? 0) + (parentSequence?.relativeFrom ?? 0)) / videoConfig.fps;
@@ -34301,7 +34405,7 @@ var VideoForPreviewAssertedShowing = ({
   const currentTimeRef = useRef210(currentTime);
   currentTimeRef.current = currentTime;
   const preloadedSrc = usePreload22(src);
-  const buffering = useContext47(Internals.BufferingContextReact);
+  const buffering = useContext46(Internals.BufferingContextReact);
   if (!buffering) {
     throw new Error("useMediaPlayback must be used inside a <BufferingContext>");
   }
@@ -34353,7 +34457,7 @@ var VideoForPreviewAssertedShowing = ({
       cacheVideoFrame(src, canvas);
     };
   }, [_experimentalInitiallyDrawCachedFrame, src]);
-  useEffect212(() => {
+  useEffect210(() => {
     if (!sharedAudioContext)
       return;
     if (!sharedAudioContext.audioContext)
@@ -35143,13 +35247,13 @@ var Video = Internals.wrapInSchema(VideoInner, videoSchema);
 Internals.addSequenceStackTraces(Video);
 
 // src/components/homepage/Demo/Comp.tsx
-import { useCallback as useCallback41, useEffect as useEffect49, useMemo as useMemo58, useState as useState48 } from "react";
+import { useCallback as useCallback41, useEffect as useEffect50, useMemo as useMemo58, useState as useState48 } from "react";
 
 // src/components/homepage/Demo/Cards.tsx
 import {
   createRef as createRef4,
   useCallback as useCallback40,
-  useEffect as useEffect48,
+  useEffect as useEffect49,
   useRef as useRef49,
   useState as useState47
 } from "react";
@@ -35517,14 +35621,14 @@ var CurrentCountry = ({ theme, countryPaths, countryLabel }) => {
 import {
   forwardRef as forwardRef35,
   useCallback as useCallback39,
-  useEffect as useEffect47,
+  useEffect as useEffect48,
   useImperativeHandle as useImperativeHandle12,
   useRef as useRef48
 } from "react";
 
 // ../lottie/dist/esm/index.mjs
 import lottie from "lottie-web";
-import { useEffect as useEffect45, useRef as useRef47, useState as useState44 } from "react";
+import { useEffect as useEffect46, useRef as useRef47, useState as useState44 } from "react";
 import { jsx as jsx69 } from "react/jsx-runtime";
 var getLottieMetadata = (animationData) => {
   const width2 = animationData.w;
@@ -35600,14 +35704,14 @@ var Lottie = ({
   onAnimationLoadedRef.current = onAnimationLoaded;
   const { delayRender: delayRender2, continueRender } = useDelayRender();
   const [handle] = useState44(() => delayRender2("Waiting for Lottie animation to load"));
-  useEffect45(() => {
+  useEffect46(() => {
     return () => {
       continueRender(handle);
     };
   }, [handle, continueRender]);
   const frame = useCurrentFrame();
   currentFrameRef.current = frame;
-  useEffect45(() => {
+  useEffect46(() => {
     if (!containerRef.current) {
       return;
     }
@@ -35652,17 +35756,17 @@ var Lottie = ({
     renderer,
     continueRender
   ]);
-  useEffect45(() => {
+  useEffect46(() => {
     if (animationRef.current && direction) {
       animationRef.current.setDirection(direction === "backward" ? -1 : 1);
     }
   }, [direction]);
-  useEffect45(() => {
+  useEffect46(() => {
     if (animationRef.current && playbackRate) {
       animationRef.current.setSpeed(playbackRate);
     }
   }, [playbackRate]);
-  useEffect45(() => {
+  useEffect46(() => {
     if (!animationRef.current) {
       return;
     }
@@ -35695,7 +35799,7 @@ var Lottie = ({
 };
 
 // src/components/homepage/Demo/DisplayedEmoji.tsx
-import { useEffect as useEffect46, useMemo as useMemo56, useState as useState46 } from "react";
+import { useEffect as useEffect47, useMemo as useMemo56, useState as useState46 } from "react";
 import { jsx as jsx70 } from "react/jsx-runtime";
 var DisplayedEmoji = ({ emoji }) => {
   const [data, setData] = useState46(null);
@@ -35715,7 +35819,7 @@ var DisplayedEmoji = ({ emoji }) => {
     throw new Error("Unknown emoji");
   }, [emoji]);
   const [handle] = useState46(() => delayRender2("Loading emojis!"));
-  useEffect46(() => {
+  useEffect47(() => {
     fetch(src).then((res) => res.json()).then((json) => {
       setData({
         duration: getLottieMetadata(json)?.durationInSeconds,
@@ -35726,7 +35830,7 @@ var DisplayedEmoji = ({ emoji }) => {
       cancelRender2(err);
     });
   }, [handle, src, continueRender, cancelRender2]);
-  useEffect46(() => {
+  useEffect47(() => {
     if (typeof document !== "undefined") {
       setBrowser(true);
     }
@@ -35822,7 +35926,7 @@ var EmojiCardRefFn = ({ emojiIndex }, ref) => {
       transforms: transforms.current
     });
   }, []);
-  useEffect47(() => {
+  useEffect48(() => {
     if (!ref1.current || !ref2.current || !ref3.current) {
       return;
     }
@@ -35839,7 +35943,7 @@ var EmojiCardRefFn = ({ emojiIndex }, ref) => {
       onRight
     };
   }, [onLeft, onRight]);
-  useEffect47(() => {
+  useEffect48(() => {
     if (!ref1.current || !ref2.current || !ref3.current) {
       return;
     }
@@ -36254,7 +36358,7 @@ var Cards = ({
   const positions = useRef49(getInitialPositions());
   const shouldBePositions = useRef49(getInitialPositions());
   const { isRendering } = useRemotionEnvironment();
-  useEffect48(() => {
+  useEffect49(() => {
     const { current } = container4;
     if (!current) {
       return;
@@ -36367,7 +36471,7 @@ var HomepageVideoComp = ({
     }
     return sadAudio;
   }, [emoji]);
-  useEffect49(() => {
+  useEffect50(() => {
     const a = prefetch(fireAudio);
     const b = prefetch(partyHornAudio);
     const c = prefetch(sadAudio);
@@ -36443,7 +36547,7 @@ import {
 import { BufferTarget, StreamTarget } from "mediabunny";
 
 // ../core/dist/esm/version.mjs
-var VERSION2 = "4.0.458";
+var VERSION2 = "4.0.460";
 
 // ../web-renderer/dist/esm/index.mjs
 import { AudioSample, VideoSample } from "mediabunny";
@@ -41449,10 +41553,10 @@ var DragAndDropNudge = () => {
 };
 
 // src/components/homepage/Demo/PlayerSeekBar.tsx
-import { useCallback as useCallback46, useEffect as useEffect51, useMemo as useMemo61, useRef as useRef50, useState as useState51 } from "react";
+import { useCallback as useCallback46, useEffect as useEffect53, useMemo as useMemo61, useRef as useRef50, useState as useState51 } from "react";
 
 // src/components/homepage/layout/use-el-size.ts
-import { useCallback as useCallback45, useEffect as useEffect50, useMemo as useMemo60, useState as useState50 } from "react";
+import { useCallback as useCallback45, useEffect as useEffect51, useMemo as useMemo60, useState as useState50 } from "react";
 var useElementSize2 = (ref) => {
   const [size4, setSize] = useState50(null);
   const observer = useMemo60(() => {
@@ -41476,7 +41580,7 @@ var useElementSize2 = (ref) => {
       height: rect[0].height
     });
   }, [ref]);
-  useEffect50(() => {
+  useEffect51(() => {
     updateSize();
     if (!observer) {
       return;
@@ -41532,7 +41636,7 @@ var findBodyInWhichDivIsLocated2 = (div) => {
 };
 var useHoverState2 = (ref, hideControlsWhenPointerDoesntMove) => {
   const [hovered, setHovered] = useState51(false);
-  useEffect51(() => {
+  useEffect53(() => {
     const { current } = ref;
     if (!current) {
       return;
@@ -41583,7 +41687,7 @@ var PlayerSeekBar2 = ({
   const size4 = useElementSize2(containerRef.current);
   const [playing, setPlaying] = useState51(false);
   const [frame, setFrame] = useState51(0);
-  useEffect51(() => {
+  useEffect53(() => {
     const { current } = playerRef;
     if (!current) {
       return;
@@ -41596,7 +41700,7 @@ var PlayerSeekBar2 = ({
       current.removeEventListener("frameupdate", onFrameUpdate);
     };
   }, [playerRef]);
-  useEffect51(() => {
+  useEffect53(() => {
     const { current } = playerRef;
     if (!current) {
       return;
@@ -41657,7 +41761,7 @@ var PlayerSeekBar2 = ({
     }
     onSeekEnd();
   }, [dragging, onSeekEnd, playerRef]);
-  useEffect51(() => {
+  useEffect53(() => {
     if (!dragging.dragging) {
       return;
     }
@@ -41727,7 +41831,7 @@ var PlayerSeekBar2 = ({
 };
 
 // src/components/homepage/Demo/PlayerVolume.tsx
-import { useCallback as useCallback47, useEffect as useEffect53, useRef as useRef51, useState as useState54 } from "react";
+import { useCallback as useCallback47, useEffect as useEffect55, useRef as useRef51, useState as useState54 } from "react";
 
 // src/components/homepage/Demo/icons.tsx
 import { jsx as jsx101 } from "react/jsx-runtime";
@@ -41788,7 +41892,7 @@ var PlayerVolume = ({ playerRef }) => {
   const [muted, setIsMuted] = useState54(() => playerRef.current?.isMuted() ?? true);
   const [isHovered, setIsHovered] = useState54(false);
   const timerRef = useRef51(null);
-  useEffect53(() => {
+  useEffect55(() => {
     const { current } = playerRef;
     if (!current) {
       return;
@@ -41801,7 +41905,7 @@ var PlayerVolume = ({ playerRef }) => {
       current.removeEventListener("mutechange", onMutedChange);
     };
   }, [playerRef]);
-  useEffect53(() => {
+  useEffect55(() => {
     if (isHovered) {
       document.body.style.userSelect = "none";
     } else {
@@ -41846,7 +41950,7 @@ var PlayerVolume = ({ playerRef }) => {
 };
 
 // src/components/homepage/Demo/PlayPauseButton.tsx
-import React71, { useCallback as useCallback48, useEffect as useEffect55 } from "react";
+import React71, { useCallback as useCallback48, useEffect as useEffect56 } from "react";
 import { jsx as jsx107 } from "react/jsx-runtime";
 var playerButtonStyle2 = {
   appearance: "none",
@@ -41864,7 +41968,7 @@ var playerButtonStyle2 = {
 };
 var PlayPauseButton = ({ playerRef }) => {
   const [playing, setPlaying] = React71.useState(true);
-  useEffect55(() => {
+  useEffect56(() => {
     const { current } = playerRef;
     if (!current) {
       return;
@@ -41901,7 +42005,7 @@ var PlayPauseButton = ({ playerRef }) => {
 };
 
 // src/components/homepage/Demo/TimeDisplay.tsx
-import React73, { useEffect as useEffect56 } from "react";
+import React73, { useEffect as useEffect57 } from "react";
 import { jsx as jsx108 } from "react/jsx-runtime";
 var formatTime2 = (timeInSeconds) => {
   const minutes = Math.floor(timeInSeconds / 60);
@@ -41910,7 +42014,7 @@ var formatTime2 = (timeInSeconds) => {
 };
 var TimeDisplay = ({ fps, playerRef }) => {
   const [time, setTime] = React73.useState(0);
-  useEffect56(() => {
+  useEffect57(() => {
     const { current } = playerRef;
     if (!current) {
       return;
@@ -42081,7 +42185,7 @@ var Demo = () => {
   const [cardOrder, setCardOrder] = useState56([0, 1, 2, 3]);
   const [emojiIndex, setEmojiIndex] = useState56(0);
   const [error2, setError] = useState56(false);
-  useEffect57(() => {
+  useEffect58(() => {
     getDataAndProps().then((d2) => {
       setData(d2);
     }).catch((err) => {
@@ -42089,7 +42193,7 @@ var Demo = () => {
       setError(true);
     });
   }, []);
-  useEffect57(() => {
+  useEffect58(() => {
     const { current: playerRef } = ref;
     if (!playerRef || !data2) {
       return;
@@ -42234,16 +42338,16 @@ var ClearButton = (props) => {
 
 // src/components/homepage/MuxVideo.tsx
 import Hls2 from "hls.js";
-import { forwardRef as forwardRef38, useEffect as useEffect59, useImperativeHandle as useImperativeHandle14, useRef as useRef56 } from "react";
+import { forwardRef as forwardRef38, useEffect as useEffect60, useImperativeHandle as useImperativeHandle14, useRef as useRef56 } from "react";
 
 // src/components/homepage/VideoPlayerWithControls.tsx
 import Hls from "hls.js";
 import"plyr/dist/plyr.css";
-import { forwardRef as forwardRef37, useCallback as useCallback50, useEffect as useEffect58, useRef as useRef55, useState as useState57 } from "react";
+import { forwardRef as forwardRef37, useCallback as useCallback50, useEffect as useEffect59, useRef as useRef55, useState as useState57 } from "react";
 import { jsx as jsx116 } from "react/jsx-runtime";
 var useCombinedRefs = function(...refs) {
   const targetRef = useRef55(null);
-  useEffect58(() => {
+  useEffect59(() => {
     refs.forEach((ref) => {
       if (!ref)
         return;
@@ -42272,12 +42376,12 @@ var VideoPlayerWithControls = forwardRef37(({ playbackId, poster, currentTime, o
       console.error("Error getting img dimensions", event);
     }
   }, [onLoaded, onSize]);
-  useEffect58(() => {
+  useEffect59(() => {
     const img = new Image;
     img.onload = (evt) => onImageLoad(evt);
     img.src = poster;
   }, [onImageLoad, poster]);
-  useEffect58(() => {
+  useEffect59(() => {
     const video = videoRef.current;
     const src = `https://stream.mux.com/${playbackId}.m3u8`;
     let hls;
@@ -42320,7 +42424,7 @@ var VideoPlayerWithControls = forwardRef37(({ playbackId, poster, currentTime, o
       }
     };
   }, [playbackId, playerInitTime, videoError, videoRef]);
-  useEffect58(() => {
+  useEffect59(() => {
     const video = videoRef.current;
     if (currentTime && video) {
       video.currentTime = currentTime;
@@ -42347,7 +42451,7 @@ var MuxVideoForward = ({ muxId, ...props }, ref) => {
   const videoRef = useRef56(null);
   const vidUrl = getVideoToPlayUrl(muxId);
   useImperativeHandle14(ref, () => videoRef.current, []);
-  useEffect59(() => {
+  useEffect60(() => {
     let hls;
     if (videoRef.current) {
       const { current } = videoRef;
@@ -42460,11 +42564,11 @@ var EditorStarterSection = () => {
 var EditorStarterSection_default = EditorStarterSection;
 
 // src/components/homepage/EvaluateRemotion.tsx
-import { useEffect as useEffect60, useState as useState58 } from "react";
+import { useEffect as useEffect61, useState as useState58 } from "react";
 import { jsx as jsx119, jsxs as jsxs40 } from "react/jsx-runtime";
 var EvaluateRemotionSection = () => {
   const [dailyAvatars, setDailyAvatars] = useState58([]);
-  useEffect60(() => {
+  useEffect61(() => {
     const avatars = experts.map((expert) => expert.image);
     const selectedAvatars = [];
     for (let i = 0;i < 3; i++) {
@@ -42561,7 +42665,7 @@ var EvaluateRemotionSection = () => {
 var EvaluateRemotion_default = EvaluateRemotionSection;
 
 // src/components/homepage/IfYouKnowReact.tsx
-import { useEffect as useEffect61, useState as useState59 } from "react";
+import { useEffect as useEffect63, useState as useState59 } from "react";
 import { jsx as jsx120, jsxs as jsxs41 } from "react/jsx-runtime";
 var isWebkit = () => {
   if (typeof window === "undefined") {
@@ -42577,7 +42681,7 @@ var icon2 = {
 };
 var IfYouKnowReact = () => {
   const [vid, setVid] = useState59("/img/compose.webm");
-  useEffect61(() => {
+  useEffect63(() => {
     if (isWebkit()) {
       setVid("/img/compose.mp4");
     }
@@ -42724,7 +42828,7 @@ var NewsletterButton = () => {
 };
 
 // src/components/homepage/ParameterizeAndEdit.tsx
-import { useEffect as useEffect63, useRef as useRef57, useState as useState61 } from "react";
+import { useEffect as useEffect65, useRef as useRef57, useState as useState61 } from "react";
 import { jsx as jsx124, jsxs as jsxs46 } from "react/jsx-runtime";
 var icon3 = {
   height: 16,
@@ -42733,7 +42837,7 @@ var icon3 = {
 var ParameterizeAndEdit = () => {
   const ref = useRef57(null);
   const [vid, setVid] = useState61("/img/editing-vp9-chrome.webm");
-  useEffect63(() => {
+  useEffect65(() => {
     if (isWebkit()) {
       setVid("/img/editing-safari.mp4");
     }
@@ -42847,7 +42951,7 @@ var ParameterizeAndEdit = () => {
 };
 
 // src/components/homepage/RealMp4Videos.tsx
-import { useEffect as useEffect65, useRef as useRef58, useState as useState64 } from "react";
+import { useEffect as useEffect66, useRef as useRef58, useState as useState64 } from "react";
 import { jsx as jsx126, jsxs as jsxs47 } from "react/jsx-runtime";
 var icon4 = {
   height: 16,
@@ -42857,12 +42961,12 @@ var RealMP4Videos = () => {
   const ref = useRef58(null);
   const videoRef = useRef58(null);
   const [vid, setVid] = useState64("/img/render-progress.webm");
-  useEffect65(() => {
+  useEffect66(() => {
     if (isWebkit()) {
       setVid("/img/render-progress.mp4");
     }
   }, []);
-  useEffect65(() => {
+  useEffect66(() => {
     const { current } = ref;
     if (!current) {
       return;
@@ -43431,6 +43535,7 @@ var listOfRemotionPackages = [
   "@remotion/studio",
   "@remotion/tailwind",
   "@remotion/tailwind-v4",
+  "@remotion/timeline-utils",
   "@remotion/test-utils",
   "@remotion/three",
   "@remotion/transitions",
@@ -44707,7 +44812,7 @@ var GithubButton = () => {
       " ",
       /* @__PURE__ */ jsx164("div", {
         className: "text-xs inline-block ml-2 leading-none mt-[3px] self-center",
-        children: "45k"
+        children: "46k"
       })
     ]
   });