remotion 4.0.526 → 4.0.528

package/dist/cjs/interactivity-schema.d.ts

@@ -8,6 +8,7 @@ export type NumberFieldSchema = {
     min?: number;
     max?: number;
     step?: number;
+    integer?: boolean;
     default: number | null | undefined;
     description?: string;
     hiddenFromList: boolean;
@@ -91,6 +92,12 @@ export type TextContentFieldSchema = {
     description?: string;
     keyframable?: false;
 };
+export type SvgPathFieldSchema = {
+    type: 'svg-path';
+    default: string | undefined;
+    description?: string;
+    keyframable?: false;
+};
 export type FontFamilyFieldSchema = {
     type: 'font-family';
     default: string | undefined;
@@ -145,7 +152,7 @@ export type CaptionsFieldSchema = {
     description?: string;
     keyframable: false;
 };
-export type VisibleFieldSchema = NumberFieldSchema | BooleanFieldSchema | RotationCssFieldSchema | RotationDegreesFieldSchema | TranslateFieldSchema | TransformOriginFieldSchema | ScaleFieldSchema | UvCoordinateFieldSchema | ColorFieldSchema | TextContentFieldSchema | FontFamilyFieldSchema | FontWeightFieldSchema | AssetFieldSchema | ArrayFieldSchema | CaptionsFieldSchema | EnumFieldSchema;
+export type VisibleFieldSchema = NumberFieldSchema | BooleanFieldSchema | RotationCssFieldSchema | RotationDegreesFieldSchema | TranslateFieldSchema | TransformOriginFieldSchema | ScaleFieldSchema | UvCoordinateFieldSchema | ColorFieldSchema | TextContentFieldSchema | SvgPathFieldSchema | FontFamilyFieldSchema | FontWeightFieldSchema | AssetFieldSchema | ArrayFieldSchema | CaptionsFieldSchema | EnumFieldSchema;
 export type InteractivitySchemaField = VisibleFieldSchema | HiddenFieldSchema;
 export type InteractivitySchema = {
     [key: string]: InteractivitySchemaField;
@@ -756,6 +763,46 @@ export declare const freezeField: {
     readonly hiddenFromList: true;
 };
 export declare const baseSchema: {
+    readonly durationInFrames: {
+        readonly type: "number";
+        readonly default: undefined;
+        readonly min: 1;
+        readonly step: 1;
+        readonly hiddenFromList: true;
+    };
+    readonly from: {
+        readonly type: "number";
+        readonly default: 0;
+        readonly step: 1;
+        readonly hiddenFromList: true;
+    };
+    readonly trimBefore: {
+        readonly type: "number";
+        readonly default: 0;
+        readonly min: 0;
+        readonly step: 1;
+        readonly hiddenFromList: true;
+    };
+    readonly playbackRate: {
+        readonly type: "number";
+        readonly default: 1;
+        readonly min: 0.01;
+        readonly step: 0.1;
+        readonly description: "Playback rate";
+        readonly hiddenFromList: false;
+        readonly keyframable: false;
+    };
+    readonly freeze: {
+        readonly type: "number";
+        readonly default: null;
+        readonly step: 1;
+        readonly hiddenFromList: true;
+    };
+    readonly hidden: BooleanFieldSchema;
+    readonly name: HiddenFieldSchema;
+    readonly showInTimeline: HiddenFieldSchema;
+};
+export declare const baseSchemaWithoutPlaybackRate: {
     readonly durationInFrames: {
         readonly type: "number";
         readonly default: undefined;
@@ -807,6 +854,15 @@ export declare const sequenceSchema: {
         readonly step: 1;
         readonly hiddenFromList: true;
     };
+    readonly playbackRate: {
+        readonly type: "number";
+        readonly default: 1;
+        readonly min: 0.01;
+        readonly step: 0.1;
+        readonly description: "Playback rate";
+        readonly hiddenFromList: false;
+        readonly keyframable: false;
+    };
     readonly freeze: {
         readonly type: "number";
         readonly default: null;
@@ -1010,6 +1066,15 @@ export declare const baseSchemaWithoutFrom: {
         readonly step: 1;
         readonly hiddenFromList: true;
     };
+    readonly playbackRate: {
+        readonly type: "number";
+        readonly default: 1;
+        readonly min: 0.01;
+        readonly step: 0.1;
+        readonly description: "Playback rate";
+        readonly hiddenFromList: false;
+        readonly keyframable: false;
+    };
     readonly freeze: {
         readonly type: "number";
         readonly default: null;
@@ -1035,6 +1100,15 @@ export declare const sequenceSchemaWithoutFrom: {
         readonly step: 1;
         readonly hiddenFromList: true;
     };
+    readonly playbackRate: {
+        readonly type: "number";
+        readonly default: 1;
+        readonly min: 0.01;
+        readonly step: 0.1;
+        readonly description: "Playback rate";
+        readonly hiddenFromList: false;
+        readonly keyframable: false;
+    };
     readonly freeze: {
         readonly type: "number";
         readonly default: null;

package/dist/cjs/interactivity-schema.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.sequenceSchemaDefaultLayoutNone = exports.sequenceSchemaWithoutFrom = exports.baseSchemaWithoutFrom = exports.sequenceSchema = exports.baseSchema = exports.freezeField = exports.trimBeforeField = exports.fromField = exports.durationInFramesField = exports.extendSchemaWithSequenceName = exports.sequenceNameField = exports.hiddenField = exports.sequenceStyleSchema = exports.sequenceCropSchema = exports.cropSchema = exports.sequencePremountSchema = exports.premountSchema = exports.textContentSchema = exports.svgPaintSchema = exports.svgStrokeSchema = exports.backgroundSchema = exports.borderRadiusSchema = exports.borderSchema = exports.textSchema = exports.sequenceVisualStyleSchema = exports.transformSchema = exports.captionsSchema = void 0;
+exports.sequenceSchemaDefaultLayoutNone = exports.sequenceSchemaWithoutFrom = exports.baseSchemaWithoutFrom = exports.sequenceSchema = exports.baseSchemaWithoutPlaybackRate = exports.baseSchema = exports.freezeField = exports.trimBeforeField = exports.fromField = exports.durationInFramesField = exports.extendSchemaWithSequenceName = exports.sequenceNameField = exports.hiddenField = exports.sequenceStyleSchema = exports.sequenceCropSchema = exports.cropSchema = exports.sequencePremountSchema = exports.premountSchema = exports.textContentSchema = exports.svgPaintSchema = exports.svgStrokeSchema = exports.backgroundSchema = exports.borderRadiusSchema = exports.borderSchema = exports.textSchema = exports.sequenceVisualStyleSchema = exports.transformSchema = exports.captionsSchema = void 0;
 exports.captionsSchema = {
     captions: {
         type: 'remotion-captions',
@@ -353,7 +353,26 @@ exports.freezeField = {
     step: 1,
     hiddenFromList: true,
 };
+const playbackRateField = {
+    type: 'number',
+    default: 1,
+    min: 0.01,
+    step: 0.1,
+    description: 'Playback rate',
+    hiddenFromList: false,
+    keyframable: false,
+};
 exports.baseSchema = {
+    durationInFrames: exports.durationInFramesField,
+    from: exports.fromField,
+    trimBefore: exports.trimBeforeField,
+    playbackRate: playbackRateField,
+    freeze: exports.freezeField,
+    hidden: exports.hiddenField,
+    name: exports.sequenceNameField,
+    showInTimeline: showInTimelineField,
+};
+exports.baseSchemaWithoutPlaybackRate = {
     durationInFrames: exports.durationInFramesField,
     from: exports.fromField,
     trimBefore: exports.trimBeforeField,
@@ -377,6 +396,7 @@ exports.sequenceSchema = {
 exports.baseSchemaWithoutFrom = {
     durationInFrames: exports.durationInFramesField,
     trimBefore: exports.trimBeforeField,
+    playbackRate: playbackRateField,
     freeze: exports.freezeField,
     hidden: exports.hiddenField,
     name: exports.sequenceNameField,

package/dist/cjs/internals.d.ts

@@ -134,6 +134,15 @@ export declare const Internals: {
             readonly step: 1;
             readonly hiddenFromList: true;
         };
+        readonly playbackRate: {
+            readonly type: "number";
+            readonly default: 1;
+            readonly min: 0.01;
+            readonly step: 0.1;
+            readonly description: "Playback rate";
+            readonly hiddenFromList: false;
+            readonly keyframable: false;
+        };
         readonly freeze: {
             readonly type: "number";
             readonly default: null;
@@ -165,6 +174,15 @@ export declare const Internals: {
             readonly step: 1;
             readonly hiddenFromList: true;
         };
+        readonly playbackRate: {
+            readonly type: "number";
+            readonly default: 1;
+            readonly min: 0.01;
+            readonly step: 0.1;
+            readonly description: "Playback rate";
+            readonly hiddenFromList: false;
+            readonly keyframable: false;
+        };
         readonly freeze: {
             readonly type: "number";
             readonly default: null;
@@ -768,7 +786,7 @@ export declare const Internals: {
     readonly getRoot: () => import("react").FC<{}> | null;
     readonly useMediaVolumeState: () => readonly [number, (u: number) => void];
     readonly usePlayerMutedState: () => readonly [boolean, (u: import("react").SetStateAction<boolean>) => void];
-    readonly useMediaInTimeline: ({ volume, mediaVolume, src, mediaType, playbackRate, displayName, id, getStack, showInTimeline, premountDisplay, postmountDisplay, loopDisplay, documentationLink, refForOutline, muted, }: {
+    readonly useMediaInTimeline: ({ volume, mediaVolume, src, mediaType, playbackRate, displayName, id, getStack, showInTimeline, premountDisplay, postmountDisplay, loopDisplay, loopVolumeCurveBehavior, documentationLink, refForOutline, muted, }: {
         volume: import("./volume-prop.js").VolumeProp | undefined;
         mediaVolume: number;
         src: string | undefined;
@@ -781,6 +799,7 @@ export declare const Internals: {
         premountDisplay: number | null;
         postmountDisplay: number | null;
         loopDisplay: import("./CompositionManager.js").LoopDisplay | undefined;
+        loopVolumeCurveBehavior: import("./index.js").LoopVolumeCurveBehavior;
         documentationLink: string | null;
         refForOutline: import("react").RefObject<Element | null> | null;
         muted: boolean;
@@ -1141,7 +1160,7 @@ export declare const Internals: {
     }, "ref"> & import("react").RefAttributes<HTMLAudioElement>>;
     readonly OBJECTFIT_CONTAIN_CLASS_NAME: "__remotion_objectfitcontain";
     readonly InnerOffthreadVideo: import("react").FC<import("./video/props.js").AllOffthreadVideoProps>;
-    readonly useBasicMediaInTimeline: ({ volume, mediaVolume, mediaType, src, displayName, trimBefore, trimAfter, playbackRate, sequenceDurationInFrames, mediaStartsAt, loop, muted, }: {
+    readonly useBasicMediaInTimeline: ({ volume, mediaVolume, mediaType, src, displayName, trimBefore, trimAfter, playbackRate, sequenceDurationInFrames, mediaStartsAt, mediaFrom, loop, muted, }: {
         volume: import("./volume-prop.js").VolumeProp | undefined;
         mediaVolume: number;
         mediaType: "audio" | "image" | "video";
@@ -1152,6 +1171,7 @@ export declare const Internals: {
         playbackRate: number;
         sequenceDurationInFrames: number;
         mediaStartsAt: number;
+        mediaFrom: number;
         loop: boolean;
         muted: boolean;
     }) => {
@@ -1170,6 +1190,7 @@ export declare const Internals: {
     readonly useAudioEnabled: () => boolean;
     readonly useBuffering: () => boolean;
     readonly TimelinePosition: typeof TimelinePosition;
+    readonly useTimelineSeek: (setFrame: (frame: import("react").SetStateAction<Record<string, number>>) => void) => import("./use-timeline-seek.js").TimelineSeek;
     readonly DelayRenderContextType: import("react").Context<import("./delay-render.js").DelayRenderScope | null>;
     readonly TimelineContext: import("react").Context<TimelineContextValue | null>;
     readonly usePlaying: () => boolean;

package/dist/cjs/internals.js

@@ -109,6 +109,7 @@ const use_playing_js_1 = require("./use-playing.js");
 const use_premounting_js_1 = require("./use-premounting.js");
 const use_schema_js_1 = require("./use-schema.js");
 const use_sync_external_store_js_1 = require("./use-sync-external-store.js");
+const use_timeline_seek_js_1 = require("./use-timeline-seek.js");
 const use_unsafe_video_config_js_1 = require("./use-unsafe-video-config.js");
 const use_video_js_1 = require("./use-video.js");
 const validate_media_props_js_1 = require("./validate-media-props.js");
@@ -270,6 +271,7 @@ exports.Internals = {
     useAudioEnabled: use_media_enabled_js_1.useAudioEnabled,
     useBuffering: use_buffering_js_1.useBuffering,
     TimelinePosition,
+    useTimelineSeek: use_timeline_seek_js_1.useTimelineSeek,
     DelayRenderContextType: use_delay_render_js_1.DelayRenderContextType,
     TimelineContext: TimelineContext_js_1.TimelineContext,
     usePlaying: use_playing_js_1.usePlaying,

package/dist/cjs/interpolate.d.ts

@@ -1,5 +1,6 @@
 export type ExtrapolateType = 'extend' | 'identity' | 'clamp' | 'wrap';
 export type InterpolateOutputOption = 'linear' | 'perceptual-scale';
+export type InterpolateOutputType = 'font-weight' | 'scale' | 'translate' | 'rotate' | 'transform-origin';
 /**
  * @description This function allows you to map a range of values to another with a concise syntax
  * @see [Documentation](https://www.remotion.dev/docs/interpolate)
@@ -12,6 +13,7 @@ export type InterpolateOptions = Partial<{
     extrapolateLeft: ExtrapolateType;
     extrapolateRight: ExtrapolateType;
     output: InterpolateOutputOption;
+    outputType: InterpolateOutputType;
     posterize: number;
 }>;
 type NumericTuple = readonly [number, ...number[]];
@@ -21,6 +23,9 @@ type WidenNumericTuple<T extends readonly number[]> = {
 export declare function assertValidInterpolateEasingOption(easing: EasingFunction | readonly EasingFunction[] | undefined, inputRangeLength: number): void;
 export declare function assertValidInterpolatePosterizeOption(posterize: number | undefined): void;
 export declare function interpolate(input: number, inputRange: readonly number[], outputRange: readonly number[], options?: InterpolateOptions): number;
+export declare function interpolate(input: number, inputRange: readonly number[], outputRange: readonly (number | string)[], options: InterpolateOptions & {
+    outputType: 'font-weight';
+}): number;
 export declare function interpolate(input: number, inputRange: readonly number[], outputRange: readonly string[], options?: InterpolateOptions): string;
 export declare function interpolate<const Tuple extends NumericTuple>(input: number, inputRange: readonly number[], outputRange: readonly Tuple[], options?: InterpolateOptions): WidenNumericTuple<Tuple>;
 export declare function interpolate(input: number, inputRange: readonly number[], outputRange: readonly (readonly number[])[], options?: InterpolateOptions): number[];

package/dist/cjs/interpolate.js

@@ -254,7 +254,7 @@ const parseAxisRotationValue = (output) => {
         axisRotation: true,
     };
 };
-const parseStringInterpolationValue = (output) => {
+const parseStringInterpolationValue = (output, outputType) => {
     var _a, _b, _c, _d, _e, _f;
     var _g, _h, _j, _k, _l, _m;
     if (typeof output === 'number') {
@@ -269,8 +269,20 @@ const 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+/);
@@ -278,6 +290,9 @@ const 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));
@@ -287,6 +302,9 @@ const 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 = (_g = (_a = parsed[1]) === null || _a === void 0 ? void 0 : _a.value) !== null && _g !== void 0 ? _g : x;
@@ -486,9 +504,9 @@ const interpolateNumber = ({ input, inputRange, outputRange, options, }) => {
     }
     return result;
 };
-const interpolateString = ({ input, inputRange, outputRange, options, }) => {
+const interpolateString = ({ input, inputRange, outputRange, options, outputType, }) => {
     var _a;
-    const initiallyParsedOutputRange = outputRange.map(parseStringInterpolationValue);
+    const initiallyParsedOutputRange = outputRange.map((output) => parseStringInterpolationValue(output, outputType));
     const hasAxisRotation = initiallyParsedOutputRange.some((parsed) => parsed.axisRotation);
     const posterizedInput = (options === null || options === void 0 ? void 0 : options.posterize) === undefined
         ? input
@@ -589,6 +607,35 @@ const interpolateString = ({ input, inputRange, outputRange, options, }) => {
         axisRotation: hasAxisRotation,
     });
 };
+const 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,
+    });
+};
 const interpolateDiscreteString = ({ input, inputRange, outputRange, options, }) => {
     if (inputRange.length === 1) {
         return outputRange[0];
@@ -725,6 +772,17 @@ 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');
@@ -747,19 +805,41 @@ function interpolate(input, inputRange, outputRange, options) {
     assertValidInterpolateEasingOption(options === null || options === void 0 ? void 0 : options.easing, inputRange.length);
     assertValidInterpolatePosterizeOption(options === null || options === void 0 ? void 0 : options.posterize);
     assertValidInterpolateOutputOption(options === null || options === void 0 ? void 0 : options.output);
+    assertValidInterpolateOutputType(options === null || options === void 0 ? void 0 : 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 === null || options === void 0 ? void 0 : 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 (error) {
             if (!outputRange.every((output) => typeof output === 'string')) {
@@ -767,7 +847,7 @@ function interpolate(input, inputRange, outputRange, options) {
             }
             const hasNonNumericString = outputRange.some((output) => {
                 try {
-                    parseStringInterpolationValue(output);
+                    parseStringInterpolationValue(output, outputType);
                     return false;
                 }
                 catch (parseError) {

package/dist/cjs/loop/index.d.ts

@@ -5,11 +5,17 @@ export type LoopProps = {
     readonly times?: number;
     readonly name?: string;
     readonly children: React.ReactNode;
-} & LayoutAndStyle & Pick<SequenceProps, 'showInTimeline'>;
+} & LayoutAndStyle & Pick<SequenceProps, 'showInTimeline' | 'playbackRate'>;
 type LoopContextType = {
     iteration: number;
     durationInFrames: number;
 };
+export declare const LoopTimelineContext: React.Context<{
+    startFrame: number;
+    firstVisibleFrame: number;
+    endFrame: number;
+    playbackRate: number;
+} | null>;
 declare const useLoop: () => LoopContextType | null;
 export declare const Loop: React.FC<LoopProps> & {
     useLoop: typeof useLoop;

package/dist/cjs/loop/index.js

@@ -33,14 +33,16 @@ var __importStar = (this && this.__importStar) || (function () {
     };
 })();
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Loop = void 0;
+exports.Loop = exports.LoopTimelineContext = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = __importStar(require("react"));
 const Sequence_js_1 = require("../Sequence.js");
+const SequenceContext_js_1 = require("../SequenceContext.js");
 const use_current_frame_js_1 = require("../use-current-frame.js");
 const use_video_config_js_1 = require("../use-video-config.js");
 const validate_duration_in_frames_js_1 = require("../validation/validate-duration-in-frames.js");
 const LoopContext = (0, react_1.createContext)(null);
+exports.LoopTimelineContext = (0, react_1.createContext)(null);
 const useLoop = () => {
     return react_1.default.useContext(LoopContext);
 };
@@ -48,9 +50,19 @@ const useLoop = () => {
  * @description This component allows you to quickly lay out an animation so it repeats itself.
  * @see [Documentation](https://remotion.dev/docs/loop)
  */
-const Loop = ({ durationInFrames, times = Infinity, children, name, showInTimeline, ...props }) => {
+const Loop = ({ durationInFrames, times = Infinity, children, name, showInTimeline, playbackRate, ...props }) => {
+    var _a, _b;
     const currentFrame = (0, use_current_frame_js_1.useCurrentFrame)();
     const { durationInFrames: compDuration } = (0, use_video_config_js_1.useVideoConfig)();
+    const parentSequence = (0, react_1.useContext)(SequenceContext_js_1.SequenceContext);
+    const parentPlaybackRate = (_a = parentSequence === null || parentSequence === void 0 ? void 0 : parentSequence.playbackRate) !== null && _a !== void 0 ? _a : 1;
+    const loopStartFrame = parentSequence
+        ? parentSequence.cumulatedFrom + parentSequence.relativeFrom
+        : 0;
+    const firstVisibleFrame = loopStartFrame -
+        ((_b = parentSequence === null || parentSequence === void 0 ? void 0 : parentSequence.cumulatedNegativeFrom) !== null && _b !== void 0 ? _b : 0) / parentPlaybackRate;
+    const endFrame = loopStartFrame +
+        Math.min(compDuration, durationInFrames * times) / parentPlaybackRate;
     (0, validate_duration_in_frames_js_1.validateDurationInFrames)(durationInFrames, {
         component: 'of the <Loop /> component',
         allowFloats: true,
@@ -66,11 +78,16 @@ const Loop = ({ durationInFrames, times = Infinity, children, name, showInTimeli
     }
     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 loopsElapsed = currentFrame / durationInFrames;
+    const nearestIteration = Math.round(loopsElapsed);
+    // Fractional durations and nested playback rates can put an exact loop
+    // boundary a few floating-point units before the next iteration.
+    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 = (0, react_1.useMemo)(() => {
         return {
             numberOfTimes: Math.min(compDuration / durationInFrames, times),
@@ -80,11 +97,20 @@ const Loop = ({ durationInFrames, times = Infinity, children, name, showInTimeli
     }, [compDuration, durationInFrames, from, times]);
     const loopContext = (0, react_1.useMemo)(() => {
         return {
-            iteration: Math.floor(currentFrame / durationInFrames),
+            iteration,
             durationInFrames,
         };
-    }, [currentFrame, durationInFrames]);
-    return (jsx_runtime_1.jsx(LoopContext.Provider, { value: loopContext, children: jsx_runtime_1.jsx(Sequence_js_1.Sequence, { durationInFrames: durationInFrames, from: from, name: name !== null && name !== void 0 ? name : '<Loop>', _remotionInternalDocumentationLink: "https://www.remotion.dev/docs/loop", _remotionInternalLoopDisplay: loopDisplay, layout: props.layout, style: style, showInTimeline: showInTimeline, children: children }) }));
+    }, [iteration, durationInFrames]);
+    const timelineContext = (0, react_1.useMemo)(() => ({
+        startFrame: loopStartFrame,
+        firstVisibleFrame,
+        endFrame,
+        playbackRate: parentPlaybackRate,
+    }), [loopStartFrame, firstVisibleFrame, endFrame, parentPlaybackRate]);
+    if (actualTimes === 0) {
+        return null;
+    }
+    return (jsx_runtime_1.jsx(exports.LoopTimelineContext.Provider, { value: timelineContext, children: jsx_runtime_1.jsx(LoopContext.Provider, { value: loopContext, children: jsx_runtime_1.jsx(Sequence_js_1.Sequence, { durationInFrames: durationInFrames, from: from, name: name !== null && name !== void 0 ? name : '<Loop>', _remotionInternalDocumentationLink: "https://www.remotion.dev/docs/loop", _remotionInternalLoopDisplay: loopDisplay, ...props, showInTimeline: showInTimeline, playbackRate: playbackRate, children: children }) }) }));
 };
 exports.Loop = Loop;
 exports.Loop.useLoop = useLoop;

package/dist/cjs/no-react.d.ts

@@ -1,7 +1,7 @@
 export type { ArtifactAsset, AudioOrVideoAsset, InlineAudioAsset, TRenderAsset, } from './CompositionManager';
 export type { DownloadBehavior } from './download-behavior';
 export { assertValidInterpolateEasingOption, assertValidInterpolatePosterizeOption, interpolate, } from './interpolate';
-export type { EasingFunction, ExtrapolateType, InterpolateOutputOption, InterpolateOptions, } from './interpolate';
+export type { EasingFunction, ExtrapolateType, InterpolateOptions, InterpolateOutputOption, InterpolateOutputType, } from './interpolate';
 export { random } from './random.js';
 export type { RandomSeed } from './random.js';
 export type { VideoConfig } from './video-config';
@@ -83,6 +83,15 @@ export declare const NoReactInternals: {
             readonly step: 1;
             readonly hiddenFromList: true;
         };
+        readonly playbackRate: {
+            readonly type: "number";
+            readonly default: 1;
+            readonly min: 0.01;
+            readonly step: 0.1;
+            readonly description: "Playback rate";
+            readonly hiddenFromList: false;
+            readonly keyframable: false;
+        };
         readonly freeze: {
             readonly type: "number";
             readonly default: null;

package/dist/cjs/series/index.d.ts

@@ -4,7 +4,7 @@ type SeriesSequenceProps = PropsWithChildren<{
     readonly durationInFrames: number;
     readonly offset?: number;
     readonly className?: string;
-} & Pick<SequenceProps, 'layout' | 'name' | 'hidden' | 'showInTimeline' | 'freeze' | 'trimBefore'> & LayoutAndStyle>;
+} & Pick<SequenceProps, 'layout' | 'name' | 'hidden' | 'showInTimeline' | 'freeze' | 'trimBefore' | 'playbackRate'> & LayoutAndStyle>;
 declare const SeriesSequence: React.ForwardRefExoticComponent<SeriesSequenceProps & React.RefAttributes<HTMLDivElement>>;
 type SeriesProps = SequenceProps;
 /**

package/dist/cjs/series/index.js

@@ -51,6 +51,7 @@ const seriesSequenceSchema = {
     showInTimeline: Interactive_js_1.Interactive.sequenceSchema.showInTimeline,
     freeze: Interactive_js_1.Interactive.baseSchema.freeze,
     trimBefore: Interactive_js_1.Interactive.sequenceSchema.trimBefore,
+    playbackRate: Interactive_js_1.Interactive.sequenceSchema.playbackRate,
     layout: Interactive_js_1.Interactive.sequenceSchema.layout,
 };
 const SeriesSequenceInner = (0, react_1.forwardRef)(({ offset = 0, className = '', _remotionInternalRender = null, ...props }, ref) => {

package/dist/cjs/spring/spring-utils.js

@@ -64,15 +64,24 @@ function advance({ animation, now, config, }) {
 }
 const calculationCache = {};
 function springCalculation({ frame, fps, config = {}, }) {
+    var _a, _b, _c, _d;
     const from = 0;
     const to = 1;
+    // An explicit `undefined` (e.g. a forwarded optional prop) must not
+    // override the defaults, otherwise the physics turn into NaN
+    const resolvedConfig = {
+        damping: (_a = config.damping) !== null && _a !== void 0 ? _a : defaultSpringConfig.damping,
+        mass: (_b = config.mass) !== null && _b !== void 0 ? _b : defaultSpringConfig.mass,
+        stiffness: (_c = config.stiffness) !== null && _c !== void 0 ? _c : defaultSpringConfig.stiffness,
+        overshootClamping: (_d = config.overshootClamping) !== null && _d !== void 0 ? _d : 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];
@@ -91,20 +100,14 @@ function springCalculation({ frame, fps, config = {}, }) {
         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;

package/dist/cjs/timeline-position-state.d.ts

@@ -14,5 +14,6 @@ export declare const useTimelinePosition: () => number;
 export declare const useIsInsideFreeze: () => boolean;
 export declare const useAbsoluteTimelinePosition: () => number;
 export declare const useTimelineSetFrame: () => (u: import("react").SetStateAction<Record<string, number>>) => void;
+export declare const useTimelineSeekFrame: () => (frame: import("react").SetStateAction<Record<string, number>>) => void;
 export { usePlaying } from './use-playing.js';
 export { useBuffering } from './use-buffering.js';