remotion 4.0.526 → 4.0.528

package/dist/esm/index.mjs

@@ -1537,7 +1537,7 @@ var Composition = (props) => {
 };
 
 // src/version.ts
-var VERSION = "4.0.526";
+var VERSION = "4.0.528";
 
 // src/multiple-versions-warning.ts
 var checkMultipleRemotionVersions = () => {
@@ -1578,18 +1578,19 @@ import {
   forwardRef as forwardRef3,
   useCallback as useCallback6,
   useContext as useContext20,
-  useMemo as useMemo13,
-  useRef as useRef6,
+  useMemo as useMemo14,
+  useRef as useRef7,
   useState as useState6
 } from "react";
 
 // src/freeze.tsx
-import { useContext as useContext15, useMemo as useMemo9 } from "react";
+import { useContext as useContext15, useMemo as useMemo10 } from "react";
 
 // src/timeline-position-state.ts
 var exports_timeline_position_state = {};
 __export(exports_timeline_position_state, {
   useTimelineSetFrame: () => useTimelineSetFrame,
+  useTimelineSeekFrame: () => useTimelineSeekFrame,
   useTimelinePosition: () => useTimelinePosition,
   useTimelineContext: () => useTimelineContext,
   usePlaying: () => usePlaying,
@@ -1609,8 +1610,8 @@ import {
   createContext as createContext13,
   useCallback as useCallback4,
   useLayoutEffect,
-  useMemo as useMemo8,
-  useRef as useRef2,
+  useMemo as useMemo9,
+  useRef as useRef3,
   useState as useState2
 } from "react";
 
@@ -1641,12 +1642,26 @@ var createRuntimeValueStore = (initialSnapshot) => {
   };
 };
 
+// src/use-timeline-seek.ts
+import { useMemo as useMemo8, useRef as useRef2 } from "react";
+var useTimelineSeek = (setFrame) => {
+  const revision = useRef2(0);
+  return useMemo8(() => ({
+    revision,
+    setFrame: (frame) => {
+      revision.current++;
+      setFrame(frame);
+    }
+  }), [setFrame]);
+};
+
 // src/TimelineContext.tsx
 import { jsx as jsx8 } from "react/jsx-runtime";
 var missingSetTimelineContext = () => {
   throw new Error("SetTimelineContext is missing. This is likely caused by a Remotion version mismatch.");
 };
 var SetTimelineContext = createContext13({
+  seek: null,
   setFrame: missingSetTimelineContext,
   setPlaying: missingSetTimelineContext,
   setBuffering: missingSetTimelineContext,
@@ -1665,13 +1680,16 @@ var TimelineContext = createContext13(null);
 var PlaybackRateContext = createContext13(null);
 var AbsoluteTimeContext = createContext13(null);
 var TimelineContextProvider = ({ children, frameState }) => {
-  const playingStore = useMemo8(() => createRuntimeValueStore({ playing: false }), []);
-  const bufferingStore = useMemo8(() => createRuntimeValueStore({ buffering: false }), []);
+  const playingStore = useMemo9(() => createRuntimeValueStore({ playing: false }), []);
+  const bufferingStore = useMemo9(() => createRuntimeValueStore({ buffering: false }), []);
   const [playbackRate, setPlaybackRate] = useState2(1);
-  const audioAndVideoTags = useRef2([]);
+  const audioAndVideoTags = useRef3([]);
   const [_frame, setFrame] = useState2(() => getInitialFrameState());
+  const timelineSeek = useTimelineSeek(setFrame);
+  const { isStudio } = useRemotionEnvironment();
+  const seek = isStudio ? timelineSeek : null;
   const frame = frameState ?? _frame;
-  const frameRef = useRef2(frame);
+  const frameRef = useRef3(frame);
   frameRef.current = frame;
   const readIsPlaying = useCallback4(() => playingStore.store.getSnapshot().playing, [playingStore]);
   const readIsBuffering = useCallback4(() => bufferingStore.store.getSnapshot().buffering, [bufferingStore]);
@@ -1702,7 +1720,7 @@ var TimelineContextProvider = ({ children, frameState }) => {
       window.remotion_isPlayer = false;
     }, [continueRender2, delayRender2]);
   }
-  const timelineContextValue = useMemo8(() => {
+  const timelineContextValue = useMemo9(() => {
     return {
       frame,
       isPlaying: readIsPlaying,
@@ -1710,15 +1728,16 @@ var TimelineContextProvider = ({ children, frameState }) => {
       audioAndVideoTags
     };
   }, [frame, readIsPlaying]);
-  const playbackRateContextValue = useMemo8(() => {
+  const playbackRateContextValue = useMemo9(() => {
     return {
       playbackRate,
       setPlaybackRate
     };
   }, [playbackRate]);
-  const setTimelineContextValue = useMemo8(() => {
+  const setTimelineContextValue = useMemo9(() => {
     return {
       setFrame,
+      seek,
       setPlaying: (updater) => {
         const current = playingStore.store.getSnapshot().playing;
         const next = typeof updater === "function" ? updater(current) : updater;
@@ -1738,7 +1757,7 @@ var TimelineContextProvider = ({ children, frameState }) => {
       frameRef,
       audioAndVideoTags
     };
-  }, [bufferingStore, playingStore, readIsBuffering, readIsPlaying]);
+  }, [bufferingStore, playingStore, readIsBuffering, readIsPlaying, seek]);
   return /* @__PURE__ */ jsx8(AbsoluteTimeContext.Provider, {
     value: timelineContextValue,
     children: /* @__PURE__ */ jsx8(PlaybackRateContext.Provider, {
@@ -1877,6 +1896,10 @@ var useTimelineSetFrame = () => {
   const { setFrame } = useContext12(SetTimelineContext);
   return setFrame;
 };
+var useTimelineSeekFrame = () => {
+  const { seek, setFrame } = useContext12(SetTimelineContext);
+  return seek?.setFrame ?? setFrame;
+};
 
 // src/use-current-frame.ts
 import { useContext as useContext13 } from "react";
@@ -1892,7 +1915,7 @@ var useCurrentFrame = () => {
   const frame = useTimelinePosition();
   const context = useContext13(SequenceContext);
   const contextOffset = context ? context.cumulatedFrom + context.relativeFrom : 0;
-  return frame - contextOffset;
+  return (frame - contextOffset) * (context?.playbackRate ?? 1);
 };
 
 // src/use-video-config.ts
@@ -1938,7 +1961,7 @@ var Freeze = ({
   if (!Number.isFinite(frameToFreeze)) {
     throw new Error(`The 'frame' prop of <Freeze /> must be a finite number, but it is ${frameToFreeze}.`);
   }
-  const isActive = useMemo9(() => {
+  const isActive = useMemo10(() => {
     if (typeof active === "boolean") {
       return active;
     }
@@ -1949,7 +1972,8 @@ var Freeze = ({
   const timelineContext = useTimelineContext();
   const sequenceContext = useContext15(SequenceContext);
   const relativeFrom = sequenceContext?.relativeFrom ?? 0;
-  const timelineValue = useMemo9(() => {
+  const playbackRate = sequenceContext?.playbackRate ?? 1;
+  const timelineValue = useMemo10(() => {
     if (!isActive) {
       return timelineContext;
     }
@@ -1958,11 +1982,18 @@ var Freeze = ({
       isPlaying: () => false,
       isInsideFreeze: true,
       frame: {
-        [videoConfig.id]: frameToFreeze + relativeFrom
+        [videoConfig.id]: frameToFreeze / playbackRate + relativeFrom
       }
     };
-  }, [isActive, timelineContext, videoConfig.id, frameToFreeze, relativeFrom]);
-  const newSequenceContext = useMemo9(() => {
+  }, [
+    isActive,
+    timelineContext,
+    videoConfig.id,
+    frameToFreeze,
+    relativeFrom,
+    playbackRate
+  ]);
+  const newSequenceContext = useMemo10(() => {
     if (!sequenceContext) {
       return null;
     }
@@ -1983,6 +2014,17 @@ var Freeze = ({
   });
 };
 
+// src/get-sequence-boundary-tolerance.ts
+var getSequenceBoundaryTolerance = ({
+  absoluteFrame,
+  cumulatedFrom,
+  from,
+  parentPlaybackRate,
+  durationInFrames
+}) => {
+  return Math.min(durationInFrames / 2, Number.EPSILON * Math.max(Math.abs(absoluteFrame * parentPlaybackRate), Math.abs(cumulatedFrom * parentPlaybackRate), Math.abs(from)) * 4);
+};
+
 // src/interactivity-schema.ts
 var captionsSchema = {
   captions: {
@@ -2331,7 +2373,26 @@ var freezeField = {
   step: 1,
   hiddenFromList: true
 };
+var playbackRateField = {
+  type: "number",
+  default: 1,
+  min: 0.01,
+  step: 0.1,
+  description: "Playback rate",
+  hiddenFromList: false,
+  keyframable: false
+};
 var baseSchema = {
+  durationInFrames: durationInFramesField,
+  from: fromField,
+  trimBefore: trimBeforeField,
+  playbackRate: playbackRateField,
+  freeze: freezeField,
+  hidden: hiddenField,
+  name: sequenceNameField,
+  showInTimeline: showInTimelineField
+};
+var baseSchemaWithoutPlaybackRate = {
   durationInFrames: durationInFramesField,
   from: fromField,
   trimBefore: trimBeforeField,
@@ -2355,6 +2416,7 @@ var sequenceSchema = {
 var baseSchemaWithoutFrom = {
   durationInFrames: durationInFramesField,
   trimBefore: trimBeforeField,
+  playbackRate: playbackRateField,
   freeze: freezeField,
   hidden: hiddenField,
   name: sequenceNameField,
@@ -2431,7 +2493,7 @@ var validateSequenceCrop = (crop, componentName = "<Sequence />") => {
 };
 
 // src/SequenceManager.tsx
-import React14, { useCallback as useCallback5, useMemo as useMemo10, useRef as useRef3, useState as useState4 } from "react";
+import React14, { useCallback as useCallback5, useMemo as useMemo11, useRef as useRef4, useState as useState4 } from "react";
 import { jsx as jsx10 } from "react/jsx-runtime";
 var useIsomorphicLayoutEffect = typeof window === "undefined" ? React14.useEffect : React14.useLayoutEffect;
 var SequenceManager = React14.createContext({
@@ -2489,17 +2551,17 @@ var effectDragOverridesKey = (nodePath, effectIndex) => `${makeSequencePropsSubs
 var SequenceManagerProvider = ({ children }) => {
   const { isStudio } = useRemotionEnvironment();
   const [sequenceManagerId] = useState4(() => String(Math.random()));
-  const committedOrderRef = useRef3(null);
-  const committedOrderIdsRef = useRef3(null);
+  const committedOrderRef = useRef4(null);
+  const committedOrderIdsRef = useRef4(null);
   const [sequences, setSequences] = useState4([]);
-  const sequencesRef = useRef3(sequences);
+  const sequencesRef = useRef4(sequences);
   sequencesRef.current = sequences;
   const [dragOverrides, setControlOverrides] = useState4({});
-  const controlOverridesRef = useRef3(dragOverrides);
+  const controlOverridesRef = useRef4(dragOverrides);
   controlOverridesRef.current = dragOverrides;
   const [effectDragOverridesState, setEffectDragOverridesState] = useState4({});
   const [propStatuses, setPropStatusesMapState] = useState4({});
-  const propStatusesRef = useRef3(propStatuses);
+  const propStatusesRef = useRef4(propStatuses);
   propStatusesRef.current = propStatuses;
   const setDragOverrides = useCallback5((nodePath, key, value) => {
     setControlOverrides((prev) => ({
@@ -2642,7 +2704,7 @@ var SequenceManagerProvider = ({ children }) => {
   const unregisterSequence = useCallback5((seq) => {
     setSequences((seqs) => seqs.filter((s) => s.id !== seq));
   }, []);
-  const sequenceContext = useMemo10(() => {
+  const sequenceContext = useMemo11(() => {
     return {
       registerSequence,
       sequences,
@@ -2656,18 +2718,18 @@ var SequenceManagerProvider = ({ children }) => {
   const getEffectDragOverrides = useCallback5((nodePath, effectIndex) => {
     return effectDragOverridesState[effectDragOverridesKey(nodePath, effectIndex)] ?? {};
   }, [effectDragOverridesState]);
-  const propStatusesContext = useMemo10(() => {
+  const propStatusesContext = useMemo11(() => {
     return {
       propStatuses
     };
   }, [propStatuses]);
-  const dragOverridesContext = useMemo10(() => {
+  const dragOverridesContext = useMemo11(() => {
     return {
       getDragOverrides,
       getEffectDragOverrides
     };
   }, [getDragOverrides, getEffectDragOverrides]);
-  const settersContext = useMemo10(() => {
+  const settersContext = useMemo11(() => {
     return {
       setDragOverrides,
       clearDragOverrides,
@@ -2733,7 +2795,7 @@ var useRequireToBeInsideSeries = () => {
 };
 
 // src/use-premounting.ts
-import { useContext as useContext16, useMemo as useMemo11 } from "react";
+import { useContext as useContext16, useMemo as useMemo12 } from "react";
 
 // src/PremountContext.tsx
 import { createContext as createContext15 } from "react";
@@ -2764,12 +2826,20 @@ var usePremounting = ({
   const { fps } = useVideoConfig();
   const effectivePremountFor = ENABLE_V5_BREAKING_CHANGES ? premountFor ?? fps : premountFor ?? 0;
   const effectivePostmountFor = postmountFor ?? 0;
-  const endThreshold = Math.ceil(from + durationInFrames - 1);
-  const premountingActive = !environment.isRendering && frame < from && frame >= from - effectivePremountFor;
-  const postmountingActive = !environment.isRendering && frame > endThreshold && frame <= endThreshold + effectivePostmountFor;
+  const endExclusive = from + durationInFrames;
+  const sequenceContext = useContext16(SequenceContext);
+  const boundaryTolerance = getSequenceBoundaryTolerance({
+    absoluteFrame: useTimelinePosition(),
+    cumulatedFrom: sequenceContext ? sequenceContext.cumulatedFrom + sequenceContext.relativeFrom : 0,
+    from,
+    parentPlaybackRate: sequenceContext?.playbackRate ?? 1,
+    durationInFrames
+  });
+  const premountingActive = !environment.isRendering && frame - from < -boundaryTolerance && frame - (from - effectivePremountFor) >= -boundaryTolerance;
+  const postmountingActive = !environment.isRendering && frame - endExclusive >= -boundaryTolerance && frame - (endExclusive + effectivePostmountFor) < -boundaryTolerance;
   const isPremountingOrPostmounting = premountingActive || postmountingActive;
   const freezeFrame = premountingActive ? from : postmountingActive ? from + durationInFrames - 1 : 0;
-  const premountingStyle = useMemo11(() => {
+  const premountingStyle = useMemo12(() => {
     if (!isPremountingOrPostmounting) {
       return style;
     }
@@ -2801,15 +2871,15 @@ var usePremounting = ({
 };
 
 // src/use-sequence-registration.ts
-import { useContext as useContext17, useEffect as useEffect4, useRef as useRef4 } from "react";
+import { useContext as useContext17, useEffect as useEffect4, useRef as useRef5 } from "react";
 var useSequenceRegistration = ({
   getSequence,
   id
 }) => {
   const { registerSequence, unregisterSequence, updateSequence } = useContext17(SequenceManager);
-  const getSequenceRef = useRef4(getSequence);
+  const getSequenceRef = useRef5(getSequence);
   getSequenceRef.current = getSequence;
-  const lastRegisteredGetterRef = useRef4(null);
+  const lastRegisteredGetterRef = useRef5(null);
   const registrationEnabled = getSequence !== null;
   useEffect4(() => {
     if (!registrationEnabled) {
@@ -2841,7 +2911,7 @@ import React16, {
   forwardRef as forwardRef2,
   useContext as useContext19,
   useLayoutEffect as useLayoutEffect4,
-  useMemo as useMemo12,
+  useMemo as useMemo13,
   useState as useState5
 } from "react";
 
@@ -2879,7 +2949,7 @@ var deleteNestedKey = (obj, keysToRemove) => {
 };
 
 // src/effects/use-memoized-effects.ts
-import { useContext as useContext18, useLayoutEffect as useLayoutEffect3, useRef as useRef5 } from "react";
+import { useContext as useContext18, useLayoutEffect as useLayoutEffect3, useRef as useRef6 } from "react";
 
 // src/bezier.ts
 var NEWTON_ITERATIONS = 4;
@@ -3226,7 +3296,7 @@ var parseAxisRotationValue = (output) => {
     axisRotation: true
   };
 };
-var parseStringInterpolationValue = (output) => {
+var parseStringInterpolationValue = (output, outputType) => {
   if (typeof output === "number") {
     if (!Number.isFinite(output)) {
       throw new Error(`outputRange must contain only finite numbers, but got [${output}]`);
@@ -3239,8 +3309,18 @@ var parseStringInterpolationValue = (output) => {
       axisRotation: false
     };
   }
+  if (outputType === "transform-origin") {
+    const transformOriginParts = output.trim().split(/\s+/);
+    if (transformOriginParts.length < 1 || transformOriginParts.length > 3 || transformOriginParts[0] === "") {
+      throw new TypeError(`String outputRange values must contain 1 to 3 components, but got "${output}"`);
+    }
+    return parseTransformOriginValue(output, transformOriginParts);
+  }
   const axisRotation = parseAxisRotationValue(output);
   if (axisRotation !== null) {
+    if (outputType !== undefined && outputType !== "rotate") {
+      throw new TypeError(`Cannot interpolate "${output}" as ${outputType} because it is a rotate value`);
+    }
     return axisRotation;
   }
   const parts = output.trim().split(/\s+/);
@@ -3248,6 +3328,9 @@ var parseStringInterpolationValue = (output) => {
     throw new TypeError(`String outputRange values must contain 1 to 3 components, but got "${output}"`);
   }
   if (parts.some((part) => transformOriginKeywords.has(part.toLowerCase()))) {
+    if (outputType !== undefined) {
+      throw new TypeError(`Cannot interpolate "${output}" as ${outputType} because it is a transform-origin value`);
+    }
     return parseTransformOriginValue(output, parts);
   }
   const parsed = parts.map((part) => parseStringInterpolationComponent(part, output));
@@ -3257,6 +3340,9 @@ var parseStringInterpolationValue = (output) => {
       throw new TypeError(`Cannot interpolate "${output}" because it mixes ${kind} and ${part.kind} values`);
     }
   }
+  if (outputType !== undefined && outputType !== kind) {
+    throw new TypeError(`Cannot interpolate "${output}" as ${outputType} because it is a ${kind} value`);
+  }
   if (kind === "scale") {
     const x = parsed[0].value;
     const y = parsed[1]?.value ?? x;
@@ -3457,9 +3543,10 @@ var interpolateString = ({
   input,
   inputRange,
   outputRange,
-  options
+  options,
+  outputType
 }) => {
-  const initiallyParsedOutputRange = outputRange.map(parseStringInterpolationValue);
+  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);
@@ -3539,6 +3626,36 @@ var interpolateString = ({
     axisRotation: hasAxisRotation
   });
 };
+var interpolateFontWeight = ({
+  input,
+  inputRange,
+  outputRange,
+  options
+}) => {
+  const normalizedOutputRange = outputRange.map((output) => {
+    if (typeof output === "string") {
+      const lowerCaseOutput = output.toLowerCase();
+      if (lowerCaseOutput === "normal") {
+        return 400;
+      }
+      if (lowerCaseOutput === "bold") {
+        return 700;
+      }
+    }
+    const match = typeof output === "string" ? cssNumberRegex.exec(output) : null;
+    const value = typeof output === "number" ? output : match !== null && match[2] === undefined ? Number(match[1]) : Number.NaN;
+    if (!Number.isFinite(value) || value < 1 || value > 1000) {
+      throw new TypeError(`Cannot interpolate font weight "${output}". Expected "normal", "bold", or a number between 1 and 1000`);
+    }
+    return value;
+  });
+  return interpolateNumber({
+    input,
+    inputRange,
+    outputRange: normalizedOutputRange,
+    options
+  });
+};
 var interpolateDiscreteString = ({
   input,
   inputRange,
@@ -3670,6 +3787,12 @@ function assertValidInterpolateOutputOption(output) {
   }
   throw new Error(`output must be "linear" or "perceptual-scale", but got ${String(output)}`);
 }
+function assertValidInterpolateOutputType(outputType) {
+  if (outputType === undefined || outputType === "font-weight" || outputType === "scale" || outputType === "translate" || outputType === "rotate" || outputType === "transform-origin") {
+    return;
+  }
+  throw new Error(`outputType must be "font-weight", "scale", "translate", "rotate", or "transform-origin", but got ${String(outputType)}`);
+}
 function interpolate(input, inputRange, outputRange, options) {
   if (typeof input === "undefined") {
     throw new Error("input can not be undefined");
@@ -3688,26 +3811,48 @@ function interpolate(input, inputRange, outputRange, options) {
   assertValidInterpolateEasingOption(options?.easing, inputRange.length);
   assertValidInterpolatePosterizeOption(options?.posterize);
   assertValidInterpolateOutputOption(options?.output);
+  assertValidInterpolateOutputType(options?.outputType);
   if (typeof input !== "number") {
     throw new TypeError("Cannot interpolate an input which is not a number");
   }
   if (!Array.isArray(outputRange)) {
     throw new Error("outputRange must contain only numbers");
   }
+  const outputType = options?.outputType;
+  if (outputType === "font-weight") {
+    if (!outputRange.every((output) => typeof output === "number" || typeof output === "string")) {
+      throw new TypeError("Font weight outputRange must contain only numbers or strings");
+    }
+    return interpolateFontWeight({
+      input,
+      inputRange,
+      outputRange,
+      options
+    });
+  }
   const hasStringOutput = outputRange.some((output) => typeof output === "string");
+  if (outputType !== undefined && outputType !== "scale" && !hasStringOutput) {
+    throw new TypeError(`${outputType} outputRange must contain strings with the appropriate CSS units`);
+  }
   if (hasStringOutput) {
     if (!outputRange.every((output) => typeof output === "string" || typeof output === "number")) {
       throw new TypeError("outputRange must contain only numbers, or supported scale, translate, and rotate strings");
     }
     try {
-      return interpolateString({ input, inputRange, outputRange, options });
+      return interpolateString({
+        input,
+        inputRange,
+        outputRange,
+        options,
+        outputType
+      });
     } catch (error2) {
       if (!outputRange.every((output) => typeof output === "string")) {
         throw error2;
       }
       const hasNonNumericString = outputRange.some((output) => {
         try {
-          parseStringInterpolationValue(output);
+          parseStringInterpolationValue(output, outputType);
           return false;
         } catch (parseError) {
           return parseError instanceof UnsupportedStringInterpolationValueError;
@@ -3846,13 +3991,19 @@ function springCalculation({
 }) {
   const from = 0;
   const to = 1;
+  const resolvedConfig = {
+    damping: config.damping ?? defaultSpringConfig.damping,
+    mass: config.mass ?? defaultSpringConfig.mass,
+    stiffness: config.stiffness ?? defaultSpringConfig.stiffness,
+    overshootClamping: config.overshootClamping ?? defaultSpringConfig.overshootClamping
+  };
   const cacheKey = [
     frame,
     fps,
-    config.damping,
-    config.mass,
-    config.overshootClamping,
-    config.stiffness
+    resolvedConfig.damping,
+    resolvedConfig.mass,
+    resolvedConfig.overshootClamping,
+    resolvedConfig.stiffness
   ].join("-");
   if (calculationCache[cacheKey]) {
     return calculationCache[cacheKey];
@@ -3871,20 +4022,14 @@ function springCalculation({
     animation = advance({
       animation,
       now: time,
-      config: {
-        ...defaultSpringConfig,
-        ...config
-      }
+      config: resolvedConfig
     });
   }
   if (unevenRest > 0) {
     animation = advance({
       animation,
       now: frameClamped / fps * 1000,
-      config: {
-        ...defaultSpringConfig,
-        ...config
-      }
+      config: resolvedConfig
     });
   }
   calculationCache[cacheKey] = animation;
@@ -4823,7 +4968,7 @@ var resolvePropStatusOverrides = (propStatus, frame) => {
   return hasAny ? out : null;
 };
 var useMemoizedEffectDefinitions = (effects) => {
-  const previousRef = useRef5(null);
+  const previousRef = useRef6(null);
   const definitions = effects.map((descriptor) => descriptor.definition);
   const previous = previousRef.current;
   const isSame = previous !== null && previous.definitions.length === definitions.length && previous.definitions.every((definition, i) => definition === definitions[i]);
@@ -4875,7 +5020,7 @@ var useMemoizedEffects = ({
   effects,
   overrideId
 }) => {
-  const previousRef = useRef5(null);
+  const previousRef = useRef6(null);
   const { propStatuses } = useContext18(VisualModePropStatusesContext);
   const { getEffectDragOverrides } = useContext18(VisualModeDragOverridesContext);
   const frame = useCurrentFrame();
@@ -5252,7 +5397,7 @@ var withInteractivitySchema = ({
     const fps = videoConfig?.fps;
     const height = videoConfig?.height;
     const width = videoConfig?.width;
-    const videoConfigValues = useMemo12(() => durationInFrames === undefined || fps === undefined || height === undefined || width === undefined ? null : {
+    const videoConfigValues = useMemo13(() => durationInFrames === undefined || fps === undefined || height === undefined || width === undefined ? null : {
       durationInFrames,
       fps,
       height,
@@ -5286,12 +5431,12 @@ var withInteractivitySchema = ({
       key,
       props: cleanProps
     }));
-    const currentRuntimeValueDotNotation = useMemo12(() => readValuesFromProps(cleanProps, flatKeys, flatSchema), runtimeValues);
+    const currentRuntimeValueDotNotation = useMemo13(() => readValuesFromProps(cleanProps, flatKeys, flatSchema), runtimeValues);
     const [runtimeValueStore] = useState5(() => createRuntimeValueStore(currentRuntimeValueDotNotation));
     useLayoutEffect4(() => {
       runtimeValueStore.setSnapshot(currentRuntimeValueDotNotation);
     }, [currentRuntimeValueDotNotation, runtimeValueStore]);
-    const controls = useMemo12(() => {
+    const controls = useMemo13(() => {
       return {
         schema: schemaWithSequenceName,
         currentRuntimeValueDotNotation,
@@ -5309,7 +5454,7 @@ var withInteractivitySchema = ({
       videoConfigValues
     ]);
     setStackForControls(controls, internalStack);
-    const { merged: valuesDotNotation, propsToDelete } = useMemo12(() => {
+    const { merged: valuesDotNotation, propsToDelete } = useMemo13(() => {
       return computeEffectiveSchemaValuesDotNotation({
         schema: schemaWithSequenceName,
         currentValue: currentRuntimeValueDotNotation,
@@ -5348,6 +5493,7 @@ var EMPTY_EFFECTS = [];
 var RegularSequenceRefForwardingFunction = ({
   from = 0,
   trimBefore = 0,
+  playbackRate = 1,
   freeze,
   durationInFrames = Infinity,
   children,
@@ -5375,6 +5521,8 @@ var RegularSequenceRefForwardingFunction = ({
   const { layout = "absolute-fill" } = other;
   const [id] = useState6(() => String(Math.random()));
   const parentSequence = useContext20(SequenceContext);
+  const parentPlaybackRate = parentSequence?.playbackRate ?? 1;
+  const cumulativePlaybackRate = parentPlaybackRate * playbackRate;
   const cumulatedFrom = parentSequence ? parentSequence.cumulatedFrom + parentSequence.relativeFrom : 0;
   if (layout !== "absolute-fill" && layout !== "none") {
     throw new TypeError(`The layout prop of <Sequence /> expects either "absolute-fill" or "none", but you passed: ${layout}`);
@@ -5430,32 +5578,42 @@ var RegularSequenceRefForwardingFunction = ({
     }
   }
   const absoluteFrame = useTimelinePosition();
+  const lastPlaybackRate = useRef7({ playbackRate, frame: absoluteFrame });
+  if (typeof playbackRate !== "number" || !Number.isFinite(playbackRate) || playbackRate <= 0) {
+    throw new TypeError(`The "playbackRate" prop of <Sequence /> must be a positive finite number, but got ${playbackRate}.`);
+  }
+  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.');
+  }
+  lastPlaybackRate.current = { playbackRate, frame: absoluteFrame };
   const videoConfig = useVideoConfig();
-  const effectiveRelativeFrom = from - trimBefore;
-  const absoluteFrom = (parentSequence?.absoluteFrom ?? 0) + effectiveRelativeFrom;
+  const effectiveRelativeFrom = from - trimBefore / playbackRate;
+  const relativeFrom = effectiveRelativeFrom / parentPlaybackRate;
+  const absoluteFrom = (parentSequence?.absoluteFrom ?? 0) + relativeFrom;
   const parentSequenceDuration = parentSequence ? Math.min(parentSequence.durationInFrames - effectiveRelativeFrom, durationInFrames) : durationInFrames;
   const actualDurationInFrames = Math.max(0, Math.min(videoConfig.durationInFrames - from, parentSequenceDuration));
   const sequenceRegistrationEnabled = useContext20(SequenceRegistrationContext);
-  const wrapperRefForOutline = useRef6(null);
+  const wrapperRefForOutline = useRef7(null);
   const refForOutline = other.layout === "none" ? passedRefForOutline ?? null : passedRefForOutline ?? wrapperRefForOutline;
-  const premounting = useMemo13(() => {
+  const premounting = useMemo14(() => {
     return parentSequence?.premounting || Boolean(other._remotionInternalIsPremounting);
   }, [other._remotionInternalIsPremounting, parentSequence?.premounting]);
-  const postmounting = useMemo13(() => {
+  const postmounting = useMemo14(() => {
     return parentSequence?.postmounting || Boolean(other._remotionInternalIsPostmounting);
   }, [other._remotionInternalIsPostmounting, parentSequence?.postmounting]);
-  const currentSequenceStart = cumulatedFrom + effectiveRelativeFrom;
+  const currentSequenceStart = cumulatedFrom + relativeFrom;
   const parentSequenceStart = parentSequence ? parentSequence.cumulatedFrom + parentSequence.relativeFrom : 0;
-  const parentFirstFrame = parentSequence ? parentSequenceStart - parentSequence.cumulatedNegativeFrom : 0;
-  const firstFrame = Math.max(0, parentFirstFrame, currentSequenceStart);
-  const cumulatedNegativeFrom = currentSequenceStart - firstFrame;
-  const contextValue = useMemo13(() => {
+  const parentFirstFrame = parentSequence ? parentSequenceStart - parentSequence.cumulatedNegativeFrom / parentPlaybackRate : 0;
+  const firstFrame = Math.max(0, parentFirstFrame, cumulatedFrom + from / parentPlaybackRate);
+  const cumulatedNegativeFrom = (currentSequenceStart - firstFrame) * cumulativePlaybackRate;
+  const contextValue = useMemo14(() => {
     return {
+      playbackRate: cumulativePlaybackRate,
       absoluteFrom,
       cumulatedFrom,
-      relativeFrom: effectiveRelativeFrom,
+      relativeFrom,
       cumulatedNegativeFrom,
-      durationInFrames: actualDurationInFrames,
+      durationInFrames: actualDurationInFrames * playbackRate + trimBefore,
       parentFrom: parentSequence?.relativeFrom ?? 0,
       id,
       height: height ?? parentSequence?.height ?? null,
@@ -5468,7 +5626,10 @@ var RegularSequenceRefForwardingFunction = ({
   }, [
     cumulatedFrom,
     absoluteFrom,
-    effectiveRelativeFrom,
+    relativeFrom,
+    cumulativePlaybackRate,
+    playbackRate,
+    trimBefore,
     actualDurationInFrames,
     parentSequence,
     id,
@@ -5480,13 +5641,13 @@ var RegularSequenceRefForwardingFunction = ({
     postmountDisplay,
     cumulatedNegativeFrom
   ]);
-  const timelineClipName = useMemo13(() => {
+  const timelineClipName = useMemo14(() => {
     return name ?? "";
   }, [name]);
   const resolvedDocumentationLink = documentationLink ?? "https://www.remotion.dev/docs/sequence";
   const env = useRemotionEnvironment();
   const isInsideSeries = useContext20(IsInsideSeriesContext);
-  const stackRef = useRef6(null);
+  const stackRef = useRef7(null);
   stackRef.current = controls ? getStackForControls(controls) ?? stack ?? null : stack ?? null;
   const registeredFrozenFrame = typeof freeze === "number" ? freeze : null;
   const registeredTrimBefore = trimBefore === 0 ? null : trimBefore;
@@ -5501,8 +5662,8 @@ var RegularSequenceRefForwardingFunction = ({
   const controlsComponentIdentity = controls?.componentIdentity;
   const controlsComponentName = controls?.componentName;
   const controlsVideoConfigValues = controls?.videoConfigValues;
-  const effectRuntimeValues = useMemo13(() => _remotionInternalEffects?.runtimeValues ?? null, [_remotionInternalEffects]);
-  const registrationControls = useMemo13(() => {
+  const effectRuntimeValues = useMemo14(() => _remotionInternalEffects?.runtimeValues ?? null, [_remotionInternalEffects]);
+  const registrationControls = useMemo14(() => {
     if (controlsSchema === undefined || controlsRuntimeValues === undefined || controlsOverrideId === undefined || controlsSupportsEffects === undefined || controlsComponentIdentity === undefined || controlsComponentName === undefined || controlsVideoConfigValues === undefined) {
       return null;
     }
@@ -5528,6 +5689,7 @@ var RegularSequenceRefForwardingFunction = ({
     if (isMedia) {
       if (isMedia.type === "image") {
         return {
+          sequencePlaybackRate: playbackRate,
           type: "image",
           controls: registrationControls,
           effects: _remotionInternalEffects ?? EMPTY_EFFECTS,
@@ -5554,6 +5716,7 @@ var RegularSequenceRefForwardingFunction = ({
       }
       return {
         type: isMedia.type,
+        sequencePlaybackRate: playbackRate,
         controls: registrationControls,
         effects: _remotionInternalEffects ?? EMPTY_EFFECTS,
         effectRuntimeValues,
@@ -5586,6 +5749,7 @@ var RegularSequenceRefForwardingFunction = ({
     }
     return {
       from,
+      sequencePlaybackRate: playbackRate,
       trimBefore: registeredTrimBefore,
       duration: actualDurationInFrames,
       id,
@@ -5610,6 +5774,7 @@ var RegularSequenceRefForwardingFunction = ({
   }, [
     id,
     timelineClipName,
+    playbackRate,
     parentSequence?.id,
     actualDurationInFrames,
     from,
@@ -5635,8 +5800,16 @@ var RegularSequenceRefForwardingFunction = ({
     getSequence: env.isStudio || sequenceRegistrationEnabled ? getSequenceForRegistration : null,
     id
   });
-  const endThreshold = Math.ceil(cumulatedFrom + from + durationInFrames - 1);
-  const content2 = absoluteFrame < cumulatedFrom + from ? null : absoluteFrame > endThreshold ? null : children;
+  const frameInParent = (absoluteFrame - cumulatedFrom) * parentPlaybackRate;
+  const endThreshold = from + durationInFrames;
+  const boundaryTolerance = getSequenceBoundaryTolerance({
+    absoluteFrame,
+    cumulatedFrom,
+    from,
+    parentPlaybackRate,
+    durationInFrames
+  });
+  const content2 = frameInParent - from < -boundaryTolerance ? null : frameInParent - endThreshold >= -boundaryTolerance ? null : children;
   const frozenContent = content2 === null || typeof freeze === "undefined" || freeze === null ? content2 : /* @__PURE__ */ jsx12(Freeze, {
     frame: freeze,
     children: content2
@@ -5657,7 +5830,7 @@ var RegularSequenceRefForwardingFunction = ({
       ref.current = node;
     }
   }, [ref]);
-  const defaultStyle = useMemo13(() => {
+  const defaultStyle = useMemo14(() => {
     return {
       flexDirection: undefined,
       ...width ? { width } : {},
@@ -5775,10 +5948,11 @@ var SequenceWithoutFrom = withInteractivitySchema({
 });
 
 // src/AbsoluteFill.tsx
-import { useCallback as useCallback7, useRef as useRef7 } from "react";
+import { useCallback as useCallback7, useRef as useRef8 } from "react";
 import { jsx as jsx13 } from "react/jsx-runtime";
 var absoluteFillSchema = {
   ...baseSchema,
+  ...premountSchema,
   ...transformSchema,
   ...backgroundSchema,
   ...borderSchema,
@@ -5793,10 +5967,83 @@ var setRef = (ref, value) => {
     ref.current = value;
   }
 };
+var AbsoluteFillWithTiming = ({
+  ref: callbackRef,
+  outlineRef: refForOutline,
+  from,
+  premountFor,
+  postmountFor,
+  styleWhilePremounted,
+  styleWhilePostmounted,
+  trimBefore,
+  playbackRate,
+  freeze,
+  durationInFrames,
+  hidden,
+  name,
+  showInTimeline,
+  stack,
+  controls,
+  children,
+  ...divProps
+}) => {
+  const {
+    effectivePremountFor,
+    effectivePostmountFor,
+    freezeFrame,
+    isPremountingOrPostmounting,
+    premountingActive,
+    postmountingActive,
+    premountingStyle
+  } = usePremounting({
+    from: from ?? 0,
+    durationInFrames: durationInFrames ?? Infinity,
+    premountFor: premountFor ?? null,
+    postmountFor: postmountFor ?? null,
+    style: divProps.style ?? null,
+    styleWhilePremounted: styleWhilePremounted ?? null,
+    styleWhilePostmounted: styleWhilePostmounted ?? null,
+    hideWhilePremounted: "opacity"
+  });
+  return /* @__PURE__ */ jsx13(Freeze, {
+    frame: freezeFrame,
+    active: isPremountingOrPostmounting,
+    children: /* @__PURE__ */ jsx13(Sequence, {
+      layout: "none",
+      from: from ?? 0,
+      trimBefore,
+      playbackRate,
+      freeze,
+      durationInFrames: durationInFrames ?? Infinity,
+      hidden,
+      name: name ?? "<AbsoluteFill>",
+      showInTimeline: showInTimeline ?? true,
+      controls,
+      _remotionInternalStack: stack,
+      _remotionInternalDocumentationLink: "https://www.remotion.dev/docs/absolute-fill",
+      outlineRef: refForOutline,
+      _remotionInternalPremountDisplay: effectivePremountFor || null,
+      _remotionInternalPostmountDisplay: effectivePostmountFor || null,
+      _remotionInternalIsPremounting: premountingActive,
+      _remotionInternalIsPostmounting: postmountingActive,
+      children: /* @__PURE__ */ jsx13(AbsoluteFillElement, {
+        ref: callbackRef,
+        ...divProps,
+        style: premountingStyle ?? undefined,
+        children
+      })
+    })
+  });
+};
 var AbsoluteFillInner = ({
   ref,
   from,
+  premountFor,
+  postmountFor,
+  styleWhilePremounted,
+  styleWhilePostmounted,
   trimBefore,
+  playbackRate,
   freeze,
   durationInFrames,
   hidden,
@@ -5808,7 +6055,7 @@ var AbsoluteFillInner = ({
   ...divProps
 }) => {
   const videoConfig = useUnsafeVideoConfig();
-  const refForOutline = useRef7(null);
+  const refForOutline = useRef8(null);
   const callbackRef = useCallback7((element) => {
     refForOutline.current = element;
     setRef(ref, element);
@@ -5820,24 +6067,25 @@ var AbsoluteFillInner = ({
       children
     });
   }
-  return /* @__PURE__ */ jsx13(Sequence, {
-    layout: "none",
-    from: from ?? 0,
+  return /* @__PURE__ */ jsx13(AbsoluteFillWithTiming, {
+    ...divProps,
+    ref: callbackRef,
+    outlineRef: refForOutline,
+    from,
+    premountFor,
+    postmountFor,
+    styleWhilePremounted,
+    styleWhilePostmounted,
     trimBefore,
+    playbackRate,
     freeze,
-    durationInFrames: durationInFrames ?? Infinity,
+    durationInFrames,
     hidden,
-    name: name ?? "<AbsoluteFill>",
-    showInTimeline: showInTimeline ?? true,
+    name,
+    showInTimeline,
+    stack,
     controls,
-    _remotionInternalStack: stack,
-    _remotionInternalDocumentationLink: "https://www.remotion.dev/docs/absolute-fill",
-    outlineRef: refForOutline,
-    children: /* @__PURE__ */ jsx13(AbsoluteFillElement, {
-      ref: callbackRef,
-      ...divProps,
-      children
-    })
+    children
   });
 };
 var AbsoluteFill = withInteractivitySchema({
@@ -5854,12 +6102,12 @@ import {
   useEffect as useEffect6,
   useImperativeHandle as useImperativeHandle2,
   useLayoutEffect as useLayoutEffect5,
-  useRef as useRef10,
+  useRef as useRef11,
   useState as useState7
 } from "react";
 
 // src/use-crop-style.ts
-import { useMemo as useMemo14 } from "react";
+import { useMemo as useMemo15 } from "react";
 var useCropStyle = ({
   cropLeft,
   cropRight,
@@ -5869,7 +6117,7 @@ var useCropStyle = ({
   componentName
 }) => {
   validateSequenceCrop({ cropLeft, cropRight, cropTop, cropBottom }, componentName);
-  return useMemo14(() => {
+  return useMemo15(() => {
     const cropClipPath = getSequenceCropClipPath({
       ...resolveSequenceCrop({ cropLeft, cropRight, cropTop, cropBottom }),
       style
@@ -5882,7 +6130,7 @@ var useCropStyle = ({
 };
 
 // src/animated-image/canvas.tsx
-import React19, { useCallback as useCallback8, useImperativeHandle, useMemo as useMemo16, useRef as useRef9 } from "react";
+import React19, { useCallback as useCallback8, useImperativeHandle, useMemo as useMemo17, useRef as useRef10 } from "react";
 
 // src/calculate-image-fit.ts
 var calculateImageFit = (fit, imageSize, canvasSize) => {
@@ -6178,10 +6426,10 @@ var runEffectChain = async ({
 };
 
 // src/effects/use-effect-chain-state.ts
-import { useEffect as useEffect5, useMemo as useMemo15, useRef as useRef8 } from "react";
+import { useEffect as useEffect5, useMemo as useMemo16, useRef as useRef9 } from "react";
 var useEffectChainState = () => {
-  const chainStateRef = useRef8(null);
-  const sizeRef = useRef8(null);
+  const chainStateRef = useRef9(null);
+  const sizeRef = useRef9(null);
   useEffect5(() => {
     return () => {
       if (chainStateRef.current) {
@@ -6189,7 +6437,7 @@ var useEffectChainState = () => {
       }
     };
   }, []);
-  return useMemo15(() => ({
+  return useMemo16(() => ({
     get: (width, height) => {
       if (!sizeRef.current || sizeRef.current.width !== width || sizeRef.current.height !== height) {
         if (chainStateRef.current) {
@@ -6206,9 +6454,9 @@ var useEffectChainState = () => {
 // src/animated-image/canvas.tsx
 import { jsx as jsx14 } from "react/jsx-runtime";
 var CanvasRefForwardingFunction = ({ width, height, fit, className, style, effects, ...props }, ref) => {
-  const canvasRef = useRef9(null);
+  const canvasRef = useRef10(null);
   const chainState = useEffectChainState();
-  const sourceCanvas = useMemo16(() => {
+  const sourceCanvas = useMemo17(() => {
     if (typeof document === "undefined") {
       return null;
     }
@@ -6486,16 +6734,6 @@ var animatedImageSchema = {
   ...baseSchema,
   ...cropSchema,
   ...premountSchema,
-  playbackRate: {
-    type: "number",
-    min: 0,
-    max: 10,
-    step: 0.1,
-    default: 1,
-    description: "Playback rate",
-    hiddenFromList: false,
-    keyframable: false
-  },
   ...transformSchema,
   ...backgroundSchema,
   ...borderSchema,
@@ -6531,12 +6769,12 @@ var AnimatedImageContent = forwardRef4(({
   const frame = useCurrentFrame();
   const { fps } = useVideoConfig();
   const currentTime = getCurrentTime({ frame, playbackRate, fps });
-  const currentTimeRef = useRef10(currentTime);
+  const currentTimeRef = useRef11(currentTime);
   currentTimeRef.current = currentTime;
   const requestInitKey = serializeRequestInit(requestInit);
-  const requestInitRef = useRef10(requestInit);
+  const requestInitRef = useRef11(requestInit);
   requestInitRef.current = requestInit;
-  const ref = useRef10(null);
+  const ref = useRef11(null);
   const memoizedEffects = useMemoizedEffects({
     effects,
     overrideId: controls?.overrideId ?? null
@@ -6690,7 +6928,7 @@ var AnimatedImageInner = ({
   ref,
   ...sequenceProps
 }) => {
-  const actualRef = useRef10(null);
+  const actualRef = useRef11(null);
   const memoizedEffectDefinitions = useMemoizedEffectDefinitions(effects);
   useImperativeHandle2(ref, () => {
     return actualRef.current;
@@ -6728,7 +6966,6 @@ var AnimatedImageInner = ({
     height,
     onError,
     fit,
-    playbackRate,
     loopBehavior,
     id,
     className,
@@ -6742,6 +6979,7 @@ var AnimatedImageInner = ({
     children: /* @__PURE__ */ jsx15(Sequence, {
       layout: "none",
       from: from ?? 0,
+      playbackRate,
       durationInFrames: durationInFrames ?? Infinity,
       name: "<AnimatedImage>",
       _remotionInternalDocumentationLink: "https://www.remotion.dev/docs/animatedimage",
@@ -6811,8 +7049,8 @@ import {
   useCallback as useCallback9,
   useImperativeHandle as useImperativeHandle3,
   useLayoutEffect as useLayoutEffect6,
-  useMemo as useMemo17,
-  useRef as useRef11,
+  useMemo as useMemo18,
+  useRef as useRef12,
   useState as useState8
 } from "react";
 
@@ -6860,7 +7098,7 @@ var RenderAssetManager = createContext18({
 });
 var RenderAssetManagerProvider = ({ children, collectAssets }) => {
   const [renderAssets, setRenderAssets] = useState8([]);
-  const renderAssetsRef = useRef11([]);
+  const renderAssetsRef = useRef12([]);
   const registerRenderAsset = useCallback9((renderAsset) => {
     validateRenderAsset(renderAsset);
     renderAssetsRef.current = [...renderAssetsRef.current, renderAsset];
@@ -6892,7 +7130,7 @@ var RenderAssetManagerProvider = ({ children, collectAssets }) => {
       };
     }
   }, []);
-  const contextValue = useMemo17(() => {
+  const contextValue = useMemo18(() => {
     return {
       registerRenderAsset,
       unregisterRenderAsset,
@@ -6965,7 +7203,7 @@ var Artifact = ({ filename, content: content2, downloadBehavior }) => {
 };
 Artifact.Thumbnail = ArtifactThumbnail;
 // src/audio/html5-audio.tsx
-import { forwardRef as forwardRef7, useCallback as useCallback16, useContext as useContext34 } from "react";
+import { forwardRef as forwardRef7, useCallback as useCallback16, useContext as useContext36 } from "react";
 
 // src/absolute-src.ts
 var getAbsoluteSrc = (relativeSrc) => {
@@ -6992,14 +7230,14 @@ var calculateMediaDuration = ({
   if (typeof trimBefore !== "undefined") {
     duration -= trimBefore;
   }
-  const actualDuration = duration / playbackRate;
-  return Number(actualDuration.toFixed(10));
+  return duration / playbackRate;
 };
 
 // src/loop/index.tsx
-import React20, { createContext as createContext19, useMemo as useMemo18 } from "react";
+import React20, { createContext as createContext19, useContext as useContext22, useMemo as useMemo19 } from "react";
 import { jsx as jsx17 } from "react/jsx-runtime";
 var LoopContext = createContext19(null);
+var LoopTimelineContext = createContext19(null);
 var useLoop = () => {
   return React20.useContext(LoopContext);
 };
@@ -7009,10 +7247,16 @@ var Loop = ({
   children,
   name,
   showInTimeline,
+  playbackRate,
   ...props
 }) => {
   const currentFrame = useCurrentFrame();
   const { durationInFrames: compDuration } = useVideoConfig();
+  const parentSequence = useContext22(SequenceContext);
+  const parentPlaybackRate = parentSequence?.playbackRate ?? 1;
+  const loopStartFrame = parentSequence ? parentSequence.cumulatedFrom + parentSequence.relativeFrom : 0;
+  const firstVisibleFrame = loopStartFrame - (parentSequence?.cumulatedNegativeFrom ?? 0) / parentPlaybackRate;
+  const endFrame = loopStartFrame + Math.min(compDuration, durationInFrames * times) / parentPlaybackRate;
   validateDurationInFrames(durationInFrames, {
     component: "of the <Loop /> component",
     allowFloats: true
@@ -7028,43 +7272,57 @@ var Loop = ({
   }
   const maxTimes = Math.ceil(compDuration / durationInFrames);
   const actualTimes = Math.min(maxTimes, times);
-  const style = props.layout === "none" ? undefined : props.style;
   const maxFrame = durationInFrames * (actualTimes - 1);
-  const iteration = Math.floor(currentFrame / durationInFrames);
-  const start = iteration * durationInFrames;
-  const from = Math.min(start, maxFrame);
-  const loopDisplay = useMemo18(() => {
+  const loopsElapsed = currentFrame / durationInFrames;
+  const nearestIteration = Math.round(loopsElapsed);
+  const isAtBoundary = Math.abs(loopsElapsed - nearestIteration) <= Number.EPSILON * Math.max(1, Math.abs(loopsElapsed)) * 4;
+  const iteration = Math.max(0, Math.min(actualTimes - 1, isAtBoundary ? nearestIteration : Math.floor(loopsElapsed)));
+  const start = isAtBoundary ? currentFrame : iteration * durationInFrames;
+  const from = Math.max(0, Math.min(start, maxFrame));
+  const loopDisplay = useMemo19(() => {
     return {
       numberOfTimes: Math.min(compDuration / durationInFrames, times),
       startOffset: -from,
       durationInFrames
     };
   }, [compDuration, durationInFrames, from, times]);
-  const loopContext = useMemo18(() => {
+  const loopContext = useMemo19(() => {
     return {
-      iteration: Math.floor(currentFrame / durationInFrames),
+      iteration,
       durationInFrames
     };
-  }, [currentFrame, durationInFrames]);
-  return /* @__PURE__ */ jsx17(LoopContext.Provider, {
-    value: loopContext,
-    children: /* @__PURE__ */ jsx17(Sequence, {
-      durationInFrames,
-      from,
-      name: name ?? "<Loop>",
-      _remotionInternalDocumentationLink: "https://www.remotion.dev/docs/loop",
-      _remotionInternalLoopDisplay: loopDisplay,
-      layout: props.layout,
-      style,
-      showInTimeline,
-      children
+  }, [iteration, durationInFrames]);
+  const timelineContext = useMemo19(() => ({
+    startFrame: loopStartFrame,
+    firstVisibleFrame,
+    endFrame,
+    playbackRate: parentPlaybackRate
+  }), [loopStartFrame, firstVisibleFrame, endFrame, parentPlaybackRate]);
+  if (actualTimes === 0) {
+    return null;
+  }
+  return /* @__PURE__ */ jsx17(LoopTimelineContext.Provider, {
+    value: timelineContext,
+    children: /* @__PURE__ */ jsx17(LoopContext.Provider, {
+      value: loopContext,
+      children: /* @__PURE__ */ jsx17(Sequence, {
+        durationInFrames,
+        from,
+        name: name ?? "<Loop>",
+        _remotionInternalDocumentationLink: "https://www.remotion.dev/docs/loop",
+        _remotionInternalLoopDisplay: loopDisplay,
+        ...props,
+        showInTimeline,
+        playbackRate,
+        children
+      })
     })
   });
 };
 Loop.useLoop = useLoop;
 
 // src/prefetch.ts
-import { useContext as useContext22 } from "react";
+import { useContext as useContext23 } from "react";
 
 // src/playback-logging.ts
 var playbackLogging = ({
@@ -7120,7 +7378,7 @@ var getSrcWithoutHash = (src) => {
   return src.slice(0, hashIndex);
 };
 var usePreload = (src) => {
-  const preloads2 = useContext22(PreloadContext);
+  const preloads2 = useContext23(PreloadContext);
   const hashFragmentIndex = removeAndGetHashFragment(src);
   const withoutHashFragment = getSrcWithoutHash(src);
   if (!preloads2[withoutHashFragment]) {
@@ -7405,7 +7663,7 @@ var resolveTrimProps = ({
 };
 
 // src/video/duration-state.tsx
-import { createContext as createContext21, useMemo as useMemo19, useReducer } from "react";
+import { createContext as createContext21, useMemo as useMemo20, useReducer } from "react";
 import { jsx as jsx19 } from "react/jsx-runtime";
 var durationReducer = (state, action) => {
   switch (action.type) {
@@ -7431,7 +7689,7 @@ var DurationsContext = createContext21({
 });
 var DurationsContextProvider = ({ children }) => {
   const [durations, setDurations] = useReducer(durationReducer, {});
-  const value = useMemo19(() => {
+  const value = useMemo20(() => {
     return {
       durations,
       setDurations
@@ -7447,11 +7705,11 @@ var DurationsContextProvider = ({ children }) => {
 import { useCallback as useCallback15 } from "react";
 import React26, {
   forwardRef as forwardRef5,
-  useContext as useContext31,
+  useContext as useContext33,
   useEffect as useEffect15,
   useImperativeHandle as useImperativeHandle4,
-  useMemo as useMemo27,
-  useRef as useRef20,
+  useMemo as useMemo28,
+  useRef as useRef21,
   useState as useState15
 } from "react";
 
@@ -7508,17 +7766,17 @@ var random = (seed, dummy) => {
 };
 
 // src/use-amplification.ts
-import { useContext as useContext24, useLayoutEffect as useLayoutEffect8, useRef as useRef15 } from "react";
+import { useContext as useContext25, useLayoutEffect as useLayoutEffect8, useRef as useRef16 } from "react";
 
 // src/audio/shared-audio-tags.tsx
 import React23, {
   createContext as createContext22,
   createRef as createRef2,
   useCallback as useCallback10,
-  useContext as useContext23,
+  useContext as useContext24,
   useEffect as useEffect8,
-  useMemo as useMemo21,
-  useRef as useRef13,
+  useMemo as useMemo22,
+  useRef as useRef14,
   useState as useState11
 } from "react";
 
@@ -7622,7 +7880,7 @@ var makeSharedElementSourceNode = ({
 };
 
 // src/audio/use-audio-context.ts
-import { useMemo as useMemo20, useRef as useRef12 } from "react";
+import { useMemo as useMemo21, useRef as useRef13 } from "react";
 var warned = false;
 var warnOnce = (logLevel) => {
   if (warned) {
@@ -7640,11 +7898,11 @@ var useSingletonAudioContext = ({
   sampleRate
 }) => {
   const env = useRemotionEnvironment();
-  const initialSampleRate = useRef12(sampleRate);
+  const initialSampleRate = useRef13(sampleRate);
   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 = useMemo20(() => {
+  const context = useMemo21(() => {
     if (env.isRendering) {
       return null;
     }
@@ -7823,17 +8081,17 @@ var SharedAudioContextProvider = ({
     audioEnabled,
     sampleRate
   });
-  const audioContextIsPlayingEventually = useRef13(false);
-  const initialExperimentalKeepAudioContextAlive = useRef13(_experimentalKeepAudioContextAlive);
+  const audioContextIsPlayingEventually = useRef14(false);
+  const initialExperimentalKeepAudioContextAlive = useRef14(_experimentalKeepAudioContextAlive);
   if (initialExperimentalKeepAudioContextAlive.current !== _experimentalKeepAudioContextAlive) {
     throw new Error("`_experimentalKeepAudioContextAlive` cannot be changed dynamically.");
   }
-  const isResuming = useRef13(null);
-  const nextResumeAttemptId = useRef13(0);
-  const nextResumeIsAutoPlayAttempt = useRef13(false);
-  const audioSyncAnchor = useMemo21(() => ({ value: 0 }), []);
-  const audioSyncAnchorListeners = useRef13([]);
-  const audioSyncAnchorEmitter = useMemo21(() => {
+  const isResuming = useRef14(null);
+  const nextResumeAttemptId = useRef14(0);
+  const nextResumeIsAutoPlayAttempt = useRef14(false);
+  const audioSyncAnchor = useMemo22(() => ({ value: 0 }), []);
+  const audioSyncAnchorListeners = useRef14([]);
+  const audioSyncAnchorEmitter = useMemo22(() => {
     return {
       dispatch: (event) => {
         audioSyncAnchorListeners.current.forEach((l) => l(event));
@@ -7848,12 +8106,12 @@ var SharedAudioContextProvider = ({
       }
     };
   }, []);
-  const prevEndTimes = useRef13({ scheduledEndTime: null, mediaEndTime: null });
-  const nodesToResume = useRef13(new Map);
+  const prevEndTimes = useRef14({ scheduledEndTime: null, mediaEndTime: null });
+  const nodesToResume = useRef14(new Map);
   const unscheduleAudioNode = useCallback10((node) => {
     nodesToResume.current.delete(node);
   }, []);
-  const scheduleAudioNode = useMemo21(() => {
+  const scheduleAudioNode = useMemo22(() => {
     return ({
       node,
       mediaTimestamp,
@@ -7998,7 +8256,7 @@ var SharedAudioContextProvider = ({
       ctxAndGain.suspend().catch(() => {});
     };
   }, [ctxAndGain, _experimentalKeepAudioContextAlive]);
-  const audioContextValue = useMemo21(() => {
+  const audioContextValue = useMemo22(() => {
     return {
       sampleRate,
       audioContext: ctxAndGain?.audioContext ?? null,
@@ -8033,7 +8291,7 @@ var SharedAudioContextProvider = ({
   });
 };
 var SharedAudioTagsContextProvider = ({ children, numberOfAudioTags }) => {
-  const audios = useRef13([]);
+  const audios = useRef14([]);
   const [initialNumberOfAudioTags] = useState11(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.");
@@ -8041,7 +8299,7 @@ var SharedAudioTagsContextProvider = ({ children, numberOfAudioTags }) => {
   const logLevel = useLogLevel();
   const mountTime = useMountTime();
   const env = useRemotionEnvironment();
-  const audioCtx = useContext23(SharedAudioContext);
+  const audioCtx = useContext24(SharedAudioContext);
   const audioContext = audioCtx?.audioContext ?? null;
   const resume = audioCtx?.resume;
   const [refs] = useState11(() => {
@@ -8070,7 +8328,7 @@ var SharedAudioTagsContextProvider = ({ children, numberOfAudioTags }) => {
       });
     };
   }, [refs]);
-  const takenAudios = useRef13(new Array(numberOfAudioTags).fill(false));
+  const takenAudios = useRef14(new Array(numberOfAudioTags).fill(false));
   const rerenderAudios = useCallback10(() => {
     refs.forEach(({ ref, id }) => {
       const data = audios.current?.find((a2) => a2.id === id);
@@ -8186,7 +8444,7 @@ var SharedAudioTagsContextProvider = ({ children, numberOfAudioTags }) => {
     });
     resume?.();
   }, [logLevel, mountTime, refs, env.isPlayer, resume]);
-  const audioTagsValue = useMemo21(() => {
+  const audioTagsValue = useMemo22(() => {
     return {
       registerAudio,
       unregisterAudio,
@@ -8201,7 +8459,7 @@ var SharedAudioTagsContextProvider = ({ children, numberOfAudioTags }) => {
     unregisterAudio,
     updateAudio
   ]);
-  const sharedAudioTagElements = useMemo21(() => {
+  const sharedAudioTagElements = useMemo22(() => {
     return refs.map(({ id, ref }) => {
       return /* @__PURE__ */ jsx20("audio", {
         ref,
@@ -8224,8 +8482,8 @@ var useSharedAudio = ({
   premounting,
   postmounting
 }) => {
-  const audioCtx = useContext23(SharedAudioContext);
-  const tagsCtx = useContext23(SharedAudioTagsContext);
+  const audioCtx = useContext24(SharedAudioContext);
+  const tagsCtx = useContext24(SharedAudioTagsContext);
   const [elem] = useState11(() => {
     if (tagsCtx && tagsCtx.numberOfAudioTags > 0) {
       return tagsCtx.registerAudio({ aud, audioId, premounting, postmounting });
@@ -8281,7 +8539,7 @@ var isApproximatelyTheSame = (num1, num2) => {
 };
 
 // src/video/video-fragment.ts
-import { useRef as useRef14 } from "react";
+import { useRef as useRef15 } from "react";
 var toSeconds = (time, fps) => {
   return Math.round(time / fps * 100) / 100;
 };
@@ -8370,9 +8628,9 @@ var useAppendVideoFragment = ({
   duration: initialDuration,
   fps
 }) => {
-  const actualFromRef = useRef14(initialActualFrom);
-  const actualDuration = useRef14(initialDuration);
-  const actualSrc = useRef14(initialActualSrc);
+  const actualFromRef = useRef15(initialActualFrom);
+  const actualDuration = useRef15(initialDuration);
+  const actualSrc = useRef15(initialActualSrc);
   if (!isSubsetOfDuration({
     prevStartFrom: actualFromRef.current,
     newStartFrom: initialActualFrom,
@@ -8411,10 +8669,10 @@ var useVolume = ({
   source,
   shouldUseWebAudioApi
 }) => {
-  const audioStuffRef = useRef15(null);
-  const currentVolumeRef = useRef15(volume);
+  const audioStuffRef = useRef16(null);
+  const currentVolumeRef = useRef16(volume);
   currentVolumeRef.current = volume;
-  const sharedAudioContext = useContext24(SharedAudioContext);
+  const sharedAudioContext = useContext25(SharedAudioContext);
   if (!sharedAudioContext) {
     throw new Error("useAmplification must be used within a SharedAudioContext");
   }
@@ -8480,22 +8738,25 @@ var useVolume = ({
 };
 
 // src/use-media-in-timeline.ts
-import { useCallback as useCallback11, useContext as useContext26, useEffect as useEffect9, useMemo as useMemo22, useState as useState12 } from "react";
+import { useCallback as useCallback11, useContext as useContext27, useEffect as useEffect9, useMemo as useMemo23, useState as useState12 } from "react";
 
 // src/audio/use-audio-frame.ts
-import { useContext as useContext25 } from "react";
+import { createContext as createContext23, useContext as useContext26 } from "react";
+var Html5MediaTrimContext = createContext23(0);
 var useMediaStartsAt = () => {
-  const parentSequence = useContext25(SequenceContext);
+  const parentSequence = useContext26(SequenceContext);
   return parentSequence?.cumulatedNegativeFrom ?? 0;
 };
 var useFrameForVolumeProp = (behavior) => {
   const loop = Loop.useLoop();
+  const loopTimeline = useContext26(LoopTimelineContext);
+  const sequenceContext = useContext26(SequenceContext);
   const frame = useCurrentFrame();
   const startsAt = useMediaStartsAt();
   if (behavior === "repeat" || loop === null) {
     return frame + startsAt;
   }
-  return frame + startsAt + loop.durationInFrames * loop.iteration;
+  return frame + startsAt + loop.durationInFrames * loop.iteration * (sequenceContext?.playbackRate ?? 1) / (loopTimeline?.playbackRate ?? 1);
 };
 
 // src/get-asset-file-name.ts
@@ -8508,7 +8769,12 @@ var getAssetDisplayName = (filename) => {
     return staticFile ? getAssetDisplayName(staticFile.name) : "Blob URL";
   }
   const splitted = filename.split("/").map((s) => s.split("\\")).flat(1);
-  return splitted[splitted.length - 1];
+  const name = splitted[splitted.length - 1];
+  try {
+    return decodeURIComponent(name);
+  } catch {
+    return name;
+  }
 };
 
 // src/get-timeline-duration.ts
@@ -8581,13 +8847,15 @@ var useBasicMediaInTimeline = ({
   playbackRate,
   sequenceDurationInFrames,
   mediaStartsAt,
+  mediaFrom,
   loop,
   muted
 }) => {
   if (!src) {
     throw new Error("No src passed");
   }
-  const parentSequence = useContext26(SequenceContext);
+  const parentSequence = useContext27(SequenceContext);
+  const sequencePlaybackRate = parentSequence?.playbackRate ?? 1;
   const [initialVolume] = useState12(() => volume);
   const duration = getTimelineDuration({
     compositionDurationInFrames: sequenceDurationInFrames,
@@ -8597,7 +8865,7 @@ var useBasicMediaInTimeline = ({
     parentSequenceDurationInFrames: parentSequence?.durationInFrames ?? null,
     loop
   });
-  const volumes = useMemo22(() => {
+  const volumes = useMemo23(() => {
     if (typeof volume === "number") {
       return volume;
     }
@@ -8608,14 +8876,21 @@ var useBasicMediaInTimeline = ({
         mediaVolume
       });
     }
-    return new Array(Math.floor(Math.max(0, duration + mediaStartsAt))).fill(true).map((_, i) => {
+    return new Array(Math.ceil(Math.max(0, duration + Math.min(0, mediaStartsAt + mediaFrom)) / sequencePlaybackRate)).fill(true).map((_, i) => {
       return evaluateVolume({
-        frame: i + mediaStartsAt,
+        frame: i * sequencePlaybackRate,
         volume,
         mediaVolume
       });
     }).join(",");
-  }, [duration, mediaStartsAt, volume, mediaVolume]);
+  }, [
+    duration,
+    mediaStartsAt,
+    mediaFrom,
+    volume,
+    mediaVolume,
+    sequencePlaybackRate
+  ]);
   useEffect9(() => {
     if (typeof volume === "number" && volume !== initialVolume) {
       warnOnce2(`Remotion: The ${mediaType} with src ${src} has changed it's volume. Prefer the callback syntax for setting volume to get better timeline display: https://www.remotion.dev/docs/audio/volume`);
@@ -8623,7 +8898,7 @@ var useBasicMediaInTimeline = ({
   }, [initialVolume, mediaType, src, volume]);
   const doesVolumeChange = typeof volume === "function";
   const startMediaFrom = 0 - mediaStartsAt + (trimBefore ?? 0);
-  const memoizedResult = useMemo22(() => {
+  const memoizedResult = useMemo23(() => {
     return {
       volumes,
       duration,
@@ -8659,17 +8934,24 @@ var useMediaInTimeline = ({
   premountDisplay,
   postmountDisplay,
   loopDisplay,
+  loopVolumeCurveBehavior,
   documentationLink,
   refForOutline,
   muted
 }) => {
-  const parentSequence = useContext26(SequenceContext);
-  const startsAt = useMediaStartsAt();
-  const sequenceRegistrationEnabled = useContext26(SequenceRegistrationContext);
+  const parentSequence = useContext27(SequenceContext);
+  const mediaTrimBefore = useContext27(Html5MediaTrimContext);
+  const sequenceRegistrationEnabled = useContext27(SequenceRegistrationContext);
   const { durationInFrames } = useVideoConfig();
   const mediaStartsAt = useMediaStartsAt();
-  const { volumes, duration, doesVolumeChange, finalDisplayName } = useBasicMediaInTimeline({
-    volume,
+  const loopContext = Loop.useLoop();
+  const loopTimeline = useContext27(LoopTimelineContext);
+  const {
+    volumes: basicVolumes,
+    duration,
+    finalDisplayName
+  } = useBasicMediaInTimeline({
+    volume: loopContext && typeof volume === "function" ? undefined : volume,
     mediaVolume,
     mediaType,
     src,
@@ -8679,9 +8961,43 @@ var useMediaInTimeline = ({
     playbackRate,
     sequenceDurationInFrames: durationInFrames,
     mediaStartsAt,
+    mediaFrom: 0,
     loop: false,
     muted
   });
+  const doesVolumeChange = typeof volume === "function";
+  const volumes = useMemo23(() => {
+    if (!loopContext || !loopTimeline || typeof volume !== "function") {
+      return basicVolumes;
+    }
+    const timeline = loopTimeline;
+    const loopDuration = loopContext.durationInFrames;
+    const sequenceRate = parentSequence?.playbackRate ?? 1;
+    const mediaOrigin = parentSequence ? parentSequence.cumulatedFrom + parentSequence.relativeFrom : 0;
+    const mediaOffset = mediaOrigin + mediaTrimBefore / sequenceRate - (timeline.startFrame + loopContext.iteration * loopDuration / timeline.playbackRate);
+    const firstVisible = Math.max(0, timeline.firstVisibleFrame);
+    const firstCompositionFrame = Math.ceil(firstVisible);
+    return Array.from({
+      length: Math.max(0, Math.ceil(timeline.endFrame) - firstCompositionFrame)
+    }, (_, index) => {
+      const compositionFrame = firstCompositionFrame + index;
+      const loopsElapsed = (compositionFrame - timeline.startFrame) * timeline.playbackRate / loopDuration;
+      const nearestIteration = Math.round(loopsElapsed);
+      const iteration = Math.abs(loopsElapsed - nearestIteration) <= Number.EPSILON * Math.max(1, Math.abs(loopsElapsed)) * 4 ? nearestIteration : Math.floor(loopsElapsed);
+      const iterationStart = timeline.startFrame + iteration * loopDuration / timeline.playbackRate + mediaOffset;
+      const frame = Math.max(0, compositionFrame - Math.max(firstVisible, iterationStart)) * sequenceRate + (loopVolumeCurveBehavior === "extend" ? iteration * loopDuration * sequenceRate / timeline.playbackRate : 0);
+      return evaluateVolume({ frame, volume, mediaVolume });
+    }).join(",");
+  }, [
+    basicVolumes,
+    loopContext,
+    loopTimeline,
+    mediaTrimBefore,
+    mediaVolume,
+    parentSequence,
+    volume,
+    loopVolumeCurveBehavior
+  ]);
   const { isStudio } = useRemotionEnvironment();
   const getSequenceForRegistration = useCallback11(() => {
     if (!src) {
@@ -8702,11 +9018,12 @@ var useMediaInTimeline = ({
       muted,
       showInTimeline: true,
       timelineOrder: null,
-      startMediaFrom: 0 - startsAt,
-      mediaFrameAtSequenceZero: null,
+      startMediaFrom: mediaTrimBefore,
+      mediaFrameAtSequenceZero: mediaTrimBefore * (1 - playbackRate),
       doesVolumeChange,
       loopDisplay,
       playbackRate,
+      sequencePlaybackRate: 1,
       getStack,
       premountDisplay,
       postmountDisplay,
@@ -8725,7 +9042,7 @@ var useMediaInTimeline = ({
     volumes,
     doesVolumeChange,
     mediaType,
-    startsAt,
+    mediaTrimBefore,
     playbackRate,
     getStack,
     premountDisplay,
@@ -8744,21 +9061,27 @@ var useMediaInTimeline = ({
 };
 
 // src/use-media-playback.ts
-import { useCallback as useCallback14, useEffect as useEffect13, useLayoutEffect as useLayoutEffect10, useRef as useRef18 } from "react";
+import {
+  useCallback as useCallback14,
+  useContext as useContext30,
+  useEffect as useEffect13,
+  useLayoutEffect as useLayoutEffect10,
+  useRef as useRef19
+} from "react";
 
 // src/buffer-until-first-frame.ts
-import { useCallback as useCallback13, useMemo as useMemo25, useRef as useRef16 } from "react";
+import { useCallback as useCallback13, useMemo as useMemo26, useRef as useRef17 } from "react";
 
 // src/use-buffer-state.ts
-import { useContext as useContext28, useMemo as useMemo24 } from "react";
+import { useContext as useContext29, useMemo as useMemo25 } from "react";
 
 // src/buffering.tsx
 import React24, {
   useCallback as useCallback12,
-  useContext as useContext27,
+  useContext as useContext28,
   useEffect as useEffect10,
   useLayoutEffect as useLayoutEffect9,
-  useMemo as useMemo23,
+  useMemo as useMemo24,
   useState as useState13
 } from "react";
 import { jsx as jsx21 } from "react/jsx-runtime";
@@ -8816,12 +9139,12 @@ var useBufferManager = (logLevel, mountTime, setBuffering, isBuffering) => {
       }
     }, [blockCount]);
   }
-  return useMemo23(() => ({ addBlock }), [addBlock]);
+  return useMemo24(() => ({ addBlock }), [addBlock]);
 };
 var BufferingContextReact = React24.createContext(null);
 var BufferingProvider = ({ children }) => {
-  const { logLevel, mountTime } = useContext27(LogLevelContext);
-  const { isBuffering, setBuffering } = useContext27(SetTimelineContext);
+  const { logLevel, mountTime } = useContext28(LogLevelContext);
+  const { isBuffering, setBuffering } = useContext28(SetTimelineContext);
   const bufferManager = useBufferManager(logLevel ?? "info", mountTime, setBuffering, isBuffering);
   return /* @__PURE__ */ jsx21(BufferingContextReact.Provider, {
     value: bufferManager,
@@ -8831,10 +9154,10 @@ var BufferingProvider = ({ children }) => {
 
 // src/use-buffer-state.ts
 var useBufferState = () => {
-  const buffer = useContext28(BufferingContextReact);
+  const buffer = useContext29(BufferingContextReact);
   const logLevel = useLogLevel();
   const addBlock = buffer ? buffer.addBlock : null;
-  return useMemo24(() => ({
+  return useMemo25(() => ({
     delayPlayback: () => {
       if (!addBlock) {
         throw new Error("Tried to enable the buffering state, but a Remotion context was not found. This API can only be called in a component that was passed to the Remotion Player or a <Composition>. Or you might have experienced a version mismatch - run `npx remotion versions` and ensure all packages have the same version. This error is thrown by the buffer state https://remotion.dev/docs/player/buffer-state");
@@ -8869,7 +9192,7 @@ var useBufferUntilFirstFrame = ({
   logLevel,
   mountTime
 }) => {
-  const bufferingRef = useRef16(false);
+  const bufferingRef = useRef17(false);
   const { delayPlayback } = useBufferState();
   const bufferUntilFirstFrame = useCallback13((requestedTime) => {
     if (mediaType !== "video") {
@@ -8942,7 +9265,7 @@ var useBufferUntilFirstFrame = ({
     onVariableFpsVideoDetected,
     pauseWhenBuffering
   ]);
-  return useMemo25(() => {
+  return useMemo26(() => {
     return {
       isBuffering: () => bufferingRef.current,
       bufferUntilFirstFrame
@@ -9195,14 +9518,14 @@ var useMediaBuffering = ({
 };
 
 // src/use-request-video-callback-time.ts
-import { useEffect as useEffect12, useRef as useRef17 } from "react";
+import { useEffect as useEffect12, useRef as useRef18 } from "react";
 var useRequestVideoCallbackTime = ({
   mediaRef,
   mediaType,
   lastSeek,
   onVariableFpsVideoDetected
 }) => {
-  const currentTime = useRef17(null);
+  const currentTime = useRef18(null);
   useEffect12(() => {
     const { current } = mediaRef;
     if (current) {
@@ -9354,12 +9677,12 @@ var useMediaPlayback = ({
   const playing = usePlaying();
   const playerBuffering = useBuffering();
   const { fps } = useVideoConfig();
-  const mediaStartsAt = useMediaStartsAt();
-  const lastSeekDueToShift = useRef18(null);
-  const lastSeek = useRef18(null);
+  const mediaTrimBefore = useContext30(Html5MediaTrimContext);
+  const lastSeekDueToShift = useRef19(null);
+  const lastSeek = useRef19(null);
   const logLevel = useLogLevel();
   const mountTime = useMountTime();
-  const isVariableFpsVideoMap = useRef18({});
+  const isVariableFpsVideoMap = useRef19({});
   const onVariableFpsVideoDetected = useCallback14(() => {
     if (!src) {
       return;
@@ -9380,7 +9703,7 @@ var useMediaPlayback = ({
   const desiredUnclampedTime = getMediaTime({
     frame,
     playbackRate: localPlaybackRate,
-    startFrom: -mediaStartsAt,
+    startFrom: mediaTrimBefore,
     fps
   });
   const isMediaTagBuffering = useMediaBuffering({
@@ -9400,7 +9723,8 @@ var useMediaPlayback = ({
     logLevel,
     mountTime
   });
-  const playbackRate = localPlaybackRate * globalPlaybackRate;
+  const sequenceContext = useContext30(SequenceContext);
+  const playbackRate = localPlaybackRate * globalPlaybackRate * (sequenceContext?.playbackRate ?? 1);
   const acceptableTimeShiftButLessThanDuration = (() => {
     if (mediaRef.current?.duration) {
       return Math.min(mediaRef.current.duration, acceptableTimeshift ?? DEFAULT_ACCEPTABLE_TIMESHIFT_WITH_AMPLIFICATION);
@@ -9563,7 +9887,7 @@ var useMediaPlayback = ({
 };
 
 // src/use-media-tag.ts
-import { useContext as useContext29, useEffect as useEffect14, useRef as useRef19 } from "react";
+import { useContext as useContext31, useEffect as useEffect14, useRef as useRef20 } from "react";
 var useMediaTag = ({
   mediaRef,
   id,
@@ -9573,8 +9897,8 @@ var useMediaTag = ({
   isPostmounting
 }) => {
   const { audioAndVideoTags, isPlaying } = useTimelineContext();
-  const { subscribePlaying } = useContext29(SetTimelineContext);
-  const isPlayingRef = useRef19(isPlaying);
+  const { subscribePlaying } = useContext31(SetTimelineContext);
+  const isPlayingRef = useRef20(isPlaying);
   isPlayingRef.current = isPlaying;
   const logLevel = useLogLevel();
   const mountTime = useMountTime();
@@ -9637,12 +9961,12 @@ var useMediaTag = ({
 };
 
 // src/volume-position-state.ts
-import { createContext as createContext23, useContext as useContext30, useMemo as useMemo26 } from "react";
-var MediaVolumeContext = createContext23({
+import { createContext as createContext24, useContext as useContext32, useMemo as useMemo27 } from "react";
+var MediaVolumeContext = createContext24({
   playerMuted: false,
   mediaVolume: 1
 });
-var SetMediaVolumeContext = createContext23({
+var SetMediaVolumeContext = createContext24({
   setPlayerMuted: () => {
     throw new Error("default");
   },
@@ -9651,16 +9975,16 @@ var SetMediaVolumeContext = createContext23({
   }
 });
 var useMediaVolumeState = () => {
-  const { mediaVolume } = useContext30(MediaVolumeContext);
-  const { setMediaVolume } = useContext30(SetMediaVolumeContext);
-  return useMemo26(() => {
+  const { mediaVolume } = useContext32(MediaVolumeContext);
+  const { setMediaVolume } = useContext32(SetMediaVolumeContext);
+  return useMemo27(() => {
     return [mediaVolume, setMediaVolume];
   }, [mediaVolume, setMediaVolume]);
 };
 var usePlayerMutedState = () => {
-  const { playerMuted } = useContext30(MediaVolumeContext);
-  const { setPlayerMuted } = useContext30(SetMediaVolumeContext);
-  return useMemo26(() => {
+  const { playerMuted } = useContext32(MediaVolumeContext);
+  const { setPlayerMuted } = useContext32(SetMediaVolumeContext);
+  return useMemo27(() => {
     return [playerMuted, setPlayerMuted];
   }, [playerMuted, setPlayerMuted]);
 };
@@ -9749,7 +10073,7 @@ var AudioForDevelopmentForwardRefFunction = (props, ref) => {
     throw new TypeError("No 'src' was passed to <Html5Audio>.");
   }
   const preloadedSrc = usePreload(src);
-  const sequenceContext = useContext31(SequenceContext);
+  const sequenceContext = useContext33(SequenceContext);
   const { isStudio } = useRemotionEnvironment();
   const [timelineId] = useState15(() => String(Math.random()));
   const userPreferredVolume = evaluateVolume({
@@ -9768,7 +10092,7 @@ var AudioForDevelopmentForwardRefFunction = (props, ref) => {
     requestsVideoFrame: false,
     isClientSideRendering: false
   });
-  const propsToPass = useMemo27(() => {
+  const propsToPass = useMemo28(() => {
     return {
       muted: isMutedForPlayback,
       src: preloadedSrc,
@@ -9783,7 +10107,7 @@ var AudioForDevelopmentForwardRefFunction = (props, ref) => {
     preloadedSrc,
     crossOriginValue
   ]);
-  const id = useMemo27(() => `audio-${random(src ?? "")}-${sequenceContext?.relativeFrom}-${sequenceContext?.cumulatedFrom}-${sequenceContext?.durationInFrames}-muted:${props.muted}-loop:${props.loop}`, [
+  const id = useMemo28(() => `audio-${random(src ?? "")}-${sequenceContext?.relativeFrom}-${sequenceContext?.cumulatedFrom}-${sequenceContext?.durationInFrames}-muted:${props.muted}-loop:${props.loop}`, [
     src,
     sequenceContext?.relativeFrom,
     sequenceContext?.cumulatedFrom,
@@ -9817,6 +10141,7 @@ var AudioForDevelopmentForwardRefFunction = (props, ref) => {
     premountDisplay: sequenceContext?.premountDisplay ?? null,
     postmountDisplay: sequenceContext?.postmountDisplay ?? null,
     loopDisplay: undefined,
+    loopVolumeCurveBehavior: loopVolumeCurveBehavior ?? "repeat",
     documentationLink: "https://www.remotion.dev/docs/html5-audio",
     refForOutline: null,
     muted: isMutedForTimeline
@@ -9860,7 +10185,7 @@ var AudioForDevelopmentForwardRefFunction = (props, ref) => {
   useImperativeHandle4(ref, () => {
     return audioRef.current;
   }, [audioRef]);
-  const currentOnDurationCallback = useRef20(onDuration);
+  const currentOnDurationCallback = useRef21(onDuration);
   currentOnDurationCallback.current = onDuration;
   useEffect15(() => {
     const { current } = audioRef;
@@ -9901,20 +10226,20 @@ var AudioForPreview = forwardRef5(AudioForDevelopmentForwardRefFunction);
 // src/audio/AudioForRendering.tsx
 import {
   forwardRef as forwardRef6,
-  useContext as useContext33,
+  useContext as useContext35,
   useEffect as useEffect16,
   useImperativeHandle as useImperativeHandle5,
   useLayoutEffect as useLayoutEffect11,
-  useMemo as useMemo29,
-  useRef as useRef21
+  useMemo as useMemo30,
+  useRef as useRef22
 } from "react";
 
 // src/use-media-enabled.tsx
-import { createContext as createContext24, useContext as useContext32, useMemo as useMemo28 } from "react";
+import { createContext as createContext25, useContext as useContext34, useMemo as useMemo29 } from "react";
 import { jsx as jsx23 } from "react/jsx-runtime";
-var MediaEnabledContext = createContext24(null);
+var MediaEnabledContext = createContext25(null);
 var useVideoEnabled = () => {
-  const context = useContext32(MediaEnabledContext);
+  const context = useContext34(MediaEnabledContext);
   if (!context) {
     return window.remotion_videoEnabled;
   }
@@ -9924,7 +10249,7 @@ var useVideoEnabled = () => {
   return context.videoEnabled;
 };
 var useAudioEnabled = () => {
-  const context = useContext32(MediaEnabledContext);
+  const context = useContext34(MediaEnabledContext);
   if (!context) {
     return window.remotion_audioEnabled;
   }
@@ -9938,7 +10263,7 @@ var MediaEnabledProvider = ({
   videoEnabled,
   audioEnabled
 }) => {
-  const value = useMemo28(() => ({ videoEnabled, audioEnabled }), [videoEnabled, audioEnabled]);
+  const value = useMemo29(() => ({ videoEnabled, audioEnabled }), [videoEnabled, audioEnabled]);
   return /* @__PURE__ */ jsx23(MediaEnabledContext.Provider, {
     value,
     children
@@ -9948,7 +10273,7 @@ var MediaEnabledProvider = ({
 // src/audio/AudioForRendering.tsx
 import { jsx as jsx24 } from "react/jsx-runtime";
 var AudioForRenderingRefForwardingFunction = (props, ref) => {
-  const audioRef = useRef21(null);
+  const audioRef = useRef22(null);
   const {
     volume: volumeProp,
     playbackRate,
@@ -9971,10 +10296,12 @@ var AudioForRenderingRefForwardingFunction = (props, ref) => {
   const absoluteFrame = useTimelinePosition();
   const volumePropFrame = useFrameForVolumeProp(loopVolumeCurveBehavior ?? "repeat");
   const frame = useCurrentFrame();
-  const sequenceContext = useContext33(SequenceContext);
-  const { registerRenderAsset, unregisterRenderAsset } = useContext33(RenderAssetManager);
+  const sequenceContext = useContext35(SequenceContext);
+  const sequencePlaybackRate = sequenceContext?.playbackRate ?? 1;
+  const audioStartFrame = useContext35(Html5MediaTrimContext);
+  const { registerRenderAsset, unregisterRenderAsset } = useContext35(RenderAssetManager);
   const { delayRender: delayRender2, continueRender: continueRender2 } = useDelayRender();
-  const id = useMemo29(() => `audio-${random(props.src ?? "")}-${sequenceContext?.relativeFrom}-${sequenceContext?.cumulatedFrom}-${sequenceContext?.durationInFrames}`, [
+  const id = useMemo30(() => `audio-${random(props.src ?? "")}-${sequenceContext?.relativeFrom}-${sequenceContext?.cumulatedFrom}-${sequenceContext?.durationInFrames}`, [
     props.src,
     sequenceContext?.relativeFrom,
     sequenceContext?.cumulatedFrom,
@@ -10008,10 +10335,10 @@ var AudioForRenderingRefForwardingFunction = (props, ref) => {
       id,
       frame: absoluteFrame,
       volume,
-      mediaFrame: frame,
-      playbackRate: props.playbackRate ?? 1,
+      mediaFrame: audioStartFrame + (frame - audioStartFrame) / sequencePlaybackRate,
+      playbackRate: (props.playbackRate ?? 1) * sequencePlaybackRate,
       toneFrequency: toneFrequency ?? 1,
-      audioStartFrame: Math.max(0, -(sequenceContext?.cumulatedNegativeFrom ?? 0)),
+      audioStartFrame,
       audioStreamIndex: audioStreamIndex ?? 0
     });
     return () => unregisterRenderAsset(id);
@@ -10028,7 +10355,8 @@ var AudioForRenderingRefForwardingFunction = (props, ref) => {
     playbackRate,
     props.playbackRate,
     toneFrequency,
-    sequenceContext?.cumulatedNegativeFrom,
+    audioStartFrame,
+    sequencePlaybackRate,
     audioStreamIndex
   ]);
   const { src } = props;
@@ -10084,7 +10412,7 @@ var AudioForRendering = forwardRef6(AudioForRenderingRefForwardingFunction);
 // src/audio/html5-audio.tsx
 import { jsx as jsx25 } from "react/jsx-runtime";
 var AudioRefForwardingFunction = (props, ref) => {
-  const audioTagsContext = useContext34(SharedAudioTagsContext);
+  const audioTagsContext = useContext36(SharedAudioTagsContext);
   const propsWithFreeze = props;
   const {
     startFrom,
@@ -10109,7 +10437,7 @@ var AudioRefForwardingFunction = (props, ref) => {
   if (typeof freeze !== "undefined") {
     throw new TypeError('The "freeze" prop is not supported on <Html5Audio />. Use <Sequence freeze={...}> to freeze media playback.');
   }
-  const { durations, setDurations } = useContext34(DurationsContext);
+  const { durations, setDurations } = useContext36(DurationsContext);
   if (typeof props.src !== "string") {
     throw new TypeError(`The \`<Html5Audio>\` tag requires a string for \`src\`, but got ${JSON.stringify(props.src)} instead.`);
   }
@@ -10139,20 +10467,20 @@ var AudioRefForwardingFunction = (props, ref) => {
     trimBefore,
     trimAfter
   });
-  if (loop && durationFetched !== undefined) {
-    if (!Number.isFinite(durationFetched)) {
+  const loopDuration = trimAfterValue ?? (durationFetched === undefined ? undefined : durationFetched * fps);
+  if (loop && loopDuration !== undefined) {
+    if (!Number.isFinite(loopDuration)) {
       return /* @__PURE__ */ jsx25(Html5Audio, {
         ...propsOtherThanLoop,
         ref,
         _remotionInternalNativeLoopPassed: true
       });
     }
-    const duration = durationFetched * fps;
     return /* @__PURE__ */ jsx25(Loop, {
       layout: "none",
       durationInFrames: calculateMediaDuration({
         trimAfter: trimAfterValue,
-        mediaDurationInFrames: duration,
+        mediaDurationInFrames: loopDuration,
         playbackRate: props.playbackRate ?? 1,
         trimBefore: trimBeforeValue
       }),
@@ -10164,17 +10492,20 @@ var AudioRefForwardingFunction = (props, ref) => {
     });
   }
   if (typeof trimBeforeValue !== "undefined" || typeof trimAfterValue !== "undefined") {
-    return /* @__PURE__ */ jsx25(Sequence, {
-      layout: "none",
-      from: 0 - (trimBeforeValue ?? 0),
-      showInTimeline: false,
-      durationInFrames: trimAfterValue,
-      name,
-      children: /* @__PURE__ */ jsx25(Html5Audio, {
-        _remotionInternalNeedsDurationCalculation: Boolean(loop),
-        pauseWhenBuffering: shouldPauseWhenBuffering,
-        ...otherProps,
-        ref
+    return /* @__PURE__ */ jsx25(Html5MediaTrimContext.Provider, {
+      value: trimBeforeValue ?? 0,
+      children: /* @__PURE__ */ jsx25(Sequence, {
+        layout: "none",
+        from: 0 - (trimBeforeValue ?? 0),
+        showInTimeline: false,
+        durationInFrames: trimAfterValue === undefined ? undefined : (trimBeforeValue ?? 0) + (trimAfterValue - (trimBeforeValue ?? 0)) / (props.playbackRate ?? 1),
+        name,
+        children: /* @__PURE__ */ jsx25(Html5Audio, {
+          _remotionInternalNeedsDurationCalculation: Boolean(loop),
+          pauseWhenBuffering: shouldPauseWhenBuffering,
+          ...otherProps,
+          ref
+        })
       })
     });
   }
@@ -10214,8 +10545,8 @@ import {
   useCallback as useCallback17,
   useEffect as useEffect17,
   useImperativeHandle as useImperativeHandle6,
-  useMemo as useMemo30,
-  useRef as useRef22,
+  useMemo as useMemo31,
+  useRef as useRef23,
   useState as useState16
 } from "react";
 import { jsx as jsx26 } from "react/jsx-runtime";
@@ -10230,6 +10561,7 @@ var resolveSolidPixelDensity = (pixelDensity) => {
 };
 var solidSchema = {
   ...baseSchema,
+  ...premountSchema,
   color: {
     type: "color",
     default: "transparent",
@@ -10286,7 +10618,7 @@ var SolidInner = ({
     effects,
     overrideId: overrideId ?? null
   });
-  const sourceCanvas = useMemo30(() => {
+  const sourceCanvas = useMemo31(() => {
     if (typeof document === "undefined") {
       return null;
     }
@@ -10354,7 +10686,7 @@ var SolidInner = ({
     cancelRender2,
     memoizedEffects
   ]);
-  const canvasStyle = useMemo30(() => {
+  const canvasStyle = useMemo31(() => {
     return {
       width,
       height,
@@ -10380,7 +10712,12 @@ var SolidOuter = forwardRef8(({
   style,
   name,
   from,
+  premountFor,
+  postmountFor,
+  styleWhilePremounted,
+  styleWhilePostmounted,
   trimBefore,
+  playbackRate,
   freeze,
   hidden,
   showInTimeline,
@@ -10392,42 +10729,69 @@ var SolidOuter = forwardRef8(({
   ...props2
 }, ref) => {
   const memoizedEffectDefinitions = useMemoizedEffectDefinitions(effects);
-  const actualRef = useRef22(null);
+  const actualRef = useRef23(null);
   useImperativeHandle6(ref, () => {
     return actualRef.current;
   }, []);
+  const {
+    effectivePremountFor,
+    effectivePostmountFor,
+    freezeFrame,
+    isPremountingOrPostmounting,
+    premountingActive,
+    postmountingActive,
+    premountingStyle
+  } = usePremounting({
+    from: from ?? 0,
+    durationInFrames: durationInFrames ?? Infinity,
+    premountFor: premountFor ?? null,
+    postmountFor: postmountFor ?? null,
+    style: style ?? null,
+    styleWhilePremounted: styleWhilePremounted ?? null,
+    styleWhilePostmounted: styleWhilePostmounted ?? null,
+    hideWhilePremounted: "opacity"
+  });
   const croppedStyle = useCropStyle({
     cropLeft,
     cropRight,
     cropTop,
     cropBottom,
-    style: style ?? null,
+    style: premountingStyle,
     componentName: "<Solid />"
   });
-  return /* @__PURE__ */ jsx26(Sequence, {
-    layout: "none",
-    from,
-    trimBefore,
-    freeze,
-    hidden,
-    showInTimeline,
-    controls,
-    _remotionInternalEffects: memoizedEffectDefinitions,
-    durationInFrames,
-    name: name ?? "<Solid>",
-    outlineRef: actualRef,
-    _remotionInternalDocumentationLink: "https://www.remotion.dev/docs/solid",
-    ...props2,
-    children: /* @__PURE__ */ jsx26(SolidInner, {
-      reference: actualRef,
-      overrideId: controls?.overrideId ?? null,
-      color,
-      height,
-      width,
-      className,
-      style: croppedStyle ?? undefined,
-      effects,
-      pixelDensity
+  return /* @__PURE__ */ jsx26(Freeze, {
+    frame: freezeFrame,
+    active: isPremountingOrPostmounting,
+    children: /* @__PURE__ */ jsx26(Sequence, {
+      layout: "none",
+      from,
+      trimBefore,
+      playbackRate,
+      freeze,
+      hidden,
+      showInTimeline,
+      controls,
+      _remotionInternalEffects: memoizedEffectDefinitions,
+      durationInFrames,
+      name: name ?? "<Solid>",
+      outlineRef: actualRef,
+      _remotionInternalDocumentationLink: "https://www.remotion.dev/docs/solid",
+      ...props2,
+      _remotionInternalPremountDisplay: effectivePremountFor || null,
+      _remotionInternalPostmountDisplay: effectivePostmountFor || null,
+      _remotionInternalIsPremounting: premountingActive,
+      _remotionInternalIsPostmounting: postmountingActive,
+      children: /* @__PURE__ */ jsx26(SolidInner, {
+        reference: actualRef,
+        overrideId: controls?.overrideId ?? null,
+        color,
+        height,
+        width,
+        className,
+        style: croppedStyle ?? undefined,
+        effects,
+        pixelDensity
+      })
     })
   });
 });
@@ -10442,13 +10806,13 @@ Solid.displayName = "Solid";
 addSequenceStackTraces(Solid);
 // src/HtmlInCanvas.tsx
 import {
-  createContext as createContext25,
+  createContext as createContext26,
   forwardRef as forwardRef9,
   useCallback as useCallback18,
-  useContext as useContext35,
+  useContext as useContext37,
   useLayoutEffect as useLayoutEffect12,
-  useMemo as useMemo31,
-  useRef as useRef23
+  useMemo as useMemo32,
+  useRef as useRef24
 } from "react";
 import { jsx as jsx27 } from "react/jsx-runtime";
 var transferredOffscreenCanvases = new WeakMap;
@@ -10524,7 +10888,7 @@ var defaultOnPaint = ({
   const transform = ctx.drawElementImage(elementImage, 0, 0);
   element.style.transform = transform.toString();
 };
-var HtmlInCanvasAncestorContext = createContext25(false);
+var HtmlInCanvasAncestorContext = createContext26(false);
 var HtmlInCanvasContent = forwardRef9(({
   width,
   height,
@@ -10536,7 +10900,7 @@ var HtmlInCanvasContent = forwardRef9(({
   controls,
   style
 }, ref) => {
-  const isInsideAncestorHtmlInCanvas = useContext35(HtmlInCanvasAncestorContext);
+  const isInsideAncestorHtmlInCanvas = useContext37(HtmlInCanvasAncestorContext);
   assertHtmlInCanvasDimensions(width, height);
   if (isInsideAncestorHtmlInCanvas) {
     throw new Error("<HtmlInCanvas> components cannot be nested. Chrome does not reliably render nested HTML-in-canvas subtrees. Consider merging the effects into one <HtmlInCanvas> if you can.");
@@ -10551,9 +10915,9 @@ var HtmlInCanvasContent = forwardRef9(({
   if (!isHtmlInCanvasSupported()) {
     cancelRender2(new Error(HTML_IN_CANVAS_UNSUPPORTED_MESSAGE));
   }
-  const canvas2dRef = useRef23(null);
-  const paintTargetRef = useRef23(null);
-  const divRef = useRef23(null);
+  const canvas2dRef = useRef24(null);
+  const paintTargetRef = useRef24(null);
+  const divRef = useRef24(null);
   const canvasSizeKey = `${width}x${height}@${resolvedPixelDensity}-${usesDirectLayoutCanvas ? "direct" : "offscreen"}`;
   const setLayoutCanvasRef = useCallback18((node) => {
     canvas2dRef.current = node;
@@ -10568,15 +10932,15 @@ var HtmlInCanvasContent = forwardRef9(({
     effects,
     overrideId: controls?.overrideId ?? null
   });
-  const effectsRef = useRef23(memoizedEffects);
+  const effectsRef = useRef24(memoizedEffects);
   effectsRef.current = memoizedEffects;
-  const onPaintRef = useRef23(onPaint);
+  const onPaintRef = useRef24(onPaint);
   onPaintRef.current = onPaint;
-  const onInitRef = useRef23(onInit);
+  const onInitRef = useRef24(onInit);
   onInitRef.current = onInit;
-  const initializedRef = useRef23(false);
-  const onInitCleanupRef = useRef23(null);
-  const unmountedRef = useRef23(false);
+  const initializedRef = useRef24(false);
+  const onInitCleanupRef = useRef24(null);
+  const unmountedRef = useRef24(false);
   const onPaintCb = useCallback18(async () => {
     const element = divRef.current;
     if (!element) {
@@ -10731,7 +11095,7 @@ var HtmlInCanvasContent = forwardRef9(({
     canvasHeight,
     usesDirectLayoutCanvas
   ]);
-  const onPaintChangedRef = useRef23(false);
+  const onPaintChangedRef = useRef24(false);
   useLayoutEffect12(() => {
     if (!onPaintChangedRef.current) {
       onPaintChangedRef.current = true;
@@ -10756,13 +11120,13 @@ var HtmlInCanvasContent = forwardRef9(({
       continueRender2(handle);
     };
   }, [width, height, continueRender2, delayRender2, canvasSizeKey]);
-  const innerStyle = useMemo31(() => {
+  const innerStyle = useMemo32(() => {
     return {
       width,
       height
     };
   }, [width, height]);
-  const canvasStyle = useMemo31(() => {
+  const canvasStyle = useMemo32(() => {
     return {
       width,
       height,
@@ -10800,11 +11164,15 @@ var HtmlInCanvasInner = forwardRef9(({
   cropTop,
   cropBottom,
   durationInFrames,
+  premountFor,
+  postmountFor,
+  styleWhilePremounted,
+  styleWhilePostmounted,
   name,
   ...sequenceProps
 }, ref) => {
   const memoizedEffectDefinitions = useMemoizedEffectDefinitions(effects);
-  const actualRef = useRef23(null);
+  const actualRef = useRef24(null);
   const setCanvasRef = useCallback18((node) => {
     actualRef.current = node;
     if (typeof ref === "function") {
@@ -10813,40 +11181,67 @@ var HtmlInCanvasInner = forwardRef9(({
       ref.current = node;
     }
   }, [ref]);
+  const {
+    effectivePremountFor,
+    effectivePostmountFor,
+    freezeFrame,
+    isPremountingOrPostmounting,
+    premountingActive,
+    postmountingActive,
+    premountingStyle
+  } = usePremounting({
+    from: sequenceProps.from ?? 0,
+    durationInFrames: durationInFrames ?? Infinity,
+    premountFor: premountFor ?? null,
+    postmountFor: postmountFor ?? null,
+    style: style ?? null,
+    styleWhilePremounted: styleWhilePremounted ?? null,
+    styleWhilePostmounted: styleWhilePostmounted ?? null,
+    hideWhilePremounted: "opacity"
+  });
   const croppedStyle = useCropStyle({
     cropLeft,
     cropRight,
     cropTop,
     cropBottom,
-    style: style ?? null,
+    style: premountingStyle,
     componentName: "<HtmlInCanvas />"
   });
-  return /* @__PURE__ */ jsx27(Sequence, {
-    durationInFrames,
-    name: name ?? "<HtmlInCanvas>",
-    _remotionInternalDocumentationLink: "https://www.remotion.dev/docs/remotion/html-in-canvas",
-    controls,
-    _remotionInternalEffects: memoizedEffectDefinitions,
-    outlineRef: actualRef,
-    layout: "none",
-    ...sequenceProps,
-    children: /* @__PURE__ */ jsx27(HtmlInCanvasContent, {
-      ref: setCanvasRef,
-      width,
-      height,
-      effects,
-      onPaint,
-      onInit,
-      pixelDensity,
+  return /* @__PURE__ */ jsx27(Freeze, {
+    frame: freezeFrame,
+    active: isPremountingOrPostmounting,
+    children: /* @__PURE__ */ jsx27(Sequence, {
+      layout: "none",
+      durationInFrames,
+      name: name ?? "<HtmlInCanvas>",
+      _remotionInternalDocumentationLink: "https://www.remotion.dev/docs/remotion/html-in-canvas",
       controls,
-      style: croppedStyle ?? undefined,
-      children
+      _remotionInternalEffects: memoizedEffectDefinitions,
+      outlineRef: actualRef,
+      ...sequenceProps,
+      _remotionInternalPremountDisplay: effectivePremountFor || null,
+      _remotionInternalPostmountDisplay: effectivePostmountFor || null,
+      _remotionInternalIsPremounting: premountingActive,
+      _remotionInternalIsPostmounting: postmountingActive,
+      children: /* @__PURE__ */ jsx27(HtmlInCanvasContent, {
+        ref: setCanvasRef,
+        width,
+        height,
+        effects,
+        onPaint,
+        onInit,
+        pixelDensity,
+        controls,
+        style: croppedStyle ?? undefined,
+        children
+      })
     })
   });
 });
 HtmlInCanvasInner.displayName = "HtmlInCanvas";
 var htmlInCanvasSchema = {
   ...baseSchema,
+  ...premountSchema,
   pixelDensity: {
     type: "number",
     min: 1,
@@ -10878,11 +11273,11 @@ addSequenceStackTraces(HtmlInCanvas);
 import {
   forwardRef as forwardRef10,
   useCallback as useCallback19,
-  useContext as useContext36,
+  useContext as useContext38,
   useImperativeHandle as useImperativeHandle7,
   useLayoutEffect as useLayoutEffect13,
-  useMemo as useMemo32,
-  useRef as useRef24,
+  useMemo as useMemo33,
+  useRef as useRef25,
   useState as useState17
 } from "react";
 
@@ -10907,7 +11302,7 @@ var canvasImageSchema = {
     description: "Source",
     keyframable: false
   },
-  ...baseSchema,
+  ...baseSchemaWithoutPlaybackRate,
   ...cropSchema,
   ...premountSchema,
   fit: {
@@ -11025,8 +11420,8 @@ var CanvasImageContent = forwardRef10(({
     effects,
     overrideId: controls?.overrideId ?? null
   });
-  const sequenceContext = useContext36(SequenceContext);
-  const pendingLoadDelayRef = useRef24(null);
+  const sequenceContext = useContext38(SequenceContext);
+  const pendingLoadDelayRef = useRef25(null);
   const [isLoadPending, setIsLoadPending] = useState17(false);
   const isPremounting = Boolean(sequenceContext?.premounting);
   const isPostmounting = Boolean(sequenceContext?.postmounting);
@@ -11042,7 +11437,7 @@ var CanvasImageContent = forwardRef10(({
     continueRender2(pending.handle);
     pendingLoadDelayRef.current = null;
   }, [continueRender2]);
-  const sourceCanvas = useMemo32(() => {
+  const sourceCanvas = useMemo33(() => {
     if (typeof document === "undefined") {
       return null;
     }
@@ -11271,12 +11666,12 @@ var CanvasImageInner = forwardRef10(({
   if (!src) {
     throw new Error('No "src" prop was passed to <CanvasImage>.');
   }
-  const isMedia = useMemo32(() => ({
+  const isMedia = useMemo33(() => ({
     type: "image",
     src
   }), [src]);
   const memoizedEffectDefinitions = useMemoizedEffectDefinitions(effects);
-  const actualRef = useRef24(null);
+  const actualRef = useRef25(null);
   useImperativeHandle7(ref, () => {
     return actualRef.current;
   }, []);
@@ -11429,10 +11824,10 @@ var IFrame = forwardRef11(IFrameRefForwarding);
 // src/Img.tsx
 import {
   useCallback as useCallback21,
-  useContext as useContext37,
+  useContext as useContext39,
   useLayoutEffect as useLayoutEffect14,
-  useMemo as useMemo33,
-  useRef as useRef25,
+  useMemo as useMemo34,
+  useRef as useRef26,
   useState as useState19
 } from "react";
 import { jsx as jsx30 } from "react/jsx-runtime";
@@ -11454,10 +11849,10 @@ var ImgContent = ({
   refForOutline,
   ...props2
 }) => {
-  const imageRef = useRef25(null);
-  const errors = useRef25({});
+  const imageRef = useRef26(null);
+  const errors = useRef26({});
   const { delayPlayback } = useBufferState();
-  const sequenceContext = useContext37(SequenceContext);
+  const sequenceContext = useContext39(SequenceContext);
   const [isLoading, setIsLoading] = useState19(false);
   const _propsValid = true;
   if (!_propsValid) {
@@ -11624,7 +12019,7 @@ var NativeImgInner = ({
   if (!src) {
     throw new Error('No "src" prop was passed to <Img>.');
   }
-  const isMedia = useMemo33(() => ({
+  const isMedia = useMemo34(() => ({
     type: "image",
     src
   }), [src]);
@@ -11692,7 +12087,7 @@ var imgSchema = {
     description: "Source",
     keyframable: false
   },
-  ...baseSchema,
+  ...baseSchemaWithoutPlaybackRate,
   ...cropSchema,
   ...premountSchema,
   ...transformSchema,
@@ -11773,7 +12168,7 @@ var ImgInner = ({
   onImageError,
   ...props2
 }) => {
-  const refForOutline = useRef25(null);
+  const refForOutline = useRef26(null);
   const shouldPauseWhenLoading = resolveV5Default(pauseWhenLoading);
   if (effects.length === 0) {
     return /* @__PURE__ */ jsx30(NativeImgInner, {
@@ -11867,7 +12262,7 @@ var Img = withInteractivitySchema({
 });
 addSequenceStackTraces(Img);
 // src/Interactive.tsx
-import React33, { forwardRef as forwardRef12, useCallback as useCallback22, useRef as useRef26 } from "react";
+import React33, { forwardRef as forwardRef12, useCallback as useCallback22, useRef as useRef27 } from "react";
 import { jsx as jsx31 } from "react/jsx-runtime";
 var sourcePathToIdentityPrefix = (packageName) => {
   if (packageName === "remotion") {
@@ -11887,6 +12282,7 @@ var makeRemotionComponentIdentity = ({
 };
 var interactiveElementSchema = {
   ...baseSchema,
+  ...premountSchema,
   ...transformSchema,
   ...cropSchema
 };
@@ -11914,6 +12310,15 @@ var interactiveSvgElementSchema = {
   ...interactiveElementSchema,
   ...svgPaintSchema
 };
+var interactiveSvgPathElementSchema = {
+  ...interactiveSvgElementSchema,
+  d: {
+    type: "svg-path",
+    default: undefined,
+    description: "Path",
+    keyframable: false
+  }
+};
 var interactiveSvgStrokeElementSchema = {
   ...interactiveElementSchema,
   ...svgStrokeSchema
@@ -11939,7 +12344,12 @@ var makeInteractiveElement = (tag, displayName, schema) => {
     const {
       durationInFrames,
       from,
+      premountFor,
+      postmountFor,
+      styleWhilePremounted,
+      styleWhilePostmounted,
       trimBefore,
+      playbackRate,
       freeze,
       hidden,
       name,
@@ -11952,35 +12362,62 @@ var makeInteractiveElement = (tag, displayName, schema) => {
       style,
       ...props2
     } = propsWithControls;
+    const {
+      effectivePremountFor,
+      effectivePostmountFor,
+      freezeFrame,
+      isPremountingOrPostmounting,
+      premountingActive,
+      postmountingActive,
+      premountingStyle
+    } = usePremounting({
+      from: from ?? 0,
+      durationInFrames: durationInFrames ?? Infinity,
+      premountFor: premountFor ?? null,
+      postmountFor: postmountFor ?? null,
+      style: style ?? null,
+      styleWhilePremounted: styleWhilePremounted ?? null,
+      styleWhilePostmounted: styleWhilePostmounted ?? null,
+      hideWhilePremounted: "opacity"
+    });
     const croppedStyle = useCropStyle({
       cropLeft,
       cropRight,
       cropTop,
       cropBottom,
-      style: style ?? null,
+      style: premountingStyle,
       componentName: displayName
     });
-    const refForOutline = useRef26(null);
+    const refForOutline = useRef27(null);
     const callbackRef = useCallback22((element) => {
       refForOutline.current = element;
       setRef2(ref, element);
     }, [ref]);
-    return /* @__PURE__ */ jsx31(Sequence, {
-      layout: "none",
-      from: from ?? 0,
-      trimBefore,
-      durationInFrames: durationInFrames ?? Infinity,
-      freeze,
-      hidden,
-      name: name ?? displayName,
-      showInTimeline: showInTimeline ?? true,
-      controls,
-      _remotionInternalDocumentationLink: "https://www.remotion.dev/docs/interactive",
-      outlineRef: refForOutline,
-      children: React33.createElement(tag, {
-        ...props2,
-        style: croppedStyle ?? undefined,
-        ref: callbackRef
+    return /* @__PURE__ */ jsx31(Freeze, {
+      frame: freezeFrame,
+      active: isPremountingOrPostmounting,
+      children: /* @__PURE__ */ jsx31(Sequence, {
+        layout: "none",
+        from: from ?? 0,
+        trimBefore,
+        playbackRate,
+        durationInFrames: durationInFrames ?? Infinity,
+        freeze,
+        hidden,
+        name: name ?? displayName,
+        showInTimeline: showInTimeline ?? true,
+        controls,
+        _remotionInternalDocumentationLink: "https://www.remotion.dev/docs/interactive",
+        outlineRef: refForOutline,
+        _remotionInternalPremountDisplay: effectivePremountFor || null,
+        _remotionInternalPostmountDisplay: effectivePostmountFor || null,
+        _remotionInternalIsPremounting: premountingActive,
+        _remotionInternalIsPostmounting: postmountingActive,
+        children: React33.createElement(tag, {
+          ...props2,
+          style: croppedStyle ?? undefined,
+          ref: callbackRef
+        })
       })
     });
   });
@@ -12047,7 +12484,7 @@ var Interactive = {
   Nav: makeInteractiveTextElement("nav", "<Interactive.Nav>"),
   Ol: makeInteractiveTextElement("ol", "<Interactive.Ol>"),
   P: makeInteractiveTextElement("p", "<Interactive.P>"),
-  Path: makeInteractiveSvgElement("path", "<Interactive.Path>"),
+  Path: makeInteractiveElement("path", "<Interactive.Path>", interactiveSvgPathElementSchema),
   Pre: makeInteractiveTextElement("pre", "<Interactive.Pre>"),
   Rect: makeInteractiveSvgElement("rect", "<Interactive.Rect>"),
   Section: makeInteractiveTextElement("section", "<Interactive.Section>"),
@@ -12102,8 +12539,8 @@ import {
   useEffect as useEffect18,
   useImperativeHandle as useImperativeHandle8,
   useLayoutEffect as useLayoutEffect15,
-  useMemo as useMemo34,
-  useRef as useRef27,
+  useMemo as useMemo35,
+  useRef as useRef28,
   useState as useState20
 } from "react";
 import { jsx as jsx32 } from "react/jsx-runtime";
@@ -12117,21 +12554,21 @@ var CompositionManagerProvider = ({
 }) => {
   const { isStudio } = useRemotionEnvironment();
   const [compositionManagerId] = useState20(() => String(Math.random()));
-  const committedOrderRef = useRef27(null);
-  const committedOrderIdsRef = useRef27(null);
-  const internalOrderRef = useRef27(new Map(initialCompositions.map((composition, index) => [
+  const committedOrderRef = useRef28(null);
+  const committedOrderIdsRef = useRef28(null);
+  const internalOrderRef = useRef28(new Map(initialCompositions.map((composition, index) => [
     getCompositionAndFolderOrderKey({
       type: "composition",
       id: composition.id
     }),
     index
   ])));
-  const nextInternalOrderRef = useRef27(initialCompositions.length);
+  const nextInternalOrderRef = useRef28(initialCompositions.length);
   const [folders, setFolders] = useState20([]);
   const [canvasContent, setCanvasContent] = useState20(initialCanvasContent);
   const [currentAssetMetadata, setCurrentAssetMetadata] = useState20(null);
   const [compositions, setCompositions] = useState20(() => initialCompositions.map((composition, order) => ({ ...composition, order })));
-  const currentcompositionsRef = useRef27(compositions);
+  const currentcompositionsRef = useRef28(compositions);
   const updateCompositions = useCallback23((updateComps) => {
     setCompositions((comps) => {
       const updated = updateComps(comps);
@@ -12265,7 +12702,7 @@ var CompositionManagerProvider = ({
       getCompositions: () => currentcompositionsRef.current
     };
   }, []);
-  const compositionManagerSetters = useMemo34(() => {
+  const compositionManagerSetters = useMemo35(() => {
     return {
       registerComposition,
       unregisterComposition,
@@ -12282,7 +12719,7 @@ var CompositionManagerProvider = ({
     unregisterFolder,
     onlyRenderComposition
   ]);
-  const compositionManagerContextValue = useMemo34(() => {
+  const compositionManagerContextValue = useMemo35(() => {
     return {
       compositions,
       folders,
@@ -12527,7 +12964,7 @@ var waitForRoot = (fn) => {
 };
 
 // src/RemotionRoot.tsx
-import { useMemo as useMemo35 } from "react";
+import { useMemo as useMemo36 } from "react";
 import { jsx as jsx33 } from "react/jsx-runtime";
 var RemotionRootContexts = ({
   children,
@@ -12540,7 +12977,7 @@ var RemotionRootContexts = ({
   frameState,
   _experimentalKeepAudioContextAlive
 }) => {
-  const logging = useMemo35(() => {
+  const logging = useMemo36(() => {
     return { logLevel, mountTime: Date.now() };
   }, [logLevel]);
   return /* @__PURE__ */ jsx33(LogLevelContext.Provider, {
@@ -12839,7 +13276,7 @@ var setupEnvVariables = () => {
 };
 
 // src/use-pixel-density.ts
-import React39, { useContext as useContext38 } from "react";
+import React39, { useContext as useContext40 } from "react";
 var PixelDensityContext = React39.createContext(null);
 var getBrowserPixelDensity = () => {
   if (typeof window === "undefined") {
@@ -12848,8 +13285,8 @@ var getBrowserPixelDensity = () => {
   return window.devicePixelRatio || 1;
 };
 var usePixelDensity = (options) => {
-  const pixelDensity = useContext38(PixelDensityContext);
-  const canUseRemotionHooks = useContext38(CanUseRemotionHooks);
+  const pixelDensity = useContext40(PixelDensityContext);
+  const canUseRemotionHooks = useContext40(CanUseRemotionHooks);
   if (pixelDensity !== null) {
     return pixelDensity;
   }
@@ -12871,10 +13308,10 @@ import { useCallback as useCallback26 } from "react";
 // src/video/OffthreadVideoForRendering.tsx
 import {
   useCallback as useCallback24,
-  useContext as useContext39,
+  useContext as useContext41,
   useEffect as useEffect19,
   useLayoutEffect as useLayoutEffect16,
-  useMemo as useMemo36,
+  useMemo as useMemo37,
   useState as useState21
 } from "react";
 
@@ -12914,13 +13351,14 @@ var OffthreadVideoForRendering = ({
   const frame = useCurrentFrame();
   const volumePropsFrame = useFrameForVolumeProp(loopVolumeCurveBehavior);
   const videoConfig = useUnsafeVideoConfig();
-  const sequenceContext = useContext39(SequenceContext);
-  const mediaStartsAt = useMediaStartsAt();
-  const { registerRenderAsset, unregisterRenderAsset } = useContext39(RenderAssetManager);
+  const sequenceContext = useContext41(SequenceContext);
+  const sequencePlaybackRate = sequenceContext?.playbackRate ?? 1;
+  const audioStartFrame = useContext41(Html5MediaTrimContext);
+  const { registerRenderAsset, unregisterRenderAsset } = useContext41(RenderAssetManager);
   if (!src) {
     throw new TypeError("No `src` was passed to <OffthreadVideo>.");
   }
-  const id = useMemo36(() => `offthreadvideo-${random(src)}-${sequenceContext?.cumulatedFrom}-${sequenceContext?.relativeFrom}-${sequenceContext?.durationInFrames}`, [
+  const id = useMemo37(() => `offthreadvideo-${random(src)}-${sequenceContext?.cumulatedFrom}-${sequenceContext?.relativeFrom}-${sequenceContext?.durationInFrames}`, [
     src,
     sequenceContext?.cumulatedFrom,
     sequenceContext?.relativeFrom,
@@ -12954,10 +13392,10 @@ var OffthreadVideoForRendering = ({
       id,
       frame: absoluteFrame,
       volume,
-      mediaFrame: frame,
-      playbackRate,
+      mediaFrame: audioStartFrame + (frame - audioStartFrame) / sequencePlaybackRate,
+      playbackRate: playbackRate * sequencePlaybackRate,
       toneFrequency,
-      audioStartFrame: Math.max(0, -(sequenceContext?.cumulatedNegativeFrom ?? 0)),
+      audioStartFrame,
       audioStreamIndex
     });
     return () => unregisterRenderAsset(id);
@@ -12972,17 +13410,18 @@ var OffthreadVideoForRendering = ({
     absoluteFrame,
     playbackRate,
     toneFrequency,
-    sequenceContext?.cumulatedNegativeFrom,
+    audioStartFrame,
+    sequencePlaybackRate,
     audioStreamIndex
   ]);
-  const currentTime = useMemo36(() => {
+  const currentTime = useMemo37(() => {
     return getExpectedMediaFrameUncorrected({
       frame,
       playbackRate: playbackRate || 1,
-      startFrom: -mediaStartsAt
+      startFrom: audioStartFrame
     }) / videoConfig.fps;
-  }, [frame, mediaStartsAt, playbackRate, videoConfig.fps]);
-  const actualSrc = useMemo36(() => {
+  }, [frame, audioStartFrame, playbackRate, videoConfig.fps]);
+  const actualSrc = useMemo37(() => {
     return getOffthreadVideoSource({
       src,
       currentTime,
@@ -13070,7 +13509,7 @@ var OffthreadVideoForRendering = ({
       cancelRender("Failed to load image with src " + imageSrc);
     }
   }, [imageSrc, onError]);
-  const className = useMemo36(() => {
+  const className = useMemo37(() => {
     return [OBJECTFIT_CONTAIN_CLASS_NAME, props2.className].filter(truthy).join(" ");
   }, [props2.className]);
   const onImageFrame = useCallback24((img) => {
@@ -13097,11 +13536,11 @@ var OffthreadVideoForRendering = ({
 import React41, {
   forwardRef as forwardRef13,
   useCallback as useCallback25,
-  useContext as useContext40,
+  useContext as useContext42,
   useEffect as useEffect21,
   useImperativeHandle as useImperativeHandle9,
-  useMemo as useMemo37,
-  useRef as useRef28,
+  useMemo as useMemo38,
+  useRef as useRef29,
   useState as useState22
 } from "react";
 
@@ -13153,12 +13592,12 @@ class MediaPlaybackError extends Error {
 // src/video/VideoForPreview.tsx
 import { jsx as jsx35 } from "react/jsx-runtime";
 var VideoForDevelopmentRefForwardingFunction = (props2, ref) => {
-  const context = useContext40(SharedAudioContext);
+  const context = useContext42(SharedAudioContext);
   if (!context) {
     throw new Error("SharedAudioContext not found");
   }
-  const videoRef = useRef28(null);
-  const sharedSource = useMemo37(() => {
+  const videoRef = useRef29(null);
+  const sharedSource = useMemo38(() => {
     if (!context.audioContext) {
       return null;
     }
@@ -13210,7 +13649,7 @@ var VideoForDevelopmentRefForwardingFunction = (props2, ref) => {
   }
   const volumePropFrame = useFrameForVolumeProp(loopVolumeCurveBehavior ?? "repeat");
   const { fps, durationInFrames } = useVideoConfig();
-  const parentSequence = useContext40(SequenceContext);
+  const parentSequence = useContext42(SequenceContext);
   const { isStudio } = useRemotionEnvironment();
   const logLevel = useLogLevel();
   const mountTime = useMountTime();
@@ -13246,6 +13685,7 @@ var VideoForDevelopmentRefForwardingFunction = (props2, ref) => {
     premountDisplay: parentSequence?.premountDisplay ?? null,
     postmountDisplay: parentSequence?.postmountDisplay ?? null,
     loopDisplay: undefined,
+    loopVolumeCurveBehavior: loopVolumeCurveBehavior ?? "repeat",
     documentationLink: onlyWarnForMediaSeekingError ? "https://www.remotion.dev/docs/offthreadvideo" : "https://www.remotion.dev/docs/html5-video",
     refForOutline: videoRef,
     muted: isMutedForTimeline
@@ -13336,7 +13776,7 @@ var VideoForDevelopmentRefForwardingFunction = (props2, ref) => {
       current.removeEventListener("error", errorHandler);
     };
   }, [onError, src]);
-  const currentOnDurationCallback = useRef28(onDuration);
+  const currentOnDurationCallback = useRef29(onDuration);
   currentOnDurationCallback.current = onDuration;
   useEmitVideoFrame({ ref: videoRef, onVideoFrame });
   useEffect21(() => {
@@ -13367,7 +13807,7 @@ var VideoForDevelopmentRefForwardingFunction = (props2, ref) => {
       current.preload = "auto";
     }
   }, []);
-  const actualStyle = useMemo37(() => {
+  const actualStyle = useMemo38(() => {
     return {
       ...style
     };
@@ -13429,22 +13869,25 @@ var InnerOffthreadVideo = (props2) => {
     trimAfter
   });
   if (typeof trimBeforeValue !== "undefined" || typeof trimAfterValue !== "undefined") {
-    return /* @__PURE__ */ jsx36(Sequence, {
-      layout: "none",
-      from: 0 - (trimBeforeValue ?? 0),
-      showInTimeline: false,
-      durationInFrames: trimAfterValue,
-      name,
-      children: /* @__PURE__ */ jsx36(InnerOffthreadVideo, {
-        pauseWhenBuffering: shouldPauseWhenBuffering,
-        ...otherProps,
-        trimAfter: undefined,
-        name: undefined,
-        showInTimeline,
-        trimBefore: undefined,
-        _remotionInternalStack: undefined,
-        startFrom: undefined,
-        endAt: undefined
+    return /* @__PURE__ */ jsx36(Html5MediaTrimContext.Provider, {
+      value: trimBeforeValue ?? 0,
+      children: /* @__PURE__ */ jsx36(Sequence, {
+        layout: "none",
+        from: 0 - (trimBeforeValue ?? 0),
+        showInTimeline: false,
+        durationInFrames: trimAfterValue === undefined ? undefined : (trimBeforeValue ?? 0) + (trimAfterValue - (trimBeforeValue ?? 0)) / (props2.playbackRate ?? 1),
+        name,
+        children: /* @__PURE__ */ jsx36(InnerOffthreadVideo, {
+          pauseWhenBuffering: shouldPauseWhenBuffering,
+          ...otherProps,
+          trimAfter: undefined,
+          name: undefined,
+          showInTimeline,
+          trimBefore: undefined,
+          _remotionInternalStack: undefined,
+          startFrom: undefined,
+          endAt: undefined
+        })
       })
     });
   }
@@ -13594,7 +14037,7 @@ var watchStaticFile = (fileName, callback) => {
 };
 
 // src/wrap-remotion-context.tsx
-import React43, { useMemo as useMemo38 } from "react";
+import React43, { useMemo as useMemo39 } from "react";
 import { jsx as jsx37 } from "react/jsx-runtime";
 function useRemotionContexts() {
   const compositionManagerCtx = React43.useContext(CompositionManager);
@@ -13610,7 +14053,7 @@ function useRemotionContexts() {
   const visualModePropStatusesRefContext = React43.useContext(VisualModePropStatusesRefContext);
   const bufferManagerContext = React43.useContext(BufferingContextReact);
   const logLevelContext = React43.useContext(LogLevelContext);
-  return useMemo38(() => ({
+  return useMemo39(() => ({
     compositionManagerCtx,
     timelineContext,
     setTimelineContext,
@@ -13826,6 +14269,7 @@ var Internals = {
   useAudioEnabled,
   useBuffering,
   TimelinePosition: exports_timeline_position_state,
+  useTimelineSeek,
   DelayRenderContextType,
   TimelineContext,
   usePlaying,
@@ -13868,7 +14312,7 @@ var fontDataByUrl = new Map;
 // src/series/index.tsx
 import React45, {
   forwardRef as forwardRef14,
-  useMemo as useMemo39
+  useMemo as useMemo40
 } from "react";
 
 // src/series/flatten-children.tsx
@@ -13893,6 +14337,7 @@ var seriesSequenceSchema = {
   showInTimeline: Interactive.sequenceSchema.showInTimeline,
   freeze: Interactive.baseSchema.freeze,
   trimBefore: Interactive.sequenceSchema.trimBefore,
+  playbackRate: Interactive.sequenceSchema.playbackRate,
   layout: Interactive.sequenceSchema.layout
 };
 var SeriesSequenceInner = forwardRef14(({ offset = 0, className = "", _remotionInternalRender = null, ...props2 }, ref) => {
@@ -13938,7 +14383,7 @@ var validateSeriesSequenceProps = ({
   return offset;
 };
 var SeriesInner = (props2) => {
-  const childrenValue = useMemo39(() => {
+  const childrenValue = useMemo40(() => {
     const flattenedChildren = flattenChildren(props2.children);
     const renderChildren = (i, startFrame) => {
       if (i === flattenedChildren.length) {
@@ -14132,17 +14577,17 @@ var Still = (props2) => {
 };
 addSequenceStackTraces(Still);
 // src/video/html5-video.tsx
-import { forwardRef as forwardRef16, useCallback as useCallback27, useContext as useContext42 } from "react";
+import { forwardRef as forwardRef16, useCallback as useCallback27, useContext as useContext44 } from "react";
 
 // src/video/VideoForRendering.tsx
 import {
   forwardRef as forwardRef15,
-  useContext as useContext41,
+  useContext as useContext43,
   useEffect as useEffect22,
   useImperativeHandle as useImperativeHandle10,
   useLayoutEffect as useLayoutEffect17,
-  useMemo as useMemo40,
-  useRef as useRef29
+  useMemo as useMemo41,
+  useRef as useRef30
 } from "react";
 
 // src/video/seek-until-right.ts
@@ -14292,15 +14737,16 @@ var VideoForRenderingForwardFunction = ({
   const frame = useCurrentFrame();
   const volumePropsFrame = useFrameForVolumeProp(loopVolumeCurveBehavior ?? "repeat");
   const videoConfig = useUnsafeVideoConfig();
-  const videoRef = useRef29(null);
-  const sequenceContext = useContext41(SequenceContext);
-  const mediaStartsAt = useMediaStartsAt();
+  const videoRef = useRef30(null);
+  const sequenceContext = useContext43(SequenceContext);
+  const sequencePlaybackRate = sequenceContext?.playbackRate ?? 1;
+  const audioStartFrame = useContext43(Html5MediaTrimContext);
   const environment = useRemotionEnvironment();
   const logLevel = useLogLevel();
   const mountTime = useMountTime();
   const { delayRender: delayRender2, continueRender: continueRender2 } = useDelayRender();
-  const { registerRenderAsset, unregisterRenderAsset } = useContext41(RenderAssetManager);
-  const id = useMemo40(() => `video-${random(props2.src ?? "")}-${sequenceContext?.cumulatedFrom}-${sequenceContext?.relativeFrom}-${sequenceContext?.durationInFrames}`, [
+  const { registerRenderAsset, unregisterRenderAsset } = useContext43(RenderAssetManager);
+  const id = useMemo41(() => `video-${random(props2.src ?? "")}-${sequenceContext?.cumulatedFrom}-${sequenceContext?.relativeFrom}-${sequenceContext?.durationInFrames}`, [
     props2.src,
     sequenceContext?.cumulatedFrom,
     sequenceContext?.relativeFrom,
@@ -14334,10 +14780,10 @@ var VideoForRenderingForwardFunction = ({
       id,
       frame: absoluteFrame,
       volume,
-      mediaFrame: frame,
-      playbackRate: playbackRate ?? 1,
+      mediaFrame: audioStartFrame + (frame - audioStartFrame) / sequencePlaybackRate,
+      playbackRate: (playbackRate ?? 1) * sequencePlaybackRate,
       toneFrequency: toneFrequency ?? 1,
-      audioStartFrame: Math.max(0, -(sequenceContext?.cumulatedNegativeFrom ?? 0)),
+      audioStartFrame,
       audioStreamIndex: audioStreamIndex ?? 0
     });
     return () => unregisterRenderAsset(id);
@@ -14352,7 +14798,8 @@ var VideoForRenderingForwardFunction = ({
     absoluteFrame,
     playbackRate,
     toneFrequency,
-    sequenceContext?.cumulatedNegativeFrom,
+    audioStartFrame,
+    sequencePlaybackRate,
     audioStreamIndex
   ]);
   useImperativeHandle10(ref, () => {
@@ -14370,7 +14817,7 @@ var VideoForRenderingForwardFunction = ({
     const currentTime = getMediaTime({
       frame,
       playbackRate: playbackRate || 1,
-      startFrom: -mediaStartsAt,
+      startFrom: audioStartFrame,
       fps: videoConfig.fps
     });
     const handle = delayRender2(`Rendering <Html5Video /> with src="${props2.src}" at time ${currentTime}`, {
@@ -14438,7 +14885,7 @@ var VideoForRenderingForwardFunction = ({
     playbackRate,
     videoConfig.fps,
     frame,
-    mediaStartsAt,
+    audioStartFrame,
     onError,
     delayRenderRetries,
     delayRenderTimeoutInMilliseconds,
@@ -14515,7 +14962,7 @@ var VideoForwardingFunction = (props2, ref) => {
   if (environment.isClientSideRendering) {
     throw new Error("<Html5Video> is not supported in @remotion/web-renderer. Use <Video> from @remotion/media instead. See https://remotion.dev/docs/client-side-rendering/limitations");
   }
-  const { durations, setDurations } = useContext42(DurationsContext);
+  const { durations, setDurations } = useContext44(DurationsContext);
   if (typeof ref === "string") {
     throw new Error("string refs are not supported");
   }
@@ -14534,8 +14981,9 @@ var VideoForwardingFunction = (props2, ref) => {
     trimBefore,
     trimAfter
   });
-  if (loop && durationFetched !== undefined) {
-    if (!Number.isFinite(durationFetched)) {
+  const loopDuration = trimAfterValue ?? (durationFetched === undefined ? undefined : durationFetched * fps);
+  if (loop && loopDuration !== undefined) {
+    if (!Number.isFinite(loopDuration)) {
       return /* @__PURE__ */ jsx40(Html5Video, {
         ...propsOtherThanLoop,
         ref,
@@ -14543,11 +14991,10 @@ var VideoForwardingFunction = (props2, ref) => {
         _remotionInternalNativeLoopPassed: true
       });
     }
-    const mediaDuration = durationFetched * fps;
     return /* @__PURE__ */ jsx40(Loop, {
       durationInFrames: calculateMediaDuration({
         trimAfter: trimAfterValue,
-        mediaDurationInFrames: mediaDuration,
+        mediaDurationInFrames: loopDuration,
         playbackRate: props2.playbackRate ?? 1,
         trimBefore: trimBeforeValue
       }),
@@ -14563,18 +15010,21 @@ var VideoForwardingFunction = (props2, ref) => {
     });
   }
   if (typeof trimBeforeValue !== "undefined" || typeof trimAfterValue !== "undefined") {
-    return /* @__PURE__ */ jsx40(Sequence, {
-      layout: "none",
-      from: 0 - (trimBeforeValue ?? 0),
-      showInTimeline: false,
-      durationInFrames: trimAfterValue === undefined ? undefined : trimAfterValue / (props2.playbackRate ?? 1),
-      name,
-      children: /* @__PURE__ */ jsx40(Html5Video, {
-        pauseWhenBuffering: shouldPauseWhenBuffering,
-        onVideoFrame,
-        ...otherProps,
-        ref,
-        _remotionInternalStack
+    return /* @__PURE__ */ jsx40(Html5MediaTrimContext.Provider, {
+      value: trimBeforeValue ?? 0,
+      children: /* @__PURE__ */ jsx40(Sequence, {
+        layout: "none",
+        from: 0 - (trimBeforeValue ?? 0),
+        showInTimeline: false,
+        durationInFrames: trimAfterValue === undefined ? undefined : (trimBeforeValue ?? 0) + (trimAfterValue - (trimBeforeValue ?? 0)) / (props2.playbackRate ?? 1),
+        name,
+        children: /* @__PURE__ */ jsx40(Html5Video, {
+          pauseWhenBuffering: shouldPauseWhenBuffering,
+          onVideoFrame,
+          ...otherProps,
+          ref,
+          _remotionInternalStack
+        })
       })
     });
   }