remotion 4.0.535 → 4.0.537

package/dist/esm/index.mjs

@@ -27,6 +27,7 @@ __export(exports_timeline_position_state, {
   usePlaying: () => usePlaying,
   useTimelineContext: () => useTimelineContext,
   useTimelinePosition: () => useTimelinePosition,
+  useTimelinePositionWithOptionalSubscription: () => useTimelinePositionWithOptionalSubscription,
   useTimelineSeekFrame: () => useTimelineSeekFrame,
   useTimelineSetFrameWithoutSeek: () => useTimelineSetFrameWithoutSeek
 });
@@ -284,13 +285,15 @@ class CompositionErrorBoundary extends React5.Component {
 // src/CompositionManagerContext.tsx
 import { createContext as createContext7 } from "react";
 var getAssetPreviewCompositionId = (asset) => `asset:${asset}`;
-var CompositionManager = createContext7({
+var defaultCompositionManagerContext = {
   compositions: [],
   folders: [],
   currentCompositionMetadata: null,
   currentAssetMetadata: null,
   canvasContent: null
-});
+};
+var CompositionManager = createContext7(defaultCompositionManagerContext);
+var CompositionManagerRefContext = createContext7({ current: defaultCompositionManagerContext });
 var CompositionSetters = createContext7({
   setCanvasContent: () => {
     return;
@@ -761,12 +764,12 @@ function validateDurationInFrames(durationInFrames, options) {
   if (durationInFrames <= 0) {
     throw new TypeError(`The "durationInFrames" prop ${component} must be positive, but got ${durationInFrames}.`);
   }
-  if (!allowFloats && durationInFrames % 1 !== 0) {
-    throw new TypeError(`The "durationInFrames" prop ${component} must be an integer, but got ${durationInFrames}.`);
-  }
   if (!Number.isFinite(durationInFrames)) {
     throw new TypeError(`The "durationInFrames" prop ${component} must be finite, but got ${durationInFrames}.`);
   }
+  if (!allowFloats && durationInFrames % 1 !== 0) {
+    throw new TypeError(`The "durationInFrames" prop ${component} must be an integer, but got ${durationInFrames}.`);
+  }
 }
 
 // src/validation/validate-fps.ts
@@ -1741,7 +1744,7 @@ var getStackForControls = (controls) => {
 };
 
 // src/version.ts
-var VERSION = "4.0.535";
+var VERSION = "4.0.537";
 
 // src/multiple-versions-warning.ts
 var checkMultipleRemotionVersions = () => {
@@ -1778,15 +1781,15 @@ var Null = () => {
 };
 
 // src/Sequence.tsx
-import {
-  createContext as createContext27,
+import React26, {
+  createContext as createContext28,
   forwardRef as forwardRef3,
   useCallback as useCallback7,
-  useContext as useContext27,
+  useContext as useContext28,
   useLayoutEffect as useLayoutEffect8,
-  useMemo as useMemo19,
+  useMemo as useMemo20,
   useRef as useRef8,
-  useState as useState8
+  useState as useState9
 } from "react";
 
 // src/DefaultPremountContext.ts
@@ -1805,17 +1808,18 @@ var DEFAULT_PREMOUNT_IN_SECONDS = ENABLE_V5_BREAKING_CHANGES ? 2 : 0;
 var DefaultPremountContext = createContext17(DEFAULT_PREMOUNT_IN_SECONDS);
 
 // src/freeze.tsx
-import { createContext as createContext20, useContext as useContext17, useMemo as useMemo11 } from "react";
+import { createContext as createContext21, useContext as useContext17, useMemo as useMemo11 } from "react";
 
 // src/sequence-activity-context.ts
 import { createContext as createContext18, useContext as useContext11 } from "react";
 
 // src/sequence-activity-defaults.ts
-var DEFAULT_SEQUENCE_ACTIVITY_LIMIT = 20;
+var DEFAULT_SEQUENCE_ACTIVITY_LIMIT = Infinity;
 
 // src/sequence-activity-context.ts
 var SequenceActivityContext = createContext18(false);
 var SequenceActivityDormantContext = createContext18(false);
+var SequenceActivitySuspensionContext = createContext18(false);
 var SequenceActivitySettingsContext = createContext18(null);
 var SequenceActivityTimelineContext = createContext18(null);
 var SequenceActivityAbsoluteTimeContext = createContext18(null);
@@ -1824,7 +1828,7 @@ var SequenceContent = ({ children }) => {
 };
 
 // src/timeline-position-state.ts
-import { useContext as useContext14 } from "react";
+import { createContext as createContext20, useContext as useContext14 } from "react";
 
 // src/TimelineContext.tsx
 import {
@@ -1867,11 +1871,21 @@ var createRuntimeValueStore = (initialSnapshot) => {
 import { useMemo as useMemo9, useRef as useRef2 } from "react";
 var useTimelineSeek = (setFrame) => {
   const revision = useRef2(0);
+  const listeners = useRef2(new Set);
   return useMemo9(() => ({
     revision,
     seekFrame: (frame) => {
       revision.current++;
+      for (const listener of listeners.current) {
+        listener();
+      }
       setFrame(frame);
+    },
+    subscribe: (listener) => {
+      listeners.current.add(listener);
+      return () => {
+        listeners.current.delete(listener);
+      };
     }
   }), [setFrame]);
 };
@@ -2009,6 +2023,7 @@ var useBuffering = () => {
 };
 
 // src/timeline-position-state.ts
+var UnsubscribedTimelineContext = createContext20(null);
 var makeKey = () => {
   return `remotion.time-all`;
 };
@@ -2038,6 +2053,9 @@ var useTimelinePositionFromContext = (state) => {
   const videoConfig = useVideo();
   const env = useRemotionEnvironment();
   const dormant = useContext14(SequenceActivityDormantContext);
+  if (state === null) {
+    return 0;
+  }
   if (!videoConfig) {
     return typeof window === "undefined" ? 0 : window.remotion_initialFrame ?? 0;
   }
@@ -2063,6 +2081,15 @@ var useTimelinePosition = () => {
   const state = useTimelineContext();
   return useTimelinePositionFromContext(state);
 };
+var useTimelinePositionWithOptionalSubscription = (subscribe) => {
+  const dormant = useContext14(SequenceActivityDormantContext);
+  const state = useContext14(subscribe ? dormant ? SequenceActivityTimelineContext : TimelineContext : UnsubscribedTimelineContext);
+  const frame = useTimelinePositionFromContext(state);
+  if (subscribe && state === null) {
+    throw new Error("TimelineContext is not available. This hook must be used inside a <Player> or the Remotion Studio.");
+  }
+  return frame;
+};
 var useIsInsideFreeze = () => {
   return useTimelineContext().isInsideFreeze;
 };
@@ -2085,7 +2112,7 @@ var useTimelineSeekFrame = () => {
 
 // src/use-current-frame.ts
 import { useContext as useContext15 } from "react";
-var useCurrentFrame = () => {
+var useCurrentFrameWithOptionalSubscription = (subscribe) => {
   const canUseRemotionHooks = useContext15(CanUseRemotionHooks);
   const env = useRemotionEnvironment();
   if (!canUseRemotionHooks) {
@@ -2094,11 +2121,17 @@ var useCurrentFrame = () => {
     }
     throw new Error(`useCurrentFrame() can only be called inside a component that was registered as a composition. See https://www.remotion.dev/docs/the-fundamentals#defining-compositions`);
   }
-  const frame = useTimelinePosition();
+  const frame = useTimelinePositionWithOptionalSubscription(subscribe);
   const context = useContext15(SequenceContext);
+  if (!subscribe) {
+    return 0;
+  }
   const contextOffset = context ? context.cumulatedFrom + context.relativeFrom : 0;
   return (frame - contextOffset) * (context?.playbackRate ?? 1);
 };
+var useCurrentFrame = () => {
+  return useCurrentFrameWithOptionalSubscription(true);
+};
 
 // src/use-video-config.ts
 import { useContext as useContext16 } from "react";
@@ -2124,7 +2157,7 @@ var useVideoConfig = () => {
 
 // src/freeze.tsx
 import { jsx as jsx11 } from "react/jsx-runtime";
-var NonPremountFreezeContext = createContext20(false);
+var NonPremountFreezeContext = createContext21(false);
 var useIsInsideNonPremountFreeze = () => useContext17(NonPremountFreezeContext);
 var Freeze = ({
   frame: frameToFreeze,
@@ -2451,7 +2484,7 @@ var childrenSchema = {
 var premountSchema = {
   premountFor: {
     type: "number",
-    default: 0,
+    default: undefined,
     description: "Premount For",
     min: 0,
     step: 1,
@@ -2659,8 +2692,8 @@ var sequenceSchemaDefaultLayoutNone = {
 };
 
 // src/loop/loop-context.ts
-import { createContext as createContext21 } from "react";
-var LoopContext = createContext21(null);
+import { createContext as createContext22 } from "react";
+var LoopContext = createContext22(null);
 
 // src/resolve-sequence-duration.ts
 var resolveSequenceContentDuration = ({
@@ -2765,6 +2798,16 @@ var SequenceOutlineInternals = {
 // src/SequenceActivityBoundary.tsx
 import React18, { useContext as useContext18, useMemo as useMemo12 } from "react";
 import { jsx as jsx12 } from "react/jsx-runtime";
+var suspendedActivity = { then: () => {
+  return;
+} };
+var SuspendSequenceActivity = ({ children, dormant }) => {
+  const suspended = useContext18(SequenceActivitySuspensionContext);
+  if (dormant && suspended) {
+    throw suspendedActivity;
+  }
+  return children;
+};
 var areActivityChildrenEqual = (previous, next) => {
   if (Object.is(previous, next)) {
     return true;
@@ -2806,7 +2849,10 @@ var SequenceActivityBoundary = ({ children, dormant, frame }) => {
             value: dormant ? dormantTimeline : absoluteTime,
             children: /* @__PURE__ */ jsx12(React18.Activity, {
               mode: dormant && !parentDormant ? "hidden" : "visible",
-              children
+              children: /* @__PURE__ */ jsx12(SuspendSequenceActivity, {
+                dormant,
+                children
+              })
             })
           })
         })
@@ -2816,7 +2862,7 @@ var SequenceActivityBoundary = ({ children, dormant, frame }) => {
 };
 
 // src/SequenceActivityBudget.tsx
-import React19, { createContext as createContext22, useContext as useContext19, useMemo as useMemo13, useState as useState4 } from "react";
+import React19, { createContext as createContext23, useContext as useContext19, useMemo as useMemo13, useState as useState4 } from "react";
 import { jsx as jsx13 } from "react/jsx-runtime";
 var useCommitEffect = React19.useInsertionEffect ?? React19.useLayoutEffect;
 var createActivityBudget = () => {
@@ -2825,13 +2871,17 @@ var createActivityBudget = () => {
   let frame = {};
   let limit = DEFAULT_SEQUENCE_ACTIVITY_LIMIT;
   let scheduled = false;
+  let suspended = false;
   const schedule = () => {
-    if (scheduled) {
+    if (scheduled || suspended) {
       return;
     }
     scheduled = true;
     queueMicrotask(() => {
       scheduled = false;
+      if (suspended) {
+        return;
+      }
       const ranked = [...candidates.values()].filter((candidate) => candidate.end > candidate.from).map((candidate) => {
         const currentFrame = frame[candidate.compositionId] ?? 0;
         return {
@@ -2865,6 +2915,12 @@ var createActivityBudget = () => {
   };
   return {
     ...registry,
+    setSuspended: (next) => {
+      if (suspended !== next) {
+        suspended = next;
+        schedule();
+      }
+    },
     setLimit: (next) => {
       if (limit !== next) {
         limit = next;
@@ -2885,25 +2941,27 @@ var createActivityBudget = () => {
     }
   };
 };
-var ActivityBudgetContext = createContext22(null);
-var InactiveTimelineContext = createContext22(null);
+var ActivityBudgetContext = createContext23(null);
+var InactiveTimelineContext = createContext23(null);
 var emptySelection = new Set;
-var ActivitySelectionContext = createContext22(emptySelection);
+var ActivitySelectionContext = createContext23(emptySelection);
 var SequenceActivityBudgetProvider = ({ children }) => {
   const enabled = useContext19(SequenceActivityContext);
   const settings = useContext19(SequenceActivitySettingsContext);
+  const suspended = useContext19(SequenceActivitySuspensionContext);
   const limit = settings?.limit ?? DEFAULT_SEQUENCE_ACTIVITY_LIMIT;
-  const admitting = enabled && limit > 0;
+  const admitting = enabled && limit > 0 && limit !== Infinity;
   const [budget] = useState4(createActivityBudget);
-  const timeline = useContext19(admitting ? TimelineContext : InactiveTimelineContext);
+  const timeline = useContext19(admitting && !suspended ? TimelineContext : InactiveTimelineContext);
   const selected = useSyncExternalStore2(budget.subscribe, budget.getSnapshot, budget.getSnapshot);
   const admitted = useMemo13(() => !admitting ? emptySelection : selected.size > limit ? new Set([...selected].slice(0, limit)) : selected, [admitting, limit, selected]);
   useCommitEffect(() => {
+    budget.setSuspended(suspended);
     budget.setLimit(admitting ? limit : 0);
     if (admitting && timeline !== null) {
       budget.setFrame(timeline.frame);
     }
-  }, [admitting, budget, limit, timeline]);
+  }, [admitting, budget, limit, suspended, timeline]);
   return /* @__PURE__ */ jsx13(ActivityBudgetContext.Provider, {
     value: admitting ? budget : null,
     children: /* @__PURE__ */ jsx13(ActivitySelectionContext.Provider, {
@@ -2916,7 +2974,7 @@ var useSequenceActivityAdmission = (candidate) => {
   const budget = useContext19(ActivityBudgetContext);
   const enabled = useContext19(SequenceActivityContext);
   const settings = useContext19(SequenceActivitySettingsContext);
-  const unlimited = enabled && settings?.limit === -1;
+  const unlimited = enabled && (settings?.limit ?? DEFAULT_SEQUENCE_ACTIVITY_LIMIT) === Infinity;
   const selected = useContext19(ActivitySelectionContext);
   const id = candidate?.id ?? null;
   const parent = candidate?.parent ?? null;
@@ -2933,7 +2991,7 @@ var useSequenceActivityAdmission = (candidate) => {
 };
 
 // src/SequenceManager.tsx
-import React22, { useCallback as useCallback6, useContext as useContext22, useMemo as useMemo15, useRef as useRef5, useState as useState6 } from "react";
+import React23, { useCallback as useCallback6, useContext as useContext23, useMemo as useMemo15, useRef as useRef5, useState as useState7 } from "react";
 
 // src/sequence-registry-context.tsx
 import React20, { useContext as useContext20 } from "react";
@@ -2969,17 +3027,59 @@ var DisableSequenceRegistrationContext = React20.createContext(false);
 var DisableSequenceRegistrationProvider = ({ children }) => {
   return React20.createElement(DisableSequenceRegistrationContext.Provider, { value: true }, children);
 };
-// src/SequenceRegistryProvider.tsx
-import React21, { useCallback as useCallback5, useContext as useContext21, useMemo as useMemo14, useRef as useRef4, useState as useState5 } from "react";
+// src/SequenceActivitySuspensionProvider.tsx
+import { useContext as useContext21, useEffect as useEffect5, useState as useState5 } from "react";
 import { jsx as jsx14 } from "react/jsx-runtime";
-var useIsomorphicLayoutEffect3 = typeof window === "undefined" ? React21.useEffect : React21.useLayoutEffect;
+var SequenceActivitySuspensionProvider = ({ children }) => {
+  const enabled = useContext21(SequenceActivityContext);
+  const { isPlaying, subscribePlaying, seek } = useContext21(SetTimelineContext);
+  const [suspended, setSuspended] = useState5(false);
+  useEffect5(() => {
+    if (!enabled) {
+      setSuspended(false);
+      return;
+    }
+    let timeout = null;
+    const update = () => {
+      setSuspended(isPlaying() || timeout !== null);
+    };
+    const unsubscribePlaying = subscribePlaying(update);
+    const unsubscribeSeek = seek?.subscribe(() => {
+      setSuspended(true);
+      if (timeout !== null) {
+        clearTimeout(timeout);
+      }
+      timeout = setTimeout(() => {
+        timeout = null;
+        update();
+      }, 150);
+    });
+    update();
+    return () => {
+      unsubscribePlaying();
+      unsubscribeSeek?.();
+      if (timeout !== null) {
+        clearTimeout(timeout);
+      }
+    };
+  }, [enabled, isPlaying, seek, subscribePlaying]);
+  return /* @__PURE__ */ jsx14(SequenceActivitySuspensionContext.Provider, {
+    value: suspended,
+    children
+  });
+};
+
+// src/SequenceRegistryProvider.tsx
+import React22, { useCallback as useCallback5, useContext as useContext22, useMemo as useMemo14, useRef as useRef4, useState as useState6 } from "react";
+import { jsx as jsx15 } from "react/jsx-runtime";
+var useIsomorphicLayoutEffect3 = typeof window === "undefined" ? React22.useEffect : React22.useLayoutEffect;
 var SequenceManagerRefProvider = withCommittedMetadata(SequenceManagerRefContext.Provider);
 var SequenceRegistryProvider = ({ children }) => {
   const { isStudio } = useRemotionEnvironment();
-  const sequenceRegistrationEnabled = useContext21(SequenceRegistrationContext);
+  const sequenceRegistrationEnabled = useContext22(SequenceRegistrationContext);
   const shouldObserveCommits = isStudio || sequenceRegistrationEnabled;
-  const [sequenceManagerId] = useState5(() => String(Math.random()));
-  const [commitRegistrationEnabled, setCommitRegistrationEnabled] = useState5(() => shouldObserveCommits && isCommitRegistrationObserverInstalled());
+  const [sequenceManagerId] = useState6(() => String(Math.random()));
+  const [commitRegistrationEnabled, setCommitRegistrationEnabled] = useState6(() => shouldObserveCommits && isCommitRegistrationObserverInstalled());
   const observedCommitRef = useRef4(false);
   const rootObservationFailedRef = useRef4(false);
   const committedRegistrationIdsRef = useRef4(new Set);
@@ -2992,7 +3092,7 @@ var SequenceRegistryProvider = ({ children }) => {
   const registrationUnmountedRef = useRef4(false);
   const committedOrderRef = useRef4(null);
   const committedOrderIdsRef = useRef4(null);
-  const [registry] = useState5(() => createRegistryStore([]));
+  const [registry] = useState6(() => createRegistryStore([]));
   const setSequences = registry.setSnapshot;
   const sequencesRef = useMemo14(() => ({
     get current() {
@@ -3195,16 +3295,16 @@ var SequenceRegistryProvider = ({ children }) => {
     sequenceManagerId,
     shouldObserveCommits
   ]);
-  return /* @__PURE__ */ jsx14(SequenceManagerRefProvider, {
+  return /* @__PURE__ */ jsx15(SequenceManagerRefProvider, {
     value: sequencesRef,
     _remotionCommitMetadata: metadata,
-    children: /* @__PURE__ */ jsx14(SequenceRegistryScopeContext.Provider, {
+    children: /* @__PURE__ */ jsx15(SequenceRegistryScopeContext.Provider, {
       value: registryScope,
-      children: /* @__PURE__ */ jsx14(SequenceManagerActionsContext.Provider, {
+      children: /* @__PURE__ */ jsx15(SequenceManagerActionsContext.Provider, {
         value: actions,
-        children: /* @__PURE__ */ jsx14(SequenceRegistryContext.Provider, {
+        children: /* @__PURE__ */ jsx15(SequenceRegistryContext.Provider, {
           value: registry,
-          children: /* @__PURE__ */ jsx14(SequenceCommitRegistrationContext.Provider, {
+          children: /* @__PURE__ */ jsx15(SequenceCommitRegistrationContext.Provider, {
             value: commitRegistrationEnabled,
             children
           })
@@ -3215,25 +3315,28 @@ var SequenceRegistryProvider = ({ children }) => {
 };
 
 // src/SequenceManager.tsx
-import { jsx as jsx15 } from "react/jsx-runtime";
-var useIsomorphicLayoutEffect4 = typeof window === "undefined" ? React22.useEffect : React22.useLayoutEffect;
-var VisualModeDragOverridesSubscriptionContext = React22.createContext(null);
-var ActiveFromDragOverrideKeysContext = React22.createContext(null);
+import { jsx as jsx16 } from "react/jsx-runtime";
+var useIsomorphicLayoutEffect4 = typeof window === "undefined" ? React23.useEffect : React23.useLayoutEffect;
+var useCommitEffect2 = React23.useInsertionEffect ?? useIsomorphicLayoutEffect4;
+var VisualModeDragOverridesSubscriptionContext = React23.createContext(null);
+var ActiveFromDragOverrideKeysContext = React23.createContext(null);
 var SequenceManagerScopeProviders = ({ children, dragOverridesSubscription, fromKeys }) => {
   const { isStudio } = useRemotionEnvironment();
-  const activitySettings = useContext22(SequenceActivitySettingsContext);
-  const commitRegistrationEnabled = useContext22(SequenceCommitRegistrationContext);
-  const manager = useContext22(SequenceManagerActionsContext);
+  const activitySettings = useContext23(SequenceActivitySettingsContext);
+  const commitRegistrationEnabled = useContext23(SequenceCommitRegistrationContext);
+  const manager = useContext23(SequenceManagerActionsContext);
   const scopedDragOverridesSubscription = useMemo15(() => ({ ...dragOverridesSubscription, manager }), [dragOverridesSubscription, manager]);
   const activeFromDragOverrideKeys = useMemo15(() => ({ manager, keys: fromKeys }), [fromKeys, manager]);
-  return /* @__PURE__ */ jsx15(ActiveFromDragOverrideKeysContext.Provider, {
+  return /* @__PURE__ */ jsx16(ActiveFromDragOverrideKeysContext.Provider, {
     value: activeFromDragOverrideKeys,
-    children: /* @__PURE__ */ jsx15(VisualModeDragOverridesSubscriptionContext.Provider, {
+    children: /* @__PURE__ */ jsx16(VisualModeDragOverridesSubscriptionContext.Provider, {
       value: scopedDragOverridesSubscription,
-      children: /* @__PURE__ */ jsx15(SequenceActivityContext.Provider, {
-        value: activitySettings?.enabled === true && isStudio && commitRegistrationEnabled && typeof React22.Activity !== "undefined",
-        children: /* @__PURE__ */ jsx15(SequenceActivityBudgetProvider, {
-          children
+      children: /* @__PURE__ */ jsx16(SequenceActivityContext.Provider, {
+        value: (activitySettings?.limit ?? DEFAULT_SEQUENCE_ACTIVITY_LIMIT) > 0 && isStudio && commitRegistrationEnabled && typeof React23.Activity !== "undefined",
+        children: /* @__PURE__ */ jsx16(SequenceActivitySuspensionProvider, {
+          children: /* @__PURE__ */ jsx16(SequenceActivityBudgetProvider, {
+            children
+          })
         })
       })
     })
@@ -3245,10 +3348,10 @@ var emptyEffectDragOverrides = {};
 var makeSequencePropsSubscriptionKey = (key) => {
   return `${key.absolutePath}\x00${key.nodePath.join(".")}\x00${key.sequenceKeys.join(".")}\x00${key.effectKeys.map((keys) => keys.join(".")).join(".")}`;
 };
-var VisualModePropStatusesContext = React22.createContext({
+var VisualModePropStatusesContext = React23.createContext({
   propStatuses: {}
 });
-var VisualModePropStatusesRefContext = React22.createContext({
+var VisualModePropStatusesRefContext = React23.createContext({
   current: {}
 });
 var defaultVisualModeDragOverrides = {
@@ -3259,36 +3362,48 @@ var defaultVisualModeDragOverrides = {
     throw new Error("VisualModeDragOverridesContext not initialized");
   }
 };
-var VisualModeDragOverridesContext = React22.createContext(defaultVisualModeDragOverrides);
-var VisualModeDragOverridesRefContext = React22.createContext({ current: defaultVisualModeDragOverrides });
+var VisualModeDragOverridesContext = React23.createContext(defaultVisualModeDragOverrides);
+var VisualModeDragOverridesRefContext = React23.createContext({ current: defaultVisualModeDragOverrides });
+var useDragOverrideSnapshot = (subscribe, getSnapshot) => {
+  const dormant = useContext23(SequenceActivityDormantContext);
+  const [, forceUpdate] = useState7(0);
+  const snapshot = useSyncExternalStore2(subscribe, getSnapshot, getSnapshot);
+  useCommitEffect2(() => {
+    if (!dormant) {
+      return;
+    }
+    return subscribe(() => forceUpdate((current) => current + 1));
+  }, [dormant, subscribe]);
+  return snapshot;
+};
 var useDragOverridesForNodePath = (nodePath) => {
-  const subscription = useContext22(VisualModeDragOverridesSubscriptionContext);
-  const manager = useContext22(SequenceManagerActionsContext);
+  const subscription = useContext23(VisualModeDragOverridesSubscriptionContext);
+  const manager = useContext23(SequenceManagerActionsContext);
   const scopedSubscription = subscription?.manager === manager ? subscription : null;
   const key = nodePath === null ? null : makeSequencePropsSubscriptionKey(nodePath);
   const subscribe = useCallback6((listener) => scopedSubscription?.subscribe(key, listener) ?? (() => {
     return;
   }), [key, scopedSubscription]);
   const getSnapshot = useCallback6(() => scopedSubscription?.getSnapshot(key) ?? emptyDragOverrides, [key, scopedSubscription]);
-  return useSyncExternalStore2(subscribe, getSnapshot, getSnapshot);
+  return useDragOverrideSnapshot(subscribe, getSnapshot);
 };
 var useActiveFromDragOverrideKeys = () => {
-  const snapshot = useContext22(ActiveFromDragOverrideKeysContext);
-  const manager = useContext22(SequenceManagerActionsContext);
+  const snapshot = useContext23(ActiveFromDragOverrideKeysContext);
+  const manager = useContext23(SequenceManagerActionsContext);
   return snapshot?.manager === manager ? snapshot.keys : emptyFromOverrideKeys;
 };
 var useEffectDragOverridesForNodePath = (nodePath) => {
-  const subscription = useContext22(VisualModeDragOverridesSubscriptionContext);
-  const manager = useContext22(SequenceManagerActionsContext);
+  const subscription = useContext23(VisualModeDragOverridesSubscriptionContext);
+  const manager = useContext23(SequenceManagerActionsContext);
   const scopedSubscription = subscription?.manager === manager ? subscription : null;
   const key = nodePath === null ? null : makeSequencePropsSubscriptionKey(nodePath);
   const subscribe = useCallback6((listener) => scopedSubscription?.subscribeEffects(key, listener) ?? (() => {
     return;
   }), [key, scopedSubscription]);
   const getSnapshot = useCallback6(() => scopedSubscription?.getEffectSnapshot(key) ?? emptyEffectDragOverrides, [key, scopedSubscription]);
-  return useSyncExternalStore2(subscribe, getSnapshot, getSnapshot);
+  return useDragOverrideSnapshot(subscribe, getSnapshot);
 };
-var VisualModeSettersContext = React22.createContext({
+var VisualModeSettersContext = React23.createContext({
   setDragOverrides: () => {
     throw new Error("VisualModeSettersContext not initialized");
   },
@@ -3308,10 +3423,10 @@ var VisualModeSettersContext = React22.createContext({
     throw new Error("VisualModeSettersContext not initialized");
   }
 });
-var VisualModeBatchSettersContext = React22.createContext(null);
+var VisualModeBatchSettersContext = React23.createContext(null);
 var effectDragOverridesKey = (nodePath, effectIndex) => `${makeSequencePropsSubscriptionKey(nodePath)}.effects.${effectIndex}`;
 var SequenceManagerProvider = ({ children }) => {
-  const [dragOverrideState, setDragOverrideState] = useState6(() => ({
+  const [dragOverrideState, setDragOverrideState] = useState7(() => ({
     overrides: {},
     fromKeys: new Set
   }));
@@ -3320,13 +3435,13 @@ var SequenceManagerProvider = ({ children }) => {
     snapshot: dragOverrides,
     listeners: new Map
   });
-  const [effectDragOverridesState, setEffectDragOverridesState] = useState6({});
+  const [effectDragOverridesState, setEffectDragOverridesState] = useState7({});
   const effectDragOverridesStore = useRef5({
     snapshot: effectDragOverridesState,
     byNode: new Map,
     listeners: new Map
   });
-  const [propStatuses, setPropStatusesMapState] = useState6({});
+  const [propStatuses, setPropStatusesMapState] = useState7({});
   const propStatusesRef = useRef5(propStatuses);
   useIsomorphicLayoutEffect4(() => {
     propStatusesRef.current = propStatuses;
@@ -3578,21 +3693,21 @@ var SequenceManagerProvider = ({ children }) => {
     remapPropStatuses
   ]);
   const batchSettersContext = useMemo15(() => ({ setDragOverridesBatch, setEffectDragOverridesBatch }), [setDragOverridesBatch, setEffectDragOverridesBatch]);
-  return /* @__PURE__ */ jsx15(SequenceRegistryProvider, {
-    children: /* @__PURE__ */ jsx15(VisualModePropStatusesRefContext.Provider, {
+  return /* @__PURE__ */ jsx16(SequenceRegistryProvider, {
+    children: /* @__PURE__ */ jsx16(VisualModePropStatusesRefContext.Provider, {
       value: propStatusesRef,
-      children: /* @__PURE__ */ jsx15(VisualModePropStatusesContext.Provider, {
+      children: /* @__PURE__ */ jsx16(VisualModePropStatusesContext.Provider, {
         value: propStatusesContext,
-        children: /* @__PURE__ */ jsx15(SequenceManagerScopeProviders, {
+        children: /* @__PURE__ */ jsx16(SequenceManagerScopeProviders, {
           dragOverridesSubscription,
           fromKeys: dragOverrideState.fromKeys,
-          children: /* @__PURE__ */ jsx15(VisualModeDragOverridesContext.Provider, {
+          children: /* @__PURE__ */ jsx16(VisualModeDragOverridesContext.Provider, {
             value: dragOverridesContext,
-            children: /* @__PURE__ */ jsx15(VisualModeDragOverridesRefContext.Provider, {
+            children: /* @__PURE__ */ jsx16(VisualModeDragOverridesRefContext.Provider, {
               value: dragOverridesRef,
-              children: /* @__PURE__ */ jsx15(VisualModeSettersContext.Provider, {
+              children: /* @__PURE__ */ jsx16(VisualModeSettersContext.Provider, {
                 value: settersContext,
-                children: /* @__PURE__ */ jsx15(VisualModeBatchSettersContext.Provider, {
+                children: /* @__PURE__ */ jsx16(VisualModeBatchSettersContext.Provider, {
                   value: batchSettersContext,
                   children
                 })
@@ -3606,16 +3721,15 @@ var SequenceManagerProvider = ({ children }) => {
 };
 
 // src/timeline-track-context.ts
-import { createContext as createContext23 } from "react";
-var TimelineTrackContext = createContext23(null);
-var ExperimentalTracksEnabledContext = createContext23(false);
+import { createContext as createContext24 } from "react";
+var TimelineTrackContext = createContext24(null);
 
 // src/use-premounting.ts
-import { useContext as useContext23, useMemo as useMemo16 } from "react";
+import { useContext as useContext24, useMemo as useMemo16 } from "react";
 
 // src/PremountContext.tsx
-import { createContext as createContext24 } from "react";
-var PremountContext = createContext24({
+import { createContext as createContext25 } from "react";
+var PremountContext = createContext25({
   premountFramesRemaining: 0
 });
 
@@ -3630,15 +3744,15 @@ var usePremounting = ({
   styleWhilePostmounted,
   hideWhilePremounted
 }) => {
-  const parentPremountContext = useContext23(PremountContext);
+  const parentPremountContext = useContext24(PremountContext);
   const frame = useCurrentFrame() - parentPremountContext.premountFramesRemaining;
   const environment = useRemotionEnvironment();
   const { fps } = useVideoConfig();
-  const defaultPremountInSeconds = useContext23(DefaultPremountContext);
+  const defaultPremountInSeconds = useContext24(DefaultPremountContext);
   const effectivePremountFor = premountFor ?? Math.round(defaultPremountInSeconds * fps);
   const effectivePostmountFor = postmountFor ?? 0;
   const endExclusive = from + durationInFrames;
-  const sequenceContext = useContext23(SequenceContext);
+  const sequenceContext = useContext24(SequenceContext);
   const boundaryTolerance = getSequenceBoundaryTolerance({
     absoluteFrame: useTimelinePosition(),
     cumulatedFrom: sequenceContext ? sequenceContext.cumulatedFrom + sequenceContext.relativeFrom : 0,
@@ -3682,15 +3796,15 @@ var usePremounting = ({
 };
 
 // src/use-sequence-registration.ts
-import { useContext as useContext24, useEffect as useEffect5, useLayoutEffect as useLayoutEffect5, useMemo as useMemo17, useRef as useRef6 } from "react";
-var useIsomorphicLayoutEffect5 = typeof window === "undefined" ? useEffect5 : useLayoutEffect5;
+import { useContext as useContext25, useEffect as useEffect6, useLayoutEffect as useLayoutEffect5, useMemo as useMemo17, useRef as useRef6 } from "react";
+var useIsomorphicLayoutEffect5 = typeof window === "undefined" ? useEffect6 : useLayoutEffect5;
 var useSequenceRegistration = ({
   getSequence,
   id
 }) => {
-  const { registerSequence, unregisterSequence, updateSequence } = useContext24(SequenceManagerActionsContext);
-  const registrationDisabled = useContext24(DisableSequenceRegistrationContext);
-  const commitRegistrationEnabled = useContext24(SequenceCommitRegistrationContext);
+  const { registerSequence, unregisterSequence, updateSequence } = useContext25(SequenceManagerActionsContext);
+  const registrationDisabled = useContext25(DisableSequenceRegistrationContext);
+  const commitRegistrationEnabled = useContext25(SequenceCommitRegistrationContext);
   const getSequenceRef = useRef6(getSequence);
   useIsomorphicLayoutEffect5(() => {
     getSequenceRef.current = getSequence;
@@ -3698,7 +3812,7 @@ var useSequenceRegistration = ({
   const lastRegisteredGetterRef = useRef6(null);
   const registrationEnabled = getSequence !== null && !registrationDisabled && !commitRegistrationEnabled;
   const registration = useMemo17(() => commitRegistrationEnabled && !registrationDisabled && getSequence !== null ? getSequence() : null, [commitRegistrationEnabled, getSequence, registrationDisabled]);
-  useEffect5(() => {
+  useEffect6(() => {
     if (!registrationEnabled) {
       return;
     }
@@ -3729,13 +3843,13 @@ var useSequenceRegistration = ({
 };
 
 // src/with-interactivity-schema.ts
-import React24, {
-  createContext as createContext26,
+import React25, {
+  createContext as createContext27,
   forwardRef as forwardRef2,
-  useContext as useContext26,
+  useContext as useContext27,
   useLayoutEffect as useLayoutEffect7,
-  useMemo as useMemo18,
-  useState as useState7
+  useMemo as useMemo19,
+  useState as useState8
 } from "react";
 
 // src/delete-nested-key.ts
@@ -3772,7 +3886,7 @@ var deleteNestedKey = (obj, keysToRemove) => {
 };
 
 // src/effects/use-memoized-effects.ts
-import React23, { useContext as useContext25, useLayoutEffect as useLayoutEffect6, useRef as useRef7 } from "react";
+import React24, { useContext as useContext26, useLayoutEffect as useLayoutEffect6, useMemo as useMemo18, useRef as useRef7 } from "react";
 
 // src/evaluate-source-expressions.ts
 var evaluateSourceNumericValue = (expression, config) => {
@@ -4224,7 +4338,8 @@ var parseStringInterpolationValue = (output, outputType) => {
   }
   const parts = output.trim().split(/\s+/);
   if (parts.length < 1 || parts.length > 3 || parts[0] === "") {
-    throw new TypeError(`String outputRange values must contain 1 to 3 components, but got "${output}"`);
+    const ErrorType = outputType === undefined && parts.some((part) => !cssNumberRegex.test(part) && !transformOriginKeywords.has(part.toLowerCase())) ? UnsupportedStringInterpolationValueError : TypeError;
+    throw new ErrorType(`String outputRange values must contain 1 to 3 components, but got "${output}"`);
   }
   if (parts.some((part) => transformOriginKeywords.has(part.toLowerCase()))) {
     if (outputType !== undefined) {
@@ -5877,11 +5992,11 @@ var getEffectiveVisualModeValue = ({
 };
 
 // src/sequence-node-path.tsx
-import { createContext as createContext25 } from "react";
-var OverrideIdsToNodePathsGettersContext = createContext25({
+import { createContext as createContext26 } from "react";
+var OverrideIdsToNodePathsGettersContext = createContext26({
   overrideIdToNodePathMappings: {}
 });
-var OverrideIdsToNodePathsSettersContext = createContext25({
+var OverrideIdsToNodePathsSettersContext = createContext26({
   setOverrideIdToNodePath: () => {
     throw new Error("OverrideIdsToNodePathsSettersContext not initialized");
   }
@@ -5889,7 +6004,16 @@ var OverrideIdsToNodePathsSettersContext = createContext25({
 
 // src/effects/use-memoized-effects.ts
 var emptyDragOverrides2 = {};
-var useCacheCommitEffect = React23.useInsertionEffect ?? useLayoutEffect6;
+var useCacheCommitEffect = React24.useInsertionEffect ?? useLayoutEffect6;
+var areEffectParamsEqual = (previous, next) => {
+  if (Object.is(previous, next)) {
+    return true;
+  }
+  if (previous === null || next === null || typeof previous !== "object" || typeof next !== "object" || Object.getPrototypeOf(previous) !== Object.prototype || Object.getPrototypeOf(next) !== Object.prototype) {
+    return false;
+  }
+  return areRegistryEntriesEqual(previous, next);
+};
 var mergeOverrides = ({
   descriptor,
   propStatusOverrides,
@@ -5952,13 +6076,12 @@ var resolvePropStatusOverrides = (propStatus, frame) => {
   return hasAny ? out : null;
 };
 var useMemoizedEffectDefinitions = (effects) => {
-  const activityDormant = useContext25(SequenceActivityDormantContext);
+  const activityDormant = useContext26(SequenceActivityDormantContext);
   const previousRef = useRef7(null);
-  const definitions = effects.map((descriptor) => descriptor.definition);
   const previous = previousRef.current;
-  const isSame = previous !== null && previous.definitions.length === definitions.length && previous.definitions.every((definition, i) => definition === definitions[i]);
+  const isSame = previous !== null && previous.definitions.length === effects.length && previous.definitions.every((definition, i) => definition === effects[i].definition);
   const controllers = isSame ? previous.controllers : effects.map((effect) => createRuntimeValueStore(effect.params));
-  const stableDefinitions = isSame ? previous.definitions : Object.assign(definitions, {
+  const stableDefinitions = isSame ? previous.definitions : Object.assign(effects.map((descriptor) => descriptor.definition), {
     runtimeValues: controllers.map((controller) => controller.store)
   });
   useCacheCommitEffect(() => {
@@ -5966,6 +6089,9 @@ var useMemoizedEffectDefinitions = (effects) => {
     if (!activityDormant || controllers.length === 0) {
       return;
     }
+    if (controllers.every((controller, index) => areEffectParamsEqual(controller.store.getSnapshot(), effects[index]?.params))) {
+      return;
+    }
     let cancelled = false;
     queueMicrotask(() => {
       if (cancelled) {
@@ -5974,15 +6100,9 @@ var useMemoizedEffectDefinitions = (effects) => {
       controllers.forEach((controller, index) => {
         const snapshot = effects[index]?.params;
         const currentSnapshot = controller.store.getSnapshot();
-        if (Object.is(snapshot, currentSnapshot)) {
+        if (areEffectParamsEqual(snapshot, currentSnapshot)) {
           return;
         }
-        if (snapshot !== null && currentSnapshot !== null && typeof snapshot === "object" && typeof currentSnapshot === "object") {
-          const keys = Object.keys(snapshot);
-          if (keys.length === Object.keys(currentSnapshot).length && keys.every((key) => Object.prototype.hasOwnProperty.call(currentSnapshot, key) && Object.is(snapshot[key], currentSnapshot[key]))) {
-            return;
-          }
-        }
         controller.setSnapshot(snapshot);
       });
     });
@@ -5993,7 +6113,9 @@ var useMemoizedEffectDefinitions = (effects) => {
   useLayoutEffect6(() => {
     stableDefinitions.forEach((_definition, index) => {
       const snapshot = effects[index]?.params;
-      controllers[index].setSnapshot(snapshot);
+      if (!areEffectParamsEqual(controllers[index].store.getSnapshot(), snapshot)) {
+        controllers[index].setSnapshot(snapshot);
+      }
     });
   }, [controllers, effects, stableDefinitions]);
   return stableDefinitions;
@@ -6038,46 +6160,60 @@ var useMemoizedEffects = ({
   videoConfigValues
 }) => {
   const previousRef = useRef7(null);
-  const { propStatuses } = useContext25(VisualModePropStatusesContext);
-  const frame = useCurrentFrame();
-  const { overrideIdToNodePathMappings } = useContext25(OverrideIdsToNodePathsGettersContext);
+  const { propStatuses } = useContext26(VisualModePropStatusesContext);
+  const { overrideIdToNodePathMappings } = useContext26(OverrideIdsToNodePathsGettersContext);
   const previous = previousRef.current;
   const nodePath = overrideId ? overrideIdToNodePathMappings[overrideId] ?? null : null;
   const effectDragOverrides = useEffectDragOverridesForNodePath(nodePath);
-  const resolved = effects.map((descriptor, index) => {
+  const effectPropStatuses = useMemo18(() => Array.from({ length: effects.length }, (_, effectIndex) => {
     if (nodePath === null) {
-      return {
-        descriptor,
-        params: descriptor.params,
-        effectKey: descriptor.effectKey
-      };
+      return null;
     }
-    const effectStatus = getEffectPropStatusesCtx({
+    const status = getEffectPropStatusesCtx({
       propStatuses,
       nodePath: { ...nodePath, videoConfigValues },
-      effectIndex: index
+      effectIndex
     });
-    const propStatusOverrides = effectStatus.type === "can-update-effect" ? resolvePropStatusOverrides(effectStatus.props, frame) : null;
+    return status.type === "can-update-effect" ? status.props : null;
+  }), [effects.length, nodePath, propStatuses, videoConfigValues]);
+  const animatedEffects = useMemo18(() => effectPropStatuses.map((status, index) => Object.values(status ?? {}).some((prop) => prop.status === "keyframed") || Object.values(effectDragOverrides[index] ?? emptyDragOverrides2).some((override) => override.type === "keyframed")), [effectDragOverrides, effectPropStatuses]);
+  const frame = useCurrentFrameWithOptionalSubscription(animatedEffects.some(Boolean));
+  const prepared = effects.map((descriptor, index) => {
+    const propStatus = effectPropStatuses[index];
     const dragOverridesMap = effectDragOverrides[index] ?? emptyDragOverrides2;
     const dragOverrides = Object.keys(dragOverridesMap).length === 0 ? null : dragOverridesMap;
+    const effectFrame = animatedEffects[index] ? frame : null;
+    const cached = previous?.prepared[index];
+    if (cached && cached.definition === descriptor.definition && cached.sourceKey === descriptor.effectKey && areEffectParamsEqual(cached.params, descriptor.params) && cached.propStatus === propStatus && cached.dragOverrides === dragOverrides && cached.frame === effectFrame) {
+      return cached;
+    }
+    const propStatusOverrides = resolvePropStatusOverrides(propStatus ?? undefined, frame);
     const { params, effectKey } = mergeOverrides({
       descriptor,
       propStatusOverrides,
       dragOverrides,
       frame
     });
-    return { descriptor, params, effectKey };
+    return {
+      definition: descriptor.definition,
+      sourceKey: descriptor.effectKey,
+      params: descriptor.params !== null && typeof descriptor.params === "object" && Object.getPrototypeOf(descriptor.params) === Object.prototype ? { ...descriptor.params } : descriptor.params,
+      propStatus,
+      dragOverrides,
+      frame: effectFrame,
+      value: cached?.value.definition === descriptor.definition && cached.value.effectKey === effectKey ? cached.value : {
+        definition: descriptor.definition,
+        effectKey,
+        params,
+        memoized: true
+      }
+    };
   });
-  const isSame = previous !== null && previous.length === resolved.length && previous.every((p, i) => p.definition === resolved[i].descriptor.definition && p.effectKey === resolved[i].effectKey);
-  const next = isSame ? previous : resolved.map(({ descriptor, params, effectKey }) => ({
-    definition: descriptor.definition,
-    effectKey,
-    params,
-    memoized: true
-  }));
+  const isSame = previous !== null && previous.effects.length === prepared.length && previous.effects.every((effect, i) => effect === prepared[i].value);
+  const next = isSame ? previous.effects : prepared.map((effect) => effect.value);
   useCacheCommitEffect(() => {
-    previousRef.current = next;
-  }, [next]);
+    previousRef.current = { prepared, effects: next };
+  }, [next, prepared]);
   return next;
 };
 
@@ -6358,7 +6494,7 @@ var computeEffectiveSchemaValuesDotNotation = ({
       });
       value = dragOverride.type === "resolved" ? dragOverride.value : currentValue[key];
     } else if (isKeyframedStatus(status)) {
-      if (field?.type === "array" || field?.keyframable === false) {
+      if (field?.type === "array") {
         value = currentValue[key];
       } else {
         const dragOverride = resolveDragOverrideValue({
@@ -6478,13 +6614,13 @@ var mergeValues = ({
   deleteNestedKey(merged, propsToDeleteWithoutTextContent);
   return merged;
 };
-var DisableInteractivityContext = createContext26(false);
+var DisableInteractivityContext = createContext27(false);
 var DisableInteractivityProvider = ({ children }) => {
-  return React24.createElement(DisableInteractivityContext.Provider, { value: true }, children);
+  return React25.createElement(DisableInteractivityContext.Provider, { value: true }, children);
 };
-var EnableInteractivityContext = createContext26(false);
+var EnableInteractivityContext = createContext27(false);
 var EnableInteractivityProvider = ({ children }) => {
-  return React24.createElement(EnableInteractivityContext.Provider, { value: true }, children);
+  return React25.createElement(EnableInteractivityContext.Provider, { value: true }, children);
 };
 var withInteractivitySchema = ({
   Component,
@@ -6505,32 +6641,31 @@ var withInteractivitySchema = ({
     const cleanProps = propsWithoutInternalStack;
     const env = useRemotionEnvironment();
     const pendingDeletions = usePendingSequenceDeletions();
-    const canUseRemotionHooks = useContext26(CanUseRemotionHooks);
-    const disableInteractivity = useContext26(DisableInteractivityContext);
-    const enableInteractivity = useContext26(EnableInteractivityContext);
+    const canUseRemotionHooks = useContext27(CanUseRemotionHooks);
+    const disableInteractivity = useContext27(DisableInteractivityContext);
+    const enableInteractivity = useContext27(EnableInteractivityContext);
     if (!env.isStudio && !enableInteractivity || env.isRendering || !canUseRemotionHooks || disableInteractivity) {
-      return React24.createElement(Component, {
+      return React25.createElement(Component, {
         ...cleanProps,
         controls: null,
         ref
       });
     }
-    const { propStatuses } = useContext26(VisualModePropStatusesContext);
-    const nodePathMapping = useContext26(OverrideIdsToNodePathsGettersContext);
-    const frame = useCurrentFrame();
+    const { propStatuses } = useContext27(VisualModePropStatusesContext);
+    const nodePathMapping = useContext27(OverrideIdsToNodePathsGettersContext);
     const videoConfig = useUnsafeVideoConfig();
     const durationInFrames = videoConfig?.durationInFrames;
     const fps = videoConfig?.fps;
     const height = videoConfig?.height;
     const width = videoConfig?.width;
-    const videoConfigValues = useMemo18(() => durationInFrames === undefined || fps === undefined || height === undefined || width === undefined ? null : {
+    const videoConfigValues = useMemo19(() => durationInFrames === undefined || fps === undefined || height === undefined || width === undefined ? null : {
       durationInFrames,
       fps,
       height,
       width
     }, [durationInFrames, fps, height, width]);
     const passedControls = cleanProps.controls;
-    const resolvedPassedControls = useMemo18(() => {
+    const resolvedPassedControls = useMemo19(() => {
       if (!passedControls || getStackForControls(passedControls) !== null || internalStack === undefined) {
         return passedControls;
       }
@@ -6539,13 +6674,13 @@ var withInteractivitySchema = ({
       return controlsWithStack;
     }, [internalStack, passedControls]);
     if (resolvedPassedControls) {
-      return React24.createElement(Component, {
+      return React25.createElement(Component, {
         ...cleanProps,
         controls: resolvedPassedControls,
         ref
       });
     }
-    const [overrideId] = useState7(() => {
+    const [overrideId] = useState8(() => {
       if (!internalStack) {
         return String(Math.random());
       }
@@ -6559,17 +6694,23 @@ var withInteractivitySchema = ({
     });
     const nodePath = env.isReadOnlyStudio ? null : nodePathMapping.overrideIdToNodePathMappings[overrideId] ?? null;
     const dragOverrides = useDragOverridesForNodePath(nodePath);
+    const propStatus = useMemo19(() => nodePath === null ? undefined : getPropStatusesCtx(propStatuses, {
+      ...nodePath,
+      videoConfigValues
+    }), [nodePath, propStatuses, videoConfigValues]);
+    const needsFrame = flatKeys.some((key) => propStatus?.[key]?.status === "keyframed" || dragOverrides[key]?.type === "keyframed");
+    const frame = useCurrentFrameWithOptionalSubscription(needsFrame);
     const runtimeValues = flatKeys.map((key) => getRuntimeValueForSchemaKey({
       flatSchema,
       key,
       props: cleanProps
     }));
-    const currentRuntimeValueDotNotation = useMemo18(() => readValuesFromProps(cleanProps, flatKeys, flatSchema), runtimeValues);
-    const [runtimeValueStore] = useState7(() => createRuntimeValueStore(currentRuntimeValueDotNotation));
+    const currentRuntimeValueDotNotation = useMemo19(() => readValuesFromProps(cleanProps, flatKeys, flatSchema), runtimeValues);
+    const [runtimeValueStore] = useState8(() => createRuntimeValueStore(currentRuntimeValueDotNotation));
     useLayoutEffect7(() => {
       runtimeValueStore.setSnapshot(currentRuntimeValueDotNotation);
     }, [currentRuntimeValueDotNotation, runtimeValueStore]);
-    const controls = useMemo18(() => {
+    const controls = useMemo19(() => {
       const controlsForRender = {
         schema: schemaWithSequenceName,
         currentRuntimeValueDotNotation,
@@ -6592,25 +6733,15 @@ var withInteractivitySchema = ({
     useLayoutEffect7(() => {
       OptimisticSequenceDeletion.register(internalStack ?? null, nodePath);
     }, [internalStack, nodePath]);
-    const { merged: valuesDotNotation, propsToDelete } = useMemo18(() => {
+    const { merged: valuesDotNotation, propsToDelete } = useMemo19(() => {
       return computeEffectiveSchemaValuesDotNotation({
         schema: schemaWithSequenceName,
         currentValue: currentRuntimeValueDotNotation,
         overrideValues: dragOverrides,
-        propStatus: nodePath === null ? undefined : getPropStatusesCtx(propStatuses, {
-          ...nodePath,
-          videoConfigValues
-        }),
+        propStatus,
         frame
       });
-    }, [
-      currentRuntimeValueDotNotation,
-      dragOverrides,
-      nodePath,
-      propStatuses,
-      videoConfigValues,
-      frame
-    ]);
+    }, [currentRuntimeValueDotNotation, dragOverrides, propStatus, frame]);
     const activeKeys = selectActiveKeys(schemaWithSequenceName, valuesDotNotation);
     const mergedProps = mergeValues({
       flatSchema,
@@ -6622,7 +6753,7 @@ var withInteractivitySchema = ({
     if (OptimisticSequenceDeletion.isDeleted(nodePath, pendingDeletions)) {
       return null;
     }
-    return React24.createElement(Component, {
+    return React25.createElement(Component, {
       ...mergedProps,
       controls,
       ref
@@ -6633,8 +6764,8 @@ var withInteractivitySchema = ({
 };
 
 // src/Sequence.tsx
-import { jsx as jsx16 } from "react/jsx-runtime";
-var SeriesContentVisibilityContext = createContext27(true);
+import { jsx as jsx17 } from "react/jsx-runtime";
+var SeriesContentVisibilityContext = createContext28(true);
 var SequenceContextProvider = withCommittedMetadata(SequenceContext.Provider);
 var EMPTY_EFFECTS = [];
 var RegularSequenceRefForwardingFunction = ({
@@ -6667,13 +6798,15 @@ var RegularSequenceRefForwardingFunction = ({
   ...other
 }, ref) => {
   const { layout = "absolute-fill" } = other;
-  const [id] = useState8(() => String(Math.random()));
-  const parentSequence = useContext27(SequenceContext);
-  const activityRequested = useContext27(SequenceActivityContext);
-  const parentDormant = useContext27(SequenceActivityDormantContext);
+  const [id] = useState9(() => String(Math.random()));
+  const parentSequence = useContext28(SequenceContext);
+  const activityRequested = useContext28(SequenceActivityContext);
+  const parentDormant = useContext28(SequenceActivityDormantContext);
+  const activitySuspended = useContext28(SequenceActivitySuspensionContext);
+  const hadActivity = useRef8(false);
   const env = useRemotionEnvironment();
   const activityEnabled = activityRequested && env.isStudio && !env.isRendering;
-  const timelineTrack = useContext27(TimelineTrackContext);
+  const timelineTrack = useContext28(TimelineTrackContext);
   const timelineTrackRole = timelineTrackItem?.role ?? "clip";
   const seriesOffset = timelineTrackItem?.seriesOffset ?? null;
   const parentPlaybackRate = parentSequence?.playbackRate ?? 1;
@@ -6777,16 +6910,16 @@ var RegularSequenceRefForwardingFunction = ({
   const relativeFrom = effectiveRelativeFrom / parentPlaybackRate;
   const absoluteFrom = (parentSequence?.absoluteFrom ?? 0) + relativeFrom;
   const localClockEnd = loopPeriod === null ? actualDurationInFrames * playbackRate + trimBefore : Math.min(loopPeriod, actualDurationInFrames - loopOffset) * playbackRate + trimBefore;
-  const sequenceRegistrationEnabled = useContext27(SequenceRegistrationContext);
-  const canvasOutlinesEnabled = useContext27(SequenceOutlineContext);
+  const sequenceRegistrationEnabled = useContext28(SequenceRegistrationContext);
+  const canvasOutlinesEnabled = useContext28(SequenceOutlineContext);
   const shouldDiscoverOutline = env.isStudio || canvasOutlinesEnabled;
-  const automaticOutlineRef = useMemo19(() => shouldDiscoverOutline && layout === "none" ? SequenceOutlineInternals.createRef() : null, [shouldDiscoverOutline, layout]);
+  const automaticOutlineRef = useMemo20(() => shouldDiscoverOutline && layout === "none" ? SequenceOutlineInternals.createRef() : null, [shouldDiscoverOutline, layout]);
   const wrapperRefForOutline = useRef8(null);
   const refForOutline = layout === "none" ? automaticOutlineRef : wrapperRefForOutline;
-  const premounting = useMemo19(() => {
+  const premounting = useMemo20(() => {
     return parentSequence?.premounting || Boolean(other._remotionInternalIsPremounting);
   }, [other._remotionInternalIsPremounting, parentSequence?.premounting]);
-  const postmounting = useMemo19(() => {
+  const postmounting = useMemo20(() => {
     return parentSequence?.postmounting || Boolean(other._remotionInternalIsPostmounting);
   }, [other._remotionInternalIsPostmounting, parentSequence?.postmounting]);
   const currentSequenceStart = cumulatedFrom + relativeFrom;
@@ -6794,7 +6927,7 @@ var RegularSequenceRefForwardingFunction = ({
   const parentFirstFrame = parentSequence ? parentSequenceStart - parentSequence.cumulatedNegativeFrom / parentPlaybackRate : 0;
   const firstFrame = Math.max(0, parentFirstFrame, cumulatedFrom + clockFrom / parentPlaybackRate);
   const cumulatedNegativeFrom = (currentSequenceStart - firstFrame) * cumulativePlaybackRate;
-  const contextValue = useMemo19(() => {
+  const contextValue = useMemo20(() => {
     return {
       playbackRate: cumulativePlaybackRate,
       absoluteFrom,
@@ -6827,7 +6960,7 @@ var RegularSequenceRefForwardingFunction = ({
     postmountDisplay,
     cumulatedNegativeFrom
   ]);
-  const loopContextValue = useMemo19(() => {
+  const loopContextValue = useMemo20(() => {
     if (loopPeriod === null) {
       return null;
     }
@@ -6836,7 +6969,7 @@ var RegularSequenceRefForwardingFunction = ({
       durationInFrames: contentDurationInFrames
     };
   }, [contentDurationInFrames, loopIteration, loopPeriod]);
-  const resolvedLoopDisplay = useMemo19(() => {
+  const resolvedLoopDisplay = useMemo20(() => {
     if (loopDisplay || loopPeriod === null) {
       return loopDisplay;
     }
@@ -6846,12 +6979,12 @@ var RegularSequenceRefForwardingFunction = ({
       durationInFrames: loopPeriod
     };
   }, [actualDurationInFrames, loopDisplay, loopPeriod]);
-  const timelineClipName = useMemo19(() => {
+  const timelineClipName = useMemo20(() => {
     return name ?? "";
   }, [name]);
   const resolvedDocumentationLink = documentationLink ?? "https://www.remotion.dev/docs/sequence";
-  const isInsideSeries = useContext27(IsInsideSeriesContext);
-  const singleChildComponent = useMemo19(() => childComponentOverride === undefined ? getSingleChildComponent(children) : childComponentOverride, [children, childComponentOverride]);
+  const isInsideSeries = useContext28(IsInsideSeriesContext);
+  const singleChildComponent = useMemo20(() => childComponentOverride === undefined ? getSingleChildComponent(children) : childComponentOverride, [children, childComponentOverride]);
   const registrationStack = controls ? getStackForControls(controls) ?? stack ?? null : stack ?? null;
   const getStack = useCallback7(() => registrationStack, [registrationStack]);
   const registeredFrozenFrame = typeof freeze === "number" ? freeze : null;
@@ -6877,9 +7010,9 @@ var RegularSequenceRefForwardingFunction = ({
   const canInferDuration = (controlsComponentIdentity === "dev.remotion.remotion.Series" || controlsComponentIdentity === "dev.remotion.transitions.TransitionSeries") && !loop && registeredFrozenFrame === null && !isInsideNonPremountFreeze && !hidden;
   const autoDuration = canInferDuration && durationInFrames === undefined;
   const isSeriesChild = controlsComponentIdentity === "dev.remotion.remotion.Series.Sequence" || controlsComponentIdentity === "dev.remotion.transitions.TransitionSeries.Sequence" || controlsComponentIdentity === "dev.remotion.transitions.TransitionSeries.Transition" || controlsComponentIdentity === "dev.remotion.transitions.TransitionSeries.Overlay";
-  const seriesContentVisible = useContext27(SeriesContentVisibilityContext);
-  const effectRuntimeValues = useMemo19(() => _remotionInternalEffects?.runtimeValues ?? null, [_remotionInternalEffects]);
-  const registrationControls = useMemo19(() => {
+  const seriesContentVisible = useContext28(SeriesContentVisibilityContext);
+  const effectRuntimeValues = useMemo20(() => _remotionInternalEffects?.runtimeValues ?? null, [_remotionInternalEffects]);
+  const registrationControls = useMemo20(() => {
     if (controlsSchema === undefined || controlsRuntimeValues === undefined || controlsOverrideId === undefined || controlsSupportsEffects === undefined || controlsComponentIdentity === undefined || controlsComponentName === undefined || controlsVideoConfigValues === undefined) {
       return null;
     }
@@ -7056,13 +7189,17 @@ var RegularSequenceRefForwardingFunction = ({
     from: firstFrame,
     end: cumulatedFrom + (from + actualDurationInFrames) / parentPlaybackRate
   } : null);
-  const renderActivity = activityEnabled && (!activityDormant || admitted);
+  const renderActivity = activityEnabled && (!activityDormant || admitted || activitySuspended && hadActivity.current);
+  const useCommitEffect = React26.useInsertionEffect ?? useLayoutEffect8;
+  useCommitEffect(() => {
+    hadActivity.current = renderActivity;
+  }, [renderActivity]);
   const content = (activityEnabled ? renderActivity : contentVisible) ? children : null;
-  const frozenContent = content === null || typeof freeze === "undefined" || freeze === null ? content : /* @__PURE__ */ jsx16(Freeze, {
+  const frozenContent = content === null || typeof freeze === "undefined" || freeze === null ? content : /* @__PURE__ */ jsx17(Freeze, {
     frame: freeze,
     children: content
   });
-  const loopedContent = frozenContent === null || loopContextValue === null ? frozenContent : /* @__PURE__ */ jsx16(LoopContext.Provider, {
+  const loopedContent = frozenContent === null || loopContextValue === null ? frozenContent : /* @__PURE__ */ jsx17(LoopContext.Provider, {
     value: loopContextValue,
     children: frozenContent
   });
@@ -7082,7 +7219,7 @@ var RegularSequenceRefForwardingFunction = ({
       ref.current = node;
     }
   }, [ref]);
-  const defaultStyle = useMemo19(() => {
+  const defaultStyle = useMemo20(() => {
     return {
       flexDirection: undefined,
       ...width ? { width } : {},
@@ -7096,44 +7233,44 @@ var RegularSequenceRefForwardingFunction = ({
   if (ref !== null && layout === "none") {
     throw new TypeError('It is not supported to pass both a `ref` and `layout="none"` to <Sequence />.');
   }
-  const metadata = useMemo19(() => shouldDiscoverOutline || registration !== null ? {
+  const metadata = useMemo20(() => shouldDiscoverOutline || registration !== null ? {
     type: "sequence",
     id,
     value: registration,
     outlineChildrenRef: automaticOutlineRef
   } : null, [automaticOutlineRef, id, registration, shouldDiscoverOutline]);
   if (hidden) {
-    return shouldDiscoverOutline || registration !== null ? /* @__PURE__ */ jsx16(SequenceContextProvider, {
+    return shouldDiscoverOutline || registration !== null ? /* @__PURE__ */ jsx17(SequenceContextProvider, {
       value: contextValue,
       _remotionCommitMetadata: metadata,
       children: null
     }) : null;
   }
   const retainSeriesRegistration = env.isStudio && canInferDuration;
-  const contentForLayout = renderActivity ? /* @__PURE__ */ jsx16(SequenceActivityContent, {
+  const contentForLayout = renderActivity ? /* @__PURE__ */ jsx17(SequenceActivityContent, {
     dormant: activityDormant,
     children: loopedContent
   }) : loopedContent;
-  const renderedContent = loopedContent === null ? retainSeriesRegistration ? children : null : other.layout === "none" ? contentForLayout : /* @__PURE__ */ jsx16(AbsoluteFillElement, {
+  const renderedContent = loopedContent === null ? retainSeriesRegistration ? children : null : other.layout === "none" ? contentForLayout : /* @__PURE__ */ jsx17(AbsoluteFillElement, {
     ref: sequenceRef,
     style: defaultStyle,
     className: other.className,
     children: contentForLayout
   });
-  const activityContent = renderActivity ? /* @__PURE__ */ jsx16(SequenceActivityBoundary, {
+  const activityContent = renderActivity ? /* @__PURE__ */ jsx17(SequenceActivityBoundary, {
     dormant: activityDormant,
     frame: firstFrame,
     children: renderedContent
   }) : renderedContent;
-  const sequenceContent = /* @__PURE__ */ jsx16(SequenceContextProvider, {
+  const sequenceContent = /* @__PURE__ */ jsx17(SequenceContextProvider, {
     value: contextValue,
     _remotionCommitMetadata: metadata,
-    children: retainSeriesRegistration ? /* @__PURE__ */ jsx16(SeriesContentVisibilityContext.Provider, {
+    children: retainSeriesRegistration ? /* @__PURE__ */ jsx17(SeriesContentVisibilityContext.Provider, {
       value: renderActivity || contentVisible,
       children: activityContent
     }) : activityContent
   });
-  const sequence = /* @__PURE__ */ jsx16(TimelineTrackContext.Provider, {
+  const sequence = /* @__PURE__ */ jsx17(TimelineTrackContext.Provider, {
     value: timelineTrackRole === "track" || timelineTrackRole === "clip" && !showInTimeline ? timelineTrack : null,
     children: sequenceContent
   });
@@ -7174,11 +7311,11 @@ var PremountedPostmountedSequenceRefForwardingFunction = (props, ref) => {
     styleWhilePostmounted: styleWhilePostmounted ?? null,
     hideWhilePremounted: "opacity"
   });
-  return /* @__PURE__ */ jsx16(Freeze, {
+  return /* @__PURE__ */ jsx17(Freeze, {
     frame: freezeFrame,
     active: isPremountingOrPostmounting,
     _remotionInternalIsPremounting: premountingActive,
-    children: /* @__PURE__ */ jsx16(RegularSequence, {
+    children: /* @__PURE__ */ jsx17(RegularSequence, {
       ref,
       from,
       durationInFrames,
@@ -7195,18 +7332,18 @@ var PremountedPostmountedSequence = forwardRef3(PremountedPostmountedSequenceRef
 var SequenceRefForwardingFunction = (props, ref) => {
   const env = useRemotionEnvironment();
   const { fps } = useVideoConfig();
-  const defaultPremountInSeconds = useContext27(DefaultPremountContext);
+  const defaultPremountInSeconds = useContext28(DefaultPremountContext);
   if (props.layout !== "none" && !env.isRendering) {
     const effectivePremountFor = props.premountFor ?? Math.round(defaultPremountInSeconds * fps);
     if (effectivePremountFor || props.postmountFor) {
-      return /* @__PURE__ */ jsx16(PremountedPostmountedSequence, {
+      return /* @__PURE__ */ jsx17(PremountedPostmountedSequence, {
         ref,
         ...props,
         premountFor: effectivePremountFor
       });
     }
   }
-  return /* @__PURE__ */ jsx16(RegularSequence, {
+  return /* @__PURE__ */ jsx17(RegularSequence, {
     ...props,
     ref
   });
@@ -7230,7 +7367,7 @@ var SequenceWithoutFrom = withInteractivitySchema({
 
 // src/AbsoluteFill.tsx
 import { useCallback as useCallback8 } from "react";
-import { jsx as jsx17 } from "react/jsx-runtime";
+import { jsx as jsx18 } from "react/jsx-runtime";
 var absoluteFillSchema = {
   ...baseSchema,
   ...premountSchema,
@@ -7290,11 +7427,11 @@ var AbsoluteFillWithTiming = ({
     styleWhilePostmounted: styleWhilePostmounted ?? null,
     hideWhilePremounted: "opacity"
   });
-  return /* @__PURE__ */ jsx17(Freeze, {
+  return /* @__PURE__ */ jsx18(Freeze, {
     frame: freezeFrame,
     active: isPremountingOrPostmounting,
     _remotionInternalIsPremounting: premountingActive,
-    children: /* @__PURE__ */ jsx17(Sequence, {
+    children: /* @__PURE__ */ jsx18(Sequence, {
       layout: "none",
       from: from ?? 0,
       trimBefore,
@@ -7312,7 +7449,7 @@ var AbsoluteFillWithTiming = ({
       _remotionInternalPostmountDisplay: effectivePostmountFor || null,
       _remotionInternalIsPremounting: premountingActive,
       _remotionInternalIsPostmounting: postmountingActive,
-      children: /* @__PURE__ */ jsx17(AbsoluteFillElement, {
+      children: /* @__PURE__ */ jsx18(AbsoluteFillElement, {
         ref: callbackRef,
         ...divProps,
         style: premountingStyle ?? undefined,
@@ -7346,13 +7483,13 @@ var AbsoluteFillInner = ({
     setRef(ref, element);
   }, [ref]);
   if (videoConfig === null) {
-    return hidden ? null : /* @__PURE__ */ jsx17(AbsoluteFillElement, {
+    return hidden ? null : /* @__PURE__ */ jsx18(AbsoluteFillElement, {
       ref: callbackRef,
       ...divProps,
       children
     });
   }
-  return /* @__PURE__ */ jsx17(AbsoluteFillWithTiming, {
+  return /* @__PURE__ */ jsx18(AbsoluteFillWithTiming, {
     ...divProps,
     ref: callbackRef,
     from,
@@ -7384,15 +7521,14 @@ addSequenceStackTraces(AbsoluteFill);
 // src/animated-image/AnimatedImage.tsx
 import {
   forwardRef as forwardRef4,
-  useEffect as useEffect7,
   useImperativeHandle as useImperativeHandle2,
   useLayoutEffect as useLayoutEffect9,
   useRef as useRef11,
-  useState as useState9
+  useState as useState10
 } from "react";
 
 // src/use-crop-style.ts
-import { useMemo as useMemo20 } from "react";
+import { useMemo as useMemo21 } from "react";
 var useCropStyle = ({
   cropLeft,
   cropRight,
@@ -7402,7 +7538,7 @@ var useCropStyle = ({
   componentName
 }) => {
   validateSequenceCrop({ cropLeft, cropRight, cropTop, cropBottom }, componentName);
-  return useMemo20(() => {
+  return useMemo21(() => {
     const cropClipPath = getSequenceCropClipPath({
       ...resolveSequenceCrop({ cropLeft, cropRight, cropTop, cropBottom }),
       style
@@ -7415,7 +7551,7 @@ var useCropStyle = ({
 };
 
 // src/animated-image/canvas.tsx
-import React27, { useCallback as useCallback9, useImperativeHandle, useMemo as useMemo22, useRef as useRef10 } from "react";
+import React28, { useCallback as useCallback9, useImperativeHandle, useMemo as useMemo23, useRef as useRef10 } from "react";
 
 // src/calculate-image-fit.ts
 var calculateImageFit = (fit, imageSize, canvasSize) => {
@@ -7626,6 +7762,8 @@ var getGpuDevice = () => {
 // src/effects/run-effect-chain.ts
 var createEffectChainState = (width, height) => {
   const state = {
+    width,
+    height,
     pool: new CanvasPool(width, height, (canvas) => {
       const dead = state.cleanupRegistry.filter((entry) => entry.target === canvas);
       state.cleanupRegistry = state.cleanupRegistry.filter((entry) => entry.target !== canvas);
@@ -7668,15 +7806,7 @@ var ensureSetup = (state, def, target) => {
   state.cleanupRegistry.push({ definition: widened, state: setupState, target });
   return setupState;
 };
-var runEffectChain = async ({
-  state,
-  source,
-  effects,
-  output,
-  width,
-  height
-}) => {
-  const runId = ++state.currentRunId;
+var runEffectChainWithoutResize = async ({ state, source, effects, output, width, height }, initialFlipSourceY, runId) => {
   const isCancelled = () => state.currentRunId !== runId;
   const enabledEffects = effects.filter((e) => !e.params.disabled);
   const runs = groupByBackend(enabledEffects);
@@ -7705,51 +7835,57 @@ var runEffectChain = async ({
   if (isCancelled()) {
     return false;
   }
-  let flipWebGLSourceY = true;
-  for (let runIndex = 0;runIndex < runs.length; runIndex++) {
-    const run = runs[runIndex];
-    let canvasIndex = 0;
-    for (const eff of run.effects) {
-      const dst = state.pool.getCanvas(run.backend, canvasIndex);
-      const def = eff.definition;
-      if (run.backend === "webgl2") {
-        state.pool.assertContextNotLost(dst);
-      }
-      const setupState = ensureSetup(state, def, dst);
-      def.apply({
-        source: currentImage,
-        target: dst,
-        state: setupState,
-        params: eff.params,
-        width,
-        height,
-        gpuDevice,
-        flipSourceY: run.backend === "webgl2" ? flipWebGLSourceY : false
-      });
-      if (run.backend === "webgl2") {
-        flipWebGLSourceY = true;
-      }
-      currentImage = dst;
-      canvasIndex = canvasIndex === 0 ? 1 : 0;
-    }
-    lastTarget = currentImage ?? lastTarget;
-    const nextRun = runs[runIndex + 1];
-    if (nextRun && nextRun.backend !== run.backend && lastTarget) {
-      if (run.backend === "2d" && nextRun.backend === "webgl2") {
-        currentImage = lastTarget;
-        flipWebGLSourceY = true;
-      } else {
-        const bitmap = await createImageBitmap(lastTarget);
-        if (isCancelled()) {
-          bitmap.close();
-          return false;
+  let flipWebGLSourceY = initialFlipSourceY;
+  let bridgeBitmap = null;
+  try {
+    for (let runIndex = 0;runIndex < runs.length; runIndex++) {
+      const run = runs[runIndex];
+      let canvasIndex = 0;
+      for (const eff of run.effects) {
+        const dst = state.pool.getCanvas(run.backend, canvasIndex);
+        const def = eff.definition;
+        if (run.backend === "webgl2") {
+          state.pool.assertContextNotLost(dst);
+        }
+        const setupState = ensureSetup(state, def, dst);
+        def.apply({
+          source: currentImage,
+          target: dst,
+          state: setupState,
+          params: eff.params,
+          width: state.width,
+          height: state.height,
+          gpuDevice,
+          flipSourceY: run.backend === "webgl2" ? flipWebGLSourceY : false
+        });
+        bridgeBitmap?.close();
+        bridgeBitmap = null;
+        if (run.backend === "webgl2") {
+          flipWebGLSourceY = true;
         }
-        currentImage = bitmap;
-        if (nextRun.backend === "webgl2") {
-          flipWebGLSourceY = false;
+        currentImage = dst;
+        canvasIndex = canvasIndex === 0 ? 1 : 0;
+      }
+      lastTarget = currentImage ?? lastTarget;
+      const nextRun = runs[runIndex + 1];
+      if (nextRun && nextRun.backend !== run.backend && lastTarget) {
+        if (run.backend === "2d" && nextRun.backend === "webgl2") {
+          currentImage = lastTarget;
+          flipWebGLSourceY = true;
+        } else {
+          bridgeBitmap = await createImageBitmap(lastTarget);
+          if (isCancelled()) {
+            return false;
+          }
+          currentImage = bridgeBitmap;
+          if (nextRun.backend === "webgl2") {
+            flipWebGLSourceY = false;
+          }
         }
       }
     }
+  } finally {
+    bridgeBitmap?.close();
   }
   if (!lastTarget) {
     return true;
@@ -7762,14 +7898,41 @@ var runEffectChain = async ({
   outCtx.drawImage(lastTarget, 0, 0, width, height);
   return true;
 };
+var runEffectChain = async (options) => {
+  const { state, source, width, height, effects } = options;
+  const runId = ++state.currentRunId;
+  if (state.width === width && state.height === height || !effects.some((effect) => !effect.params.disabled)) {
+    return runEffectChainWithoutResize(options, true, runId);
+  }
+  const firstEnabledEffect = effects.find((effect) => !effect.params.disabled);
+  const resized = await createImageBitmap(source, {
+    resizeWidth: state.width,
+    resizeHeight: state.height,
+    imageOrientation: firstEnabledEffect.definition.backend === "webgl2" ? "flipY" : "none"
+  });
+  try {
+    if (state.currentRunId !== runId) {
+      return false;
+    }
+    return await runEffectChainWithoutResize({ ...options, source: resized }, false, runId);
+  } finally {
+    resized.close();
+  }
+};
 
 // src/effects/use-effect-chain-state.ts
-import { useEffect as useEffect6, useMemo as useMemo21, useRef as useRef9 } from "react";
-var useEffectChainState = () => {
+import { useEffect as useEffect7, useMemo as useMemo22, useRef as useRef9 } from "react";
+var useEffectChainState = (effectsOutputSize = null) => {
+  const effectWidth = effectsOutputSize?.width;
+  const effectHeight = effectsOutputSize?.height;
+  if (effectsOutputSize) {
+    validateDimension(effectWidth, "effectsOutputSize.width", "on an effect-capable component");
+    validateDimension(effectHeight, "effectsOutputSize.height", "on an effect-capable component");
+  }
   const chainStateRef = useRef9(null);
   const sizeRef = useRef9(null);
   const unmountedRef = useRef9(false);
-  useEffect6(() => {
+  useEffect7(() => {
     unmountedRef.current = false;
     return () => {
       unmountedRef.current = true;
@@ -7780,8 +7943,10 @@ var useEffectChainState = () => {
       }
     };
   }, []);
-  return useMemo21(() => ({
+  return useMemo22(() => ({
     get: (width, height) => {
+      width = effectWidth ?? width;
+      height = effectHeight ?? height;
       if (unmountedRef.current) {
         return null;
       }
@@ -7794,15 +7959,15 @@ var useEffectChainState = () => {
       }
       return chainStateRef.current;
     }
-  }), []);
+  }), [effectWidth, effectHeight]);
 };
 
 // src/animated-image/canvas.tsx
-import { jsx as jsx18 } from "react/jsx-runtime";
-var CanvasRefForwardingFunction = ({ width, height, fit, className, style, effects, ...props }, ref) => {
+import { jsx as jsx19 } from "react/jsx-runtime";
+var CanvasRefForwardingFunction = ({ width, height, fit, className, style, effects, effectsOutputSize, ...props }, ref) => {
   const canvasRef = useRef10(null);
-  const chainState = useEffectChainState();
-  const sourceCanvas = useMemo22(() => {
+  const chainState = useEffectChainState(effectsOutputSize);
+  const sourceCanvas = useMemo23(() => {
     if (typeof document === "undefined") {
       return null;
     }
@@ -7860,14 +8025,14 @@ var CanvasRefForwardingFunction = ({ width, height, fit, className, style, effec
       }
     };
   }, [draw]);
-  return /* @__PURE__ */ jsx18("canvas", {
+  return /* @__PURE__ */ jsx19("canvas", {
     ref: canvasRef,
     className,
     style,
     ...props
   });
 };
-var Canvas = React27.forwardRef(CanvasRefForwardingFunction);
+var Canvas = React28.forwardRef(CanvasRefForwardingFunction);
 
 // src/animated-image/create-image-decoder.ts
 var createImageDecoder = async ({
@@ -8099,7 +8264,7 @@ var resolveAnimatedImageSource = (src) => {
 };
 
 // src/animated-image/AnimatedImage.tsx
-import { jsx as jsx19 } from "react/jsx-runtime";
+import { jsx as jsx20 } from "react/jsx-runtime";
 import { createElement } from "react";
 var animatedImageSchema = {
   src: {
@@ -8138,12 +8303,14 @@ var AnimatedImageContent = forwardRef4(({
   fit = "fill",
   requestInit,
   effects,
+  effectsOutputSize,
   controls,
   ...props
 }, canvasRef) => {
   const resolvedSrc = resolveAnimatedImageSource(src);
-  const [decodedImage, setDecodedImage] = useState9(null);
+  const [decodedImage, setDecodedImage] = useState10(null);
   const imageDecoder = decodedImage?.decoder ?? null;
+  const activeDecoderRef = useRef11(null);
   const { delayRender, continueRender, cancelRender } = useDelayRender();
   const frame = useCurrentFrame();
   const { fps } = useVideoConfig();
@@ -8166,12 +8333,13 @@ var AnimatedImageContent = forwardRef4(({
     }
     return c;
   }, []);
-  const [initialLoopBehavior] = useState9(() => loopBehavior);
+  const [initialLoopBehavior] = useState10(() => loopBehavior);
   useLayoutEffect9(() => {
     const decodeHandle = delayRender(`Rendering <AnimatedImage/> with src="${resolvedSrc}"`);
     const controller = new AbortController;
     let cancelled = false;
     let continued = false;
+    let decoder = null;
     const continueRenderOnce = () => {
       if (continued) {
         return;
@@ -8190,6 +8358,8 @@ var AnimatedImageContent = forwardRef4(({
         d.close();
         return;
       }
+      decoder = d;
+      activeDecoderRef.current = d;
       setDecodedImage({ decoder: d, handle: decodeHandle });
     }).catch((err) => {
       if (cancelled) {
@@ -8208,6 +8378,8 @@ var AnimatedImageContent = forwardRef4(({
     });
     return () => {
       cancelled = true;
+      activeDecoderRef.current = null;
+      decoder?.close();
       controller.abort();
       continueRenderOnce();
     };
@@ -8220,13 +8392,8 @@ var AnimatedImageContent = forwardRef4(({
     delayRender,
     cancelRender
   ]);
-  useEffect7(() => {
-    return () => {
-      imageDecoder?.close();
-    };
-  }, [imageDecoder]);
   useLayoutEffect9(() => {
-    if (!imageDecoder || !decodedImage) {
+    if (!imageDecoder || !decodedImage || activeDecoderRef.current !== imageDecoder) {
       return;
     }
     const delay = delayRender(`Rendering frame at ${currentTime} of <AnimatedImage src="${src}"/>`);
@@ -8273,14 +8440,17 @@ var AnimatedImageContent = forwardRef4(({
     fit,
     width,
     height,
-    cancelRender
+    cancelRender,
+    effectsOutputSize?.width,
+    effectsOutputSize?.height
   ]);
-  return /* @__PURE__ */ jsx19(Canvas, {
+  return /* @__PURE__ */ jsx20(Canvas, {
     ref,
     width,
     height,
     fit,
     effects: memoizedEffects,
+    effectsOutputSize: effectsOutputSize ?? null,
     ...props
   });
 });
@@ -8308,6 +8478,7 @@ var AnimatedImageInner = ({
   cropBottom,
   requestInit,
   effects = [],
+  effectsOutputSize,
   controls,
   ref,
   ...sequenceProps
@@ -8361,11 +8532,11 @@ var AnimatedImageInner = ({
     requestInit,
     ...canvasProps
   };
-  return /* @__PURE__ */ jsx19(Freeze, {
+  return /* @__PURE__ */ jsx20(Freeze, {
     frame: freezeFrame,
     active: isPremountingOrPostmounting,
     _remotionInternalIsPremounting: premountingActive,
-    children: /* @__PURE__ */ jsx19(Sequence, {
+    children: /* @__PURE__ */ jsx20(Sequence, {
       layout: "none",
       from: from ?? 0,
       playbackRate,
@@ -8379,11 +8550,12 @@ var AnimatedImageInner = ({
       _remotionInternalIsPremounting: premountingActive,
       _remotionInternalIsPostmounting: postmountingActive,
       ...sequenceProps,
-      children: /* @__PURE__ */ jsx19(SequenceContent, {
-        children: /* @__PURE__ */ jsx19(AnimatedImageContent, {
+      children: /* @__PURE__ */ jsx20(SequenceContent, {
+        children: /* @__PURE__ */ jsx20(AnimatedImageContent, {
           ...animatedImageProps,
           ref: actualRef,
           effects,
+          effectsOutputSize: effectsOutputSize ?? null,
           controls
         })
       })
@@ -8398,8 +8570,8 @@ var AnimatedImageWithIntrinsicDuration = (props) => {
   requestInitRef.current = requestInit;
   const onErrorRef = useRef11(props.onError);
   onErrorRef.current = props.onError;
-  const [duration, setDuration] = useState9(null);
-  const [failedHandle, setFailedHandle] = useState9(null);
+  const [duration, setDuration] = useState10(null);
+  const [failedHandle, setFailedHandle] = useState10(null);
   useLayoutEffect9(() => {
     const handle = delayRender(`Finding duration of <AnimatedImage src="${src}" />`);
     const controller = new AbortController;
@@ -8444,7 +8616,7 @@ var AnimatedImageWithIntrinsicDuration = (props) => {
   if (duration === null || failedHandle !== null) {
     return null;
   }
-  return /* @__PURE__ */ jsx19(AnimatedImageInner, {
+  return /* @__PURE__ */ jsx20(AnimatedImageInner, {
     ...props,
     durationInFrames: duration.durationInFrames
   });
@@ -8458,7 +8630,7 @@ var AnimatedImageComponent = (props) => {
       key: `${resolvedSrc}-${requestInitKey}-${props.trimBefore ?? 0}`
     });
   }
-  return /* @__PURE__ */ jsx19(AnimatedImageInner, {
+  return /* @__PURE__ */ jsx20(AnimatedImageInner, {
     ...props
   });
 };
@@ -8503,17 +8675,17 @@ var createEffect = (definition) => {
   return factory;
 };
 // src/Artifact.tsx
-import { useContext as useContext28, useLayoutEffect as useLayoutEffect11, useState as useState11 } from "react";
+import { useContext as useContext29, useLayoutEffect as useLayoutEffect11, useState as useState12 } from "react";
 
 // src/RenderAssetManager.tsx
 import {
-  createContext as createContext28,
+  createContext as createContext29,
   useCallback as useCallback10,
   useImperativeHandle as useImperativeHandle3,
   useLayoutEffect as useLayoutEffect10,
-  useMemo as useMemo23,
+  useMemo as useMemo24,
   useRef as useRef12,
-  useState as useState10
+  useState as useState11
 } from "react";
 
 // src/validation/validate-artifact.ts
@@ -8548,8 +8720,8 @@ var validateRenderAsset = (artifact) => {
 };
 
 // src/RenderAssetManager.tsx
-import { jsx as jsx20 } from "react/jsx-runtime";
-var RenderAssetManager = createContext28({
+import { jsx as jsx21 } from "react/jsx-runtime";
+var RenderAssetManager = createContext29({
   registerRenderAsset: () => {
     return;
   },
@@ -8559,7 +8731,7 @@ var RenderAssetManager = createContext28({
   renderAssets: []
 });
 var RenderAssetManagerProvider = ({ children, collectAssets }) => {
-  const [renderAssets, setRenderAssets] = useState10([]);
+  const [renderAssets, setRenderAssets] = useState11([]);
   const renderAssetsRef = useRef12([]);
   const registerRenderAsset = useCallback10((renderAsset) => {
     validateRenderAsset(renderAsset);
@@ -8592,14 +8764,14 @@ var RenderAssetManagerProvider = ({ children, collectAssets }) => {
       };
     }
   }, []);
-  const contextValue = useMemo23(() => {
+  const contextValue = useMemo24(() => {
     return {
       registerRenderAsset,
       unregisterRenderAsset,
       renderAssets
     };
   }, [renderAssets, registerRenderAsset, unregisterRenderAsset]);
-  return /* @__PURE__ */ jsx20(RenderAssetManager.Provider, {
+  return /* @__PURE__ */ jsx21(RenderAssetManager.Provider, {
     value: contextValue,
     children
   });
@@ -8608,10 +8780,10 @@ var RenderAssetManagerProvider = ({ children, collectAssets }) => {
 // src/Artifact.tsx
 var ArtifactThumbnail = Symbol("Thumbnail");
 var Artifact = ({ filename, content, downloadBehavior }) => {
-  const { registerRenderAsset, unregisterRenderAsset } = useContext28(RenderAssetManager);
+  const { registerRenderAsset, unregisterRenderAsset } = useContext29(RenderAssetManager);
   const env = useRemotionEnvironment();
   const frame = useCurrentFrame();
-  const [id] = useState11(() => {
+  const [id] = useState12(() => {
     return String(Math.random());
   });
   useLayoutEffect11(() => {
@@ -8665,7 +8837,7 @@ var Artifact = ({ filename, content, downloadBehavior }) => {
 };
 Artifact.Thumbnail = ArtifactThumbnail;
 // src/audio/html5-audio.tsx
-import { forwardRef as forwardRef7, useCallback as useCallback17, useContext as useContext43 } from "react";
+import { forwardRef as forwardRef7, useCallback as useCallback17, useContext as useContext44 } from "react";
 
 // src/absolute-src.ts
 var getAbsoluteSrc = (relativeSrc) => {
@@ -8707,11 +8879,11 @@ var getMediaTrimAfter = ({
 };
 
 // src/loop/index.tsx
-import React28, { createContext as createContext29, useContext as useContext29, useMemo as useMemo24 } from "react";
-import { jsx as jsx21 } from "react/jsx-runtime";
-var LoopTimelineContext = createContext29(null);
+import React29, { createContext as createContext30, useContext as useContext30, useMemo as useMemo25 } from "react";
+import { jsx as jsx22 } from "react/jsx-runtime";
+var LoopTimelineContext = createContext30(null);
 var useLoop = () => {
-  return React28.useContext(LoopContext);
+  return React29.useContext(LoopContext);
 };
 var Loop = ({
   durationInFrames,
@@ -8724,7 +8896,7 @@ var Loop = ({
 }) => {
   const currentFrame = useCurrentFrame();
   const { durationInFrames: compDuration } = useVideoConfig();
-  const parentSequence = useContext29(SequenceContext);
+  const parentSequence = useContext30(SequenceContext);
   const parentPlaybackRate = parentSequence?.playbackRate ?? 1;
   const playbackRateValue = playbackRate ?? 1;
   const iterationDurationInFrames = durationInFrames / playbackRateValue;
@@ -8753,20 +8925,20 @@ var Loop = ({
   const iteration = Math.max(0, Math.min(actualTimes - 1, isAtBoundary ? nearestIteration : Math.floor(loopsElapsed)));
   const start = isAtBoundary ? currentFrame : iteration * iterationDurationInFrames;
   const from = Math.max(0, Math.min(start, maxFrame));
-  const loopDisplay = useMemo24(() => {
+  const loopDisplay = useMemo25(() => {
     return {
       numberOfTimes: Math.min(compDuration / iterationDurationInFrames, times),
       startOffset: -from,
       durationInFrames: iterationDurationInFrames
     };
   }, [compDuration, from, iterationDurationInFrames, times]);
-  const loopContext = useMemo24(() => {
+  const loopContext = useMemo25(() => {
     return {
       iteration,
       durationInFrames
     };
   }, [iteration, durationInFrames]);
-  const timelineContext = useMemo24(() => ({
+  const timelineContext = useMemo25(() => ({
     startFrame: loopStartFrame,
     firstVisibleFrame,
     endFrame,
@@ -8775,11 +8947,11 @@ var Loop = ({
   if (actualTimes === 0) {
     return null;
   }
-  return /* @__PURE__ */ jsx21(LoopTimelineContext.Provider, {
+  return /* @__PURE__ */ jsx22(LoopTimelineContext.Provider, {
     value: timelineContext,
-    children: /* @__PURE__ */ jsx21(LoopContext.Provider, {
+    children: /* @__PURE__ */ jsx22(LoopContext.Provider, {
       value: loopContext,
-      children: /* @__PURE__ */ jsx21(Sequence, {
+      children: /* @__PURE__ */ jsx22(Sequence, {
         durationInFrames,
         from,
         name: name ?? "<Loop>",
@@ -8796,7 +8968,7 @@ var Loop = ({
 Loop.useLoop = useLoop;
 
 // src/prefetch.ts
-import { useContext as useContext30 } from "react";
+import { useContext as useContext31 } from "react";
 
 // src/playback-logging.ts
 var playbackLogging = ({
@@ -8810,9 +8982,9 @@ var playbackLogging = ({
 };
 
 // src/prefetch-state.tsx
-import { createContext as createContext30, useEffect as useEffect8, useState as useState12 } from "react";
-import { jsx as jsx22 } from "react/jsx-runtime";
-var PreloadContext = createContext30({});
+import { createContext as createContext31, useEffect as useEffect8, useState as useState13 } from "react";
+import { jsx as jsx23 } from "react/jsx-runtime";
+var PreloadContext = createContext31({});
 var preloads = {};
 var updaters = [];
 var setPreloads = (updater) => {
@@ -8820,7 +8992,7 @@ var setPreloads = (updater) => {
   updaters.forEach((u) => u());
 };
 var PrefetchProvider = ({ children }) => {
-  const [_preloads, _setPreloads] = useState12(() => preloads);
+  const [_preloads, _setPreloads] = useState13(() => preloads);
   useEffect8(() => {
     const updaterFunction = () => {
       _setPreloads(preloads);
@@ -8830,7 +9002,7 @@ var PrefetchProvider = ({ children }) => {
       updaters = updaters.filter((u) => u !== updaterFunction);
     };
   }, []);
-  return /* @__PURE__ */ jsx22(PreloadContext.Provider, {
+  return /* @__PURE__ */ jsx23(PreloadContext.Provider, {
     value: _preloads,
     children
   });
@@ -8852,7 +9024,7 @@ var getSrcWithoutHash = (src) => {
   return src.slice(0, hashIndex);
 };
 var usePreload = (src) => {
-  const preloads = useContext30(PreloadContext);
+  const preloads = useContext31(PreloadContext);
   const hashFragmentIndex = removeAndGetHashFragment(src);
   const withoutHashFragment = getSrcWithoutHash(src);
   if (!preloads[withoutHashFragment]) {
@@ -9137,8 +9309,8 @@ var resolveTrimProps = ({
 };
 
 // src/video/duration-state.tsx
-import { createContext as createContext31, useMemo as useMemo25, useReducer } from "react";
-import { jsx as jsx23 } from "react/jsx-runtime";
+import { createContext as createContext32, useMemo as useMemo26, useReducer } from "react";
+import { jsx as jsx24 } from "react/jsx-runtime";
 var durationReducer = (state, action) => {
   switch (action.type) {
     case "got-duration": {
@@ -9155,7 +9327,7 @@ var durationReducer = (state, action) => {
       return state;
   }
 };
-var DurationsContext = createContext31({
+var DurationsContext = createContext32({
   durations: {},
   setDurations: () => {
     throw new Error("context missing");
@@ -9163,13 +9335,13 @@ var DurationsContext = createContext31({
 });
 var DurationsContextProvider = ({ children }) => {
   const [durations, setDurations] = useReducer(durationReducer, {});
-  const value = useMemo25(() => {
+  const value = useMemo26(() => {
     return {
       durations,
       setDurations
     };
   }, [durations]);
-  return /* @__PURE__ */ jsx23(DurationsContext.Provider, {
+  return /* @__PURE__ */ jsx24(DurationsContext.Provider, {
     value,
     children
   });
@@ -9177,14 +9349,14 @@ var DurationsContextProvider = ({ children }) => {
 
 // src/audio/AudioForPreview.tsx
 import { useCallback as useCallback16 } from "react";
-import React34, {
+import React35, {
   forwardRef as forwardRef5,
-  useContext as useContext40,
+  useContext as useContext41,
   useEffect as useEffect15,
   useImperativeHandle as useImperativeHandle4,
-  useMemo as useMemo33,
+  useMemo as useMemo34,
   useRef as useRef21,
-  useState as useState16
+  useState as useState17
 } from "react";
 
 // src/get-cross-origin-value.ts
@@ -9240,18 +9412,18 @@ var random = (seed, dummy) => {
 };
 
 // src/use-amplification.ts
-import { useContext as useContext32, useLayoutEffect as useLayoutEffect12, useRef as useRef16 } from "react";
+import { useContext as useContext33, useLayoutEffect as useLayoutEffect12, useRef as useRef16 } from "react";
 
 // src/audio/shared-audio-tags.tsx
-import React31, {
-  createContext as createContext32,
+import React32, {
+  createContext as createContext33,
   createRef as createRef2,
   useCallback as useCallback11,
-  useContext as useContext31,
+  useContext as useContext32,
   useEffect as useEffect9,
-  useMemo as useMemo27,
+  useMemo as useMemo28,
   useRef as useRef14,
-  useState as useState13
+  useState as useState14
 } from "react";
 
 // src/play-and-handle-not-allowed-error.ts
@@ -9354,7 +9526,7 @@ var makeSharedElementSourceNode = ({
 };
 
 // src/audio/use-audio-context.ts
-import { useMemo as useMemo26, useRef as useRef13 } from "react";
+import { useMemo as useMemo27, useRef as useRef13 } from "react";
 var warned = false;
 var warnOnce = (logLevel) => {
   if (warned) {
@@ -9376,7 +9548,7 @@ var useSingletonAudioContext = ({
   if (sampleRate !== initialSampleRate.current) {
     throw new Error(`Changing the AudioContext sample rate dynamically is not supported. The sample rate was initialized with ${initialSampleRate.current} Hz, but ${sampleRate} Hz was passed later.`);
   }
-  const context = useMemo26(() => {
+  const context = useMemo27(() => {
     if (env.isRendering) {
       return null;
     }
@@ -9513,7 +9685,7 @@ var waitUntilActuallyResumed = (audioContext, logLevel, signal, isAutoPlayAttemp
 };
 
 // src/audio/shared-audio-tags.tsx
-import { jsx as jsx24, jsxs as jsxs2 } from "react/jsx-runtime";
+import { jsx as jsx25, jsxs as jsxs2 } from "react/jsx-runtime";
 var EMPTY_AUDIO = "data:audio/mp3;base64,/+MYxAAJcAV8AAgAABn//////+/gQ5BAMA+D4Pg+BAQBAEAwD4Pg+D4EBAEAQDAPg++hYBH///hUFQVBUFREDQNHmf///////+MYxBUGkAGIMAAAAP/29Xt6lUxBTUUzLjEwMFVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVV/+MYxDUAAANIAAAAAFVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVV";
 var compareProps = (obj1, obj2) => {
   const keysA = Object.keys(obj1).sort();
@@ -9540,8 +9712,8 @@ var didPropChange = (key, newProp, prevProp) => {
   }
   return true;
 };
-var SharedAudioContext = createContext32(null);
-var SharedAudioTagsContext = createContext32(null);
+var SharedAudioContext = createContext33(null);
+var SharedAudioTagsContext = createContext33(null);
 var shouldSaveForLater = (state) => {
   if (state === "suspended" || state === "running-to-suspended" || state === "interrupted") {
     return true;
@@ -9574,9 +9746,9 @@ var SharedAudioContextProvider = ({
   const isResuming = useRef14(null);
   const nextResumeAttemptId = useRef14(0);
   const nextResumeIsAutoPlayAttempt = useRef14(false);
-  const audioSyncAnchor = useMemo27(() => ({ value: 0 }), []);
+  const audioSyncAnchor = useMemo28(() => ({ value: 0 }), []);
   const audioSyncAnchorListeners = useRef14([]);
-  const audioSyncAnchorEmitter = useMemo27(() => {
+  const audioSyncAnchorEmitter = useMemo28(() => {
     return {
       dispatch: (event) => {
         audioSyncAnchorListeners.current.forEach((l) => l(event));
@@ -9594,9 +9766,9 @@ var SharedAudioContextProvider = ({
   const prevEndTimes = useRef14({ scheduledEndTime: null, mediaEndTime: null });
   const nodesToResume = useRef14(new Map);
   const unscheduleAudioNode = useCallback11((node) => {
-    nodesToResume.current.delete(node);
+    return nodesToResume.current.delete(node);
   }, []);
-  const scheduleAudioNode = useMemo27(() => {
+  const scheduleAudioNode = useMemo28(() => {
     return ({
       node,
       mediaTimestamp,
@@ -9741,7 +9913,7 @@ var SharedAudioContextProvider = ({
       ctxAndGain.suspend().catch(() => {});
     };
   }, [ctxAndGain, _experimentalKeepAudioContextAlive]);
-  const audioContextValue = useMemo27(() => {
+  const audioContextValue = useMemo28(() => {
     return {
       sampleRate,
       audioContext: ctxAndGain?.audioContext ?? null,
@@ -9770,24 +9942,24 @@ var SharedAudioContextProvider = ({
     unscheduleAudioNode,
     _experimentalKeepAudioContextAlive
   ]);
-  return /* @__PURE__ */ jsx24(SharedAudioContext.Provider, {
+  return /* @__PURE__ */ jsx25(SharedAudioContext.Provider, {
     value: audioContextValue,
     children
   });
 };
 var SharedAudioTagsContextProvider = ({ children, numberOfAudioTags }) => {
   const audios = useRef14([]);
-  const [initialNumberOfAudioTags] = useState13(numberOfAudioTags);
+  const [initialNumberOfAudioTags] = useState14(numberOfAudioTags);
   if (numberOfAudioTags !== initialNumberOfAudioTags) {
     throw new Error("The number of shared audio tags has changed dynamically. Once you have set this property, you cannot change it afterwards.");
   }
   const logLevel = useLogLevel();
   const mountTime = useMountTime();
   const env = useRemotionEnvironment();
-  const audioCtx = useContext31(SharedAudioContext);
+  const audioCtx = useContext32(SharedAudioContext);
   const audioContext = audioCtx?.audioContext ?? null;
   const resume = audioCtx?.resume;
-  const [refs] = useState13(() => {
+  const [refs] = useState14(() => {
     return new Array(numberOfAudioTags).fill(true).map(() => {
       const ref = createRef2();
       return {
@@ -9803,7 +9975,7 @@ var SharedAudioTagsContextProvider = ({ children, numberOfAudioTags }) => {
   for (const { mediaElementSourceNode } of refs) {
     mediaElementSourceNode?.setAudioContext(audioContext);
   }
-  const effectToUse = React31.useInsertionEffect ?? React31.useLayoutEffect;
+  const effectToUse = React32.useInsertionEffect ?? React32.useLayoutEffect;
   effectToUse(() => {
     return () => {
       requestAnimationFrame(() => {
@@ -9929,7 +10101,7 @@ var SharedAudioTagsContextProvider = ({ children, numberOfAudioTags }) => {
     });
     resume?.();
   }, [logLevel, mountTime, refs, env.isPlayer, resume]);
-  const audioTagsValue = useMemo27(() => {
+  const audioTagsValue = useMemo28(() => {
     return {
       registerAudio,
       unregisterAudio,
@@ -9944,9 +10116,9 @@ var SharedAudioTagsContextProvider = ({ children, numberOfAudioTags }) => {
     unregisterAudio,
     updateAudio
   ]);
-  const sharedAudioTagElements = useMemo27(() => {
+  const sharedAudioTagElements = useMemo28(() => {
     return refs.map(({ id, ref }) => {
-      return /* @__PURE__ */ jsx24("audio", {
+      return /* @__PURE__ */ jsx25("audio", {
         ref,
         preload: "metadata",
         src: EMPTY_AUDIO
@@ -9967,13 +10139,13 @@ var useSharedAudio = ({
   premounting,
   postmounting
 }) => {
-  const audioCtx = useContext31(SharedAudioContext);
-  const tagsCtx = useContext31(SharedAudioTagsContext);
-  const [elem] = useState13(() => {
+  const audioCtx = useContext32(SharedAudioContext);
+  const tagsCtx = useContext32(SharedAudioTagsContext);
+  const [elem] = useState14(() => {
     if (tagsCtx && tagsCtx.numberOfAudioTags > 0) {
       return tagsCtx.registerAudio({ aud, audioId, premounting, postmounting });
     }
-    const el = React31.createRef();
+    const el = React32.createRef();
     const mediaElementSourceNode = makeSharedElementSourceNode({
       audioContext: audioCtx?.audioContext ?? null,
       ref: el
@@ -9993,7 +10165,7 @@ var useSharedAudio = ({
     };
   });
   elem.mediaElementSourceNode?.setAudioContext(audioCtx?.audioContext ?? null);
-  const effectToUse = React31.useInsertionEffect ?? React31.useLayoutEffect;
+  const effectToUse = React32.useInsertionEffect ?? React32.useLayoutEffect;
   if (typeof document !== "undefined") {
     effectToUse(() => {
       if (tagsCtx && tagsCtx.numberOfAudioTags > 0) {
@@ -10157,7 +10329,7 @@ var useVolume = ({
   const audioStuffRef = useRef16(null);
   const currentVolumeRef = useRef16(volume);
   currentVolumeRef.current = volume;
-  const sharedAudioContext = useContext32(SharedAudioContext);
+  const sharedAudioContext = useContext33(SharedAudioContext);
   if (!sharedAudioContext) {
     throw new Error("useAmplification must be used within a SharedAudioContext");
   }
@@ -10223,19 +10395,19 @@ var useVolume = ({
 };
 
 // src/use-media-in-timeline.ts
-import { useCallback as useCallback12, useContext as useContext34, useMemo as useMemo28 } from "react";
+import { useCallback as useCallback12, useContext as useContext35, useMemo as useMemo29 } from "react";
 
 // src/audio/use-audio-frame.ts
-import { createContext as createContext33, useContext as useContext33 } from "react";
-var Html5MediaTrimContext = createContext33(0);
+import { createContext as createContext34, useContext as useContext34 } from "react";
+var Html5MediaTrimContext = createContext34(0);
 var useMediaStartsAt = () => {
-  const parentSequence = useContext33(SequenceContext);
+  const parentSequence = useContext34(SequenceContext);
   return parentSequence?.cumulatedNegativeFrom ?? 0;
 };
 var useFrameForVolumeProp = (behavior) => {
   const loop = Loop.useLoop();
-  const loopTimeline = useContext33(LoopTimelineContext);
-  const sequenceContext = useContext33(SequenceContext);
+  const loopTimeline = useContext34(LoopTimelineContext);
+  const sequenceContext = useContext34(SequenceContext);
   const frame = useCurrentFrame();
   const startsAt = useMediaStartsAt();
   if (behavior === "repeat" || loop === null) {
@@ -10303,7 +10475,7 @@ var useBasicMediaInTimeline = ({
   if (!src) {
     throw new Error("No src passed");
   }
-  const parentSequence = useContext34(SequenceContext);
+  const parentSequence = useContext35(SequenceContext);
   const duration = getTimelineDuration({
     compositionDurationInFrames: sequenceDurationInFrames,
     playbackRate,
@@ -10313,7 +10485,7 @@ var useBasicMediaInTimeline = ({
     loop
   });
   const startMediaFrom = 0 - mediaStartsAt + (trimBefore ?? 0);
-  const memoizedResult = useMemo28(() => {
+  const memoizedResult = useMemo29(() => {
     return {
       duration,
       finalDisplayName: displayName ?? getAssetDisplayName(src),
@@ -10339,17 +10511,17 @@ var useMediaInTimelineRegistration = ({
   documentationLink,
   muted
 }) => {
-  const parentSequence = useContext34(SequenceContext);
-  const timelineTrack = useContext34(TimelineTrackContext);
-  const mediaTrimBefore = useContext34(Html5MediaTrimContext);
-  const sequenceRegistrationEnabled = useContext34(SequenceRegistrationContext);
+  const parentSequence = useContext35(SequenceContext);
+  const timelineTrack = useContext35(TimelineTrackContext);
+  const mediaTrimBefore = useContext35(Html5MediaTrimContext);
+  const sequenceRegistrationEnabled = useContext35(SequenceRegistrationContext);
   const { durationInFrames } = useVideoConfig();
   const mediaStartsAt = useMediaStartsAt();
-  const canvasOutlinesEnabled = useContext34(SequenceOutlineContext);
+  const canvasOutlinesEnabled = useContext35(SequenceOutlineContext);
   const { isStudio } = useRemotionEnvironment();
   const stack = getStack();
   const getStackForRegistration = useCallback12(() => stack, [stack]);
-  const automaticOutlineRef = useMemo28(() => mediaType === "video" && (isStudio || canvasOutlinesEnabled) ? SequenceOutlineInternals.createRef() : null, [canvasOutlinesEnabled, isStudio, mediaType]);
+  const automaticOutlineRef = useMemo29(() => mediaType === "video" && (isStudio || canvasOutlinesEnabled) ? SequenceOutlineInternals.createRef() : null, [canvasOutlinesEnabled, isStudio, mediaType]);
   const { duration, finalDisplayName } = useBasicMediaInTimeline({
     src,
     displayName,
@@ -10430,30 +10602,30 @@ var useMediaInTimelineRegistration = ({
 // src/use-media-playback.ts
 import {
   useCallback as useCallback15,
-  useContext as useContext37,
+  useContext as useContext38,
   useEffect as useEffect13,
   useLayoutEffect as useLayoutEffect14,
   useRef as useRef19
 } from "react";
 
 // src/buffer-until-first-frame.ts
-import { useCallback as useCallback14, useMemo as useMemo31, useRef as useRef17 } from "react";
+import { useCallback as useCallback14, useMemo as useMemo32, useRef as useRef17 } from "react";
 
 // src/use-buffer-state.ts
-import { useContext as useContext36, useMemo as useMemo30 } from "react";
+import { useContext as useContext37, useMemo as useMemo31 } from "react";
 
 // src/buffering.tsx
-import React32, {
+import React33, {
   useCallback as useCallback13,
-  useContext as useContext35,
+  useContext as useContext36,
   useEffect as useEffect10,
   useLayoutEffect as useLayoutEffect13,
-  useMemo as useMemo29,
-  useState as useState14
+  useMemo as useMemo30,
+  useState as useState15
 } from "react";
-import { jsx as jsx25 } from "react/jsx-runtime";
+import { jsx as jsx26 } from "react/jsx-runtime";
 var useBufferManager = (logLevel, mountTime, setBuffering, isBuffering) => {
-  const [blockCount, setBlockCount] = useState14(0);
+  const [blockCount, setBlockCount] = useState15(0);
   const env = useRemotionEnvironment();
   const rendering = env.isRendering;
   const addBlock = useCallback13(() => {
@@ -10506,14 +10678,14 @@ var useBufferManager = (logLevel, mountTime, setBuffering, isBuffering) => {
       }
     }, [blockCount]);
   }
-  return useMemo29(() => ({ addBlock }), [addBlock]);
+  return useMemo30(() => ({ addBlock }), [addBlock]);
 };
-var BufferingContextReact = React32.createContext(null);
+var BufferingContextReact = React33.createContext(null);
 var BufferingProvider = ({ children }) => {
-  const { logLevel, mountTime } = useContext35(LogLevelContext);
-  const { isBuffering, setBuffering } = useContext35(SetTimelineContext);
+  const { logLevel, mountTime } = useContext36(LogLevelContext);
+  const { isBuffering, setBuffering } = useContext36(SetTimelineContext);
   const bufferManager = useBufferManager(logLevel ?? "info", mountTime, setBuffering, isBuffering);
-  return /* @__PURE__ */ jsx25(BufferingContextReact.Provider, {
+  return /* @__PURE__ */ jsx26(BufferingContextReact.Provider, {
     value: bufferManager,
     children
   });
@@ -10521,10 +10693,10 @@ var BufferingProvider = ({ children }) => {
 
 // src/use-buffer-state.ts
 var useBufferState = () => {
-  const buffer = useContext36(BufferingContextReact);
+  const buffer = useContext37(BufferingContextReact);
   const logLevel = useLogLevel();
   const addBlock = buffer ? buffer.addBlock : null;
-  return useMemo30(() => ({
+  return useMemo31(() => ({
     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");
@@ -10632,7 +10804,7 @@ var useBufferUntilFirstFrame = ({
     onVariableFpsVideoDetected,
     pauseWhenBuffering
   ]);
-  return useMemo31(() => {
+  return useMemo32(() => {
     return {
       isBuffering: () => bufferingRef.current,
       bufferUntilFirstFrame
@@ -10709,9 +10881,9 @@ var getMediaSyncAction = (input) => {
 };
 
 // src/media-tag-current-time-timestamp.ts
-import React33 from "react";
+import React34 from "react";
 var useCurrentTimeOfMediaTagWithUpdateTimeStamp = (mediaRef) => {
-  const lastUpdate = React33.useRef({
+  const lastUpdate = React34.useRef({
     time: mediaRef.current?.currentTime ?? 0,
     lastUpdate: performance.now()
   });
@@ -10745,7 +10917,7 @@ var seek = ({
 };
 
 // src/use-media-buffering.ts
-import { useEffect as useEffect11, useState as useState15 } from "react";
+import { useEffect as useEffect11, useState as useState16 } from "react";
 var useMediaBuffering = ({
   element,
   shouldBuffer,
@@ -10756,7 +10928,7 @@ var useMediaBuffering = ({
   src
 }) => {
   const buffer = useBufferState();
-  const [isBuffering, setIsBuffering] = useState15(false);
+  const [isBuffering, setIsBuffering] = useState16(false);
   useEffect11(() => {
     let cleanupFns = [];
     const { current } = element;
@@ -11044,7 +11216,7 @@ var useMediaPlayback = ({
   const playing = usePlaying();
   const playerBuffering = useBuffering();
   const { fps } = useVideoConfig();
-  const mediaTrimBefore = useContext37(Html5MediaTrimContext);
+  const mediaTrimBefore = useContext38(Html5MediaTrimContext);
   const lastSeekDueToShift = useRef19(null);
   const lastSeek = useRef19(null);
   const logLevel = useLogLevel();
@@ -11090,7 +11262,7 @@ var useMediaPlayback = ({
     logLevel,
     mountTime
   });
-  const sequenceContext = useContext37(SequenceContext);
+  const sequenceContext = useContext38(SequenceContext);
   const playbackRate = localPlaybackRate * globalPlaybackRate * (sequenceContext?.playbackRate ?? 1);
   const acceptableTimeShiftButLessThanDuration = (() => {
     if (mediaRef.current?.duration) {
@@ -11254,7 +11426,7 @@ var useMediaPlayback = ({
 };
 
 // src/use-media-tag.ts
-import { useContext as useContext38, useEffect as useEffect14, useRef as useRef20 } from "react";
+import { useContext as useContext39, useEffect as useEffect14, useRef as useRef20 } from "react";
 var useMediaTag = ({
   mediaRef,
   id,
@@ -11264,7 +11436,7 @@ var useMediaTag = ({
   isPostmounting
 }) => {
   const { audioAndVideoTags, isPlaying } = useTimelineContext();
-  const { subscribePlaying } = useContext38(SetTimelineContext);
+  const { subscribePlaying } = useContext39(SetTimelineContext);
   const isPlayingRef = useRef20(isPlaying);
   isPlayingRef.current = isPlaying;
   const logLevel = useLogLevel();
@@ -11328,12 +11500,12 @@ var useMediaTag = ({
 };
 
 // src/volume-position-state.ts
-import { createContext as createContext34, useContext as useContext39, useMemo as useMemo32 } from "react";
-var MediaVolumeContext = createContext34({
+import { createContext as createContext35, useContext as useContext40, useMemo as useMemo33 } from "react";
+var MediaVolumeContext = createContext35({
   playerMuted: false,
   mediaVolume: 1
 });
-var SetMediaVolumeContext = createContext34({
+var SetMediaVolumeContext = createContext35({
   setPlayerMuted: () => {
     throw new Error("default");
   },
@@ -11342,16 +11514,16 @@ var SetMediaVolumeContext = createContext34({
   }
 });
 var useMediaVolumeState = () => {
-  const { mediaVolume } = useContext39(MediaVolumeContext);
-  const { setMediaVolume } = useContext39(SetMediaVolumeContext);
-  return useMemo32(() => {
+  const { mediaVolume } = useContext40(MediaVolumeContext);
+  const { setMediaVolume } = useContext40(SetMediaVolumeContext);
+  return useMemo33(() => {
     return [mediaVolume, setMediaVolume];
   }, [mediaVolume, setMediaVolume]);
 };
 var usePlayerMutedState = () => {
-  const { playerMuted } = useContext39(MediaVolumeContext);
-  const { setPlayerMuted } = useContext39(SetMediaVolumeContext);
-  return useMemo32(() => {
+  const { playerMuted } = useContext40(MediaVolumeContext);
+  const { setPlayerMuted } = useContext40(SetMediaVolumeContext);
+  return useMemo33(() => {
     return [playerMuted, setPlayerMuted];
   }, [playerMuted, setPlayerMuted]);
 };
@@ -11421,9 +11593,9 @@ var useMediaAudioState = ({
 };
 
 // src/audio/AudioForPreview.tsx
-import { jsx as jsx26 } from "react/jsx-runtime";
+import { jsx as jsx27 } from "react/jsx-runtime";
 var AudioForDevelopmentForwardRefFunction = (props, ref) => {
-  const [initialShouldPreMountAudioElements] = useState16(props.shouldPreMountAudioTags);
+  const [initialShouldPreMountAudioElements] = useState17(props.shouldPreMountAudioTags);
   if (props.shouldPreMountAudioTags !== initialShouldPreMountAudioElements) {
     throw new Error("Cannot change the behavior for pre-mounting audio tags dynamically.");
   }
@@ -11466,14 +11638,14 @@ var AudioForDevelopmentForwardRefFunction = (props, ref) => {
     throw new TypeError("No 'src' was passed to <Html5Audio>.");
   }
   const preloadedSrc = usePreload(src);
-  const sequenceContext = useContext40(SequenceContext);
+  const sequenceContext = useContext41(SequenceContext);
   warnAboutTooHighVolume(userPreferredVolume);
   const crossOriginValue = getCrossOriginValue({
     crossOrigin,
     requestsVideoFrame: false,
     isClientSideRendering: false
   });
-  const propsToPass = useMemo33(() => {
+  const propsToPass = useMemo34(() => {
     return {
       muted: isMutedForPlayback,
       src: preloadedSrc,
@@ -11488,7 +11660,7 @@ var AudioForDevelopmentForwardRefFunction = (props, ref) => {
     preloadedSrc,
     crossOriginValue
   ]);
-  const id = useMemo33(() => `audio-${random(src ?? "")}-${sequenceContext?.relativeFrom}-${sequenceContext?.cumulatedFrom}-${sequenceContext?.durationInFrames}-muted:${props.muted}-loop:${props.loop}`, [
+  const id = useMemo34(() => `audio-${random(src ?? "")}-${sequenceContext?.relativeFrom}-${sequenceContext?.cumulatedFrom}-${sequenceContext?.durationInFrames}-muted:${props.muted}-loop:${props.loop}`, [
     src,
     sequenceContext?.relativeFrom,
     sequenceContext?.cumulatedFrom,
@@ -11534,7 +11706,7 @@ var AudioForDevelopmentForwardRefFunction = (props, ref) => {
     volume: userPreferredVolume,
     shouldUseWebAudioApi: useWebAudioApi ?? false
   });
-  const effectToUse = React34.useInsertionEffect ?? React34.useLayoutEffect;
+  const effectToUse = React35.useInsertionEffect ?? React35.useLayoutEffect;
   effectToUse(() => {
     return () => {
       requestAnimationFrame(() => {
@@ -11567,7 +11739,7 @@ var AudioForDevelopmentForwardRefFunction = (props, ref) => {
   if (initialShouldPreMountAudioElements) {
     return null;
   }
-  const audio = /* @__PURE__ */ jsx26("audio", {
+  const audio = /* @__PURE__ */ jsx27("audio", {
     ref: audioRef,
     preload: "metadata",
     crossOrigin: crossOriginValue,
@@ -11587,8 +11759,8 @@ var AudioForPreviewRefForwardingFunction = (props, ref) => {
     showInTimeline,
     loopVolumeCurveBehavior
   } = props;
-  const [timelineId] = useState16(() => String(Math.random()));
-  const sequenceContext = useContext40(SequenceContext);
+  const [timelineId] = useState17(() => String(Math.random()));
+  const sequenceContext = useContext41(SequenceContext);
   const { isStudio } = useRemotionEnvironment();
   const [mediaVolume] = useMediaVolumeState();
   const volumePropFrame = useFrameForVolumeProp(loopVolumeCurveBehavior ?? "repeat");
@@ -11619,17 +11791,17 @@ var AudioForPreviewRefForwardingFunction = (props, ref) => {
     documentationLink: "https://www.remotion.dev/docs/html5-audio",
     muted: isMutedForTimeline
   });
-  const metadata = useMemo33(() => isStudio || registration !== null ? {
+  const metadata = useMemo34(() => isStudio || registration !== null ? {
     type: "sequence",
     id: timelineId,
     value: registration,
     outlineChildrenRef: null
   } : null, [isStudio, registration, timelineId]);
-  return /* @__PURE__ */ jsx26(CommittedMetadataProvider, {
+  return /* @__PURE__ */ jsx27(CommittedMetadataProvider, {
     value: null,
     _remotionCommitMetadata: metadata,
-    children: /* @__PURE__ */ jsx26(SequenceContent, {
-      children: /* @__PURE__ */ jsx26(AudioForPreviewContent, {
+    children: /* @__PURE__ */ jsx27(SequenceContent, {
+      children: /* @__PURE__ */ jsx27(AudioForPreviewContent, {
         ...props,
         ref,
         timelineId,
@@ -11644,20 +11816,20 @@ var AudioForPreview = forwardRef5(AudioForPreviewRefForwardingFunction);
 // src/audio/AudioForRendering.tsx
 import {
   forwardRef as forwardRef6,
-  useContext as useContext42,
+  useContext as useContext43,
   useEffect as useEffect16,
   useImperativeHandle as useImperativeHandle5,
   useLayoutEffect as useLayoutEffect15,
-  useMemo as useMemo35,
+  useMemo as useMemo36,
   useRef as useRef22
 } from "react";
 
 // src/use-media-enabled.tsx
-import { createContext as createContext35, useContext as useContext41, useMemo as useMemo34 } from "react";
-import { jsx as jsx27 } from "react/jsx-runtime";
-var MediaEnabledContext = createContext35(null);
+import { createContext as createContext36, useContext as useContext42, useMemo as useMemo35 } from "react";
+import { jsx as jsx28 } from "react/jsx-runtime";
+var MediaEnabledContext = createContext36(null);
 var useVideoEnabled = () => {
-  const context = useContext41(MediaEnabledContext);
+  const context = useContext42(MediaEnabledContext);
   if (!context) {
     return window.remotion_videoEnabled;
   }
@@ -11667,7 +11839,7 @@ var useVideoEnabled = () => {
   return context.videoEnabled;
 };
 var useAudioEnabled = () => {
-  const context = useContext41(MediaEnabledContext);
+  const context = useContext42(MediaEnabledContext);
   if (!context) {
     return window.remotion_audioEnabled;
   }
@@ -11681,15 +11853,15 @@ var MediaEnabledProvider = ({
   videoEnabled,
   audioEnabled
 }) => {
-  const value = useMemo34(() => ({ videoEnabled, audioEnabled }), [videoEnabled, audioEnabled]);
-  return /* @__PURE__ */ jsx27(MediaEnabledContext.Provider, {
+  const value = useMemo35(() => ({ videoEnabled, audioEnabled }), [videoEnabled, audioEnabled]);
+  return /* @__PURE__ */ jsx28(MediaEnabledContext.Provider, {
     value,
     children
   });
 };
 
 // src/audio/AudioForRendering.tsx
-import { jsx as jsx28 } from "react/jsx-runtime";
+import { jsx as jsx29 } from "react/jsx-runtime";
 var AudioForRenderingRefForwardingFunction = (props, ref) => {
   const audioRef = useRef22(null);
   const {
@@ -11714,12 +11886,12 @@ var AudioForRenderingRefForwardingFunction = (props, ref) => {
   const absoluteFrame = useTimelinePosition();
   const volumePropFrame = useFrameForVolumeProp(loopVolumeCurveBehavior ?? "repeat");
   const frame = useCurrentFrame();
-  const sequenceContext = useContext42(SequenceContext);
+  const sequenceContext = useContext43(SequenceContext);
   const sequencePlaybackRate = sequenceContext?.playbackRate ?? 1;
-  const audioStartFrame = useContext42(Html5MediaTrimContext);
-  const { registerRenderAsset, unregisterRenderAsset } = useContext42(RenderAssetManager);
+  const audioStartFrame = useContext43(Html5MediaTrimContext);
+  const { registerRenderAsset, unregisterRenderAsset } = useContext43(RenderAssetManager);
   const { delayRender, continueRender } = useDelayRender();
-  const id = useMemo35(() => `audio-${random(props.src ?? "")}-${sequenceContext?.relativeFrom}-${sequenceContext?.cumulatedFrom}-${sequenceContext?.durationInFrames}`, [
+  const id = useMemo36(() => `audio-${random(props.src ?? "")}-${sequenceContext?.relativeFrom}-${sequenceContext?.cumulatedFrom}-${sequenceContext?.durationInFrames}`, [
     props.src,
     sequenceContext?.relativeFrom,
     sequenceContext?.cumulatedFrom,
@@ -11819,7 +11991,7 @@ var AudioForRenderingRefForwardingFunction = (props, ref) => {
   if (!needsToRenderAudioTag) {
     return null;
   }
-  return /* @__PURE__ */ jsx28("audio", {
+  return /* @__PURE__ */ jsx29("audio", {
     ref: audioRef,
     ...nativeProps,
     onError: onNativeError
@@ -11828,9 +12000,9 @@ var AudioForRenderingRefForwardingFunction = (props, ref) => {
 var AudioForRendering = forwardRef6(AudioForRenderingRefForwardingFunction);
 
 // src/audio/html5-audio.tsx
-import { jsx as jsx29 } from "react/jsx-runtime";
+import { jsx as jsx30 } from "react/jsx-runtime";
 var AudioRefForwardingFunction = (props, ref) => {
-  const audioTagsContext = useContext43(SharedAudioTagsContext);
+  const audioTagsContext = useContext44(SharedAudioTagsContext);
   const propsWithFreeze = props;
   const {
     startFrom,
@@ -11856,7 +12028,7 @@ var AudioRefForwardingFunction = (props, ref) => {
   if (typeof freeze !== "undefined") {
     throw new TypeError('The "freeze" prop is not supported on <Html5Audio />. Use <Sequence freeze={...}> to freeze media playback.');
   }
-  const { durations, setDurations } = useContext43(DurationsContext);
+  const { durations, setDurations } = useContext44(DurationsContext);
   if (typeof props.src !== "string") {
     throw new TypeError(`The \`<Html5Audio>\` tag requires a string for \`src\`, but got ${JSON.stringify(props.src)} instead.`);
   }
@@ -11900,13 +12072,13 @@ var AudioRefForwardingFunction = (props, ref) => {
   const loopDuration = effectiveTrimAfter ?? (durationFetched === undefined ? undefined : durationFetched * fps);
   if (loop && loopDuration !== undefined) {
     if (!Number.isFinite(loopDuration)) {
-      return /* @__PURE__ */ jsx29(Html5Audio, {
+      return /* @__PURE__ */ jsx30(Html5Audio, {
         ...propsOtherThanLoop,
         ref,
         _remotionInternalNativeLoopPassed: true
       });
     }
-    return /* @__PURE__ */ jsx29(Loop, {
+    return /* @__PURE__ */ jsx30(Loop, {
       layout: "none",
       durationInFrames: calculateMediaDuration({
         trimAfter: effectiveTrimAfter,
@@ -11914,7 +12086,7 @@ var AudioRefForwardingFunction = (props, ref) => {
         playbackRate: props.playbackRate ?? 1,
         trimBefore: trimBeforeValue
       }),
-      children: /* @__PURE__ */ jsx29(Html5Audio, {
+      children: /* @__PURE__ */ jsx30(Html5Audio, {
         ...propsOtherThanLoop,
         ref,
         _remotionInternalNativeLoopPassed: true
@@ -11922,15 +12094,15 @@ var AudioRefForwardingFunction = (props, ref) => {
     });
   }
   if (typeof trimBeforeValue !== "undefined" || typeof effectiveTrimAfter !== "undefined") {
-    return /* @__PURE__ */ jsx29(Html5MediaTrimContext.Provider, {
+    return /* @__PURE__ */ jsx30(Html5MediaTrimContext.Provider, {
       value: trimBeforeValue ?? 0,
-      children: /* @__PURE__ */ jsx29(Sequence, {
+      children: /* @__PURE__ */ jsx30(Sequence, {
         layout: "none",
         from: 0 - (trimBeforeValue ?? 0),
         showInTimeline: false,
         durationInFrames: effectiveTrimAfter === undefined ? undefined : (trimBeforeValue ?? 0) + (effectiveTrimAfter - (trimBeforeValue ?? 0)) / (props.playbackRate ?? 1),
         name,
-        children: /* @__PURE__ */ jsx29(Html5Audio, {
+        children: /* @__PURE__ */ jsx30(Html5Audio, {
           _remotionInternalNeedsDurationCalculation: Boolean(loop),
           pauseWhenBuffering: shouldPauseWhenBuffering,
           ...otherProps,
@@ -11945,7 +12117,7 @@ var AudioRefForwardingFunction = (props, ref) => {
     volume: props.volume
   }, "Html5Audio");
   if (environment.isRendering) {
-    return /* @__PURE__ */ jsx29(AudioForRendering, {
+    return /* @__PURE__ */ jsx30(AudioForRendering, {
       onDuration,
       ...props,
       ref,
@@ -11953,7 +12125,7 @@ var AudioRefForwardingFunction = (props, ref) => {
       _remotionInternalNeedsDurationCalculation: Boolean(loop)
     });
   }
-  return /* @__PURE__ */ jsx29(AudioForPreview, {
+  return /* @__PURE__ */ jsx30(AudioForPreview, {
     _remotionInternalNativeLoopPassed: props._remotionInternalNativeLoopPassed ?? false,
     _remotionInternalStack: _remotionInternalStack ?? null,
     shouldPreMountAudioTags: audioTagsContext !== null && audioTagsContext.numberOfAudioTags > 0,
@@ -11975,11 +12147,11 @@ import {
   useCallback as useCallback18,
   useEffect as useEffect17,
   useImperativeHandle as useImperativeHandle6,
-  useMemo as useMemo36,
+  useMemo as useMemo37,
   useRef as useRef23,
-  useState as useState17
+  useState as useState18
 } from "react";
-import { jsx as jsx30 } from "react/jsx-runtime";
+import { jsx as jsx31 } from "react/jsx-runtime";
 var resolveSolidPixelDensity = (pixelDensity) => {
   if (pixelDensity === undefined) {
     return 1;
@@ -12033,6 +12205,7 @@ var SolidInner = ({
   width,
   height,
   effects = [],
+  effectsOutputSize = null,
   className,
   style,
   pixelDensity,
@@ -12044,13 +12217,13 @@ var SolidInner = ({
   const resolvedPixelDensity = resolveSolidPixelDensity(pixelDensity);
   const canvasWidth = Math.ceil(width * resolvedPixelDensity);
   const canvasHeight = Math.ceil(height * resolvedPixelDensity);
-  const [outputCanvas, setOutputCanvas] = useState17(null);
+  const [outputCanvas, setOutputCanvas] = useState18(null);
   const memoizedEffects = useMemoizedEffects({
     effects,
     overrideId: overrideId ?? null,
     videoConfigValues
   });
-  const sourceCanvas = useMemo36(() => {
+  const sourceCanvas = useMemo37(() => {
     if (typeof document === "undefined") {
       return null;
     }
@@ -12059,7 +12232,7 @@ var SolidInner = ({
     canvas.height = 1;
     return canvas;
   }, []);
-  const chainState = useEffectChainState();
+  const chainState = useEffectChainState(effectsOutputSize);
   const canvasRef = useCallback18((canvas) => {
     setOutputCanvas(canvas);
     if (typeof reference === "function") {
@@ -12118,14 +12291,14 @@ var SolidInner = ({
     cancelRender,
     memoizedEffects
   ]);
-  const canvasStyle = useMemo36(() => {
+  const canvasStyle = useMemo37(() => {
     return {
       width,
       height,
       ...style ?? {}
     };
   }, [height, style, width]);
-  return /* @__PURE__ */ jsx30("canvas", {
+  return /* @__PURE__ */ jsx31("canvas", {
     ref: canvasRef,
     width: canvasWidth,
     height: canvasHeight,
@@ -12135,6 +12308,7 @@ var SolidInner = ({
 };
 var SolidOuter = forwardRef8(({
   effects = [],
+  effectsOutputSize = null,
   controls,
   color,
   height,
@@ -12196,11 +12370,11 @@ var SolidOuter = forwardRef8(({
     style: premountingStyle,
     componentName: "<Solid />"
   });
-  return /* @__PURE__ */ jsx30(Freeze, {
+  return /* @__PURE__ */ jsx31(Freeze, {
     frame: freezeFrame,
     active: isPremountingOrPostmounting,
     _remotionInternalIsPremounting: premountingActive,
-    children: /* @__PURE__ */ jsx30(Sequence, {
+    children: /* @__PURE__ */ jsx31(Sequence, {
       layout: "none",
       from,
       trimBefore,
@@ -12219,8 +12393,8 @@ var SolidOuter = forwardRef8(({
       _remotionInternalPostmountDisplay: effectivePostmountFor || null,
       _remotionInternalIsPremounting: premountingActive,
       _remotionInternalIsPostmounting: postmountingActive,
-      children: /* @__PURE__ */ jsx30(SequenceContent, {
-        children: /* @__PURE__ */ jsx30(SolidInner, {
+      children: /* @__PURE__ */ jsx31(SequenceContent, {
+        children: /* @__PURE__ */ jsx31(SolidInner, {
           reference: actualRef,
           videoConfigValues: controls?.videoConfigValues ?? null,
           overrideId: controls?.overrideId ?? null,
@@ -12230,6 +12404,7 @@ var SolidOuter = forwardRef8(({
           className,
           style: croppedStyle ?? undefined,
           effects,
+          effectsOutputSize,
           pixelDensity
         })
       })
@@ -12247,15 +12422,15 @@ Solid.displayName = "Solid";
 addSequenceStackTraces(Solid);
 // src/HtmlInCanvas.tsx
 import {
-  createContext as createContext36,
+  createContext as createContext37,
   forwardRef as forwardRef9,
   useCallback as useCallback19,
-  useContext as useContext44,
+  useContext as useContext45,
   useLayoutEffect as useLayoutEffect16,
-  useMemo as useMemo37,
+  useMemo as useMemo38,
   useRef as useRef24
 } from "react";
-import { jsx as jsx31, jsxs as jsxs3 } from "react/jsx-runtime";
+import { jsx as jsx32, jsxs as jsxs3 } from "react/jsx-runtime";
 var transferredOffscreenCanvases = new WeakMap;
 var getTransferredOffscreenCanvas = (canvas) => {
   const existing = transferredOffscreenCanvases.get(canvas);
@@ -12362,11 +12537,12 @@ var defaultOnPaint = ({
   ctx.reset();
   ctx.drawElementImage(elementImage, 0, 0);
 };
-var HtmlInCanvasAncestorContext = createContext36(null);
+var HtmlInCanvasAncestorContext = createContext37(null);
 var HtmlInCanvasContent = forwardRef9(({
   width,
   height,
   effects,
+  effectsOutputSize,
   children,
   canvasSiblings,
   onPaint,
@@ -12376,7 +12552,7 @@ var HtmlInCanvasContent = forwardRef9(({
   style,
   renderFrame
 }, ref) => {
-  const ancestorPaintState = useContext44(HtmlInCanvasAncestorContext);
+  const ancestorPaintState = useContext45(HtmlInCanvasAncestorContext);
   assertHtmlInCanvasDimensions(width, height);
   if (ancestorPaintState && !isHtmlInCanvasNestingSupported()) {
     throw new Error(`Nested <HtmlInCanvas> components require Chrome ${MINIMUM_CHROME_VERSION_FOR_NESTED_HTML_IN_CANVAS} or newer with HTML-in-canvas enabled.`);
@@ -12388,7 +12564,7 @@ var HtmlInCanvasContent = forwardRef9(({
   const { isClientSideRendering, isRendering } = useRemotionEnvironment();
   const canRetryMissingPaintRecord = !isRendering || isClientSideRendering;
   const usesDirectLayoutCanvas = onPaint === undefined && onInit === undefined;
-  const paintTargetMode = usesDirectLayoutCanvas ? "direct" : isRendering ? "copied" : "transferred";
+  const paintTargetMode = ancestorPaintState ? "copied" : usesDirectLayoutCanvas ? "direct" : isRendering ? "copied" : "transferred";
   if (!isHtmlInCanvasSupported()) {
     cancelRender(new Error(getHtmlInCanvasUnsupportedMessage()));
   }
@@ -12397,7 +12573,7 @@ var HtmlInCanvasContent = forwardRef9(({
   const paintTargetRef = useRef24(null);
   const divRef = useRef24(null);
   const canvasSizeKey = `${width}x${height}@${resolvedPixelDensity}-${paintTargetMode}`;
-  const paintState = useMemo37(() => {
+  const paintState = useMemo38(() => {
     const state = {
       pendingChildren: 0,
       generation: 0,
@@ -12440,7 +12616,7 @@ var HtmlInCanvasContent = forwardRef9(({
       ref.current = node;
     }
   }, [ref, paintTargetMode]);
-  const chainState = useEffectChainState();
+  const chainState = useEffectChainState(effectsOutputSize);
   const memoizedEffects = useMemoizedEffects({
     effects,
     overrideId: controls?.overrideId ?? null,
@@ -12455,6 +12631,7 @@ var HtmlInCanvasContent = forwardRef9(({
   const initializedRef = useRef24(false);
   const onInitCleanupRef = useRef24(null);
   const unmountedRef = useRef24(false);
+  const effectScratchCanvasesRef = useRef24(null);
   const paintingTargets = useRef24(new WeakMap);
   const onPaintCb = useCallback19(async () => {
     if (isRendering && paintState.pendingChildren > 0) {
@@ -12550,6 +12727,7 @@ var HtmlInCanvasContent = forwardRef9(({
         }
         throw error;
       }
+      let effectSourceCanvas = null;
       try {
         const currentOnPaint = onPaintRef.current;
         if (currentOnPaint) {
@@ -12565,6 +12743,41 @@ var HtmlInCanvasContent = forwardRef9(({
           if (paintResult) {
             await paintResult;
           }
+        } else if (paintTarget instanceof HTMLCanvasElement && effectsRef.current.some((effect) => !effect.params.disabled)) {
+          effectScratchCanvasesRef.current ??= {
+            source: document.createElement("canvas"),
+            previousOutput: document.createElement("canvas")
+          };
+          const { source: effectSource, previousOutput } = effectScratchCanvasesRef.current;
+          resizePaintTarget({
+            target: effectSource,
+            width: canvasWidth,
+            height: canvasHeight
+          });
+          resizePaintTarget({
+            target: previousOutput,
+            width: canvasWidth,
+            height: canvasHeight
+          });
+          const effectSourceCtx = effectSource.getContext("2d");
+          const previousOutputCtx = previousOutput.getContext("2d");
+          const paintTargetCtx = paintTarget.getContext("2d");
+          if (!effectSourceCtx || !previousOutputCtx || !paintTargetCtx) {
+            throw new Error("Failed to acquire 2D context for <HtmlInCanvas> canvas");
+          }
+          previousOutputCtx.reset();
+          previousOutputCtx.drawImage(paintTarget, 0, 0);
+          defaultOnPaint({
+            canvas: paintTarget,
+            element,
+            elementImage: elImage,
+            pixelDensity: resolvedPixelDensity
+          });
+          effectSourceCtx.reset();
+          effectSourceCtx.drawImage(paintTarget, 0, 0);
+          paintTargetCtx.reset();
+          paintTargetCtx.drawImage(previousOutput, 0, 0);
+          effectSourceCanvas = effectSource;
         } else {
           defaultOnPaint({
             canvas: paintTarget,
@@ -12577,7 +12790,7 @@ var HtmlInCanvasContent = forwardRef9(({
         if (state) {
           await runEffectChain({
             state,
-            source: paintTarget,
+            source: effectSourceCanvas ?? paintTarget,
             effects: effectsRef.current,
             output: paintTarget,
             width: canvasWidth,
@@ -12697,13 +12910,13 @@ var HtmlInCanvasContent = forwardRef9(({
     isRendering,
     ancestorPaintState
   ]);
-  const innerStyle = useMemo37(() => {
+  const innerStyle = useMemo38(() => {
     return {
       width,
       height
     };
   }, [width, height]);
-  const canvasStyle = useMemo37(() => {
+  const canvasStyle = useMemo38(() => {
     return {
       width,
       height,
@@ -12713,7 +12926,7 @@ var HtmlInCanvasContent = forwardRef9(({
   return /* @__PURE__ */ jsxs3(HtmlInCanvasAncestorContext.Provider, {
     value: paintState,
     children: [
-      /* @__PURE__ */ jsxs3("canvas", {
+      /* @__PURE__ */ jsx32("canvas", {
         ref: paintTargetMode === "copied" ? canvas2dRef : setVisibleCanvasRef,
         width: canvasWidth,
         height: canvasHeight,
@@ -12723,16 +12936,19 @@ var HtmlInCanvasContent = forwardRef9(({
           visibility: "hidden",
           pointerEvents: "none"
         } : canvasStyle,
-        children: [
-          /* @__PURE__ */ jsx31("div", {
-            ref: divRef,
-            style: paintTargetMode === "copied" ? { ...innerStyle, visibility: "visible" } : innerStyle,
-            children
-          }),
-          canvasSiblings
-        ]
+        children: /* @__PURE__ */ jsxs3(DefaultPremountContext.Provider, {
+          value: 0,
+          children: [
+            /* @__PURE__ */ jsx32("div", {
+              ref: divRef,
+              style: paintTargetMode === "copied" ? { ...innerStyle, visibility: "visible" } : innerStyle,
+              children
+            }),
+            canvasSiblings
+          ]
+        })
       }, canvasSizeKey),
-      paintTargetMode === "copied" ? /* @__PURE__ */ jsx31("canvas", {
+      paintTargetMode === "copied" ? /* @__PURE__ */ jsx32("canvas", {
         ref: setVisibleCanvasRef,
         width: canvasWidth,
         height: canvasHeight,
@@ -12744,7 +12960,7 @@ var HtmlInCanvasContent = forwardRef9(({
 HtmlInCanvasContent.displayName = "HtmlInCanvasContent";
 var HtmlInCanvasContentForRendering = forwardRef9((props, ref) => {
   const frame = useCurrentFrame();
-  return /* @__PURE__ */ jsx31(HtmlInCanvasContent, {
+  return /* @__PURE__ */ jsx32(HtmlInCanvasContent, {
     ...props,
     ref,
     renderFrame: frame
@@ -12755,6 +12971,7 @@ var HtmlInCanvasInner = forwardRef9(({
   width,
   height,
   effects = [],
+  effectsOutputSize,
   children,
   onPaint,
   onInit,
@@ -12816,11 +13033,11 @@ var HtmlInCanvasInner = forwardRef9(({
     style: premountingStyle,
     componentName: "<HtmlInCanvas />"
   });
-  return /* @__PURE__ */ jsx31(Freeze, {
+  return /* @__PURE__ */ jsx32(Freeze, {
     frame: freezeFrame,
     active: isPremountingOrPostmounting,
     _remotionInternalIsPremounting: premountingActive,
-    children: /* @__PURE__ */ jsx31(Sequence, {
+    children: /* @__PURE__ */ jsx32(Sequence, {
       layout: "none",
       durationInFrames,
       name: name ?? "<HtmlInCanvas>",
@@ -12832,12 +13049,13 @@ var HtmlInCanvasInner = forwardRef9(({
       _remotionInternalPostmountDisplay: effectivePostmountFor || null,
       _remotionInternalIsPremounting: premountingActive,
       _remotionInternalIsPostmounting: postmountingActive,
-      children: /* @__PURE__ */ jsx31(Content, {
+      children: /* @__PURE__ */ jsx32(Content, {
         ref: setCanvasRef,
         renderFrame: null,
         width,
         height,
         effects,
+        effectsOutputSize: effectsOutputSize ?? null,
         onPaint,
         onInit,
         pixelDensity,
@@ -12885,12 +13103,12 @@ addSequenceStackTraces(HtmlInCanvas);
 import {
   forwardRef as forwardRef10,
   useCallback as useCallback20,
-  useContext as useContext45,
+  useContext as useContext46,
   useImperativeHandle as useImperativeHandle7,
   useLayoutEffect as useLayoutEffect17,
-  useMemo as useMemo38,
+  useMemo as useMemo39,
   useRef as useRef25,
-  useState as useState18
+  useState as useState19
 } from "react";
 
 // src/truncate-src-for-label.ts
@@ -12905,7 +13123,7 @@ function truncateSrcForLabel(src) {
 }
 
 // src/canvas-image/CanvasImage.tsx
-import { jsx as jsx32 } from "react/jsx-runtime";
+import { jsx as jsx33 } from "react/jsx-runtime";
 var canvasImageSchema = {
   src: {
     type: "asset",
@@ -13010,6 +13228,7 @@ var CanvasImageContent = forwardRef10(({
   height,
   fit = "fill",
   effects,
+  effectsOutputSize,
   controls,
   onError,
   className,
@@ -13023,18 +13242,18 @@ var CanvasImageContent = forwardRef10(({
 }, ref) => {
   const { delayRender, continueRender, cancelRender } = useDelayRender();
   const { delayPlayback } = useBufferState();
-  const [outputCanvas, setOutputCanvas] = useState18(null);
-  const [loadedImage, setLoadedImage] = useState18(null);
+  const [outputCanvas, setOutputCanvas] = useState19(null);
+  const [loadedImage, setLoadedImage] = useState19(null);
   const actualSrc = usePreload(src);
-  const chainState = useEffectChainState();
+  const chainState = useEffectChainState(effectsOutputSize);
   const memoizedEffects = useMemoizedEffects({
     effects,
     overrideId: controls?.overrideId ?? null,
     videoConfigValues: controls?.videoConfigValues ?? null
   });
-  const sequenceContext = useContext45(SequenceContext);
+  const sequenceContext = useContext46(SequenceContext);
   const pendingLoadDelayRef = useRef25(null);
-  const [isLoadPending, setIsLoadPending] = useState18(false);
+  const [isLoadPending, setIsLoadPending] = useState19(false);
   const isPremounting = Boolean(sequenceContext?.premounting);
   const isPostmounting = Boolean(sequenceContext?.postmounting);
   const continuePendingLoadDelay = useCallback20(({ markAsReady }) => {
@@ -13049,7 +13268,7 @@ var CanvasImageContent = forwardRef10(({
     continueRender(pending.handle);
     pendingLoadDelayRef.current = null;
   }, [continueRender]);
-  const sourceCanvas = useMemo38(() => {
+  const sourceCanvas = useMemo39(() => {
     if (typeof document === "undefined") {
       return null;
     }
@@ -13225,7 +13444,7 @@ var CanvasImageContent = forwardRef10(({
     sourceCanvas,
     width
   ]);
-  return /* @__PURE__ */ jsx32("canvas", {
+  return /* @__PURE__ */ jsx33("canvas", {
     ...canvasProps,
     ref: canvasRef,
     width,
@@ -13243,6 +13462,7 @@ var CanvasImageInner = forwardRef10(({
   height,
   fit,
   effects = [],
+  effectsOutputSize,
   className,
   style,
   id,
@@ -13275,7 +13495,7 @@ var CanvasImageInner = forwardRef10(({
   if (!src) {
     throw new Error('No "src" prop was passed to <CanvasImage>.');
   }
-  const isMedia = useMemo38(() => ({
+  const isMedia = useMemo39(() => ({
     type: "image",
     src
   }), [src]);
@@ -13314,11 +13534,11 @@ var CanvasImageInner = forwardRef10(({
     style: premountingStyle,
     componentName: _remotionInternalCropComponentName ?? "<CanvasImage />"
   });
-  return /* @__PURE__ */ jsx32(Freeze, {
+  return /* @__PURE__ */ jsx33(Freeze, {
     frame: freezeFrame,
     active: isPremountingOrPostmounting,
     _remotionInternalIsPremounting: premountingActive,
-    children: /* @__PURE__ */ jsx32(Sequence, {
+    children: /* @__PURE__ */ jsx33(Sequence, {
       layout: "none",
       from: from ?? 0,
       trimBefore,
@@ -13336,8 +13556,8 @@ var CanvasImageInner = forwardRef10(({
       _remotionInternalPostmountDisplay: effectivePostmountFor || null,
       _remotionInternalIsPremounting: premountingActive,
       _remotionInternalIsPostmounting: postmountingActive,
-      children: /* @__PURE__ */ jsx32(SequenceContent, {
-        children: /* @__PURE__ */ jsx32(CanvasImageContent, {
+      children: /* @__PURE__ */ jsx33(SequenceContent, {
+        children: /* @__PURE__ */ jsx33(CanvasImageContent, {
           ref: actualRef,
           src,
           crossOrigin,
@@ -13345,6 +13565,7 @@ var CanvasImageInner = forwardRef10(({
           height,
           fit,
           effects,
+          effectsOutputSize: effectsOutputSize ?? null,
           controls,
           className,
           style: croppedStyle ?? undefined,
@@ -13402,7 +13623,7 @@ var getStaticFiles = () => {
 };
 // src/IFrame.tsx
 import { forwardRef as forwardRef11, useCallback as useCallback21, useLayoutEffect as useLayoutEffect18, useRef as useRef26 } from "react";
-import { jsx as jsx33 } from "react/jsx-runtime";
+import { jsx as jsx34 } from "react/jsx-runtime";
 var IFrameRefForwarding = ({
   onLoad,
   onError,
@@ -13456,7 +13677,7 @@ var IFrameRefForwarding = ({
       console.error("Error loading iframe:", e, "Handle the event using the onError() prop to make this message disappear.");
     }
   }, [onError, continueRender, src, srcDoc]);
-  return /* @__PURE__ */ jsx33("iframe", {
+  return /* @__PURE__ */ jsx34("iframe", {
     referrerPolicy: "strict-origin-when-cross-origin",
     ...props,
     ref,
@@ -13468,13 +13689,13 @@ var IFrame = forwardRef11(IFrameRefForwarding);
 // src/Img.tsx
 import {
   useCallback as useCallback22,
-  useContext as useContext46,
+  useContext as useContext47,
   useLayoutEffect as useLayoutEffect19,
-  useMemo as useMemo39,
+  useMemo as useMemo40,
   useRef as useRef27,
-  useState as useState19
+  useState as useState20
 } from "react";
-import { jsx as jsx34 } from "react/jsx-runtime";
+import { jsx as jsx35 } from "react/jsx-runtime";
 function exponentialBackoff2(errorCount) {
   return 1000 * 2 ** (errorCount - 1);
 }
@@ -13495,8 +13716,8 @@ var ImgContent = ({
   const imageRef = useRef27(null);
   const errors = useRef27({});
   const { delayPlayback } = useBufferState();
-  const sequenceContext = useContext46(SequenceContext);
-  const [isLoading, setIsLoading] = useState19(false);
+  const sequenceContext = useContext47(SequenceContext);
+  const [isLoading, setIsLoading] = useState20(false);
   const _propsValid = true;
   if (!_propsValid) {
     throw new Error("typecheck error");
@@ -13628,7 +13849,7 @@ var ImgContent = ({
     requestsVideoFrame: false,
     isClientSideRendering
   });
-  return /* @__PURE__ */ jsx34("img", {
+  return /* @__PURE__ */ jsx35("img", {
     ...props,
     ref: imageCallbackRef,
     crossOrigin: crossOriginValue,
@@ -13661,7 +13882,7 @@ var NativeImgInner = ({
   if (!src) {
     throw new Error('No "src" prop was passed to <Img>.');
   }
-  const isMedia = useMemo39(() => ({
+  const isMedia = useMemo40(() => ({
     type: "image",
     src
   }), [src]);
@@ -13695,11 +13916,11 @@ var NativeImgInner = ({
     style: premountingStyle,
     componentName: "<Img />"
   });
-  return /* @__PURE__ */ jsx34(Freeze, {
+  return /* @__PURE__ */ jsx35(Freeze, {
     frame: freezeFrame,
     active: isPremountingOrPostmounting,
     _remotionInternalIsPremounting: premountingActive,
-    children: /* @__PURE__ */ jsx34(Sequence, {
+    children: /* @__PURE__ */ jsx35(Sequence, {
       layout: "none",
       from: from ?? 0,
       trimBefore,
@@ -13716,8 +13937,8 @@ var NativeImgInner = ({
       controls,
       showInTimeline: showInTimeline ?? true,
       hidden,
-      children: /* @__PURE__ */ jsx34(SequenceContent, {
-        children: /* @__PURE__ */ jsx34(ImgContent, {
+      children: /* @__PURE__ */ jsx35(SequenceContent, {
+        children: /* @__PURE__ */ jsx35(ImgContent, {
           src,
           style: croppedStyle ?? undefined,
           ...props
@@ -13786,6 +14007,7 @@ var getFitFromObjectFit = (style) => {
 };
 var ImgInner = ({
   effects = [],
+  effectsOutputSize,
   ref,
   hidden,
   name,
@@ -13818,7 +14040,7 @@ var ImgInner = ({
 }) => {
   const shouldPauseWhenLoading = resolveV5Default(pauseWhenLoading);
   if (effects.length === 0) {
-    return /* @__PURE__ */ jsx34(NativeImgInner, {
+    return /* @__PURE__ */ jsx35(NativeImgInner, {
       ...props,
       ref,
       hidden,
@@ -13863,12 +14085,13 @@ var ImgInner = ({
   const canvasHeight = typeof height === "number" ? height : undefined;
   const canvasProps = props;
   const canvasFit = getFitFromObjectFit(style) ?? "fill";
-  return /* @__PURE__ */ jsx34(CanvasImageWithPrivateProps, {
+  return /* @__PURE__ */ jsx35(CanvasImageWithPrivateProps, {
     src,
     width: canvasWidth,
     height: canvasHeight,
     fit: canvasFit,
     effects,
+    effectsOutputSize,
     className,
     style,
     cropLeft,
@@ -13907,8 +14130,8 @@ var Img = withInteractivitySchema({
 });
 addSequenceStackTraces(Img);
 // src/Interactive.tsx
-import React41, { forwardRef as forwardRef12, useCallback as useCallback23, useContext as useContext47 } from "react";
-import { jsx as jsx35 } from "react/jsx-runtime";
+import React42, { forwardRef as forwardRef12, useCallback as useCallback23, useContext as useContext48 } from "react";
+import { jsx as jsx36 } from "react/jsx-runtime";
 var sourcePathToIdentityPrefix = (packageName) => {
   if (packageName === "remotion") {
     return "dev.remotion.remotion";
@@ -13995,7 +14218,7 @@ var withSchema = (untypedOptions) => {
     ...rest
   } = options;
   const ComponentWrappedInSequence = forwardRef12((props, ref) => {
-    const { canvasContent, compositions } = useContext47(CompositionManager);
+    const { canvasContent, compositions } = useContext48(CompositionManager);
     const componentIdentity = resolveComponentIdentity(Wrapped);
     const isCurrentComposition = compositions.some((composition) => canvasContent?.type === "composition" && composition.id === canvasContent.compositionId && composition.componentFromProps === componentIdentity);
     const { width, height, ...propsWithoutDimensions } = props;
@@ -14054,10 +14277,10 @@ var withSchema = (untypedOptions) => {
       style: premountingStyle,
       componentName
     });
-    return /* @__PURE__ */ jsx35(Freeze, {
+    return /* @__PURE__ */ jsx36(Freeze, {
       frame: freezeFrame,
       active: isPremountingOrPostmounting,
-      children: /* @__PURE__ */ jsx35(SequenceWithoutSchema, {
+      children: /* @__PURE__ */ jsx36(SequenceWithoutSchema, {
         _remotionInternalSingleChildComponent: isCurrentComposition ? null : componentIdentity,
         layout,
         ...layout === "absolute-fill" ? {
@@ -14074,14 +14297,14 @@ var withSchema = (untypedOptions) => {
         freeze,
         hidden,
         name: name ?? componentName,
-        _remotionInternalDocumentationLink: "https://www.remotion.dev/docs/interactive-with-schema",
+        _remotionInternalDocumentationLink: "https://www.remotion.dev/docs/interactive-create",
         showInTimeline: isCurrentComposition ? false : showInTimeline,
         controls,
         _remotionInternalPremountDisplay: effectivePremountFor || null,
         _remotionInternalPostmountDisplay: effectivePostmountFor || null,
         _remotionInternalIsPremounting: premountingActive,
         _remotionInternalIsPostmounting: postmountingActive,
-        children: React41.createElement(Component, {
+        children: React42.createElement(Component, {
           ...componentPropsWithoutCropping,
           ...layout === "none" ? { style: croppedStyle ?? undefined, ref } : {}
         })
@@ -14104,6 +14327,15 @@ var withSchema = (untypedOptions) => {
   addSequenceStackTraces(Wrapped);
   return Wrapped;
 };
+var create = (untypedOptions) => {
+  const options = untypedOptions;
+  return withSchema({
+    ...options,
+    wrapInSequence: true,
+    schema: options.schema ?? {},
+    componentName: options.componentName ?? (options.Component.displayName || options.Component.name?.replace(/(.+)Inner$/, "$1") || "Component")
+  });
+};
 var makeInteractiveElement = (tag, displayName, schema) => {
   const Inner = forwardRef12((propsWithControls, ref) => {
     const {
@@ -14161,11 +14393,11 @@ var makeInteractiveElement = (tag, displayName, schema) => {
     const callbackRef = useCallback23((element) => {
       setRef2(ref, element);
     }, [ref]);
-    return /* @__PURE__ */ jsx35(Freeze, {
+    return /* @__PURE__ */ jsx36(Freeze, {
       frame: freezeFrame,
       active: isPremountingOrPostmounting,
       _remotionInternalIsPremounting: premountingActive,
-      children: /* @__PURE__ */ jsx35(Sequence, {
+      children: /* @__PURE__ */ jsx36(Sequence, {
         layout: "none",
         from: from ?? 0,
         trimBefore,
@@ -14182,7 +14414,7 @@ var makeInteractiveElement = (tag, displayName, schema) => {
         _remotionInternalPostmountDisplay: effectivePostmountFor || null,
         _remotionInternalIsPremounting: premountingActive,
         _remotionInternalIsPostmounting: postmountingActive,
-        children: React41.createElement(tag, {
+        children: React42.createElement(tag, {
           ...props,
           style: croppedStyle ?? undefined,
           ref: callbackRef
@@ -14228,6 +14460,7 @@ var Interactive = {
   premountSchema,
   sequenceSchema,
   withSchema,
+  create,
   _internalMakeRemotionComponentIdentity: makeRemotionComponentIdentity,
   A: makeInteractiveTextElement("a", "<Interactive.A>"),
   Article: makeInteractiveTextElement("article", "<Interactive.Article>"),
@@ -14277,16 +14510,16 @@ var getAudioSyncAnchorTolerance = (audioContext) => {
 };
 
 // src/CompositionManager.tsx
-import React42 from "react";
-var compositionsRef = React42.createRef();
+import React43 from "react";
+var compositionsRef = React43.createRef();
 
 // src/CompositionManagerProvider.tsx
 import {
   useCallback as useCallback25,
   useImperativeHandle as useImperativeHandle9,
-  useMemo as useMemo41,
+  useMemo as useMemo42,
   useRef as useRef29,
-  useState as useState21
+  useState as useState22
 } from "react";
 
 // src/CompositionRegistryProvider.tsx
@@ -14296,17 +14529,17 @@ import {
   useEffect as useEffect18,
   useImperativeHandle as useImperativeHandle8,
   useLayoutEffect as useLayoutEffect20,
-  useMemo as useMemo40,
+  useMemo as useMemo41,
   useRef as useRef28,
-  useState as useState20
+  useState as useState21
 } from "react";
-import { jsx as jsx36 } from "react/jsx-runtime";
+import { jsx as jsx37 } from "react/jsx-runtime";
 var useIsomorphicLayoutEffect6 = typeof window === "undefined" ? useEffect18 : useLayoutEffect20;
 var CompositionRegistryFallbackProvider = withCommittedMetadata(CompositionRegistryFallbackContext.Provider);
 var CompositionRegistryProvider = forwardRef13(({ children, onSnapshot }, flushSnapshotRef) => {
   const { isStudio } = useRemotionEnvironment();
-  const [managerId] = useState20(() => String(Math.random()));
-  const [useCommitObserver, setUseCommitObserver] = useState20(() => isStudio && isCommitRegistrationObserverInstalled());
+  const [managerId] = useState21(() => String(Math.random()));
+  const [useCommitObserver, setUseCommitObserver] = useState21(() => isStudio && isCommitRegistrationObserverInstalled());
   const observedCommitRef = useRef28(false);
   const observerFailedRef = useRef28(false);
   const unmountedRef = useRef28(false);
@@ -14343,7 +14576,7 @@ var CompositionRegistryProvider = forwardRef13(({ children, onSnapshot }, flushS
     observedCommitRef.current = true;
     queueSnapshot(snapshot);
   }, [queueSnapshot]);
-  const fallbackRegistry = useMemo40(() => {
+  const fallbackRegistry = useMemo41(() => {
     const entries = new Map;
     const getSnapshot = () => {
       const compositions = [];
@@ -14414,12 +14647,12 @@ var CompositionRegistryProvider = forwardRef13(({ children, onSnapshot }, flushS
       }
     };
   }, [isStudio, useCommitObserver]);
-  const metadata = useMemo40(() => isStudio ? {
+  const metadata = useMemo41(() => isStudio ? {
     type: "composition-manager",
     id: managerId,
     onCommit: useCommitObserver ? onObservedSnapshot : null
   } : null, [isStudio, managerId, onObservedSnapshot, useCommitObserver]);
-  return /* @__PURE__ */ jsx36(CompositionRegistryFallbackProvider, {
+  return /* @__PURE__ */ jsx37(CompositionRegistryFallbackProvider, {
     value: useCommitObserver ? null : fallbackRegistry,
     _remotionCommitMetadata: metadata,
     children
@@ -14427,7 +14660,7 @@ var CompositionRegistryProvider = forwardRef13(({ children, onSnapshot }, flushS
 });
 
 // src/CompositionManagerProvider.tsx
-import { jsx as jsx37 } from "react/jsx-runtime";
+import { jsx as jsx38 } from "react/jsx-runtime";
 var CompositionManagerProvider = ({
   children,
   onlyRenderComposition,
@@ -14438,8 +14671,8 @@ var CompositionManagerProvider = ({
   const committedKeysRef = useRef29(new Set);
   const flushSnapshotRef = useRef29(null);
   const committedDescriptorsRef = useRef29(new Map);
-  const [registrationError, setRegistrationError] = useState21(null);
-  const [registry] = useState21(() => createRegistryStore({
+  const [registrationError, setRegistrationError] = useState22(null);
+  const [registry] = useState22(() => createRegistryStore({
     compositions: initialCompositions.map((composition, order) => ({
       ...composition,
       order
@@ -14447,8 +14680,8 @@ var CompositionManagerProvider = ({
     folders: []
   }));
   const { compositions, folders } = useSyncExternalStore2(registry.subscribe, registry.getSnapshot, registry.getSnapshot);
-  const [canvasContent, setCanvasContent] = useState21(initialCanvasContent);
-  const [currentAssetMetadata, setCurrentAssetMetadata] = useState21(null);
+  const [canvasContent, setCanvasContent] = useState22(initialCanvasContent);
+  const [currentAssetMetadata, setCurrentAssetMetadata] = useState22(null);
   const onCommitRegistrations = useCallback25((pending) => {
     const previousKeys = committedKeysRef.current;
     const previousDescriptors = committedDescriptorsRef.current;
@@ -14501,12 +14734,12 @@ var CompositionManagerProvider = ({
       }
     };
   }, [registry]);
-  const compositionManagerSetters = useMemo41(() => ({
+  const compositionManagerSetters = useMemo42(() => ({
     setCanvasContent,
     setCurrentAssetMetadata,
     onlyRenderComposition
   }), [onlyRenderComposition]);
-  const compositionManagerContextValue = useMemo41(() => {
+  const compositionManagerContextValue = useMemo42(() => {
     return {
       compositions,
       folders,
@@ -14521,17 +14754,22 @@ var CompositionManagerProvider = ({
     currentAssetMetadata,
     canvasContent
   ]);
+  const compositionManagerRef = useRef29(compositionManagerContextValue);
+  compositionManagerRef.current = compositionManagerContextValue;
   if (registrationError !== null) {
     throw registrationError;
   }
-  return /* @__PURE__ */ jsx37(CompositionRegistryProvider, {
+  return /* @__PURE__ */ jsx38(CompositionRegistryProvider, {
     ref: flushSnapshotRef,
     onSnapshot: onCommitRegistrations,
-    children: /* @__PURE__ */ jsx37(CompositionManager.Provider, {
+    children: /* @__PURE__ */ jsx38(CompositionManager.Provider, {
       value: compositionManagerContextValue,
-      children: /* @__PURE__ */ jsx37(CompositionSetters.Provider, {
-        value: compositionManagerSetters,
-        children
+      children: /* @__PURE__ */ jsx38(CompositionManagerRefContext.Provider, {
+        value: compositionManagerRef,
+        children: /* @__PURE__ */ jsx38(CompositionSetters.Provider, {
+          value: compositionManagerSetters,
+          children
+        })
       })
     })
   });
@@ -14626,8 +14864,8 @@ var getPreviewDomElement = () => {
 };
 
 // src/max-video-cache-size.ts
-import React43 from "react";
-var MaxMediaCacheSizeContext = React43.createContext(null);
+import React44 from "react";
+var MaxMediaCacheSizeContext = React44.createContext(null);
 
 // src/media-resource-manager.ts
 var disposeResource = (resource) => {
@@ -14780,8 +15018,8 @@ var waitForRoot = (fn) => {
 };
 
 // src/RemotionRoot.tsx
-import { useMemo as useMemo42 } from "react";
-import { jsx as jsx38 } from "react/jsx-runtime";
+import { useMemo as useMemo43 } from "react";
+import { jsx as jsx39 } from "react/jsx-runtime";
 var RemotionRootContexts = ({
   children,
   numberOfAudioTags,
@@ -14793,29 +15031,29 @@ var RemotionRootContexts = ({
   frameState,
   _experimentalKeepAudioContextAlive
 }) => {
-  const logging = useMemo42(() => {
+  const logging = useMemo43(() => {
     return { logLevel, mountTime: Date.now() };
   }, [logLevel]);
-  return /* @__PURE__ */ jsx38(LogLevelContext.Provider, {
+  return /* @__PURE__ */ jsx39(LogLevelContext.Provider, {
     value: logging,
-    children: /* @__PURE__ */ jsx38(TimelineContextProvider, {
+    children: /* @__PURE__ */ jsx39(TimelineContextProvider, {
       frameState,
-      children: /* @__PURE__ */ jsx38(MediaEnabledProvider, {
+      children: /* @__PURE__ */ jsx39(MediaEnabledProvider, {
         videoEnabled,
         audioEnabled,
-        children: /* @__PURE__ */ jsx38(EditorPropsProvider, {
-          children: /* @__PURE__ */ jsx38(PrefetchProvider, {
-            children: /* @__PURE__ */ jsx38(SequenceManagerProvider, {
-              children: /* @__PURE__ */ jsx38(DurationsContextProvider, {
-                children: /* @__PURE__ */ jsx38(BufferingProvider, {
-                  children: /* @__PURE__ */ jsx38(SharedAudioContextProvider, {
+        children: /* @__PURE__ */ jsx39(EditorPropsProvider, {
+          children: /* @__PURE__ */ jsx39(PrefetchProvider, {
+            children: /* @__PURE__ */ jsx39(SequenceManagerProvider, {
+              children: /* @__PURE__ */ jsx39(DurationsContextProvider, {
+                children: /* @__PURE__ */ jsx39(BufferingProvider, {
+                  children: /* @__PURE__ */ jsx39(SharedAudioContextProvider, {
                     audioLatencyHint,
                     audioEnabled,
                     previewSampleRate,
                     _experimentalKeepAudioContextAlive,
-                    children: /* @__PURE__ */ jsx38(SharedAudioTagsContextProvider, {
+                    children: /* @__PURE__ */ jsx39(SharedAudioTagsContextProvider, {
                       numberOfAudioTags,
-                      children: /* @__PURE__ */ jsx38(VideoProvider, {
+                      children: /* @__PURE__ */ jsx39(VideoProvider, {
                         children
                       })
                     })
@@ -14831,7 +15069,7 @@ var RemotionRootContexts = ({
 };
 
 // src/render-resource-manager.ts
-import React45 from "react";
+import React46 from "react";
 var makeRenderResourceManager = () => {
   const resources = new Map;
   let disposed = false;
@@ -14872,7 +15110,7 @@ var makeRenderResourceManager = () => {
     }
   };
 };
-var RenderResourceManagerContext = React45.createContext(null);
+var RenderResourceManagerContext = React46.createContext(null);
 
 // src/codec.ts
 var validCodecs = [
@@ -15063,8 +15301,8 @@ var resolveVideoConfigOrCatch = (params) => {
 };
 
 // src/sequence-stack-traces.ts
-import React46 from "react";
-var SequenceStackTracesUpdateContext = React46.createContext(() => {});
+import React47 from "react";
+var SequenceStackTracesUpdateContext = React47.createContext(() => {});
 
 // src/setup-env-variables.ts
 var getEnvVariables = () => {
@@ -15094,8 +15332,8 @@ var setupEnvVariables = () => {
 };
 
 // src/Track.tsx
-import { useContext as useContext48, useMemo as useMemo43, useState as useState22 } from "react";
-import { jsx as jsx39 } from "react/jsx-runtime";
+import { useMemo as useMemo44, useState as useState23 } from "react";
+import { jsx as jsx40 } from "react/jsx-runtime";
 var {
   freeze: _freeze,
   layout: _layout,
@@ -15111,12 +15349,11 @@ var TrackWithoutSchema = ({
   layout = "none",
   ...props
 }) => {
-  const [id] = useState22(() => String(Math.random()));
-  const tracksEnabled = useContext48(ExperimentalTracksEnabledContext);
-  const value = useMemo43(() => tracksEnabled ? { id, name } : null, [id, name, tracksEnabled]);
-  return /* @__PURE__ */ jsx39(TimelineTrackContext.Provider, {
+  const [id] = useState23(() => String(Math.random()));
+  const value = useMemo44(() => ({ id, name }), [id, name]);
+  return /* @__PURE__ */ jsx40(TimelineTrackContext.Provider, {
     value,
-    children: /* @__PURE__ */ jsx39(SequenceWithoutSchema, {
+    children: /* @__PURE__ */ jsx40(SequenceWithoutSchema, {
       _remotionInternalDocumentationLink: "https://www.remotion.dev/docs/track",
       ...props,
       name,
@@ -15127,7 +15364,7 @@ var TrackWithoutSchema = ({
   });
 };
 var Track = withInteractivitySchema({
-  Component: (props) => /* @__PURE__ */ jsx39(TrackWithoutSchema, {
+  Component: (props) => /* @__PURE__ */ jsx40(TrackWithoutSchema, {
     ...props,
     layout: "none"
   }),
@@ -15139,8 +15376,8 @@ var Track = withInteractivitySchema({
 addSequenceStackTraces(Track);
 
 // src/use-pixel-density.ts
-import React48, { useContext as useContext49 } from "react";
-var PixelDensityContext = React48.createContext(null);
+import React49, { useContext as useContext49 } from "react";
+var PixelDensityContext = React49.createContext(null);
 var getBrowserPixelDensity = () => {
   if (typeof window === "undefined") {
     return 1;
@@ -15174,8 +15411,8 @@ import {
   useContext as useContext50,
   useEffect as useEffect19,
   useLayoutEffect as useLayoutEffect21,
-  useMemo as useMemo44,
-  useState as useState23
+  useMemo as useMemo45,
+  useState as useState24
 } from "react";
 
 // src/video/offthread-video-source.ts
@@ -15189,7 +15426,7 @@ var getOffthreadVideoSource = ({
 };
 
 // src/video/OffthreadVideoForRendering.tsx
-import { jsx as jsx40 } from "react/jsx-runtime";
+import { jsx as jsx41 } from "react/jsx-runtime";
 var OffthreadVideoForRendering = ({
   onError,
   volume: volumeProp,
@@ -15221,7 +15458,7 @@ var OffthreadVideoForRendering = ({
   if (!src) {
     throw new TypeError("No `src` was passed to <OffthreadVideo>.");
   }
-  const id = useMemo44(() => `offthreadvideo-${random(src)}-${sequenceContext?.cumulatedFrom}-${sequenceContext?.relativeFrom}-${sequenceContext?.durationInFrames}`, [
+  const id = useMemo45(() => `offthreadvideo-${random(src)}-${sequenceContext?.cumulatedFrom}-${sequenceContext?.relativeFrom}-${sequenceContext?.durationInFrames}`, [
     src,
     sequenceContext?.cumulatedFrom,
     sequenceContext?.relativeFrom,
@@ -15277,14 +15514,14 @@ var OffthreadVideoForRendering = ({
     sequencePlaybackRate,
     audioStreamIndex
   ]);
-  const currentTime = useMemo44(() => {
+  const currentTime = useMemo45(() => {
     return getExpectedMediaFrameUncorrected({
       frame,
       playbackRate: playbackRate || 1,
       startFrom: audioStartFrame
     }) / videoConfig.fps;
   }, [frame, audioStartFrame, playbackRate, videoConfig.fps]);
-  const actualSrc = useMemo44(() => {
+  const actualSrc = useMemo45(() => {
     return getOffthreadVideoSource({
       src,
       currentTime,
@@ -15292,7 +15529,7 @@ var OffthreadVideoForRendering = ({
       toneMapped
     });
   }, [toneMapped, currentTime, src, transparent]);
-  const [imageSrc, setImageSrc] = useState23(null);
+  const [imageSrc, setImageSrc] = useState24(null);
   const { delayRender, continueRender } = useDelayRender();
   useLayoutEffect21(() => {
     if (!window.remotion_videoEnabled) {
@@ -15372,7 +15609,7 @@ var OffthreadVideoForRendering = ({
       cancelRender("Failed to load image with src " + imageSrc);
     }
   }, [imageSrc, onError]);
-  const className = useMemo44(() => {
+  const className = useMemo45(() => {
     return [OBJECTFIT_CONTAIN_CLASS_NAME, props.className].filter(truthy).join(" ");
   }, [props.className]);
   const onImageFrame = useCallback26((img) => {
@@ -15384,7 +15621,7 @@ var OffthreadVideoForRendering = ({
     return null;
   }
   continueRender(imageSrc.handle);
-  return /* @__PURE__ */ jsx40(Img, {
+  return /* @__PURE__ */ jsx41(Img, {
     src: imageSrc.src,
     delayRenderRetries,
     delayRenderTimeoutInMilliseconds,
@@ -15396,15 +15633,15 @@ var OffthreadVideoForRendering = ({
 };
 
 // src/video/VideoForPreview.tsx
-import React50, {
+import React51, {
   forwardRef as forwardRef14,
   useCallback as useCallback27,
   useContext as useContext51,
   useEffect as useEffect21,
   useImperativeHandle as useImperativeHandle10,
-  useMemo as useMemo45,
+  useMemo as useMemo46,
   useRef as useRef30,
-  useState as useState24
+  useState as useState25
 } from "react";
 
 // src/video/emit-video-frame.ts
@@ -15453,14 +15690,14 @@ class MediaPlaybackError extends Error {
 }
 
 // src/video/VideoForPreview.tsx
-import { jsx as jsx41 } from "react/jsx-runtime";
+import { jsx as jsx42 } from "react/jsx-runtime";
 var VideoForDevelopmentRefForwardingFunction = (props, ref) => {
   const context = useContext51(SharedAudioContext);
   if (!context) {
     throw new Error("SharedAudioContext not found");
   }
   const videoRef = useRef30(null);
-  const sharedSource = useMemo45(() => {
+  const sharedSource = useMemo46(() => {
     if (!context.audioContext) {
       return null;
     }
@@ -15469,7 +15706,7 @@ var VideoForDevelopmentRefForwardingFunction = (props, ref) => {
       ref: videoRef
     });
   }, [context.audioContext]);
-  const effectToUse = React50.useInsertionEffect ?? React50.useLayoutEffect;
+  const effectToUse = React51.useInsertionEffect ?? React51.useLayoutEffect;
   effectToUse(() => {
     return () => {
       requestAnimationFrame(() => {
@@ -15561,7 +15798,7 @@ var VideoForDevelopmentRefForwardingFunction = (props, ref) => {
   useImperativeHandle10(ref, () => {
     return videoRef.current;
   }, []);
-  useState24(() => playbackLogging({
+  useState25(() => playbackLogging({
     logLevel,
     message: `Mounting video with source = ${actualSrc}, v=${VERSION}, user agent=${typeof navigator === "undefined" ? "server" : navigator.userAgent}`,
     tag: "video",
@@ -15638,7 +15875,7 @@ var VideoForDevelopmentRefForwardingFunction = (props, ref) => {
       current.preload = "auto";
     }
   }, []);
-  const actualStyle = useMemo45(() => {
+  const actualStyle = useMemo46(() => {
     return {
       ...style
     };
@@ -15648,7 +15885,7 @@ var VideoForDevelopmentRefForwardingFunction = (props, ref) => {
     requestsVideoFrame: Boolean(onVideoFrame),
     isClientSideRendering: false
   });
-  const video = /* @__PURE__ */ jsx41("video", {
+  const video = /* @__PURE__ */ jsx42("video", {
     ...nativeProps,
     ref: videoRef,
     muted: isMutedForPlayback,
@@ -15675,7 +15912,7 @@ var VideoForPreviewRefForwardingFunction = (props, ref) => {
     loopVolumeCurveBehavior,
     onlyWarnForMediaSeekingError
   } = props;
-  const [timelineId] = useState24(() => String(Math.random()));
+  const [timelineId] = useState25(() => String(Math.random()));
   const parentSequence = useContext51(SequenceContext);
   const { isStudio } = useRemotionEnvironment();
   const [mediaVolume] = useMediaVolumeState();
@@ -15707,17 +15944,17 @@ var VideoForPreviewRefForwardingFunction = (props, ref) => {
     documentationLink: onlyWarnForMediaSeekingError ? "https://www.remotion.dev/docs/offthreadvideo" : "https://www.remotion.dev/docs/html5-video",
     muted: isMutedForTimeline
   });
-  const metadata = useMemo45(() => isStudio || automaticOutlineRef || registration !== null ? {
+  const metadata = useMemo46(() => isStudio || automaticOutlineRef || registration !== null ? {
     type: "sequence",
     id: timelineId,
     value: registration,
     outlineChildrenRef: automaticOutlineRef
   } : null, [automaticOutlineRef, isStudio, registration, timelineId]);
-  return /* @__PURE__ */ jsx41(CommittedMetadataProvider, {
+  return /* @__PURE__ */ jsx42(CommittedMetadataProvider, {
     value: null,
     _remotionCommitMetadata: metadata,
-    children: /* @__PURE__ */ jsx41(SequenceContent, {
-      children: /* @__PURE__ */ jsx41(VideoForPreviewContent, {
+    children: /* @__PURE__ */ jsx42(SequenceContent, {
+      children: /* @__PURE__ */ jsx42(VideoForPreviewContent, {
         ...props,
         ref,
         timelineId,
@@ -15730,7 +15967,7 @@ var VideoForPreviewRefForwardingFunction = (props, ref) => {
 var VideoForPreview = forwardRef14(VideoForPreviewRefForwardingFunction);
 
 // src/video/OffthreadVideo.tsx
-import { jsx as jsx42 } from "react/jsx-runtime";
+import { jsx as jsx43 } from "react/jsx-runtime";
 var InnerOffthreadVideo = (props) => {
   const {
     startFrom,
@@ -15774,15 +16011,15 @@ var InnerOffthreadVideo = (props) => {
     trimBefore: trimBeforeValue
   });
   if (typeof trimBeforeValue !== "undefined" || typeof effectiveTrimAfter !== "undefined") {
-    return /* @__PURE__ */ jsx42(Html5MediaTrimContext.Provider, {
+    return /* @__PURE__ */ jsx43(Html5MediaTrimContext.Provider, {
       value: trimBeforeValue ?? 0,
-      children: /* @__PURE__ */ jsx42(Sequence, {
+      children: /* @__PURE__ */ jsx43(Sequence, {
         layout: "none",
         from: 0 - (trimBeforeValue ?? 0),
         showInTimeline: false,
         durationInFrames: effectiveTrimAfter === undefined ? undefined : (trimBeforeValue ?? 0) + (effectiveTrimAfter - (trimBeforeValue ?? 0)) / (props.playbackRate ?? 1),
         name,
-        children: /* @__PURE__ */ jsx42(InnerOffthreadVideo, {
+        children: /* @__PURE__ */ jsx43(InnerOffthreadVideo, {
           pauseWhenBuffering: shouldPauseWhenBuffering,
           ...otherProps,
           trimAfter: undefined,
@@ -15799,7 +16036,7 @@ var InnerOffthreadVideo = (props) => {
   }
   validateMediaProps(props, "Video");
   if (environment.isRendering) {
-    return /* @__PURE__ */ jsx42(OffthreadVideoForRendering, {
+    return /* @__PURE__ */ jsx43(OffthreadVideoForRendering, {
       pauseWhenBuffering: shouldPauseWhenBuffering,
       ...otherProps,
       trimAfter: undefined,
@@ -15822,7 +16059,7 @@ var InnerOffthreadVideo = (props) => {
     delayRenderTimeoutInMilliseconds,
     ...propsForPreview
   } = otherProps;
-  return /* @__PURE__ */ jsx42(VideoForPreview, {
+  return /* @__PURE__ */ jsx43(VideoForPreview, {
     _remotionInternalStack: _remotionInternalStack ?? null,
     onDuration,
     onlyWarnForMediaSeekingError: true,
@@ -15872,7 +16109,7 @@ var OffthreadVideo = ({
   if (imageFormat) {
     throw new TypeError(`The \`<OffthreadVideo>\` tag does no longer accept \`imageFormat\`. Use the \`transparent\` prop if you want to render a transparent video.`);
   }
-  return /* @__PURE__ */ jsx42(InnerOffthreadVideo, {
+  return /* @__PURE__ */ jsx43(InnerOffthreadVideo, {
     acceptableTimeShiftInSeconds,
     allowAmplificationDuringRender: allowAmplificationDuringRender ?? true,
     audioStreamIndex: audioStreamIndex ?? 0,
@@ -15946,39 +16183,37 @@ var watchStaticFile = (fileName, callback) => {
 };
 
 // src/wrap-remotion-context.tsx
-import React52, { useCallback as useCallback29, useMemo as useMemo46, useRef as useRef31, useState as useState25 } from "react";
-import { jsx as jsx43 } from "react/jsx-runtime";
+import React53, { useCallback as useCallback29, useMemo as useMemo47, useRef as useRef31, useState as useState26 } from "react";
+import { jsx as jsx44 } from "react/jsx-runtime";
 function useRemotionContexts() {
-  const compositionManagerCtx = React52.useContext(CompositionManager);
-  const videoContext = React52.useContext(VideoContext);
-  const timelineContext = React52.useContext(TimelineContext);
-  const setTimelineContext = React52.useContext(SetTimelineContext);
-  const sequenceContext = React52.useContext(SequenceContext);
-  const defaultPremountInSeconds = React52.useContext(DefaultPremountContext);
-  const experimentalTracksEnabled = React52.useContext(ExperimentalTracksEnabledContext);
-  const timelineTrackContext = React52.useContext(TimelineTrackContext);
-  const canUseRemotionHooksContext = React52.useContext(CanUseRemotionHooks);
-  const preloadContext = React52.useContext(PreloadContext);
-  const resolveCompositionContext = React52.useContext(ResolveCompositionContext);
-  const renderAssetManagerContext = React52.useContext(RenderAssetManager);
-  const sequenceManagerActionsContext = React52.useContext(SequenceManagerActionsContext);
-  const sequenceManagerRefContext = React52.useContext(SequenceManagerRefContext);
-  const sequenceRegistryContext = React52.useContext(SequenceRegistryContext);
-  const sequenceRegistryScopeContext = React52.useContext(SequenceRegistryScopeContext);
-  const sequenceRegistrationContext = React52.useContext(SequenceRegistrationContext);
-  const disableSequenceRegistrationContext = React52.useContext(DisableSequenceRegistrationContext);
-  const remotionEnvironmentContext = React52.useContext(RemotionEnvironmentContext);
-  const visualModePropStatusesRefContext = React52.useContext(VisualModePropStatusesRefContext);
-  const bufferManagerContext = React52.useContext(BufferingContextReact);
-  const logLevelContext = React52.useContext(LogLevelContext);
-  return useMemo46(() => ({
+  const compositionManagerCtx = React53.useContext(CompositionManager);
+  const videoContext = React53.useContext(VideoContext);
+  const timelineContext = React53.useContext(TimelineContext);
+  const setTimelineContext = React53.useContext(SetTimelineContext);
+  const sequenceContext = React53.useContext(SequenceContext);
+  const defaultPremountInSeconds = React53.useContext(DefaultPremountContext);
+  const timelineTrackContext = React53.useContext(TimelineTrackContext);
+  const canUseRemotionHooksContext = React53.useContext(CanUseRemotionHooks);
+  const preloadContext = React53.useContext(PreloadContext);
+  const resolveCompositionContext = React53.useContext(ResolveCompositionContext);
+  const renderAssetManagerContext = React53.useContext(RenderAssetManager);
+  const sequenceManagerActionsContext = React53.useContext(SequenceManagerActionsContext);
+  const sequenceManagerRefContext = React53.useContext(SequenceManagerRefContext);
+  const sequenceRegistryContext = React53.useContext(SequenceRegistryContext);
+  const sequenceRegistryScopeContext = React53.useContext(SequenceRegistryScopeContext);
+  const sequenceRegistrationContext = React53.useContext(SequenceRegistrationContext);
+  const disableSequenceRegistrationContext = React53.useContext(DisableSequenceRegistrationContext);
+  const remotionEnvironmentContext = React53.useContext(RemotionEnvironmentContext);
+  const visualModePropStatusesRefContext = React53.useContext(VisualModePropStatusesRefContext);
+  const bufferManagerContext = React53.useContext(BufferingContextReact);
+  const logLevelContext = React53.useContext(LogLevelContext);
+  return useMemo47(() => ({
     compositionManagerCtx,
     videoContext,
     timelineContext,
     setTimelineContext,
     sequenceContext,
     defaultPremountInSeconds,
-    experimentalTracksEnabled,
     timelineTrackContext,
     canUseRemotionHooksContext,
     preloadContext,
@@ -15999,7 +16234,6 @@ function useRemotionContexts() {
     videoContext,
     sequenceContext,
     defaultPremountInSeconds,
-    experimentalTracksEnabled,
     timelineTrackContext,
     setTimelineContext,
     timelineContext,
@@ -16024,8 +16258,8 @@ var ForwardedSequenceRegistry = ({
   contexts,
   children
 }) => {
-  const [scopeId] = useState25(() => String(Math.random()));
-  const [observerAvailable, setObserverAvailable] = useState25(isCommitRegistrationObserverInstalled);
+  const [scopeId] = useState26(() => String(Math.random()));
+  const [observerAvailable, setObserverAvailable] = useState26(isCommitRegistrationObserverInstalled);
   const observedCommitRef = useRef31(false);
   const observerFailedRef = useRef31(false);
   const unmountedRef = useRef31(false);
@@ -16041,7 +16275,7 @@ var ForwardedSequenceRegistry = ({
     observedCommitRef.current = true;
     scope?.onCommitSequences(scopeId, sequences, sequenceIds);
   }, [scope, scopeId]);
-  const useIsomorphicLayoutEffect = typeof window === "undefined" ? React52.useEffect : React52.useLayoutEffect;
+  const useIsomorphicLayoutEffect = typeof window === "undefined" ? React53.useEffect : React53.useLayoutEffect;
   useIsomorphicLayoutEffect(() => {
     if (scope === null || typeof window === "undefined") {
       return;
@@ -16080,19 +16314,19 @@ var ForwardedSequenceRegistry = ({
       });
     };
   }, [scope, scopeId, registry, commitRegistrationEnabled]);
-  const metadata = useMemo46(() => ({
+  const metadata = useMemo47(() => ({
     type: "sequence-manager",
     id: scopeId,
     onCommit: commitRegistrationEnabled ? onCommitSequences : null
   }), [commitRegistrationEnabled, onCommitSequences, scopeId]);
-  return /* @__PURE__ */ jsx43(SequenceRegistryScopeProvider, {
+  return /* @__PURE__ */ jsx44(SequenceRegistryScopeProvider, {
     value: scope,
     _remotionCommitMetadata: metadata,
-    children: /* @__PURE__ */ jsx43(SequenceManagerActionsContext.Provider, {
+    children: /* @__PURE__ */ jsx44(SequenceManagerActionsContext.Provider, {
       value: contexts.sequenceManagerActionsContext,
-      children: /* @__PURE__ */ jsx43(SequenceRegistryContext.Provider, {
+      children: /* @__PURE__ */ jsx44(SequenceRegistryContext.Provider, {
         value: registry,
-        children: /* @__PURE__ */ jsx43(SequenceCommitRegistrationContext.Provider, {
+        children: /* @__PURE__ */ jsx44(SequenceCommitRegistrationContext.Provider, {
           value: commitRegistrationEnabled,
           children
         })
@@ -16102,48 +16336,45 @@ var ForwardedSequenceRegistry = ({
 };
 var RemotionContextProvider = (props) => {
   const { children, contexts } = props;
-  return /* @__PURE__ */ jsx43(LogLevelContext.Provider, {
+  return /* @__PURE__ */ jsx44(LogLevelContext.Provider, {
     value: contexts.logLevelContext,
-    children: /* @__PURE__ */ jsx43(CanUseRemotionHooks.Provider, {
+    children: /* @__PURE__ */ jsx44(CanUseRemotionHooks.Provider, {
       value: contexts.canUseRemotionHooksContext,
-      children: /* @__PURE__ */ jsx43(PreloadContext.Provider, {
+      children: /* @__PURE__ */ jsx44(PreloadContext.Provider, {
         value: contexts.preloadContext,
-        children: /* @__PURE__ */ jsx43(CompositionManager.Provider, {
+        children: /* @__PURE__ */ jsx44(CompositionManager.Provider, {
           value: contexts.compositionManagerCtx,
-          children: /* @__PURE__ */ jsx43(SequenceManagerRefContext.Provider, {
+          children: /* @__PURE__ */ jsx44(SequenceManagerRefContext.Provider, {
             value: contexts.sequenceManagerRefContext,
-            children: /* @__PURE__ */ jsx43(RemotionEnvironmentContext.Provider, {
+            children: /* @__PURE__ */ jsx44(RemotionEnvironmentContext.Provider, {
               value: contexts.remotionEnvironmentContext,
-              children: /* @__PURE__ */ jsx43(SequenceRegistrationContext.Provider, {
+              children: /* @__PURE__ */ jsx44(SequenceRegistrationContext.Provider, {
                 value: contexts.sequenceRegistrationContext,
-                children: /* @__PURE__ */ jsx43(DisableSequenceRegistrationContext.Provider, {
+                children: /* @__PURE__ */ jsx44(DisableSequenceRegistrationContext.Provider, {
                   value: contexts.disableSequenceRegistrationContext,
-                  children: /* @__PURE__ */ jsx43(ForwardedSequenceRegistry, {
+                  children: /* @__PURE__ */ jsx44(ForwardedSequenceRegistry, {
                     contexts,
-                    children: /* @__PURE__ */ jsx43(VisualModePropStatusesRefContext.Provider, {
+                    children: /* @__PURE__ */ jsx44(VisualModePropStatusesRefContext.Provider, {
                       value: contexts.visualModePropStatusesRefContext,
-                      children: /* @__PURE__ */ jsx43(RenderAssetManager.Provider, {
+                      children: /* @__PURE__ */ jsx44(RenderAssetManager.Provider, {
                         value: contexts.renderAssetManagerContext,
-                        children: /* @__PURE__ */ jsx43(ResolveCompositionContext.Provider, {
+                        children: /* @__PURE__ */ jsx44(ResolveCompositionContext.Provider, {
                           value: contexts.resolveCompositionContext,
-                          children: /* @__PURE__ */ jsx43(TimelineContext.Provider, {
+                          children: /* @__PURE__ */ jsx44(TimelineContext.Provider, {
                             value: contexts.timelineContext,
-                            children: /* @__PURE__ */ jsx43(SetTimelineContext.Provider, {
+                            children: /* @__PURE__ */ jsx44(SetTimelineContext.Provider, {
                               value: contexts.setTimelineContext,
-                              children: /* @__PURE__ */ jsx43(SequenceContext.Provider, {
+                              children: /* @__PURE__ */ jsx44(SequenceContext.Provider, {
                                 value: contexts.sequenceContext,
-                                children: /* @__PURE__ */ jsx43(BufferingContextReact.Provider, {
+                                children: /* @__PURE__ */ jsx44(BufferingContextReact.Provider, {
                                   value: contexts.bufferManagerContext,
-                                  children: /* @__PURE__ */ jsx43(ExperimentalTracksEnabledContext.Provider, {
-                                    value: contexts.experimentalTracksEnabled,
-                                    children: /* @__PURE__ */ jsx43(TimelineTrackContext.Provider, {
-                                      value: contexts.timelineTrackContext,
-                                      children: /* @__PURE__ */ jsx43(DefaultPremountContext.Provider, {
-                                        value: contexts.defaultPremountInSeconds,
-                                        children: /* @__PURE__ */ jsx43(VideoContext.Provider, {
-                                          value: contexts.videoContext,
-                                          children
-                                        })
+                                  children: /* @__PURE__ */ jsx44(TimelineTrackContext.Provider, {
+                                    value: contexts.timelineTrackContext,
+                                    children: /* @__PURE__ */ jsx44(DefaultPremountContext.Provider, {
+                                      value: contexts.defaultPremountInSeconds,
+                                      children: /* @__PURE__ */ jsx44(VideoContext.Provider, {
+                                        value: contexts.videoContext,
+                                        children
                                       })
                                     })
                                   })
@@ -16202,6 +16433,7 @@ var Internals = {
   resolveTrimProps,
   VideoForPreview,
   CompositionManager,
+  CompositionManagerRefContext,
   CompositionSetters,
   VisualModePropStatusesContext,
   VisualModePropStatusesRefContext,
@@ -16250,7 +16482,6 @@ var Internals = {
   truthy,
   SequenceContext,
   TimelineTrackContext,
-  ExperimentalTracksEnabledContext,
   TrackWithoutSchema,
   PremountContext,
   usePremounting,
@@ -16383,17 +16614,17 @@ Object.assign(Internals, { useSyncExternalStore: useSyncExternalStore2 });
 // src/font-face-registry.ts
 var fontDataByUrl = new Map;
 // src/series/index.tsx
-import React54, {
+import React55, {
   forwardRef as forwardRef15,
-  useMemo as useMemo47
+  useMemo as useMemo48
 } from "react";
 
 // src/series/flatten-children.tsx
-import React53 from "react";
+import React54 from "react";
 var flattenChildren = (children) => {
-  const childrenArray = React53.Children.toArray(children);
+  const childrenArray = React54.Children.toArray(children);
   return childrenArray.reduce((flatChildren, child) => {
-    if (child.type === React53.Fragment) {
+    if (child.type === React54.Fragment) {
       return flatChildren.concat(flattenChildren(child.props.children));
     }
     flatChildren.push(child);
@@ -16402,7 +16633,7 @@ var flattenChildren = (children) => {
 };
 
 // src/series/index.tsx
-import { jsx as jsx44, jsxs as jsxs4, Fragment } from "react/jsx-runtime";
+import { jsx as jsx45, jsxs as jsxs4, Fragment } from "react/jsx-runtime";
 var seriesSequenceSchema = {
   durationInFrames: Interactive.baseSchema.durationInFrames,
   name: Interactive.sequenceSchema.name,
@@ -16418,7 +16649,7 @@ var SeriesSequenceInner = forwardRef15(({ offset = 0, className = "", _remotionI
   if (_remotionInternalRender) {
     return _remotionInternalRender({ ...props, offset, className: className || undefined }, ref);
   }
-  return /* @__PURE__ */ jsx44(IsNotInsideSeriesProvider, {
+  return /* @__PURE__ */ jsx45(IsNotInsideSeriesProvider, {
     children: props.children
   });
 });
@@ -16457,7 +16688,7 @@ var validateSeriesSequenceProps = ({
 };
 var SeriesInner = (props) => {
   const pendingDeletions = usePendingSequenceDeletions();
-  const childrenValue = useMemo47(() => {
+  const childrenValue = useMemo48(() => {
     const flattenedChildren = flattenChildren(props.children).filter((child) => !OptimisticSequenceDeletion.isElementDeleted(child, pendingDeletions));
     const renderChildren = (i, startFrame) => {
       if (i === flattenedChildren.length) {
@@ -16481,7 +16712,7 @@ var SeriesInner = (props) => {
         index: i,
         childrenLength: flattenedChildren.length
       });
-      return React54.cloneElement(castedElement, {
+      return React55.cloneElement(castedElement, {
         _remotionInternalRender: (resolvedProps, ref) => {
           const durationInFramesProp = resolvedProps.durationInFrames;
           const timelineDurationInFrames = durationInFramesProp / (resolvedProps.playbackRate ?? 1);
@@ -16507,7 +16738,7 @@ var SeriesInner = (props) => {
           const nextStartFrame = startFrame + timelineDurationInFrames + offset;
           return /* @__PURE__ */ jsxs4(Fragment, {
             children: [
-              /* @__PURE__ */ jsx44(SequenceWithoutSchemaWithRef, {
+              /* @__PURE__ */ jsx45(SequenceWithoutSchemaWithRef, {
                 ref,
                 name: name || "<Series.Sequence>",
                 _remotionInternalDocumentationLink: "https://www.remotion.dev/docs/series",
@@ -16519,7 +16750,7 @@ var SeriesInner = (props) => {
                   role: "clip",
                   seriesOffset: offset
                 },
-                children: /* @__PURE__ */ jsx44(IsNotInsideSeriesProvider, {
+                children: /* @__PURE__ */ jsx45(IsNotInsideSeriesProvider, {
                   children: sequenceChildren
                 })
               }),
@@ -16531,12 +16762,12 @@ var SeriesInner = (props) => {
     };
     return renderChildren(0, 0);
   }, [props.children, pendingDeletions]);
-  return /* @__PURE__ */ jsx44(TrackWithoutSchema, {
+  return /* @__PURE__ */ jsx45(TrackWithoutSchema, {
     layout: "none",
     _remotionInternalDocumentationLink: "https://www.remotion.dev/docs/series",
     ...props,
     name: props.name ?? "<Series>",
-    children: /* @__PURE__ */ jsx44(IsInsideSeriesContainer, {
+    children: /* @__PURE__ */ jsx45(IsInsideSeriesContainer, {
       children: childrenValue
     })
   });
@@ -16650,14 +16881,14 @@ var staticFile = (path) => {
   return preparsed;
 };
 // src/Still.tsx
-import React55 from "react";
+import React56 from "react";
 var Still = (props) => {
   const newProps = {
     ...props,
     durationInFrames: 1,
     fps: 1
   };
-  return React55.createElement(Composition, newProps);
+  return React56.createElement(Composition, newProps);
 };
 addSequenceStackTraces(Still);
 // src/video/html5-video.tsx
@@ -16670,7 +16901,7 @@ import {
   useEffect as useEffect22,
   useImperativeHandle as useImperativeHandle11,
   useLayoutEffect as useLayoutEffect22,
-  useMemo as useMemo48,
+  useMemo as useMemo49,
   useRef as useRef32
 } from "react";
 
@@ -16690,13 +16921,6 @@ var seekToTime = ({
       cancel: () => {}
     };
   }
-  seek({
-    logLevel,
-    mediaRef: element,
-    time: desiredTime,
-    why: "Seeking during rendering",
-    mountTime
-  });
   let cancel;
   let cancelSeeked = null;
   const prom = new Promise((resolve) => {
@@ -16722,6 +16946,13 @@ var seekToTime = ({
       element.removeEventListener("seeked", onDone);
     };
   });
+  seek({
+    logLevel,
+    mediaRef: element,
+    time: desiredTime,
+    why: "Seeking during rendering",
+    mountTime
+  });
   return {
     wait: Promise.all([prom, waitForSeekedEvent]).then(([time]) => time),
     cancel: () => {
@@ -16799,7 +17030,7 @@ var seekToTimeMultipleUntilRight = ({
 };
 
 // src/video/VideoForRendering.tsx
-import { jsx as jsx45 } from "react/jsx-runtime";
+import { jsx as jsx46 } from "react/jsx-runtime";
 var VideoForRenderingForwardFunction = ({
   onError,
   volume: volumeProp,
@@ -16830,7 +17061,7 @@ var VideoForRenderingForwardFunction = ({
   const mountTime = useMountTime();
   const { delayRender, continueRender } = useDelayRender();
   const { registerRenderAsset, unregisterRenderAsset } = useContext52(RenderAssetManager);
-  const id = useMemo48(() => `video-${random(props.src ?? "")}-${sequenceContext?.cumulatedFrom}-${sequenceContext?.relativeFrom}-${sequenceContext?.durationInFrames}`, [
+  const id = useMemo49(() => `video-${random(props.src ?? "")}-${sequenceContext?.cumulatedFrom}-${sequenceContext?.relativeFrom}-${sequenceContext?.durationInFrames}`, [
     props.src,
     sequenceContext?.cumulatedFrom,
     sequenceContext?.relativeFrom,
@@ -17014,7 +17245,7 @@ var VideoForRenderingForwardFunction = ({
       delayRender
     ]);
   }
-  return /* @__PURE__ */ jsx45("video", {
+  return /* @__PURE__ */ jsx46("video", {
     ref: videoRef,
     disableRemotePlayback: true,
     ...props
@@ -17023,7 +17254,7 @@ var VideoForRenderingForwardFunction = ({
 var VideoForRendering = forwardRef16(VideoForRenderingForwardFunction);
 
 // src/video/html5-video.tsx
-import { jsx as jsx46 } from "react/jsx-runtime";
+import { jsx as jsx47 } from "react/jsx-runtime";
 var VideoForwardingFunction = (props, ref) => {
   const {
     startFrom,
@@ -17080,14 +17311,14 @@ var VideoForwardingFunction = (props, ref) => {
   const loopDuration = effectiveTrimAfter ?? (durationFetched === undefined ? undefined : durationFetched * fps);
   if (loop && loopDuration !== undefined) {
     if (!Number.isFinite(loopDuration)) {
-      return /* @__PURE__ */ jsx46(Html5Video, {
+      return /* @__PURE__ */ jsx47(Html5Video, {
         ...propsOtherThanLoop,
         ref,
         _remotionInternalStack,
         _remotionInternalNativeLoopPassed: true
       });
     }
-    return /* @__PURE__ */ jsx46(Loop, {
+    return /* @__PURE__ */ jsx47(Loop, {
       durationInFrames: calculateMediaDuration({
         trimAfter: effectiveTrimAfter,
         mediaDurationInFrames: loopDuration,
@@ -17097,7 +17328,7 @@ var VideoForwardingFunction = (props, ref) => {
       layout: "none",
       name,
       showInTimeline: false,
-      children: /* @__PURE__ */ jsx46(Html5Video, {
+      children: /* @__PURE__ */ jsx47(Html5Video, {
         ...propsOtherThanLoop,
         ref,
         _remotionInternalStack,
@@ -17106,15 +17337,15 @@ var VideoForwardingFunction = (props, ref) => {
     });
   }
   if (typeof trimBeforeValue !== "undefined" || typeof effectiveTrimAfter !== "undefined") {
-    return /* @__PURE__ */ jsx46(Html5MediaTrimContext.Provider, {
+    return /* @__PURE__ */ jsx47(Html5MediaTrimContext.Provider, {
       value: trimBeforeValue ?? 0,
-      children: /* @__PURE__ */ jsx46(Sequence, {
+      children: /* @__PURE__ */ jsx47(Sequence, {
         layout: "none",
         from: 0 - (trimBeforeValue ?? 0),
         showInTimeline: false,
         durationInFrames: effectiveTrimAfter === undefined ? undefined : (trimBeforeValue ?? 0) + (effectiveTrimAfter - (trimBeforeValue ?? 0)) / (props.playbackRate ?? 1),
         name,
-        children: /* @__PURE__ */ jsx46(Html5Video, {
+        children: /* @__PURE__ */ jsx47(Html5Video, {
           pauseWhenBuffering: shouldPauseWhenBuffering,
           onVideoFrame,
           ...otherProps,
@@ -17131,14 +17362,14 @@ var VideoForwardingFunction = (props, ref) => {
     volume: props.volume
   }, "Html5Video");
   if (environment.isRendering) {
-    return /* @__PURE__ */ jsx46(VideoForRendering, {
+    return /* @__PURE__ */ jsx47(VideoForRendering, {
       onDuration,
       onVideoFrame: onVideoFrame ?? null,
       ...otherProps,
       ref
     });
   }
-  return /* @__PURE__ */ jsx46(VideoForPreview, {
+  return /* @__PURE__ */ jsx47(VideoForPreview, {
     onlyWarnForMediaSeekingError: false,
     ...otherProps,
     ref,