remotion 4.0.538 → 4.0.539

package/dist/esm/index.mjs

@@ -493,7 +493,7 @@ var hasTailwindClassName = ({
 };
 var AbsoluteFillElementRefForwarding = (props, ref) => {
   const { style, ...other } = props;
-  const actualStyle = useMemo2(() => {
+  const defaultStyle = useMemo2(() => {
     return {
       position: "absolute",
       top: hasTailwindClassName({
@@ -552,10 +552,15 @@ var AbsoluteFillElementRefForwarding = (props, ref) => {
           "flex-col-reverse"
         ],
         type: "exact"
-      }) ? undefined : "column",
+      }) ? undefined : "column"
+    };
+  }, [other.className]);
+  const actualStyle = useMemo2(() => {
+    return {
+      ...defaultStyle,
       ...style
     };
-  }, [other.className, style]);
+  }, [defaultStyle, style]);
   return /* @__PURE__ */ jsx5("div", {
     ref,
     style: actualStyle,
@@ -1523,9 +1528,6 @@ var useLazyComponent = ({
   ]);
   const lazy = useMemo7(() => {
     if ("component" in compProps) {
-      if (typeof document === "undefined" || noSuspense) {
-        return compProps.component;
-      }
       return Wrapper;
     }
     if ("lazyComponent" in compProps && typeof compProps.lazyComponent !== "undefined") {
@@ -1536,6 +1538,9 @@ var useLazyComponent = ({
     }
     throw new Error("You must pass either 'component' or 'lazyComponent'");
   }, [lazyComponentFromProps, componentStore, Wrapper]);
+  if ("component" in compProps && (typeof document === "undefined" || noSuspense)) {
+    return compProps.component;
+  }
   return lazy;
 };
 
@@ -1742,7 +1747,7 @@ var getStackForControls = (controls) => {
 };
 
 // src/version.ts
-var VERSION = "4.0.538";
+var VERSION = "4.0.539";
 
 // src/multiple-versions-warning.ts
 var checkMultipleRemotionVersions = () => {
@@ -1779,14 +1784,14 @@ var Null = () => {
 };
 
 // src/Sequence.tsx
-import React26, {
+import React27, {
   createContext as createContext28,
   forwardRef as forwardRef3,
   useContext as useContext28,
-  useLayoutEffect as useLayoutEffect8,
-  useMemo as useMemo20,
+  useLayoutEffect as useLayoutEffect9,
+  useMemo as useMemo21,
   useRef as useRef8,
-  useState as useState9
+  useState as useState10
 } from "react";
 
 // src/DefaultPremountContext.ts
@@ -3909,13 +3914,13 @@ var useSequenceRegistration = ({
 };
 
 // src/with-interactivity-schema.ts
-import React25, {
+import React26, {
   createContext as createContext27,
   forwardRef as forwardRef2,
   useContext as useContext27,
-  useLayoutEffect as useLayoutEffect7,
-  useMemo as useMemo19,
-  useState as useState8
+  useLayoutEffect as useLayoutEffect8,
+  useMemo as useMemo20,
+  useState as useState9
 } from "react";
 
 // src/delete-nested-key.ts
@@ -3952,7 +3957,7 @@ var deleteNestedKey = (obj, keysToRemove) => {
 };
 
 // src/effects/use-memoized-effects.ts
-import React24, { useContext as useContext26, useLayoutEffect as useLayoutEffect6, useMemo as useMemo18, useRef as useRef7 } from "react";
+import React25, { useContext as useContext26, useLayoutEffect as useLayoutEffect7, useMemo as useMemo19, useRef as useRef7 } from "react";
 
 // src/evaluate-source-expressions.ts
 var evaluateSourceNumericValue = (expression, config) => {
@@ -4560,6 +4565,20 @@ var interpolateSegment = ({
     output
   });
 };
+var getInputForInterpolation = ({
+  input,
+  inputRange,
+  options
+}) => {
+  const posterizedInput = options?.posterize === undefined ? input : Math.floor(input / options.posterize) * options.posterize;
+  const inputMin = inputRange[0];
+  const inputMax = inputRange[inputRange.length - 1];
+  if (inputRange.length === 1 || !(posterizedInput < inputMin && options?.extrapolateLeft === "wrap" || posterizedInput > inputMax && options?.extrapolateRight === "wrap")) {
+    return posterizedInput;
+  }
+  const range = inputMax - inputMin;
+  return ((posterizedInput - inputMin) % range + range) % range + inputMin;
+};
 var interpolateNumber = ({
   input,
   inputRange,
@@ -4579,14 +4598,18 @@ var interpolateNumber = ({
   if (options?.extrapolateRight !== undefined) {
     extrapolateRight = options.extrapolateRight;
   }
-  const posterizedInput = options?.posterize === undefined ? input : Math.floor(input / options.posterize) * options.posterize;
-  const range = findRange(posterizedInput, inputRange);
+  const resolvedInput = getInputForInterpolation({
+    input,
+    inputRange,
+    options: options ?? null
+  });
+  const range = findRange(resolvedInput, inputRange);
   const easing = resolveEasingForSegment({
     easing: easingOption,
     segmentIndex: range
   });
   let result = interpolateSegment({
-    input: posterizedInput,
+    input: resolvedInput,
     inputRange: [inputRange[range], inputRange[range + 1]],
     outputRange: [outputRange[range], outputRange[range + 1]],
     easing,
@@ -4603,11 +4626,11 @@ var interpolateNumber = ({
       continue;
     }
     const previousSegmentEnd = inputRange[segmentIndex + 1];
-    if (posterizedInput <= previousSegmentEnd) {
+    if (resolvedInput <= previousSegmentEnd) {
       continue;
     }
     const continuedSegmentValue = interpolateSegment({
-      input: posterizedInput,
+      input: resolvedInput,
       inputRange: [inputRange[segmentIndex], previousSegmentEnd],
       outputRange: [outputRange[segmentIndex], outputRange[segmentIndex + 1]],
       easing: previousEasing,
@@ -4628,8 +4651,12 @@ var interpolateString = ({
 }) => {
   const initiallyParsedOutputRange = outputRange.map((output) => parseStringInterpolationValue(output, outputType));
   const hasAxisRotation = initiallyParsedOutputRange.some((parsed) => parsed.axisRotation);
-  const posterizedInput = options?.posterize === undefined ? input : Math.floor(input / options.posterize) * options.posterize;
-  const segmentIndex = inputRange.length === 1 ? 0 : findRange(posterizedInput, inputRange);
+  const resolvedInput = getInputForInterpolation({
+    input,
+    inputRange,
+    options: options ?? null
+  });
+  const segmentIndex = inputRange.length === 1 ? 0 : findRange(resolvedInput, inputRange);
   const parsedOutputRange = hasAxisRotation ? initiallyParsedOutputRange.map((parsed, index) => {
     if (parsed.kind !== "rotate") {
       return parsed;
@@ -4753,31 +4780,24 @@ var interpolateDiscreteValue = ({
       throw new TypeError(typeof outputRange[0] === "boolean" ? "Booleans can only be interpolated using Easing.step1" : "Non-numeric strings can only be interpolated using Easing.step1");
     }
   }
-  const posterizedInput = options?.posterize === undefined ? input : Math.floor(input / options.posterize) * options.posterize;
+  const resolvedInput = getInputForInterpolation({
+    input,
+    inputRange,
+    options: options ?? null
+  });
   const inputMin = inputRange[0];
   const inputMax = inputRange[inputRange.length - 1];
-  let resolvedInput = posterizedInput;
   if (resolvedInput < inputMin) {
     if (options?.extrapolateLeft === "identity") {
       throw new TypeError(typeof outputRange[0] === "boolean" ? 'extrapolateLeft: "identity" is not supported for booleans' : 'extrapolateLeft: "identity" is not supported for non-numeric strings');
     }
-    if (options?.extrapolateLeft === "wrap") {
-      const wrapRange = inputMax - inputMin;
-      resolvedInput = ((resolvedInput - inputMin) % wrapRange + wrapRange) % wrapRange + inputMin;
-    } else {
-      return outputRange[0];
-    }
+    return outputRange[0];
   }
   if (resolvedInput > inputMax) {
     if (options?.extrapolateRight === "identity") {
       throw new TypeError(typeof outputRange[0] === "boolean" ? 'extrapolateRight: "identity" is not supported for booleans' : 'extrapolateRight: "identity" is not supported for non-numeric strings');
     }
-    if (options?.extrapolateRight === "wrap") {
-      const wrapRange = inputMax - inputMin;
-      resolvedInput = ((resolvedInput - inputMin) % wrapRange + wrapRange) % wrapRange + inputMin;
-    } else {
-      return outputRange[outputRange.length - 1];
-    }
+    return outputRange[outputRange.length - 1];
   }
   const range = findRange(resolvedInput, inputRange);
   return resolvedInput >= inputRange[range + 1] ? outputRange[range + 1] : outputRange[range];
@@ -5254,7 +5274,7 @@ function spring({
     frame: durationProcessed,
     config
   });
-  const inner = config.overshootClamping ? to >= from ? Math.min(spr.current, to) : Math.max(spr.current, to) : spr.current;
+  const inner = config.overshootClamping ? Math.min(spr.current, 1) : spr.current;
   const interpolated = from === 0 && to === 1 ? inner : interpolate(inner, [0, 1], [from, to]);
   return interpolated;
 }
@@ -5489,14 +5509,16 @@ function parseModernComponent(str, percentScale) {
 function parseHueAngle(str) {
   if (str === "none")
     return 0;
-  if (str.endsWith("rad")) {
-    return Number.parseFloat(str) * 180 / Math.PI;
-  }
-  if (str.endsWith("grad"))
-    return Number.parseFloat(str) * 0.9;
-  if (str.endsWith("turn"))
-    return Number.parseFloat(str) * 360;
-  return Number.parseFloat(str);
+  let degrees = Number.parseFloat(str);
+  if (str.endsWith("grad")) {
+    degrees *= 0.9;
+  } else if (str.endsWith("rad")) {
+    degrees = degrees * 180 / Math.PI;
+  } else if (str.endsWith("turn")) {
+    degrees *= 360;
+  }
+  const normalized = degrees % 360;
+  return normalized < 0 ? (normalized + 360) % 360 : normalized;
 }
 function parseModernAlpha(str) {
   if (str === undefined || str === "none")
@@ -6073,9 +6095,131 @@ var OverrideIdsToNodePathsSettersContext = createContext26({
   }
 });
 
+// src/effects/effect-source-observer.ts
+import React24, { useLayoutEffect as useLayoutEffect6, useMemo as useMemo18, useState as useState8 } from "react";
+var observers = new Map;
+var redrawListeners = new Map;
+var identities = new WeakMap;
+var inspectedChains = new WeakMap;
+var sourceChainOwners = new Map;
+var useIdentityCommitEffect = React24.useInsertionEffect ?? useLayoutEffect6;
+var subscribeToEffectSource = ({
+  sequenceKey,
+  effectIndex,
+  onSource
+}) => {
+  let sequence = observers.get(sequenceKey);
+  if (!sequence) {
+    sequence = new Map;
+    observers.set(sequenceKey, sequence);
+  }
+  let listeners = sequence.get(effectIndex);
+  if (!listeners) {
+    listeners = new Set;
+    sequence.set(effectIndex, listeners);
+  }
+  listeners.add(onSource);
+  redrawListeners.get(sequenceKey)?.forEach((redraw) => redraw());
+  return () => {
+    listeners.delete(onSource);
+    if (listeners.size === 0) {
+      sequence.delete(effectIndex);
+    }
+    if (sequence.size === 0) {
+      observers.delete(sequenceKey);
+    }
+  };
+};
+var publishEffectSource = (effect, source, chain) => {
+  if (observers.size === 0) {
+    return;
+  }
+  const identity = identities.get(effect);
+  if (!identity) {
+    return;
+  }
+  const listeners = observers.get(identity.sequenceKey)?.get(identity.effectIndex);
+  if (!listeners || listeners.size === 0) {
+    return;
+  }
+  let inspected = inspectedChains.get(chain);
+  if (!inspected) {
+    inspected = new Map;
+    inspectedChains.set(chain, inspected);
+  }
+  const key = `${identity.sequenceKey}\x00${identity.effectIndex}`;
+  inspected.set(key, identity);
+  sourceChainOwners.set(key, chain);
+  listeners.forEach((listener) => {
+    try {
+      listener(source);
+    } catch {}
+  });
+};
+var invalidateEffectChainSources = (chain) => {
+  const inspected = inspectedChains.get(chain);
+  inspectedChains.delete(chain);
+  inspected?.forEach((identity, key) => {
+    if (sourceChainOwners.get(key) !== chain) {
+      return;
+    }
+    sourceChainOwners.delete(key);
+    observers.get(identity.sequenceKey)?.get(identity.effectIndex)?.forEach((listener) => {
+      try {
+        listener(null);
+      } catch {}
+    });
+  });
+};
+var useEffectSourceInspection = (effects, sequenceKey) => {
+  const [revision, setRevision] = useState8(0);
+  useLayoutEffect6(() => {
+    if (sequenceKey === null) {
+      return;
+    }
+    let listeners = redrawListeners.get(sequenceKey);
+    if (!listeners) {
+      listeners = new Set;
+      redrawListeners.set(sequenceKey, listeners);
+    }
+    const redraw = () => setRevision((previous) => previous + 1);
+    listeners.add(redraw);
+    if (observers.has(sequenceKey)) {
+      redraw();
+    }
+    return () => {
+      listeners.delete(redraw);
+      if (listeners.size === 0) {
+        redrawListeners.delete(sequenceKey);
+        observers.get(sequenceKey)?.forEach((sourceListeners) => {
+          sourceListeners.forEach((listener) => {
+            try {
+              listener(null);
+            } catch {}
+          });
+        });
+      }
+    };
+  }, [sequenceKey]);
+  useIdentityCommitEffect(() => {
+    if (sequenceKey === null) {
+      return;
+    }
+    effects.forEach((effect, effectIndex) => {
+      identities.set(effect, { sequenceKey, effectIndex });
+    });
+    return () => {
+      effects.forEach((effect) => identities.delete(effect));
+    };
+  }, [effects, sequenceKey]);
+  return useMemo18(() => {
+    return sequenceKey === null || revision === 0 ? effects : effects.slice();
+  }, [effects, revision, sequenceKey]);
+};
+
 // src/effects/use-memoized-effects.ts
 var emptyDragOverrides2 = {};
-var useCacheCommitEffect = React24.useInsertionEffect ?? useLayoutEffect6;
+var useCacheCommitEffect = React25.useInsertionEffect ?? useLayoutEffect7;
 var areEffectParamsEqual = (previous, next) => {
   if (Object.is(previous, next)) {
     return true;
@@ -6181,7 +6325,7 @@ var useMemoizedEffectDefinitions = (effects) => {
       cancelled = true;
     };
   }, [activityDormant, controllers, effects, stableDefinitions]);
-  useLayoutEffect6(() => {
+  useLayoutEffect7(() => {
     stableDefinitions.forEach((_definition, index) => {
       const snapshot = effects[index]?.params;
       if (!areEffectParamsEqual(controllers[index].store.getSnapshot(), snapshot)) {
@@ -6243,12 +6387,13 @@ var useMemoizedEffects = ({
   videoConfigValues
 }) => {
   const previousRef = useRef7(null);
+  const { isStudio } = useRemotionEnvironment();
   const { overrideIdToNodePathMappings } = useContext26(OverrideIdsToNodePathsGettersContext);
   const previous = previousRef.current;
   const nodePath = overrideId ? overrideIdToNodePathMappings[overrideId] ?? null : null;
   const effectDragOverrides = useEffectDragOverridesForNodePath(nodePath);
   const sequenceStatus = usePropStatusForNodePath(nodePath);
-  const effectPropStatuses = useMemo18(() => Array.from({ length: effects.length }, (_, effectIndex) => {
+  const effectPropStatuses = useMemo19(() => Array.from({ length: effects.length }, (_, effectIndex) => {
     if (nodePath === null) {
       return null;
     }
@@ -6259,7 +6404,7 @@ var useMemoizedEffects = ({
     });
     return status.type === "can-update-effect" ? status.props : null;
   }), [effects.length, nodePath, sequenceStatus, 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 animatedEffects = useMemo19(() => 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];
@@ -6297,7 +6442,7 @@ var useMemoizedEffects = ({
   useCacheCommitEffect(() => {
     previousRef.current = { prepared, effects: next };
   }, [next, prepared]);
-  return next;
+  return useEffectSourceInspection(next, isStudio && nodePath !== null ? makeSequencePropsSubscriptionKey({ ...nodePath, videoConfigValues }) : null);
 };
 
 // src/flatten-schema.ts
@@ -6699,11 +6844,11 @@ var mergeValues = ({
 };
 var DisableInteractivityContext = createContext27(false);
 var DisableInteractivityProvider = ({ children }) => {
-  return React25.createElement(DisableInteractivityContext.Provider, { value: true }, children);
+  return React26.createElement(DisableInteractivityContext.Provider, { value: true }, children);
 };
 var EnableInteractivityContext = createContext27(false);
 var EnableInteractivityProvider = ({ children }) => {
-  return React25.createElement(EnableInteractivityContext.Provider, { value: true }, children);
+  return React26.createElement(EnableInteractivityContext.Provider, { value: true }, children);
 };
 var withInteractivitySchema = ({
   Component,
@@ -6728,7 +6873,7 @@ var withInteractivitySchema = ({
     const disableInteractivity = useContext27(DisableInteractivityContext);
     const enableInteractivity = useContext27(EnableInteractivityContext);
     if (!env.isStudio && !enableInteractivity || env.isRendering || !canUseRemotionHooks || disableInteractivity) {
-      return React25.createElement(Component, {
+      return React26.createElement(Component, {
         ...cleanProps,
         controls: null,
         ref
@@ -6740,14 +6885,14 @@ var withInteractivitySchema = ({
     const fps = videoConfig?.fps;
     const height = videoConfig?.height;
     const width = videoConfig?.width;
-    const videoConfigValues = useMemo19(() => durationInFrames === undefined || fps === undefined || height === undefined || width === undefined ? null : {
+    const videoConfigValues = useMemo20(() => durationInFrames === undefined || fps === undefined || height === undefined || width === undefined ? null : {
       durationInFrames,
       fps,
       height,
       width
     }, [durationInFrames, fps, height, width]);
     const passedControls = cleanProps.controls;
-    const resolvedPassedControls = useMemo19(() => {
+    const resolvedPassedControls = useMemo20(() => {
       if (!passedControls || getStackForControls(passedControls) !== null || internalStack === undefined) {
         return passedControls;
       }
@@ -6756,13 +6901,13 @@ var withInteractivitySchema = ({
       return controlsWithStack;
     }, [internalStack, passedControls]);
     if (resolvedPassedControls) {
-      return React25.createElement(Component, {
+      return React26.createElement(Component, {
         ...cleanProps,
         controls: resolvedPassedControls,
         ref
       });
     }
-    const [overrideId] = useState8(() => {
+    const [overrideId] = useState9(() => {
       if (!internalStack) {
         return String(Math.random());
       }
@@ -6777,7 +6922,7 @@ var withInteractivitySchema = ({
     const nodePath = env.isReadOnlyStudio ? null : nodePathMapping.overrideIdToNodePathMappings[overrideId] ?? null;
     const dragOverrides = useDragOverridesForNodePath(nodePath);
     const sequenceStatus = usePropStatusForNodePath(nodePath);
-    const propStatus = useMemo19(() => getPropStatusesForSequenceStatus(sequenceStatus, videoConfigValues), [sequenceStatus, videoConfigValues]);
+    const propStatus = useMemo20(() => getPropStatusesForSequenceStatus(sequenceStatus, videoConfigValues), [sequenceStatus, videoConfigValues]);
     const needsFrame = flatKeys.some((key) => propStatus?.[key]?.status === "keyframed" || dragOverrides[key]?.type === "keyframed");
     const frame = useCurrentFrameWithOptionalSubscription(needsFrame);
     const runtimeValues = flatKeys.map((key) => getRuntimeValueForSchemaKey({
@@ -6785,12 +6930,12 @@ var withInteractivitySchema = ({
       key,
       props: cleanProps
     }));
-    const currentRuntimeValueDotNotation = useMemo19(() => readValuesFromProps(cleanProps, flatKeys, flatSchema), runtimeValues);
-    const [runtimeValueStore] = useState8(() => createRuntimeValueStore(currentRuntimeValueDotNotation));
-    useLayoutEffect7(() => {
+    const currentRuntimeValueDotNotation = useMemo20(() => readValuesFromProps(cleanProps, flatKeys, flatSchema), runtimeValues);
+    const [runtimeValueStore] = useState9(() => createRuntimeValueStore(currentRuntimeValueDotNotation));
+    useLayoutEffect8(() => {
       runtimeValueStore.setSnapshot(currentRuntimeValueDotNotation);
     }, [currentRuntimeValueDotNotation, runtimeValueStore]);
-    const controls = useMemo19(() => {
+    const controls = useMemo20(() => {
       const controlsForRender = {
         schema: schemaWithSequenceName,
         currentRuntimeValueDotNotation,
@@ -6810,10 +6955,10 @@ var withInteractivitySchema = ({
       runtimeValueStore.store,
       videoConfigValues
     ]);
-    useLayoutEffect7(() => {
+    useLayoutEffect8(() => {
       OptimisticSequenceDeletion.register(internalStack ?? null, nodePath);
     }, [internalStack, nodePath]);
-    const { merged: valuesDotNotation, propsToDelete } = useMemo19(() => {
+    const { merged: valuesDotNotation, propsToDelete } = useMemo20(() => {
       return computeEffectiveSchemaValuesDotNotation({
         schema: schemaWithSequenceName,
         currentValue: currentRuntimeValueDotNotation,
@@ -6833,7 +6978,7 @@ var withInteractivitySchema = ({
     if (OptimisticSequenceDeletion.isDeleted(nodePath, pendingDeletions)) {
       return null;
     }
-    return React25.createElement(Component, {
+    return React26.createElement(Component, {
       ...mergedProps,
       controls,
       ref
@@ -6895,7 +7040,7 @@ var RegularSequenceRefForwardingFunction = ({
   ...other
 }, ref) => {
   const { layout = "absolute-fill" } = other;
-  const [id] = useState9(() => String(Math.random()));
+  const [id] = useState10(() => String(Math.random()));
   const parentSequence = useContext28(SequenceContext);
   const activityRequested = useContext28(SequenceActivityContext);
   const parentDormant = useContext28(SequenceActivityDormantContext);
@@ -6979,7 +7124,7 @@ var RegularSequenceRefForwardingFunction = ({
   if (lastPlaybackRate.current.frame !== absoluteFrame && lastPlaybackRate.current.playbackRate !== playbackRate) {
     throw new Error('The "playbackRate" prop of <Sequence /> must be constant. Animating playbackRate is not supported.');
   }
-  useLayoutEffect8(() => {
+  useLayoutEffect9(() => {
     lastPlaybackRate.current = { playbackRate, frame: absoluteFrame };
   }, [absoluteFrame, playbackRate]);
   const videoConfig = useVideoConfig();
@@ -7010,13 +7155,13 @@ var RegularSequenceRefForwardingFunction = ({
   const sequenceRegistrationEnabled = useContext28(SequenceRegistrationContext);
   const canvasOutlinesEnabled = useContext28(SequenceOutlineContext);
   const shouldDiscoverOutline = env.isStudio || canvasOutlinesEnabled;
-  const automaticOutlineRef = useMemo20(() => shouldDiscoverOutline && layout === "none" ? SequenceOutlineInternals.createRef() : null, [shouldDiscoverOutline, layout]);
+  const automaticOutlineRef = useMemo21(() => shouldDiscoverOutline && layout === "none" ? SequenceOutlineInternals.createRef() : null, [shouldDiscoverOutline, layout]);
   const wrapperRefForOutline = useRef8(null);
   const refForOutline = layout === "none" ? automaticOutlineRef : wrapperRefForOutline;
-  const premounting = useMemo20(() => {
+  const premounting = useMemo21(() => {
     return parentSequence?.premounting || Boolean(other._remotionInternalIsPremounting);
   }, [other._remotionInternalIsPremounting, parentSequence?.premounting]);
-  const postmounting = useMemo20(() => {
+  const postmounting = useMemo21(() => {
     return parentSequence?.postmounting || Boolean(other._remotionInternalIsPostmounting);
   }, [other._remotionInternalIsPostmounting, parentSequence?.postmounting]);
   const currentSequenceStart = cumulatedFrom + relativeFrom;
@@ -7024,7 +7169,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 = useMemo20(() => {
+  const contextValue = useMemo21(() => {
     return {
       playbackRate: cumulativePlaybackRate,
       absoluteFrom,
@@ -7057,7 +7202,7 @@ var RegularSequenceRefForwardingFunction = ({
     postmountDisplay,
     cumulatedNegativeFrom
   ]);
-  const loopContextValue = useMemo20(() => {
+  const loopContextValue = useMemo21(() => {
     if (loopPeriod === null) {
       return null;
     }
@@ -7066,7 +7211,7 @@ var RegularSequenceRefForwardingFunction = ({
       durationInFrames: contentDurationInFrames
     };
   }, [contentDurationInFrames, loopIteration, loopPeriod]);
-  const resolvedLoopDisplay = useMemo20(() => {
+  const resolvedLoopDisplay = useMemo21(() => {
     if (loopDisplay || loopPeriod === null) {
       return loopDisplay;
     }
@@ -7076,21 +7221,21 @@ var RegularSequenceRefForwardingFunction = ({
       durationInFrames: loopPeriod
     };
   }, [actualDurationInFrames, loopDisplay, loopPeriod]);
-  const timelineClipName = useMemo20(() => {
+  const timelineClipName = useMemo21(() => {
     return name ?? "";
   }, [name]);
   const resolvedDocumentationLink = documentationLink ?? "https://www.remotion.dev/docs/sequence";
   const isInsideSeries = useContext28(IsInsideSeriesContext);
-  const singleChildComponent = useMemo20(() => childComponentOverride === undefined ? getSingleChildComponent(children) : childComponentOverride, [children, childComponentOverride]);
+  const singleChildComponent = useMemo21(() => childComponentOverride === undefined ? getSingleChildComponent(children) : childComponentOverride, [children, childComponentOverride]);
   const registrationStack = controls ? getStackForControls(controls) ?? stack ?? null : stack ?? null;
-  const getStack = useMemo20(() => getSequenceStack.bind(null, registrationStack), [registrationStack]);
+  const getStack = useMemo21(() => getSequenceStack.bind(null, registrationStack), [registrationStack]);
   const registeredFrozenFrame = typeof freeze === "number" ? freeze : null;
   const currentFrame = registeredFrozenFrame ?? (absoluteFrame - currentSequenceStart) * cumulativePlaybackRate;
   const currentFrameRef = useRef8(currentFrame);
-  useLayoutEffect8(() => {
+  useLayoutEffect9(() => {
     currentFrameRef.current = currentFrame;
   }, [currentFrame]);
-  const getCurrentFrame = useMemo20(() => getSequenceCurrentFrame.bind(null, currentFrameRef), [currentFrameRef]);
+  const getCurrentFrame = useMemo21(() => getSequenceCurrentFrame.bind(null, currentFrameRef), [currentFrameRef]);
   const registeredTrimBefore = trimBefore === 0 ? null : trimBefore;
   const parentCumulatedNegativeFrom = parentSequence?.cumulatedNegativeFrom ?? 0;
   const startMediaFrom = isMedia && isMedia.type !== "image" ? isMedia.data.startMediaFrom + parentCumulatedNegativeFrom - cumulatedNegativeFrom : null;
@@ -7108,8 +7253,8 @@ var RegularSequenceRefForwardingFunction = ({
   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 = useContext28(SeriesContentVisibilityContext);
-  const effectRuntimeValues = useMemo20(() => _remotionInternalEffects?.runtimeValues ?? null, [_remotionInternalEffects]);
-  const registrationControls = useMemo20(() => {
+  const effectRuntimeValues = useMemo21(() => _remotionInternalEffects?.runtimeValues ?? null, [_remotionInternalEffects]);
+  const registrationControls = useMemo21(() => {
     if (controlsSchema === undefined || controlsRuntimeValues === undefined || controlsOverrideId === undefined || controlsSupportsEffects === undefined || controlsComponentIdentity === undefined || controlsComponentName === undefined || controlsVideoConfigValues === undefined) {
       return null;
     }
@@ -7131,7 +7276,7 @@ var RegularSequenceRefForwardingFunction = ({
     controlsSchema,
     controlsSupportsEffects
   ]);
-  const sequenceForRegistration = useMemo20(() => {
+  const sequenceForRegistration = useMemo21(() => {
     const trackRegistration = timelineTrack ? {
       timelineTrack: {
         ...timelineTrack,
@@ -7265,7 +7410,7 @@ var RegularSequenceRefForwardingFunction = ({
     frozenMediaFrame,
     singleChildComponent
   ]);
-  const getSequenceForRegistration = useMemo20(() => getSequenceRegistration.bind(null, sequenceForRegistration), [sequenceForRegistration]);
+  const getSequenceForRegistration = useMemo21(() => getSequenceRegistration.bind(null, sequenceForRegistration), [sequenceForRegistration]);
   const registration = useSequenceRegistration({
     getSequence: env.isStudio || sequenceRegistrationEnabled ? getSequenceForRegistration : null,
     id
@@ -7288,7 +7433,7 @@ var RegularSequenceRefForwardingFunction = ({
     end: cumulatedFrom + (from + actualDurationInFrames) / parentPlaybackRate
   } : null);
   const renderActivity = activityEnabled && (!activityDormant || admitted || activitySuspended && hadActivity.current);
-  const useCommitEffect = React26.useInsertionEffect ?? useLayoutEffect8;
+  const useCommitEffect = React27.useInsertionEffect ?? useLayoutEffect9;
   useCommitEffect(() => {
     hadActivity.current = renderActivity;
   }, [renderActivity]);
@@ -7309,8 +7454,8 @@ var RegularSequenceRefForwardingFunction = ({
     bottom: resolvedCropBottom,
     style: styleIfThere
   });
-  const sequenceRef = useMemo20(() => setSequenceWrapperRef.bind(null, ref, wrapperRefForOutline), [ref, wrapperRefForOutline]);
-  const defaultStyle = useMemo20(() => {
+  const sequenceRef = useMemo21(() => setSequenceWrapperRef.bind(null, ref, wrapperRefForOutline), [ref, wrapperRefForOutline]);
+  const defaultStyle = useMemo21(() => {
     return {
       flexDirection: undefined,
       ...width ? { width } : {},
@@ -7324,7 +7469,7 @@ 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 = useMemo20(() => shouldDiscoverOutline || registration !== null ? {
+  const metadata = useMemo21(() => shouldDiscoverOutline || registration !== null ? {
     type: "sequence",
     id,
     value: registration,
@@ -7613,13 +7758,13 @@ addSequenceStackTraces(AbsoluteFill);
 import {
   forwardRef as forwardRef4,
   useImperativeHandle as useImperativeHandle2,
-  useLayoutEffect as useLayoutEffect9,
+  useLayoutEffect as useLayoutEffect10,
   useRef as useRef11,
-  useState as useState10
+  useState as useState11
 } from "react";
 
 // src/use-crop-style.ts
-import { useMemo as useMemo21 } from "react";
+import { useMemo as useMemo22 } from "react";
 var useCropStyle = ({
   cropLeft,
   cropRight,
@@ -7629,7 +7774,7 @@ var useCropStyle = ({
   componentName
 }) => {
   validateSequenceCrop({ cropLeft, cropRight, cropTop, cropBottom }, componentName);
-  return useMemo21(() => {
+  return useMemo22(() => {
     const cropClipPath = getSequenceCropClipPath({
       ...resolveSequenceCrop({ cropLeft, cropRight, cropTop, cropBottom }),
       style
@@ -7642,7 +7787,7 @@ var useCropStyle = ({
 };
 
 // src/animated-image/canvas.tsx
-import React28, { useCallback as useCallback7, useImperativeHandle, useMemo as useMemo23, useRef as useRef10 } from "react";
+import React29, { useCallback as useCallback7, useImperativeHandle, useMemo as useMemo24, useRef as useRef10 } from "react";
 
 // src/calculate-image-fit.ts
 var calculateImageFit = (fit, imageSize, canvasSize) => {
@@ -7873,6 +8018,7 @@ var createEffectChainState = (width, height) => {
 };
 var cleanupEffectChainState = (state) => {
   state.currentRunId++;
+  invalidateEffectChainSources(state);
   try {
     for (const entry of state.cleanupRegistry) {
       entry.definition.cleanup(entry.state);
@@ -7939,6 +8085,7 @@ var runEffectChainWithoutResize = async ({ state, source, effects, output, width
           state.pool.assertContextNotLost(dst);
         }
         const setupState = ensureSetup(state, def, dst);
+        publishEffectSource(eff, currentImage, state);
         def.apply({
           source: currentImage,
           target: dst,
@@ -8012,7 +8159,7 @@ var runEffectChain = async (options) => {
 };
 
 // src/effects/use-effect-chain-state.ts
-import { useEffect as useEffect7, useMemo as useMemo22, useRef as useRef9 } from "react";
+import { useEffect as useEffect7, useMemo as useMemo23, useRef as useRef9 } from "react";
 var useEffectChainState = (effectsOutputSize = null) => {
   const effectWidth = effectsOutputSize?.width;
   const effectHeight = effectsOutputSize?.height;
@@ -8034,7 +8181,7 @@ var useEffectChainState = (effectsOutputSize = null) => {
       }
     };
   }, []);
-  return useMemo22(() => ({
+  return useMemo23(() => ({
     get: (width, height) => {
       width = effectWidth ?? width;
       height = effectHeight ?? height;
@@ -8058,7 +8205,7 @@ 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(effectsOutputSize);
-  const sourceCanvas = useMemo23(() => {
+  const sourceCanvas = useMemo24(() => {
     if (typeof document === "undefined") {
       return null;
     }
@@ -8123,7 +8270,7 @@ var CanvasRefForwardingFunction = ({ width, height, fit, className, style, effec
     ...props
   });
 };
-var Canvas = React28.forwardRef(CanvasRefForwardingFunction);
+var Canvas = React29.forwardRef(CanvasRefForwardingFunction);
 
 // src/animated-image/create-image-decoder.ts
 var createImageDecoder = async ({
@@ -8213,6 +8360,7 @@ var decodeImage = async ({
         continue;
       }
       const item = sortByClosestToCurrentTime[i];
+      item.frame?.close();
       item.frame = null;
     }
   };
@@ -8399,7 +8547,7 @@ var AnimatedImageContent = forwardRef4(({
   ...props
 }, canvasRef) => {
   const resolvedSrc = resolveAnimatedImageSource(src);
-  const [decodedImage, setDecodedImage] = useState10(null);
+  const [decodedImage, setDecodedImage] = useState11(null);
   const imageDecoder = decodedImage?.decoder ?? null;
   const activeDecoderRef = useRef11(null);
   const { delayRender, continueRender, cancelRender } = useDelayRender();
@@ -8424,8 +8572,8 @@ var AnimatedImageContent = forwardRef4(({
     }
     return c;
   }, []);
-  const [initialLoopBehavior] = useState10(() => loopBehavior);
-  useLayoutEffect9(() => {
+  const [initialLoopBehavior] = useState11(() => loopBehavior);
+  useLayoutEffect10(() => {
     const decodeHandle = delayRender(`Rendering <AnimatedImage/> with src="${resolvedSrc}"`);
     const controller = new AbortController;
     let cancelled = false;
@@ -8483,7 +8631,7 @@ var AnimatedImageContent = forwardRef4(({
     delayRender,
     cancelRender
   ]);
-  useLayoutEffect9(() => {
+  useLayoutEffect10(() => {
     if (!imageDecoder || !decodedImage || activeDecoderRef.current !== imageDecoder) {
       return;
     }
@@ -8661,9 +8809,9 @@ var AnimatedImageWithIntrinsicDuration = (props) => {
   requestInitRef.current = requestInit;
   const onErrorRef = useRef11(props.onError);
   onErrorRef.current = props.onError;
-  const [duration, setDuration] = useState10(null);
-  const [failedHandle, setFailedHandle] = useState10(null);
-  useLayoutEffect9(() => {
+  const [duration, setDuration] = useState11(null);
+  const [failedHandle, setFailedHandle] = useState11(null);
+  useLayoutEffect10(() => {
     const handle = delayRender(`Finding duration of <AnimatedImage src="${src}" />`);
     const controller = new AbortController;
     let cancelled = false;
@@ -8696,7 +8844,7 @@ var AnimatedImageWithIntrinsicDuration = (props) => {
       continueRender(handle);
     };
   }, [cancelRender, continueRender, delayRender, fps, src, trimBefore]);
-  useLayoutEffect9(() => {
+  useLayoutEffect10(() => {
     if (duration !== null) {
       continueRender(duration.handle);
     }
@@ -8766,17 +8914,17 @@ var createEffect = (definition) => {
   return factory;
 };
 // src/Artifact.tsx
-import { useContext as useContext29, useLayoutEffect as useLayoutEffect11, useState as useState12 } from "react";
+import { useContext as useContext29, useLayoutEffect as useLayoutEffect12, useState as useState13 } from "react";
 
 // src/RenderAssetManager.tsx
 import {
   createContext as createContext29,
   useCallback as useCallback8,
   useImperativeHandle as useImperativeHandle3,
-  useLayoutEffect as useLayoutEffect10,
-  useMemo as useMemo24,
+  useLayoutEffect as useLayoutEffect11,
+  useMemo as useMemo25,
   useRef as useRef12,
-  useState as useState11
+  useState as useState12
 } from "react";
 
 // src/validation/validate-artifact.ts
@@ -8822,7 +8970,7 @@ var RenderAssetManager = createContext29({
   renderAssets: []
 });
 var RenderAssetManagerProvider = ({ children, collectAssets }) => {
-  const [renderAssets, setRenderAssets] = useState11([]);
+  const [renderAssets, setRenderAssets] = useState12([]);
   const renderAssetsRef = useRef12([]);
   const registerRenderAsset = useCallback8((renderAsset) => {
     validateRenderAsset(renderAsset);
@@ -8845,7 +8993,7 @@ var RenderAssetManagerProvider = ({ children, collectAssets }) => {
     renderAssetsRef.current = renderAssetsRef.current.filter((a) => a.id !== id);
     setRenderAssets(renderAssetsRef.current);
   }, []);
-  useLayoutEffect10(() => {
+  useLayoutEffect11(() => {
     if (typeof window !== "undefined") {
       window.remotion_collectAssets = () => {
         const assets = renderAssetsRef.current;
@@ -8855,7 +9003,7 @@ var RenderAssetManagerProvider = ({ children, collectAssets }) => {
       };
     }
   }, []);
-  const contextValue = useMemo24(() => {
+  const contextValue = useMemo25(() => {
     return {
       registerRenderAsset,
       unregisterRenderAsset,
@@ -8874,10 +9022,10 @@ var Artifact = ({ filename, content, downloadBehavior }) => {
   const { registerRenderAsset, unregisterRenderAsset } = useContext29(RenderAssetManager);
   const env = useRemotionEnvironment();
   const frame = useCurrentFrame();
-  const [id] = useState12(() => {
+  const [id] = useState13(() => {
     return String(Math.random());
   });
-  useLayoutEffect11(() => {
+  useLayoutEffect12(() => {
     if (!env.isRendering) {
       return;
     }
@@ -8928,7 +9076,7 @@ var Artifact = ({ filename, content, downloadBehavior }) => {
 };
 Artifact.Thumbnail = ArtifactThumbnail;
 // src/audio/html5-audio.tsx
-import { forwardRef as forwardRef7, useCallback as useCallback15, useContext as useContext44, useMemo as useMemo37 } from "react";
+import { forwardRef as forwardRef7, useCallback as useCallback15, useContext as useContext44, useMemo as useMemo38 } from "react";
 
 // src/absolute-src.ts
 var getAbsoluteSrc = (relativeSrc) => {
@@ -8970,11 +9118,11 @@ var getMediaTrimAfter = ({
 };
 
 // src/loop/index.tsx
-import React29, { createContext as createContext30, useContext as useContext30, useMemo as useMemo25 } from "react";
+import React30, { createContext as createContext30, useContext as useContext30, useMemo as useMemo26 } from "react";
 import { jsx as jsx22 } from "react/jsx-runtime";
 var LoopTimelineContext = createContext30(null);
 var useLoop = () => {
-  return React29.useContext(LoopContext);
+  return React30.useContext(LoopContext);
 };
 var Loop = ({
   durationInFrames,
@@ -9016,20 +9164,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 = useMemo25(() => {
+  const loopDisplay = useMemo26(() => {
     return {
       numberOfTimes: Math.min(compDuration / iterationDurationInFrames, times),
       startOffset: -from,
       durationInFrames: iterationDurationInFrames
     };
   }, [compDuration, from, iterationDurationInFrames, times]);
-  const loopContext = useMemo25(() => {
+  const loopContext = useMemo26(() => {
     return {
       iteration,
       durationInFrames
     };
   }, [iteration, durationInFrames]);
-  const timelineContext = useMemo25(() => ({
+  const timelineContext = useMemo26(() => ({
     startFrame: loopStartFrame,
     firstVisibleFrame,
     endFrame,
@@ -9073,7 +9221,7 @@ var playbackLogging = ({
 };
 
 // src/prefetch-state.tsx
-import { createContext as createContext31, useEffect as useEffect8, useState as useState13 } from "react";
+import { createContext as createContext31, useEffect as useEffect8, useState as useState14 } from "react";
 import { jsx as jsx23 } from "react/jsx-runtime";
 var PreloadContext = createContext31({});
 var preloads = {};
@@ -9083,7 +9231,7 @@ var setPreloads = (updater) => {
   updaters.forEach((u) => u());
 };
 var PrefetchProvider = ({ children }) => {
-  const [_preloads, _setPreloads] = useState13(() => preloads);
+  const [_preloads, _setPreloads] = useState14(() => preloads);
   useEffect8(() => {
     const updaterFunction = () => {
       _setPreloads(preloads);
@@ -9126,6 +9274,7 @@ var usePreload = (src) => {
   }
   return preloads[withoutHashFragment];
 };
+var activePrefetches = new Map;
 var blobToBase64 = function(blob) {
   const reader = new FileReader;
   return new Promise((resolve, reject) => {
@@ -9197,6 +9346,7 @@ var prefetch = (src, options) => {
     return;
   });
   const controller = new AbortController;
+  const prefetchId = Symbol("prefetch");
   let reader = null;
   fetch(srcWithoutHash, {
     signal: controller.signal,
@@ -9236,6 +9386,9 @@ var prefetch = (src, options) => {
     return URL.createObjectURL(actualBlob);
   }).then((url) => {
     if (canceled) {
+      if (url && method === "blob-url") {
+        URL.revokeObjectURL(url);
+      }
       return;
     }
     playbackLogging({
@@ -9245,6 +9398,9 @@ var prefetch = (src, options) => {
       mountTime: null
     });
     objectUrl = url;
+    const prefetchesForSrc = activePrefetches.get(srcWithoutHash) ?? new Map;
+    prefetchesForSrc.set(prefetchId, objectUrl);
+    activePrefetches.set(srcWithoutHash, prefetchesForSrc);
     setPreloads((p) => ({
       ...p,
       [srcWithoutHash]: objectUrl
@@ -9258,6 +9414,10 @@ var prefetch = (src, options) => {
   });
   return {
     free: () => {
+      if (canceled) {
+        return;
+      }
+      canceled = true;
       playbackLogging({
         logLevel,
         tag: "prefetch",
@@ -9268,16 +9428,25 @@ var prefetch = (src, options) => {
         if (method === "blob-url") {
           URL.revokeObjectURL(objectUrl);
         }
+        const prefetchesForSrc = activePrefetches.get(srcWithoutHash);
+        prefetchesForSrc?.delete(prefetchId);
+        const remainingUrl = prefetchesForSrc ? [...prefetchesForSrc.values()].pop() : undefined;
+        if (prefetchesForSrc?.size === 0) {
+          activePrefetches.delete(srcWithoutHash);
+        }
         setPreloads((p) => {
+          if (p[srcWithoutHash] === remainingUrl) {
+            return p;
+          }
           const copy = { ...p };
-          delete copy[srcWithoutHash];
+          if (remainingUrl === undefined) {
+            delete copy[srcWithoutHash];
+          } else {
+            copy[srcWithoutHash] = remainingUrl;
+          }
           return copy;
         });
       } else {
-        if (canceled) {
-          return;
-        }
-        canceled = true;
         const cancellationError = new Error("free() called");
         reject(cancellationError);
         try {
@@ -9400,7 +9569,7 @@ var resolveTrimProps = ({
 };
 
 // src/video/duration-state.tsx
-import { createContext as createContext32, useMemo as useMemo26, useReducer } from "react";
+import { createContext as createContext32, useMemo as useMemo27, useReducer } from "react";
 import { jsx as jsx24 } from "react/jsx-runtime";
 var durationReducer = (state, action) => {
   switch (action.type) {
@@ -9429,7 +9598,7 @@ var DurationsContext = createContext32({
 });
 var DurationsContextProvider = ({ children }) => {
   const [durations, setDurations] = useReducer(durationReducer, {});
-  const value = useMemo26(() => {
+  const value = useMemo27(() => {
     return {
       durations,
       setDurations
@@ -9443,12 +9612,12 @@ var DurationsContextProvider = ({ children }) => {
 
 // src/audio/AudioForPreview.tsx
 import { useCallback as useCallback14 } from "react";
-import React35, {
+import React36, {
   forwardRef as forwardRef5,
   useContext as useContext41,
   useImperativeHandle as useImperativeHandle4,
-  useMemo as useMemo34,
-  useState as useState17
+  useMemo as useMemo35,
+  useState as useState18
 } from "react";
 
 // src/get-cross-origin-value.ts
@@ -9504,18 +9673,18 @@ var random = (seed, dummy) => {
 };
 
 // src/use-amplification.ts
-import { useContext as useContext33, useLayoutEffect as useLayoutEffect12, useRef as useRef16 } from "react";
+import { useContext as useContext33, useLayoutEffect as useLayoutEffect13, useRef as useRef16 } from "react";
 
 // src/audio/shared-audio-tags.tsx
-import React32, {
+import React33, {
   createContext as createContext33,
   createRef as createRef2,
   useCallback as useCallback9,
   useContext as useContext32,
   useEffect as useEffect9,
-  useMemo as useMemo28,
+  useMemo as useMemo29,
   useRef as useRef14,
-  useState as useState14
+  useState as useState15
 } from "react";
 
 // src/play-and-handle-not-allowed-error.ts
@@ -9618,7 +9787,7 @@ var makeSharedElementSourceNode = ({
 };
 
 // src/audio/use-audio-context.ts
-import { useMemo as useMemo27, useRef as useRef13 } from "react";
+import { useMemo as useMemo28, useRef as useRef13 } from "react";
 var warned = false;
 var warnOnce = (logLevel) => {
   if (warned) {
@@ -9640,7 +9809,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 = useMemo27(() => {
+  const context = useMemo28(() => {
     if (env.isRendering) {
       return null;
     }
@@ -9838,9 +10007,9 @@ var SharedAudioContextProvider = ({
   const isResuming = useRef14(null);
   const nextResumeAttemptId = useRef14(0);
   const nextResumeIsAutoPlayAttempt = useRef14(false);
-  const audioSyncAnchor = useMemo28(() => ({ value: 0 }), []);
+  const audioSyncAnchor = useMemo29(() => ({ value: 0 }), []);
   const audioSyncAnchorListeners = useRef14([]);
-  const audioSyncAnchorEmitter = useMemo28(() => {
+  const audioSyncAnchorEmitter = useMemo29(() => {
     return {
       dispatch: (event) => {
         audioSyncAnchorListeners.current.forEach((l) => l(event));
@@ -9860,7 +10029,7 @@ var SharedAudioContextProvider = ({
   const unscheduleAudioNode = useCallback9((node) => {
     return nodesToResume.current.delete(node);
   }, []);
-  const scheduleAudioNode = useMemo28(() => {
+  const scheduleAudioNode = useMemo29(() => {
     return ({
       node,
       mediaTimestamp,
@@ -10005,7 +10174,7 @@ var SharedAudioContextProvider = ({
       ctxAndGain.suspend().catch(() => {});
     };
   }, [ctxAndGain, _experimentalKeepAudioContextAlive]);
-  const audioContextValue = useMemo28(() => {
+  const audioContextValue = useMemo29(() => {
     return {
       sampleRate,
       audioContext: ctxAndGain?.audioContext ?? null,
@@ -10041,7 +10210,7 @@ var SharedAudioContextProvider = ({
 };
 var SharedAudioTagsContextProvider = ({ children, numberOfAudioTags }) => {
   const audios = useRef14([]);
-  const [initialNumberOfAudioTags] = useState14(numberOfAudioTags);
+  const [initialNumberOfAudioTags] = useState15(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.");
   }
@@ -10051,7 +10220,7 @@ var SharedAudioTagsContextProvider = ({ children, numberOfAudioTags }) => {
   const audioCtx = useContext32(SharedAudioContext);
   const audioContext = audioCtx?.audioContext ?? null;
   const resume = audioCtx?.resume;
-  const [refs] = useState14(() => {
+  const [refs] = useState15(() => {
     return new Array(numberOfAudioTags).fill(true).map(() => {
       const ref = createRef2();
       return {
@@ -10067,7 +10236,7 @@ var SharedAudioTagsContextProvider = ({ children, numberOfAudioTags }) => {
   for (const { mediaElementSourceNode } of refs) {
     mediaElementSourceNode?.setAudioContext(audioContext);
   }
-  const effectToUse = React32.useInsertionEffect ?? React32.useLayoutEffect;
+  const effectToUse = React33.useInsertionEffect ?? React33.useLayoutEffect;
   effectToUse(() => {
     return () => {
       requestAnimationFrame(() => {
@@ -10193,7 +10362,7 @@ var SharedAudioTagsContextProvider = ({ children, numberOfAudioTags }) => {
     });
     resume?.();
   }, [logLevel, mountTime, refs, env.isPlayer, resume]);
-  const audioTagsValue = useMemo28(() => {
+  const audioTagsValue = useMemo29(() => {
     return {
       registerAudio,
       unregisterAudio,
@@ -10208,7 +10377,7 @@ var SharedAudioTagsContextProvider = ({ children, numberOfAudioTags }) => {
     unregisterAudio,
     updateAudio
   ]);
-  const sharedAudioTagElements = useMemo28(() => {
+  const sharedAudioTagElements = useMemo29(() => {
     return refs.map(({ id, ref }) => {
       return /* @__PURE__ */ jsx25("audio", {
         ref,
@@ -10238,11 +10407,11 @@ var useSharedAudio = ({
 }) => {
   const audioCtx = useContext32(SharedAudioContext);
   const tagsCtx = useContext32(SharedAudioTagsContext);
-  const [elem] = useState14(() => {
+  const [elem] = useState15(() => {
     if (tagsCtx && tagsCtx.numberOfAudioTags > 0) {
       return tagsCtx.registerAudio({ aud, audioId, premounting, postmounting });
     }
-    const el = React32.createRef();
+    const el = React33.createRef();
     const mediaElementSourceNode = makeSharedElementSourceNode({
       audioContext: audioCtx?.audioContext ?? null,
       ref: el
@@ -10262,7 +10431,7 @@ var useSharedAudio = ({
     };
   });
   elem.mediaElementSourceNode?.setAudioContext(audioCtx?.audioContext ?? null);
-  const effectToUse = React32.useInsertionEffect ?? React32.useLayoutEffect;
+  const effectToUse = React33.useInsertionEffect ?? React33.useLayoutEffect;
   if (typeof document !== "undefined") {
     effectToUse(() => {
       if (tagsCtx && tagsCtx.numberOfAudioTags > 0) {
@@ -10428,7 +10597,7 @@ var useVolume = ({
   }
   const { audioContext, gainNode: masterGainNode } = sharedAudioContext;
   if (typeof window !== "undefined") {
-    useLayoutEffect12(() => {
+    useLayoutEffect13(() => {
       if (!audioContext) {
         return;
       }
@@ -10516,7 +10685,7 @@ var scheduleMediaSourceCleanup = (cleanup) => {
 };
 
 // src/use-media-in-timeline.ts
-import { useCallback as useCallback10, useContext as useContext35, useMemo as useMemo29 } from "react";
+import { useCallback as useCallback10, useContext as useContext35, useMemo as useMemo30 } from "react";
 
 // src/audio/use-audio-frame.ts
 import { createContext as createContext34, useContext as useContext34 } from "react";
@@ -10606,7 +10775,7 @@ var useBasicMediaInTimeline = ({
     loop
   });
   const startMediaFrom = 0 - mediaStartsAt + (trimBefore ?? 0);
-  const memoizedResult = useMemo29(() => {
+  const memoizedResult = useMemo30(() => {
     return {
       duration,
       finalDisplayName: displayName ?? getAssetDisplayName(src),
@@ -10642,7 +10811,7 @@ var useMediaInTimelineRegistration = ({
   const { isStudio } = useRemotionEnvironment();
   const stack = getStack();
   const getStackForRegistration = useCallback10(() => stack, [stack]);
-  const automaticOutlineRef = useMemo29(() => mediaType === "video" && (isStudio || canvasOutlinesEnabled) ? SequenceOutlineInternals.createRef() : null, [canvasOutlinesEnabled, isStudio, mediaType]);
+  const automaticOutlineRef = useMemo30(() => mediaType === "video" && (isStudio || canvasOutlinesEnabled) ? SequenceOutlineInternals.createRef() : null, [canvasOutlinesEnabled, isStudio, mediaType]);
   const { duration, finalDisplayName } = useBasicMediaInTimeline({
     src,
     displayName,
@@ -10725,28 +10894,28 @@ import {
   useCallback as useCallback13,
   useContext as useContext38,
   useEffect as useEffect14,
-  useLayoutEffect as useLayoutEffect14,
+  useLayoutEffect as useLayoutEffect15,
   useRef as useRef20
 } from "react";
 
 // src/buffer-until-first-frame.ts
-import { useCallback as useCallback12, useMemo as useMemo32, useRef as useRef18 } from "react";
+import { useCallback as useCallback12, useMemo as useMemo33, useRef as useRef18 } from "react";
 
 // src/use-buffer-state.ts
-import { useContext as useContext37, useMemo as useMemo31 } from "react";
+import { useContext as useContext37, useMemo as useMemo32 } from "react";
 
 // src/buffering.tsx
-import React33, {
+import React34, {
   useCallback as useCallback11,
   useContext as useContext36,
   useEffect as useEffect11,
-  useLayoutEffect as useLayoutEffect13,
-  useMemo as useMemo30,
-  useState as useState15
+  useLayoutEffect as useLayoutEffect14,
+  useMemo as useMemo31,
+  useState as useState16
 } from "react";
 import { jsx as jsx26 } from "react/jsx-runtime";
 var useBufferManager = (logLevel, mountTime, setBuffering, isBuffering) => {
-  const [blockCount, setBlockCount] = useState15(0);
+  const [blockCount, setBlockCount] = useState16(0);
   const env = useRemotionEnvironment();
   const rendering = env.isRendering;
   const addBlock = useCallback11(() => {
@@ -10784,7 +10953,7 @@ var useBufferManager = (logLevel, mountTime, setBuffering, isBuffering) => {
     }
   }, [blockCount]);
   if (typeof window !== "undefined") {
-    useLayoutEffect13(() => {
+    useLayoutEffect14(() => {
       if (rendering) {
         return;
       }
@@ -10799,9 +10968,9 @@ var useBufferManager = (logLevel, mountTime, setBuffering, isBuffering) => {
       }
     }, [blockCount]);
   }
-  return useMemo30(() => ({ addBlock }), [addBlock]);
+  return useMemo31(() => ({ addBlock }), [addBlock]);
 };
-var BufferingContextReact = React33.createContext(null);
+var BufferingContextReact = React34.createContext(null);
 var BufferingProvider = ({ children }) => {
   const { logLevel, mountTime } = useContext36(LogLevelContext);
   const { isBuffering, setBuffering } = useContext36(SetTimelineContext);
@@ -10817,7 +10986,7 @@ var useBufferState = () => {
   const buffer = useContext37(BufferingContextReact);
   const logLevel = useLogLevel();
   const addBlock = buffer ? buffer.addBlock : null;
-  return useMemo31(() => ({
+  return useMemo32(() => ({
     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");
@@ -10925,7 +11094,7 @@ var useBufferUntilFirstFrame = ({
     onVariableFpsVideoDetected,
     pauseWhenBuffering
   ]);
-  return useMemo32(() => {
+  return useMemo33(() => {
     return {
       isBuffering: () => bufferingRef.current,
       bufferUntilFirstFrame
@@ -11002,9 +11171,9 @@ var getMediaSyncAction = (input) => {
 };
 
 // src/media-tag-current-time-timestamp.ts
-import React34 from "react";
+import React35 from "react";
 var useCurrentTimeOfMediaTagWithUpdateTimeStamp = (mediaRef) => {
-  const lastUpdate = React34.useRef({
+  const lastUpdate = React35.useRef({
     time: mediaRef.current?.currentTime ?? 0,
     lastUpdate: performance.now()
   });
@@ -11038,7 +11207,7 @@ var seek = ({
 };
 
 // src/use-media-buffering.ts
-import { useEffect as useEffect12, useState as useState16 } from "react";
+import { useEffect as useEffect12, useState as useState17 } from "react";
 var useMediaBuffering = ({
   element,
   shouldBuffer,
@@ -11049,7 +11218,7 @@ var useMediaBuffering = ({
   src
 }) => {
   const buffer = useBufferState();
-  const [isBuffering, setIsBuffering] = useState16(false);
+  const [isBuffering, setIsBuffering] = useState17(false);
   useEffect12(() => {
     let cleanupFns = [];
     const { current } = element;
@@ -11392,7 +11561,7 @@ var useMediaPlayback = ({
     return acceptableTimeshift ?? DEFAULT_ACCEPTABLE_TIMESHIFT_WITH_AMPLIFICATION;
   })();
   const env = useRemotionEnvironment();
-  useLayoutEffect14(() => {
+  useLayoutEffect15(() => {
     const playbackRateToSet = Math.max(0, playbackRate);
     if (mediaRef.current && mediaRef.current.defaultPlaybackRate !== playbackRateToSet) {
       mediaRef.current.defaultPlaybackRate = playbackRateToSet;
@@ -11621,7 +11790,7 @@ var useMediaTag = ({
 };
 
 // src/volume-position-state.ts
-import { createContext as createContext35, useContext as useContext40, useMemo as useMemo33 } from "react";
+import { createContext as createContext35, useContext as useContext40, useMemo as useMemo34 } from "react";
 var MediaVolumeContext = createContext35({
   playerMuted: false,
   mediaVolume: 1
@@ -11637,14 +11806,14 @@ var SetMediaVolumeContext = createContext35({
 var useMediaVolumeState = () => {
   const { mediaVolume } = useContext40(MediaVolumeContext);
   const { setMediaVolume } = useContext40(SetMediaVolumeContext);
-  return useMemo33(() => {
+  return useMemo34(() => {
     return [mediaVolume, setMediaVolume];
   }, [mediaVolume, setMediaVolume]);
 };
 var usePlayerMutedState = () => {
   const { playerMuted } = useContext40(MediaVolumeContext);
   const { setPlayerMuted } = useContext40(SetMediaVolumeContext);
-  return useMemo33(() => {
+  return useMemo34(() => {
     return [playerMuted, setPlayerMuted];
   }, [playerMuted, setPlayerMuted]);
 };
@@ -11716,7 +11885,7 @@ var useMediaAudioState = ({
 // src/audio/AudioForPreview.tsx
 import { jsx as jsx27 } from "react/jsx-runtime";
 var AudioForDevelopmentForwardRefFunction = (props, ref) => {
-  const [initialShouldPreMountAudioElements] = useState17(props.shouldPreMountAudioTags);
+  const [initialShouldPreMountAudioElements] = useState18(props.shouldPreMountAudioTags);
   if (props.shouldPreMountAudioTags !== initialShouldPreMountAudioElements) {
     throw new Error("Cannot change the behavior for pre-mounting audio tags dynamically.");
   }
@@ -11766,7 +11935,7 @@ var AudioForDevelopmentForwardRefFunction = (props, ref) => {
     requestsVideoFrame: false,
     isClientSideRendering: false
   });
-  const propsToPass = useMemo34(() => {
+  const propsToPass = useMemo35(() => {
     return {
       muted: isMutedForPlayback,
       src: preloadedSrc,
@@ -11781,7 +11950,7 @@ var AudioForDevelopmentForwardRefFunction = (props, ref) => {
     preloadedSrc,
     crossOriginValue
   ]);
-  const id = useMemo34(() => `audio-${random(src ?? "")}-${sequenceContext?.relativeFrom}-${sequenceContext?.cumulatedFrom}-${sequenceContext?.durationInFrames}-muted:${props.muted}-loop:${props.loop}`, [
+  const id = useMemo35(() => `audio-${random(src ?? "")}-${sequenceContext?.relativeFrom}-${sequenceContext?.cumulatedFrom}-${sequenceContext?.durationInFrames}-muted:${props.muted}-loop:${props.loop}`, [
     src,
     sequenceContext?.relativeFrom,
     sequenceContext?.cumulatedFrom,
@@ -11827,7 +11996,7 @@ var AudioForDevelopmentForwardRefFunction = (props, ref) => {
     volume: userPreferredVolume,
     shouldUseWebAudioApi: useWebAudioApi ?? false
   });
-  const effectToUse = React35.useInsertionEffect ?? React35.useLayoutEffect;
+  const effectToUse = React36.useInsertionEffect ?? React36.useLayoutEffect;
   effectToUse(() => {
     return scheduleMediaSourceCleanup.bind(null, cleanupOnMediaTagUnmount);
   }, [cleanupOnMediaTagUnmount]);
@@ -11858,7 +12027,7 @@ var AudioForPreviewRefForwardingFunction = (props, ref) => {
     showInTimeline,
     loopVolumeCurveBehavior
   } = props;
-  const [timelineId] = useState17(() => String(Math.random()));
+  const [timelineId] = useState18(() => String(Math.random()));
   const sequenceContext = useContext41(SequenceContext);
   const { isStudio } = useRemotionEnvironment();
   const [mediaVolume] = useMediaVolumeState();
@@ -11890,7 +12059,7 @@ var AudioForPreviewRefForwardingFunction = (props, ref) => {
     documentationLink: "https://www.remotion.dev/docs/html5-audio",
     muted: isMutedForTimeline
   });
-  const metadata = useMemo34(() => isStudio || registration !== null ? {
+  const metadata = useMemo35(() => isStudio || registration !== null ? {
     type: "sequence",
     id: timelineId,
     value: registration,
@@ -11913,18 +12082,18 @@ var AudioForPreviewRefForwardingFunction = (props, ref) => {
 var AudioForPreview = forwardRef5(AudioForPreviewRefForwardingFunction);
 
 // src/audio/AudioForRendering.tsx
-import React36, {
+import React37, {
   forwardRef as forwardRef6,
   useContext as useContext43,
   useEffect as useEffect16,
   useImperativeHandle as useImperativeHandle5,
-  useLayoutEffect as useLayoutEffect15,
-  useMemo as useMemo36,
+  useLayoutEffect as useLayoutEffect16,
+  useMemo as useMemo37,
   useRef as useRef22
 } from "react";
 
 // src/use-media-enabled.tsx
-import { createContext as createContext36, useContext as useContext42, useMemo as useMemo35 } from "react";
+import { createContext as createContext36, useContext as useContext42, useMemo as useMemo36 } from "react";
 import { jsx as jsx28 } from "react/jsx-runtime";
 var MediaEnabledContext = createContext36(null);
 var useVideoEnabled = () => {
@@ -11952,7 +12121,7 @@ var MediaEnabledProvider = ({
   videoEnabled,
   audioEnabled
 }) => {
-  const value = useMemo35(() => ({ videoEnabled, audioEnabled }), [videoEnabled, audioEnabled]);
+  const value = useMemo36(() => ({ videoEnabled, audioEnabled }), [videoEnabled, audioEnabled]);
   return /* @__PURE__ */ jsx28(MediaEnabledContext.Provider, {
     value,
     children
@@ -11991,7 +12160,7 @@ var AudioForRenderingRefForwardingFunction = (props, ref) => {
   const sequencePlaybackRate = sequenceContext?.playbackRate ?? 1;
   const audioStartFrame = useContext43(Html5MediaTrimContext);
   const { delayRender, continueRender } = useDelayRender();
-  const id = useMemo36(() => `audio-${random(props.src ?? "")}-${sequenceContext?.relativeFrom}-${sequenceContext?.cumulatedFrom}-${sequenceContext?.durationInFrames}`, [
+  const id = useMemo37(() => `audio-${random(props.src ?? "")}-${sequenceContext?.relativeFrom}-${sequenceContext?.cumulatedFrom}-${sequenceContext?.durationInFrames}`, [
     props.src,
     sequenceContext?.relativeFrom,
     sequenceContext?.cumulatedFrom,
@@ -12053,7 +12222,7 @@ var AudioForRenderingRefForwardingFunction = (props, ref) => {
   ]);
   const { src } = props;
   const needsToRenderAudioTag = ref || _remotionInternalNeedsDurationCalculation;
-  useLayoutEffect15(() => {
+  useLayoutEffect16(() => {
     if (window.process?.env?.NODE_ENV === "test") {
       return;
     }
@@ -12099,7 +12268,7 @@ var AudioForRenderingRefForwardingFunction = (props, ref) => {
     onError: onNativeError
   });
 };
-var MemoAudioForRendering = React36.memo(forwardRef6(AudioForRenderingRefForwardingFunction));
+var MemoAudioForRendering = React37.memo(forwardRef6(AudioForRenderingRefForwardingFunction));
 var AudioForRendering = forwardRef6((props, ref) => {
   const { registerRenderAsset, unregisterRenderAsset } = useContext43(RenderAssetManager);
   return /* @__PURE__ */ jsx29(MemoAudioForRendering, {
@@ -12158,7 +12327,7 @@ var AudioRefForwardingFunction = (props, ref) => {
       console.warn(errMessage);
     }
   }, [loop, onRemotionError, preloadedSrc]);
-  const onDuration = useMemo37(() => onMediaDuration.bind(null, setDurations), [setDurations]);
+  const onDuration = useMemo38(() => onMediaDuration.bind(null, setDurations), [setDurations]);
   const durationFetched = durations[getAbsoluteSrc(preloadedSrc)] ?? durations[getAbsoluteSrc(props.src)];
   validateMediaTrimProps({ startFrom, endAt, trimBefore, trimAfter });
   if (durationInFrames !== undefined) {
@@ -12256,9 +12425,9 @@ import {
   useCallback as useCallback16,
   useEffect as useEffect17,
   useImperativeHandle as useImperativeHandle6,
-  useMemo as useMemo38,
+  useMemo as useMemo39,
   useRef as useRef23,
-  useState as useState18
+  useState as useState19
 } from "react";
 import { jsx as jsx31 } from "react/jsx-runtime";
 var resolveSolidPixelDensity = (pixelDensity) => {
@@ -12326,13 +12495,13 @@ var SolidInner = ({
   const resolvedPixelDensity = resolveSolidPixelDensity(pixelDensity);
   const canvasWidth = Math.ceil(width * resolvedPixelDensity);
   const canvasHeight = Math.ceil(height * resolvedPixelDensity);
-  const [outputCanvas, setOutputCanvas] = useState18(null);
+  const [outputCanvas, setOutputCanvas] = useState19(null);
   const memoizedEffects = useMemoizedEffects({
     effects,
     overrideId: overrideId ?? null,
     videoConfigValues
   });
-  const sourceCanvas = useMemo38(() => {
+  const sourceCanvas = useMemo39(() => {
     if (typeof document === "undefined") {
       return null;
     }
@@ -12400,7 +12569,7 @@ var SolidInner = ({
     cancelRender,
     memoizedEffects
   ]);
-  const canvasStyle = useMemo38(() => {
+  const canvasStyle = useMemo39(() => {
     return {
       width,
       height,
@@ -12535,8 +12704,8 @@ import {
   forwardRef as forwardRef9,
   useCallback as useCallback17,
   useContext as useContext45,
-  useLayoutEffect as useLayoutEffect16,
-  useMemo as useMemo39,
+  useLayoutEffect as useLayoutEffect17,
+  useMemo as useMemo40,
   useRef as useRef24
 } from "react";
 
@@ -12748,7 +12917,7 @@ var HtmlInCanvasContent = forwardRef9(({
   const paintTargetRef = useRef24(null);
   const divRef = useRef24(null);
   const canvasSizeKey = `${width}x${height}@${resolvedPixelDensity}-${paintTargetMode}`;
-  const paintState = useMemo39(() => {
+  const paintState = useMemo40(() => {
     const state = {
       pendingChildren: 0,
       generation: 0,
@@ -13013,13 +13182,13 @@ var HtmlInCanvasContent = forwardRef9(({
     paintState,
     ancestorPaintState
   ]);
-  useLayoutEffect16(() => {
+  useLayoutEffect17(() => {
     return () => {
       paintState.release?.();
       paintState.release = null;
     };
   }, [paintState]);
-  useLayoutEffect16(() => {
+  useLayoutEffect17(() => {
     const placeholder = canvas2dRef.current;
     if (!placeholder) {
       throw new Error("Canvas not found");
@@ -13047,7 +13216,7 @@ var HtmlInCanvasContent = forwardRef9(({
     };
   }, [onPaintCb, cancelRender, canvasWidth, canvasHeight, paintTargetMode]);
   const onPaintChangedRef = useRef24(false);
-  useLayoutEffect16(() => {
+  useLayoutEffect17(() => {
     if (!onPaintChangedRef.current) {
       onPaintChangedRef.current = true;
       return;
@@ -13058,7 +13227,7 @@ var HtmlInCanvasContent = forwardRef9(({
     }
     canvas.requestPaint?.();
   }, [onPaint, memoizedEffects]);
-  useLayoutEffect16(() => {
+  useLayoutEffect17(() => {
     const canvas = canvas2dRef.current;
     if (!canvas) {
       return;
@@ -13085,13 +13254,13 @@ var HtmlInCanvasContent = forwardRef9(({
     isRendering,
     ancestorPaintState
   ]);
-  const innerStyle = useMemo39(() => {
+  const innerStyle = useMemo40(() => {
     return {
       width,
       height
     };
   }, [width, height]);
-  const canvasStyle = useMemo39(() => {
+  const canvasStyle = useMemo40(() => {
     return {
       width,
       height,
@@ -13293,10 +13462,10 @@ import {
   forwardRef as forwardRef10,
   useContext as useContext46,
   useImperativeHandle as useImperativeHandle7,
-  useLayoutEffect as useLayoutEffect17,
-  useMemo as useMemo40,
+  useLayoutEffect as useLayoutEffect18,
+  useMemo as useMemo41,
   useRef as useRef25,
-  useState as useState19
+  useState as useState20
 } from "react";
 
 // src/truncate-src-for-label.ts
@@ -13450,8 +13619,8 @@ var CanvasImageContent = forwardRef10(({
 }, ref) => {
   const { delayRender, continueRender, cancelRender } = useDelayRender();
   const { delayPlayback } = useBufferState();
-  const [outputCanvas, setOutputCanvas] = useState19(null);
-  const [loadedImage, setLoadedImage] = useState19(null);
+  const [outputCanvas, setOutputCanvas] = useState20(null);
+  const [loadedImage, setLoadedImage] = useState20(null);
   const actualSrc = usePreload(src);
   const chainState = useEffectChainState(effectsOutputSize);
   const memoizedEffects = useMemoizedEffects({
@@ -13461,18 +13630,18 @@ var CanvasImageContent = forwardRef10(({
   });
   const sequenceContext = useContext46(SequenceContext);
   const pendingLoadDelayRef = useRef25(null);
-  const [isLoadPending, setIsLoadPending] = useState19(false);
+  const [isLoadPending, setIsLoadPending] = useState20(false);
   const isPremounting = Boolean(sequenceContext?.premounting);
   const isPostmounting = Boolean(sequenceContext?.postmounting);
-  const continuePendingLoadDelay = useMemo40(() => continueImageLoadDelay.bind(null, pendingLoadDelayRef, setIsLoadPending, continueRender), [continueRender]);
-  const sourceCanvas = useMemo40(() => {
+  const continuePendingLoadDelay = useMemo41(() => continueImageLoadDelay.bind(null, pendingLoadDelayRef, setIsLoadPending, continueRender), [continueRender]);
+  const sourceCanvas = useMemo41(() => {
     if (typeof document === "undefined") {
       return null;
     }
     return document.createElement("canvas");
   }, []);
-  const canvasRef = useMemo40(() => setCanvasRef.bind(null, setOutputCanvas, ref), [ref]);
-  useLayoutEffect17(() => {
+  const canvasRef = useMemo41(() => setCanvasRef.bind(null, setOutputCanvas, ref), [ref]);
+  useLayoutEffect18(() => {
     if (!pauseWhenLoading || !isLoadPending || isPremounting || isPostmounting) {
       return;
     }
@@ -13484,7 +13653,7 @@ var CanvasImageContent = forwardRef10(({
     isPremounting,
     pauseWhenLoading
   ]);
-  useLayoutEffect17(() => {
+  useLayoutEffect18(() => {
     const handle = delayRender(`Rendering <CanvasImage> with src="${truncateSrcForLabel(actualSrc)}"`, {
       retries: delayRenderRetries ?? undefined,
       timeoutInMilliseconds: delayRenderTimeoutInMilliseconds ?? undefined
@@ -13547,7 +13716,7 @@ var CanvasImageContent = forwardRef10(({
     maxRetries,
     onError
   ]);
-  useLayoutEffect17(() => {
+  useLayoutEffect18(() => {
     if (!loadedImage || !outputCanvas || !sourceCanvas) {
       return;
     }
@@ -13685,7 +13854,7 @@ var CanvasImageInner = forwardRef10(({
   if (!src) {
     throw new Error('No "src" prop was passed to <CanvasImage>.');
   }
-  const isMedia = useMemo40(() => ({
+  const isMedia = useMemo41(() => ({
     type: "image",
     src
   }), [src]);
@@ -13812,7 +13981,7 @@ var getStaticFiles = () => {
   return window.remotion_staticFiles;
 };
 // src/IFrame.tsx
-import { forwardRef as forwardRef11, useCallback as useCallback18, useLayoutEffect as useLayoutEffect18, useRef as useRef26 } from "react";
+import { forwardRef as forwardRef11, useCallback as useCallback18, useLayoutEffect as useLayoutEffect19, useRef as useRef26 } from "react";
 import { jsx as jsx35 } from "react/jsx-runtime";
 var IFrameRefForwarding = ({
   onLoad,
@@ -13825,7 +13994,7 @@ var IFrameRefForwarding = ({
   const handle = useRef26(null);
   const loadedSource = useRef26(null);
   const { src, srcDoc } = props;
-  useLayoutEffect18(() => {
+  useLayoutEffect19(() => {
     if (loadedSource.current?.src === src && loadedSource.current?.srcDoc === srcDoc && loadedSource.current !== null) {
       return;
     }
@@ -13879,10 +14048,10 @@ var IFrame = forwardRef11(IFrameRefForwarding);
 // src/Img.tsx
 import {
   useContext as useContext47,
-  useLayoutEffect as useLayoutEffect19,
-  useMemo as useMemo41,
+  useLayoutEffect as useLayoutEffect20,
+  useMemo as useMemo42,
   useRef as useRef27,
-  useState as useState20
+  useState as useState21
 } from "react";
 import { jsx as jsx36 } from "react/jsx-runtime";
 function exponentialBackoff2(errorCount) {
@@ -14020,18 +14189,18 @@ var ImgContent = ({
   const errors = useRef27({});
   const { delayPlayback } = useBufferState();
   const sequenceContext = useContext47(SequenceContext);
-  const [isLoading, setIsLoading] = useState20(false);
+  const [isLoading, setIsLoading] = useState21(false);
   const _propsValid = true;
   if (!_propsValid) {
     throw new Error("typecheck error");
   }
-  const imageCallbackRef = useMemo41(() => setImageRef.bind(null, imageRef, ref ?? null), [ref]);
+  const imageCallbackRef = useMemo42(() => setImageRef.bind(null, imageRef, ref ?? null), [ref]);
   const actualSrc = usePreload(src);
-  const retryIn = useMemo41(() => retryImage.bind(null, imageRef), []);
+  const retryIn = useMemo42(() => retryImage.bind(null, imageRef), []);
   const { delayRender, continueRender, cancelRender } = useDelayRender();
   const isPremounting = Boolean(sequenceContext?.premounting);
   const isPostmounting = Boolean(sequenceContext?.postmounting);
-  const didGetError = useMemo41(() => handleImageError.bind(null, {
+  const didGetError = useMemo42(() => handleImageError.bind(null, {
     errors,
     imageRef,
     onError: onError ?? null,
@@ -14041,7 +14210,7 @@ var ImgContent = ({
     retryIn
   }), [cancelRender, maxRetries, onError, onImageError, retryIn]);
   if (typeof window !== "undefined") {
-    useLayoutEffect19(() => {
+    useLayoutEffect20(() => {
       if (!pauseWhenLoading || !isLoading || isPremounting || isPostmounting) {
         return;
       }
@@ -14053,7 +14222,7 @@ var ImgContent = ({
       isPremounting,
       pauseWhenLoading
     ]);
-    useLayoutEffect19(loadImage2.bind(null, {
+    useLayoutEffect20(loadImage2.bind(null, {
       imageRef,
       errors,
       actualSrc,
@@ -14111,7 +14280,7 @@ var NativeImgInner = ({
   if (!src) {
     throw new Error('No "src" prop was passed to <Img>.');
   }
-  const isMedia = useMemo41(() => ({
+  const isMedia = useMemo42(() => ({
     type: "image",
     src
   }), [src]);
@@ -14359,7 +14528,7 @@ var Img = withInteractivitySchema({
 });
 addSequenceStackTraces(Img);
 // src/Interactive.tsx
-import React42, { forwardRef as forwardRef12, useCallback as useCallback19, useContext as useContext48 } from "react";
+import React43, { forwardRef as forwardRef12, useCallback as useCallback19, useContext as useContext48 } from "react";
 import { jsx as jsx37 } from "react/jsx-runtime";
 var sourcePathToIdentityPrefix = (packageName) => {
   if (packageName === "remotion") {
@@ -14533,7 +14702,7 @@ var withSchema = (untypedOptions) => {
         _remotionInternalPostmountDisplay: effectivePostmountFor || null,
         _remotionInternalIsPremounting: premountingActive,
         _remotionInternalIsPostmounting: postmountingActive,
-        children: React42.createElement(Component, {
+        children: React43.createElement(Component, {
           ...componentPropsWithoutCropping,
           ...layout === "none" ? { style: croppedStyle ?? undefined, ref } : {}
         })
@@ -14643,7 +14812,7 @@ var makeInteractiveElement = (tag, displayName, schema) => {
         _remotionInternalPostmountDisplay: effectivePostmountFor || null,
         _remotionInternalIsPremounting: premountingActive,
         _remotionInternalIsPostmounting: postmountingActive,
-        children: React42.createElement(tag, {
+        children: React43.createElement(tag, {
           ...props,
           style: croppedStyle ?? undefined,
           ref: callbackRef
@@ -14739,16 +14908,16 @@ var getAudioSyncAnchorTolerance = (audioContext) => {
 };
 
 // src/CompositionManager.tsx
-import React43 from "react";
-var compositionsRef = React43.createRef();
+import React44 from "react";
+var compositionsRef = React44.createRef();
 
 // src/CompositionManagerProvider.tsx
 import {
   useCallback as useCallback21,
   useImperativeHandle as useImperativeHandle9,
-  useMemo as useMemo43,
+  useMemo as useMemo44,
   useRef as useRef29,
-  useState as useState22
+  useState as useState23
 } from "react";
 
 // src/CompositionRegistryProvider.tsx
@@ -14757,18 +14926,18 @@ import {
   useCallback as useCallback20,
   useEffect as useEffect18,
   useImperativeHandle as useImperativeHandle8,
-  useLayoutEffect as useLayoutEffect20,
-  useMemo as useMemo42,
+  useLayoutEffect as useLayoutEffect21,
+  useMemo as useMemo43,
   useRef as useRef28,
-  useState as useState21
+  useState as useState22
 } from "react";
 import { jsx as jsx38 } from "react/jsx-runtime";
-var useIsomorphicLayoutEffect6 = typeof window === "undefined" ? useEffect18 : useLayoutEffect20;
+var useIsomorphicLayoutEffect6 = typeof window === "undefined" ? useEffect18 : useLayoutEffect21;
 var CompositionRegistryFallbackProvider = withCommittedMetadata(CompositionRegistryFallbackContext.Provider);
 var CompositionRegistryProvider = forwardRef13(({ children, onSnapshot }, flushSnapshotRef) => {
   const { isStudio } = useRemotionEnvironment();
-  const [managerId] = useState21(() => String(Math.random()));
-  const [useCommitObserver, setUseCommitObserver] = useState21(() => isStudio && isCommitRegistrationObserverInstalled());
+  const [managerId] = useState22(() => String(Math.random()));
+  const [useCommitObserver, setUseCommitObserver] = useState22(() => isStudio && isCommitRegistrationObserverInstalled());
   const observedCommitRef = useRef28(false);
   const observerFailedRef = useRef28(false);
   const unmountedRef = useRef28(false);
@@ -14805,7 +14974,7 @@ var CompositionRegistryProvider = forwardRef13(({ children, onSnapshot }, flushS
     observedCommitRef.current = true;
     queueSnapshot(snapshot);
   }, [queueSnapshot]);
-  const fallbackRegistry = useMemo42(() => {
+  const fallbackRegistry = useMemo43(() => {
     const entries = new Map;
     const getSnapshot = () => {
       const compositions = [];
@@ -14876,7 +15045,7 @@ var CompositionRegistryProvider = forwardRef13(({ children, onSnapshot }, flushS
       }
     };
   }, [isStudio, useCommitObserver]);
-  const metadata = useMemo42(() => isStudio ? {
+  const metadata = useMemo43(() => isStudio ? {
     type: "composition-manager",
     id: managerId,
     onCommit: useCommitObserver ? onObservedSnapshot : null
@@ -14900,8 +15069,8 @@ var CompositionManagerProvider = ({
   const committedKeysRef = useRef29(new Set);
   const flushSnapshotRef = useRef29(null);
   const committedDescriptorsRef = useRef29(new Map);
-  const [registrationError, setRegistrationError] = useState22(null);
-  const [registry] = useState22(() => createRegistryStore({
+  const [registrationError, setRegistrationError] = useState23(null);
+  const [registry] = useState23(() => createRegistryStore({
     compositions: initialCompositions.map((composition, order) => ({
       ...composition,
       order
@@ -14909,8 +15078,8 @@ var CompositionManagerProvider = ({
     folders: []
   }));
   const { compositions, folders } = useSyncExternalStore2(registry.subscribe, registry.getSnapshot, registry.getSnapshot);
-  const [canvasContent, setCanvasContent] = useState22(initialCanvasContent);
-  const [currentAssetMetadata, setCurrentAssetMetadata] = useState22(null);
+  const [canvasContent, setCanvasContent] = useState23(initialCanvasContent);
+  const [currentAssetMetadata, setCurrentAssetMetadata] = useState23(null);
   const onCommitRegistrations = useCallback21((pending) => {
     const previousKeys = committedKeysRef.current;
     const previousDescriptors = committedDescriptorsRef.current;
@@ -14963,12 +15132,12 @@ var CompositionManagerProvider = ({
       }
     };
   }, [registry]);
-  const compositionManagerSetters = useMemo43(() => ({
+  const compositionManagerSetters = useMemo44(() => ({
     setCanvasContent,
     setCurrentAssetMetadata,
     onlyRenderComposition
   }), [onlyRenderComposition]);
-  const compositionManagerContextValue = useMemo43(() => {
+  const compositionManagerContextValue = useMemo44(() => {
     return {
       compositions,
       folders,
@@ -15116,6 +15285,72 @@ var makeDefaultPreviewCSS = (scope, backgroundColor) => {
   `;
 };
 
+// src/effects/create-curve-sampler.ts
+var createCurveSampler = (points, interpolation) => {
+  const distances = points.slice(1).map((point, index) => Math.hypot(point[0] - points[index][0], point[1] - points[index][1]));
+  const tangents = points.map(() => [0, 0]);
+  if (interpolation === "smooth" && points.length > 2) {
+    for (let axis = 0;axis < 2; axis++) {
+      const slopes = distances.map((distance, index) => (points[index + 1][axis] - points[index][axis]) / distance);
+      const curvatures = new Array(points.length).fill(0);
+      const upper = new Array(points.length).fill(0);
+      for (let index = 1;index < points.length - 1; index++) {
+        const diagonal = 2 * (distances[index - 1] + distances[index]) - distances[index - 1] * upper[index - 1];
+        upper[index] = distances[index] / diagonal;
+        curvatures[index] = (6 * (slopes[index] - slopes[index - 1]) - distances[index - 1] * curvatures[index - 1]) / diagonal;
+      }
+      for (let index = points.length - 2;index > 0; index--) {
+        curvatures[index] -= upper[index] * curvatures[index + 1];
+      }
+      for (let index = 0;index < points.length; index++) {
+        tangents[index][axis] = index === 0 ? slopes[0] - distances[0] * curvatures[1] / 6 : slopes[index - 1] + distances[index - 1] * (curvatures[index - 1] + 2 * curvatures[index]) / 6;
+      }
+    }
+    for (let index = 0;index < points.length; index++) {
+      const maxTangent = 3 * Math.min(index === 0 ? Infinity : (points[index][0] - points[index - 1][0]) / distances[index - 1], index === points.length - 1 ? Infinity : (points[index + 1][0] - points[index][0]) / distances[index]);
+      if (tangents[index][0] > maxTangent) {
+        tangents[index][1] *= maxTangent / tangents[index][0];
+      }
+      tangents[index][0] = Math.max(0, Math.min(maxTangent, tangents[index][0]));
+    }
+  }
+  return (input) => {
+    if (input <= points[0][0])
+      return points[0][1];
+    if (input >= points[points.length - 1][0]) {
+      return points[points.length - 1][1];
+    }
+    const index = points.findIndex((point) => point[0] > input) - 1;
+    const start = points[index];
+    const end = points[index + 1];
+    if (input === start[0])
+      return start[1];
+    if (interpolation === "linear" || points.length === 2) {
+      return start[1] + (end[1] - start[1]) * ((input - start[0]) / (end[0] - start[0]));
+    }
+    const handleLength = distances[index] / 3;
+    const firstX = start[0] + handleLength * tangents[index][0];
+    const secondX = end[0] - handleLength * tangents[index + 1][0];
+    let low = 0;
+    let high = 1;
+    for (let iteration = 0;iteration < 32; iteration++) {
+      const candidate = (low + high) / 2;
+      const inverse = 1 - candidate;
+      const x = inverse ** 3 * start[0] + 3 * inverse ** 2 * candidate * firstX + 3 * inverse * candidate ** 2 * secondX + candidate ** 3 * end[0];
+      if (x < input)
+        low = candidate;
+      else
+        high = candidate;
+    }
+    const progress = (low + high) / 2;
+    const remaining = 1 - progress;
+    const firstY = start[1] + handleLength * tangents[index][1];
+    const secondY = end[1] - handleLength * tangents[index + 1][1];
+    const value = remaining ** 3 * start[1] + 3 * remaining ** 2 * progress * firstY + 3 * remaining * progress ** 2 * secondY + progress ** 3 * end[1];
+    return Math.max(0, Math.min(1, value));
+  };
+};
+
 // src/get-preview-dom-element.ts
 var REMOTION_STUDIO_CONTAINER_ELEMENT = "__remotion-studio-container";
 var getPreviewDomElement = () => {
@@ -15123,8 +15358,8 @@ var getPreviewDomElement = () => {
 };
 
 // src/max-video-cache-size.ts
-import React44 from "react";
-var MaxMediaCacheSizeContext = React44.createContext(null);
+import React45 from "react";
+var MaxMediaCacheSizeContext = React45.createContext(null);
 
 // src/media-resource-manager.ts
 var disposeResource = (resource) => {
@@ -15281,7 +15516,7 @@ var waitForRoot = (fn) => {
 };
 
 // src/RemotionRoot.tsx
-import { useMemo as useMemo44 } from "react";
+import { useMemo as useMemo45 } from "react";
 import { jsx as jsx40 } from "react/jsx-runtime";
 var RemotionRootContexts = ({
   children,
@@ -15294,7 +15529,7 @@ var RemotionRootContexts = ({
   frameState,
   _experimentalKeepAudioContextAlive
 }) => {
-  const logging = useMemo44(() => {
+  const logging = useMemo45(() => {
     return { logLevel, mountTime: Date.now() };
   }, [logLevel]);
   return /* @__PURE__ */ jsx40(LogLevelContext.Provider, {
@@ -15332,7 +15567,7 @@ var RemotionRootContexts = ({
 };
 
 // src/render-resource-manager.ts
-import React46 from "react";
+import React47 from "react";
 var makeRenderResourceManager = () => {
   const resources = new Map;
   let disposed = false;
@@ -15373,7 +15608,7 @@ var makeRenderResourceManager = () => {
     }
   };
 };
-var RenderResourceManagerContext = React46.createContext(null);
+var RenderResourceManagerContext = React47.createContext(null);
 
 // src/codec.ts
 var validCodecs = [
@@ -15564,8 +15799,8 @@ var resolveVideoConfigOrCatch = (params) => {
 };
 
 // src/sequence-stack-traces.ts
-import React47 from "react";
-var SequenceStackTracesUpdateContext = React47.createContext(() => {});
+import React48 from "react";
+var SequenceStackTracesUpdateContext = React48.createContext(() => {});
 
 // src/setup-env-variables.ts
 var getEnvVariables = () => {
@@ -15595,7 +15830,7 @@ var setupEnvVariables = () => {
 };
 
 // src/Track.tsx
-import { useMemo as useMemo45, useState as useState23 } from "react";
+import { useMemo as useMemo46, useState as useState24 } from "react";
 import { jsx as jsx41 } from "react/jsx-runtime";
 var {
   freeze: _freeze,
@@ -15612,8 +15847,8 @@ var TrackWithoutSchema = ({
   layout = "none",
   ...props
 }) => {
-  const [id] = useState23(() => String(Math.random()));
-  const value = useMemo45(() => ({ id, name }), [id, name]);
+  const [id] = useState24(() => String(Math.random()));
+  const value = useMemo46(() => ({ id, name }), [id, name]);
   return /* @__PURE__ */ jsx41(TimelineTrackContext.Provider, {
     value,
     children: /* @__PURE__ */ jsx41(SequenceWithoutSchema, {
@@ -15639,8 +15874,8 @@ var Track = withInteractivitySchema({
 addSequenceStackTraces(Track);
 
 // src/use-pixel-density.ts
-import React49, { useContext as useContext49 } from "react";
-var PixelDensityContext = React49.createContext(null);
+import React50, { useContext as useContext49 } from "react";
+var PixelDensityContext = React50.createContext(null);
 var getBrowserPixelDensity = () => {
   if (typeof window === "undefined") {
     return 1;
@@ -15673,9 +15908,9 @@ import {
   useCallback as useCallback22,
   useContext as useContext50,
   useEffect as useEffect19,
-  useLayoutEffect as useLayoutEffect21,
-  useMemo as useMemo46,
-  useState as useState24
+  useLayoutEffect as useLayoutEffect22,
+  useMemo as useMemo47,
+  useState as useState25
 } from "react";
 
 // src/video/offthread-video-source.ts
@@ -15721,7 +15956,7 @@ var OffthreadVideoForRendering = ({
   if (!src) {
     throw new TypeError("No `src` was passed to <OffthreadVideo>.");
   }
-  const id = useMemo46(() => `offthreadvideo-${random(src)}-${sequenceContext?.cumulatedFrom}-${sequenceContext?.relativeFrom}-${sequenceContext?.durationInFrames}`, [
+  const id = useMemo47(() => `offthreadvideo-${random(src)}-${sequenceContext?.cumulatedFrom}-${sequenceContext?.relativeFrom}-${sequenceContext?.durationInFrames}`, [
     src,
     sequenceContext?.cumulatedFrom,
     sequenceContext?.relativeFrom,
@@ -15779,14 +16014,14 @@ var OffthreadVideoForRendering = ({
     audioStreamIndex,
     preservePitch
   ]);
-  const currentTime = useMemo46(() => {
+  const currentTime = useMemo47(() => {
     return getExpectedMediaFrameUncorrected({
       frame,
       playbackRate: playbackRate || 1,
       startFrom: audioStartFrame
     }) / videoConfig.fps;
   }, [frame, audioStartFrame, playbackRate, videoConfig.fps]);
-  const actualSrc = useMemo46(() => {
+  const actualSrc = useMemo47(() => {
     return getOffthreadVideoSource({
       src,
       currentTime,
@@ -15794,9 +16029,9 @@ var OffthreadVideoForRendering = ({
       toneMapped
     });
   }, [toneMapped, currentTime, src, transparent]);
-  const [imageSrc, setImageSrc] = useState24(null);
+  const [imageSrc, setImageSrc] = useState25(null);
   const { delayRender, continueRender, cancelRender } = useDelayRender();
-  useLayoutEffect21(() => {
+  useLayoutEffect22(() => {
     if (!window.remotion_videoEnabled) {
       return;
     }
@@ -15875,7 +16110,7 @@ var OffthreadVideoForRendering = ({
       cancelRender("Failed to load image with src " + imageSrc);
     }
   }, [imageSrc, onError, cancelRender]);
-  const className = useMemo46(() => {
+  const className = useMemo47(() => {
     return [OBJECTFIT_CONTAIN_CLASS_NAME, props.className].filter(truthy).join(" ");
   }, [props.className]);
   const onImageFrame = useCallback22((img) => {
@@ -15899,15 +16134,15 @@ var OffthreadVideoForRendering = ({
 };
 
 // src/video/VideoForPreview.tsx
-import React51, {
+import React52, {
   forwardRef as forwardRef14,
   useCallback as useCallback23,
   useContext as useContext51,
   useEffect as useEffect21,
   useImperativeHandle as useImperativeHandle10,
-  useMemo as useMemo47,
+  useMemo as useMemo48,
   useRef as useRef30,
-  useState as useState25
+  useState as useState26
 } from "react";
 
 // src/video/emit-video-frame.ts
@@ -15963,7 +16198,7 @@ var VideoForDevelopmentRefForwardingFunction = (props, ref) => {
     throw new Error("SharedAudioContext not found");
   }
   const videoRef = useRef30(null);
-  const sharedSource = useMemo47(() => {
+  const sharedSource = useMemo48(() => {
     if (!context.audioContext) {
       return null;
     }
@@ -15972,7 +16207,7 @@ var VideoForDevelopmentRefForwardingFunction = (props, ref) => {
       ref: videoRef
     });
   }, [context.audioContext]);
-  const effectToUse = React51.useInsertionEffect ?? React51.useLayoutEffect;
+  const effectToUse = React52.useInsertionEffect ?? React52.useLayoutEffect;
   effectToUse(() => {
     return scheduleMediaSourceCleanup.bind(null, sharedSource?.cleanup ?? null);
   }, [sharedSource]);
@@ -16060,7 +16295,7 @@ var VideoForDevelopmentRefForwardingFunction = (props, ref) => {
   useImperativeHandle10(ref, () => {
     return videoRef.current;
   }, []);
-  useState25(() => playbackLogging({
+  useState26(() => playbackLogging({
     logLevel,
     message: `Mounting video with source = ${actualSrc}, v=${VERSION}, user agent=${typeof navigator === "undefined" ? "server" : navigator.userAgent}`,
     tag: "video",
@@ -16119,7 +16354,7 @@ var VideoForDevelopmentRefForwardingFunction = (props, ref) => {
       current.preload = "auto";
     }
   }, []);
-  const actualStyle = useMemo47(() => {
+  const actualStyle = useMemo48(() => {
     return {
       ...style
     };
@@ -16156,7 +16391,7 @@ var VideoForPreviewRefForwardingFunction = (props, ref) => {
     loopVolumeCurveBehavior,
     onlyWarnForMediaSeekingError
   } = props;
-  const [timelineId] = useState25(() => String(Math.random()));
+  const [timelineId] = useState26(() => String(Math.random()));
   const parentSequence = useContext51(SequenceContext);
   const { isStudio } = useRemotionEnvironment();
   const [mediaVolume] = useMediaVolumeState();
@@ -16188,7 +16423,7 @@ var VideoForPreviewRefForwardingFunction = (props, ref) => {
     documentationLink: onlyWarnForMediaSeekingError ? "https://www.remotion.dev/docs/offthreadvideo" : "https://www.remotion.dev/docs/html5-video",
     muted: isMutedForTimeline
   });
-  const metadata = useMemo47(() => isStudio || automaticOutlineRef || registration !== null ? {
+  const metadata = useMemo48(() => isStudio || automaticOutlineRef || registration !== null ? {
     type: "sequence",
     id: timelineId,
     value: registration,
@@ -16427,31 +16662,31 @@ var watchStaticFile = (fileName, callback) => {
 };
 
 // src/wrap-remotion-context.tsx
-import React53, { useCallback as useCallback25, useMemo as useMemo48, useRef as useRef31, useState as useState26 } from "react";
+import React54, { useCallback as useCallback25, useMemo as useMemo49, useRef as useRef31, useState as useState27 } from "react";
 import { jsx as jsx45 } from "react/jsx-runtime";
 function useRemotionContexts() {
-  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 useMemo48(() => ({
+  const compositionManagerCtx = React54.useContext(CompositionManager);
+  const videoContext = React54.useContext(VideoContext);
+  const timelineContext = React54.useContext(TimelineContext);
+  const setTimelineContext = React54.useContext(SetTimelineContext);
+  const sequenceContext = React54.useContext(SequenceContext);
+  const defaultPremountInSeconds = React54.useContext(DefaultPremountContext);
+  const timelineTrackContext = React54.useContext(TimelineTrackContext);
+  const canUseRemotionHooksContext = React54.useContext(CanUseRemotionHooks);
+  const preloadContext = React54.useContext(PreloadContext);
+  const resolveCompositionContext = React54.useContext(ResolveCompositionContext);
+  const renderAssetManagerContext = React54.useContext(RenderAssetManager);
+  const sequenceManagerActionsContext = React54.useContext(SequenceManagerActionsContext);
+  const sequenceManagerRefContext = React54.useContext(SequenceManagerRefContext);
+  const sequenceRegistryContext = React54.useContext(SequenceRegistryContext);
+  const sequenceRegistryScopeContext = React54.useContext(SequenceRegistryScopeContext);
+  const sequenceRegistrationContext = React54.useContext(SequenceRegistrationContext);
+  const disableSequenceRegistrationContext = React54.useContext(DisableSequenceRegistrationContext);
+  const remotionEnvironmentContext = React54.useContext(RemotionEnvironmentContext);
+  const visualModePropStatusesRefContext = React54.useContext(VisualModePropStatusesRefContext);
+  const bufferManagerContext = React54.useContext(BufferingContextReact);
+  const logLevelContext = React54.useContext(LogLevelContext);
+  return useMemo49(() => ({
     compositionManagerCtx,
     videoContext,
     timelineContext,
@@ -16502,8 +16737,8 @@ var ForwardedSequenceRegistry = ({
   contexts,
   children
 }) => {
-  const [scopeId] = useState26(() => String(Math.random()));
-  const [observerAvailable, setObserverAvailable] = useState26(isCommitRegistrationObserverInstalled);
+  const [scopeId] = useState27(() => String(Math.random()));
+  const [observerAvailable, setObserverAvailable] = useState27(isCommitRegistrationObserverInstalled);
   const observedCommitRef = useRef31(false);
   const observerFailedRef = useRef31(false);
   const unmountedRef = useRef31(false);
@@ -16519,7 +16754,7 @@ var ForwardedSequenceRegistry = ({
     observedCommitRef.current = true;
     scope?.onCommitSequences(scopeId, sequences, sequenceIds);
   }, [scope, scopeId]);
-  const useIsomorphicLayoutEffect = typeof window === "undefined" ? React53.useEffect : React53.useLayoutEffect;
+  const useIsomorphicLayoutEffect = typeof window === "undefined" ? React54.useEffect : React54.useLayoutEffect;
   useIsomorphicLayoutEffect(() => {
     if (scope === null || typeof window === "undefined") {
       return;
@@ -16558,7 +16793,7 @@ var ForwardedSequenceRegistry = ({
       });
     };
   }, [scope, scopeId, registry, commitRegistrationEnabled]);
-  const metadata = useMemo48(() => ({
+  const metadata = useMemo49(() => ({
     type: "sequence-manager",
     id: scopeId,
     onCommit: commitRegistrationEnabled ? onCommitSequences : null
@@ -16832,8 +17067,10 @@ var Internals = {
   cleanupEffectChainState,
   runEffectChain,
   useMemoizedEffects,
+  subscribeToEffectSource,
   useMemoizedEffectDefinitions,
   createEffect,
+  createCurveSampler,
   createWebGLContextError,
   createWebGL2ContextError,
   computeEffectiveSchemaValuesDotNotation,
@@ -16862,17 +17099,17 @@ Object.assign(Internals, { useSyncExternalStore: useSyncExternalStore2 });
 // src/font-face-registry.ts
 var fontDataByUrl = new Map;
 // src/series/index.tsx
-import React55, {
+import React56, {
   forwardRef as forwardRef15,
-  useMemo as useMemo49
+  useMemo as useMemo50
 } from "react";
 
 // src/series/flatten-children.tsx
-import React54 from "react";
+import React55 from "react";
 var flattenChildren = (children) => {
-  const childrenArray = React54.Children.toArray(children);
+  const childrenArray = React55.Children.toArray(children);
   return childrenArray.reduce((flatChildren, child) => {
-    if (child.type === React54.Fragment) {
+    if (child.type === React55.Fragment) {
       return flatChildren.concat(flattenChildren(child.props.children));
     }
     flatChildren.push(child);
@@ -16936,7 +17173,7 @@ var validateSeriesSequenceProps = ({
 };
 var SeriesInner = (props) => {
   const pendingDeletions = usePendingSequenceDeletions();
-  const childrenValue = useMemo49(() => {
+  const childrenValue = useMemo50(() => {
     const flattenedChildren = flattenChildren(props.children).filter((child) => !OptimisticSequenceDeletion.isElementDeleted(child, pendingDeletions));
     const renderChildren = (i, startFrame) => {
       if (i === flattenedChildren.length) {
@@ -16960,7 +17197,7 @@ var SeriesInner = (props) => {
         index: i,
         childrenLength: flattenedChildren.length
       });
-      return React55.cloneElement(castedElement, {
+      return React56.cloneElement(castedElement, {
         _remotionInternalRender: (resolvedProps, ref) => {
           const durationInFramesProp = resolvedProps.durationInFrames;
           const timelineDurationInFrames = durationInFramesProp / (resolvedProps.playbackRate ?? 1);
@@ -17129,18 +17366,18 @@ var staticFile = (path) => {
   return preparsed;
 };
 // src/Still.tsx
-import React56 from "react";
+import React57 from "react";
 var Still = (props) => {
   const newProps = {
     ...props,
     durationInFrames: 1,
     fps: 1
   };
-  return React56.createElement(Composition, newProps);
+  return React57.createElement(Composition, newProps);
 };
 addSequenceStackTraces(Still);
 // src/video/html5-video.tsx
-import { forwardRef as forwardRef17, useContext as useContext53, useMemo as useMemo51 } from "react";
+import { forwardRef as forwardRef17, useContext as useContext53, useMemo as useMemo52 } from "react";
 
 // src/video/VideoForRendering.tsx
 import {
@@ -17148,8 +17385,8 @@ import {
   useContext as useContext52,
   useEffect as useEffect22,
   useImperativeHandle as useImperativeHandle11,
-  useLayoutEffect as useLayoutEffect22,
-  useMemo as useMemo50,
+  useLayoutEffect as useLayoutEffect23,
+  useMemo as useMemo51,
   useRef as useRef32
 } from "react";
 
@@ -17309,7 +17546,7 @@ var VideoForRenderingForwardFunction = ({
   const mountTime = useMountTime();
   const { delayRender, continueRender } = useDelayRender();
   const { registerRenderAsset, unregisterRenderAsset } = useContext52(RenderAssetManager);
-  const id = useMemo50(() => `video-${random(props.src ?? "")}-${sequenceContext?.cumulatedFrom}-${sequenceContext?.relativeFrom}-${sequenceContext?.durationInFrames}`, [
+  const id = useMemo51(() => `video-${random(props.src ?? "")}-${sequenceContext?.cumulatedFrom}-${sequenceContext?.relativeFrom}-${sequenceContext?.durationInFrames}`, [
     props.src,
     sequenceContext?.cumulatedFrom,
     sequenceContext?.relativeFrom,
@@ -17461,7 +17698,7 @@ var VideoForRenderingForwardFunction = ({
   ]);
   const { src } = props;
   if (environment.isRendering) {
-    useLayoutEffect22(() => {
+    useLayoutEffect23(() => {
       if (window.process?.env?.NODE_ENV === "test") {
         return;
       }
@@ -17536,7 +17773,7 @@ var VideoForwardingFunction = (props, ref) => {
     throw new TypeError(`The \`<Html5Video>\` tag requires a string for \`src\`, but got ${JSON.stringify(props.src)} instead.`);
   }
   const preloadedSrc = usePreload(props.src);
-  const onDuration = useMemo51(() => onMediaDuration.bind(null, setDurations), [setDurations]);
+  const onDuration = useMemo52(() => onMediaDuration.bind(null, setDurations), [setDurations]);
   const durationFetched = durations[getAbsoluteSrc(preloadedSrc)] ?? durations[getAbsoluteSrc(props.src)];
   validateMediaTrimProps({ startFrom, endAt, trimBefore, trimAfter });
   if (durationInFrames !== undefined) {