remotion 4.0.526 → 4.0.528

package/dist/cjs/AbsoluteFill.d.ts

@@ -1,7 +1,7 @@
 import React from 'react';
 import { type AbsoluteFillElementProps } from './AbsoluteFillElement.js';
-import type { InteractiveBaseProps } from './Interactive.js';
-export type AbsoluteFillProps = Omit<AbsoluteFillElementProps, keyof InteractiveBaseProps> & InteractiveBaseProps & {
+import type { InteractiveBaseProps, InteractivePremountProps } from './Interactive.js';
+export type AbsoluteFillProps = Omit<AbsoluteFillElementProps, keyof InteractiveBaseProps> & InteractiveBaseProps & InteractivePremountProps & {
     /**
      * @deprecated For internal use only
      */
@@ -187,6 +187,23 @@ export declare const absoluteFillSchema: {
         readonly description: "Text";
         readonly keyframable: false;
     };
+    readonly premountFor: {
+        readonly type: "number";
+        readonly default: 0;
+        readonly description: "Premount For";
+        readonly min: 0;
+        readonly step: 1;
+        readonly hiddenFromList: false;
+        readonly keyframable: false;
+    };
+    readonly postmountFor: {
+        readonly type: "number";
+        readonly default: 0;
+        readonly min: 0;
+        readonly step: 1;
+        readonly hiddenFromList: true;
+        readonly keyframable: false;
+    };
     readonly durationInFrames: {
         readonly type: "number";
         readonly default: undefined;
@@ -207,6 +224,15 @@ export declare const absoluteFillSchema: {
         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;
@@ -217,7 +243,7 @@ export declare const absoluteFillSchema: {
     readonly name: import("./interactivity-schema.js").HiddenFieldSchema;
     readonly showInTimeline: import("./interactivity-schema.js").HiddenFieldSchema;
 };
-export declare const AbsoluteFill: React.ComponentType<Omit<AbsoluteFillElementProps, "durationInFrames" | "freeze" | "from" | "hidden" | "name" | "showInTimeline" | "trimBefore"> & InteractiveBaseProps & {
+export declare const AbsoluteFill: React.ComponentType<Omit<AbsoluteFillElementProps, "durationInFrames" | "freeze" | "from" | "hidden" | "name" | "playbackRate" | "showInTimeline" | "trimBefore"> & InteractiveBaseProps & InteractivePremountProps & {
     /**
      * @deprecated For internal use only
      */

package/dist/cjs/AbsoluteFill.js

@@ -5,12 +5,15 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const AbsoluteFillElement_js_1 = require("./AbsoluteFillElement.js");
 const enable_sequence_stack_traces_js_1 = require("./enable-sequence-stack-traces.js");
+const freeze_js_1 = require("./freeze.js");
 const interactivity_schema_js_1 = require("./interactivity-schema.js");
 const Sequence_js_1 = require("./Sequence.js");
+const use_premounting_js_1 = require("./use-premounting.js");
 const use_unsafe_video_config_js_1 = require("./use-unsafe-video-config.js");
 const with_interactivity_schema_js_1 = require("./with-interactivity-schema.js");
 exports.absoluteFillSchema = {
     ...interactivity_schema_js_1.baseSchema,
+    ...interactivity_schema_js_1.premountSchema,
     ...interactivity_schema_js_1.transformSchema,
     ...interactivity_schema_js_1.backgroundSchema,
     ...interactivity_schema_js_1.borderSchema,
@@ -26,7 +29,21 @@ const setRef = (ref, value) => {
         ref.current = value;
     }
 };
-const AbsoluteFillInner = ({ ref, from, trimBefore, freeze, durationInFrames, hidden, name, showInTimeline, stack, controls, children, ...divProps }) => {
+const AbsoluteFillWithTiming = ({ ref: callbackRef, outlineRef: refForOutline, from, premountFor, postmountFor, styleWhilePremounted, styleWhilePostmounted, trimBefore, playbackRate, freeze, durationInFrames, hidden, name, showInTimeline, stack, controls, children, ...divProps }) => {
+    var _a;
+    const { effectivePremountFor, effectivePostmountFor, freezeFrame, isPremountingOrPostmounting, premountingActive, postmountingActive, premountingStyle, } = (0, use_premounting_js_1.usePremounting)({
+        from: from !== null && from !== void 0 ? from : 0,
+        durationInFrames: durationInFrames !== null && durationInFrames !== void 0 ? durationInFrames : Infinity,
+        premountFor: premountFor !== null && premountFor !== void 0 ? premountFor : null,
+        postmountFor: postmountFor !== null && postmountFor !== void 0 ? postmountFor : null,
+        style: (_a = divProps.style) !== null && _a !== void 0 ? _a : null,
+        styleWhilePremounted: styleWhilePremounted !== null && styleWhilePremounted !== void 0 ? styleWhilePremounted : null,
+        styleWhilePostmounted: styleWhilePostmounted !== null && styleWhilePostmounted !== void 0 ? styleWhilePostmounted : null,
+        hideWhilePremounted: 'opacity',
+    });
+    return (jsx_runtime_1.jsx(freeze_js_1.Freeze, { frame: freezeFrame, active: isPremountingOrPostmounting, children: jsx_runtime_1.jsx(Sequence_js_1.Sequence, { layout: "none", from: from !== null && from !== void 0 ? from : 0, trimBefore: trimBefore, playbackRate: playbackRate, freeze: freeze, durationInFrames: durationInFrames !== null && durationInFrames !== void 0 ? durationInFrames : Infinity, hidden: hidden, name: name !== null && name !== void 0 ? name : '<AbsoluteFill>', showInTimeline: showInTimeline !== null && showInTimeline !== void 0 ? showInTimeline : true, controls: controls, _remotionInternalStack: stack, _remotionInternalDocumentationLink: "https://www.remotion.dev/docs/absolute-fill", outlineRef: refForOutline, _remotionInternalPremountDisplay: effectivePremountFor || null, _remotionInternalPostmountDisplay: effectivePostmountFor || null, _remotionInternalIsPremounting: premountingActive, _remotionInternalIsPostmounting: postmountingActive, children: jsx_runtime_1.jsx(AbsoluteFillElement_js_1.AbsoluteFillElement, { ref: callbackRef, ...divProps, style: premountingStyle !== null && premountingStyle !== void 0 ? premountingStyle : undefined, children: children }) }) }));
+};
+const AbsoluteFillInner = ({ ref, from, premountFor, postmountFor, styleWhilePremounted, styleWhilePostmounted, trimBefore, playbackRate, freeze, durationInFrames, hidden, name, showInTimeline, stack, controls, children, ...divProps }) => {
     const videoConfig = (0, use_unsafe_video_config_js_1.useUnsafeVideoConfig)();
     const refForOutline = (0, react_1.useRef)(null);
     const callbackRef = (0, react_1.useCallback)((element) => {
@@ -36,7 +53,7 @@ const AbsoluteFillInner = ({ ref, from, trimBefore, freeze, durationInFrames, hi
     if (videoConfig === null) {
         return hidden ? null : (jsx_runtime_1.jsx(AbsoluteFillElement_js_1.AbsoluteFillElement, { ref: callbackRef, ...divProps, children: children }));
     }
-    return (jsx_runtime_1.jsx(Sequence_js_1.Sequence, { layout: "none", from: from !== null && from !== void 0 ? from : 0, trimBefore: trimBefore, freeze: freeze, durationInFrames: durationInFrames !== null && durationInFrames !== void 0 ? durationInFrames : Infinity, hidden: hidden, name: name !== null && name !== void 0 ? name : '<AbsoluteFill>', showInTimeline: showInTimeline !== null && showInTimeline !== void 0 ? showInTimeline : true, controls: controls, _remotionInternalStack: stack, _remotionInternalDocumentationLink: "https://www.remotion.dev/docs/absolute-fill", outlineRef: refForOutline, children: jsx_runtime_1.jsx(AbsoluteFillElement_js_1.AbsoluteFillElement, { ref: callbackRef, ...divProps, children: children }) }));
+    return (jsx_runtime_1.jsx(AbsoluteFillWithTiming, { ...divProps, ref: callbackRef, outlineRef: refForOutline, from: from, premountFor: premountFor, postmountFor: postmountFor, styleWhilePremounted: styleWhilePremounted, styleWhilePostmounted: styleWhilePostmounted, trimBefore: trimBefore, playbackRate: playbackRate, freeze: freeze, durationInFrames: durationInFrames, hidden: hidden, name: name, showInTimeline: showInTimeline, stack: stack, controls: controls, children: children }));
 };
 /*
  * @description A helper component which renders an absolutely positioned <div> element with full width, height, and flex display suited for content layering.

package/dist/cjs/CompositionManager.d.ts

@@ -72,6 +72,8 @@ export type SequenceControls = SequenceRegistrationControls & {
     currentRuntimeValueDotNotation: RuntimeValueSnapshot;
 };
 export type TSequence = {
+    /** This sequence's clock multiplier; ancestor rates are applied by the timeline. */
+    sequencePlaybackRate: number;
     from: number;
     trimBefore: number | null;
     duration: number;

package/dist/cjs/HtmlInCanvas.d.ts

@@ -54,7 +54,7 @@ export type HtmlInCanvasOnPaint = (params: HtmlInCanvasOnPaintParams) => void |
 export type HtmlInCanvasOnInitCleanup = () => void;
 export type HtmlInCanvasOnInit = (params: HtmlInCanvasOnPaintParams) => HtmlInCanvasOnInitCleanup | Promise<HtmlInCanvasOnInitCleanup>;
 export type HtmlInCanvasPixelDensity = number;
-export type HtmlInCanvasProps = Omit<InteractiveBaseProps, 'children'> & InteractiveCropProps & Omit<AbsoluteFillLayout, 'layout' | 'styleWhilePostmounted' | 'postmountFor' | 'premountFor' | 'styleWhilePremounted'> & {
+export type HtmlInCanvasProps = Omit<InteractiveBaseProps, 'children'> & InteractiveCropProps & Omit<AbsoluteFillLayout, 'layout'> & {
     readonly durationInFrames?: number;
     readonly width: number;
     readonly height: number;
@@ -176,6 +176,23 @@ export declare const htmlInCanvasSchema: {
         readonly default: "transparent";
         readonly description: "Color";
     };
+    readonly premountFor: {
+        readonly type: "number";
+        readonly default: 0;
+        readonly description: "Premount For";
+        readonly min: 0;
+        readonly step: 1;
+        readonly hiddenFromList: false;
+        readonly keyframable: false;
+    };
+    readonly postmountFor: {
+        readonly type: "number";
+        readonly default: 0;
+        readonly min: 0;
+        readonly step: 1;
+        readonly hiddenFromList: true;
+        readonly keyframable: false;
+    };
     readonly cropLeft: {
         readonly type: "number";
         readonly default: 0;
@@ -236,6 +253,15 @@ export declare const htmlInCanvasSchema: {
         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;
@@ -255,7 +281,7 @@ export declare const htmlInCanvasSchema: {
         readonly hiddenFromList: false;
     };
 };
-export declare const HtmlInCanvas: React.ForwardRefExoticComponent<Omit<InteractiveBaseProps, "children"> & InteractiveCropProps & Omit<AbsoluteFillLayout, "layout" | "postmountFor" | "premountFor" | "styleWhilePostmounted" | "styleWhilePremounted"> & {
+export declare const HtmlInCanvas: React.ForwardRefExoticComponent<Omit<InteractiveBaseProps, "children"> & InteractiveCropProps & Omit<AbsoluteFillLayout, "layout"> & {
     readonly durationInFrames?: number | undefined;
     readonly width: number;
     readonly height: number;

package/dist/cjs/HtmlInCanvas.js

@@ -7,10 +7,12 @@ const run_effect_chain_js_1 = require("./effects/run-effect-chain.js");
 const use_effect_chain_state_js_1 = require("./effects/use-effect-chain-state.js");
 const use_memoized_effects_js_1 = require("./effects/use-memoized-effects.js");
 const enable_sequence_stack_traces_js_1 = require("./enable-sequence-stack-traces.js");
+const freeze_js_1 = require("./freeze.js");
 const interactivity_schema_js_1 = require("./interactivity-schema.js");
 const Sequence_js_1 = require("./Sequence.js");
 const use_crop_style_js_1 = require("./use-crop-style.js");
 const use_delay_render_js_1 = require("./use-delay-render.js");
+const use_premounting_js_1 = require("./use-premounting.js");
 const use_remotion_environment_js_1 = require("./use-remotion-environment.js");
 const with_interactivity_schema_js_1 = require("./with-interactivity-schema.js");
 // `transferControlToOffscreen()` may only be called once per canvas — a second
@@ -361,7 +363,8 @@ const HtmlInCanvasContent = (0, react_1.forwardRef)(({ width, height, effects, c
     return (jsx_runtime_1.jsx(HtmlInCanvasAncestorContext.Provider, { value: true, children: jsx_runtime_1.jsx("canvas", { ref: setLayoutCanvasRef, width: canvasWidth, height: canvasHeight, style: canvasStyle, children: jsx_runtime_1.jsx("div", { ref: divRef, style: innerStyle, children: children }) }, canvasSizeKey) }));
 });
 HtmlInCanvasContent.displayName = 'HtmlInCanvasContent';
-const HtmlInCanvasInner = (0, react_1.forwardRef)(({ width, height, effects = [], children, onPaint, onInit, pixelDensity, controls, style, cropLeft, cropRight, cropTop, cropBottom, durationInFrames, name, ...sequenceProps }, ref) => {
+const HtmlInCanvasInner = (0, react_1.forwardRef)(({ width, height, effects = [], children, onPaint, onInit, pixelDensity, controls, style, cropLeft, cropRight, cropTop, cropBottom, durationInFrames, premountFor, postmountFor, styleWhilePremounted, styleWhilePostmounted, name, ...sequenceProps }, ref) => {
+    var _a;
     const memoizedEffectDefinitions = (0, use_memoized_effects_js_1.useMemoizedEffectDefinitions)(effects);
     const actualRef = (0, react_1.useRef)(null);
     const setCanvasRef = (0, react_1.useCallback)((node) => {
@@ -373,19 +376,30 @@ const HtmlInCanvasInner = (0, react_1.forwardRef)(({ width, height, effects = []
             ref.current = node;
         }
     }, [ref]);
+    const { effectivePremountFor, effectivePostmountFor, freezeFrame, isPremountingOrPostmounting, premountingActive, postmountingActive, premountingStyle, } = (0, use_premounting_js_1.usePremounting)({
+        from: (_a = sequenceProps.from) !== null && _a !== void 0 ? _a : 0,
+        durationInFrames: durationInFrames !== null && durationInFrames !== void 0 ? durationInFrames : Infinity,
+        premountFor: premountFor !== null && premountFor !== void 0 ? premountFor : null,
+        postmountFor: postmountFor !== null && postmountFor !== void 0 ? postmountFor : null,
+        style: style !== null && style !== void 0 ? style : null,
+        styleWhilePremounted: styleWhilePremounted !== null && styleWhilePremounted !== void 0 ? styleWhilePremounted : null,
+        styleWhilePostmounted: styleWhilePostmounted !== null && styleWhilePostmounted !== void 0 ? styleWhilePostmounted : null,
+        hideWhilePremounted: 'opacity',
+    });
     const croppedStyle = (0, use_crop_style_js_1.useCropStyle)({
         cropLeft,
         cropRight,
         cropTop,
         cropBottom,
-        style: style !== null && style !== void 0 ? style : null,
+        style: premountingStyle,
         componentName: '<HtmlInCanvas />',
     });
-    return (jsx_runtime_1.jsx(Sequence_js_1.Sequence, { durationInFrames: durationInFrames, name: name !== null && name !== void 0 ? name : '<HtmlInCanvas>', _remotionInternalDocumentationLink: "https://www.remotion.dev/docs/remotion/html-in-canvas", controls: controls, _remotionInternalEffects: memoizedEffectDefinitions, outlineRef: actualRef, layout: "none", ...sequenceProps, children: jsx_runtime_1.jsx(HtmlInCanvasContent, { ref: setCanvasRef, width: width, height: height, effects: effects, onPaint: onPaint, onInit: onInit, pixelDensity: pixelDensity, controls: controls, style: croppedStyle !== null && croppedStyle !== void 0 ? croppedStyle : undefined, children: children }) }));
+    return (jsx_runtime_1.jsx(freeze_js_1.Freeze, { frame: freezeFrame, active: isPremountingOrPostmounting, children: jsx_runtime_1.jsx(Sequence_js_1.Sequence, { layout: "none", durationInFrames: durationInFrames, name: name !== null && name !== void 0 ? name : '<HtmlInCanvas>', _remotionInternalDocumentationLink: "https://www.remotion.dev/docs/remotion/html-in-canvas", controls: controls, _remotionInternalEffects: memoizedEffectDefinitions, outlineRef: actualRef, ...sequenceProps, _remotionInternalPremountDisplay: effectivePremountFor || null, _remotionInternalPostmountDisplay: effectivePostmountFor || null, _remotionInternalIsPremounting: premountingActive, _remotionInternalIsPostmounting: postmountingActive, children: jsx_runtime_1.jsx(HtmlInCanvasContent, { ref: setCanvasRef, width: width, height: height, effects: effects, onPaint: onPaint, onInit: onInit, pixelDensity: pixelDensity, controls: controls, style: croppedStyle !== null && croppedStyle !== void 0 ? croppedStyle : undefined, children: children }) }) }));
 });
 HtmlInCanvasInner.displayName = 'HtmlInCanvas';
 exports.htmlInCanvasSchema = {
     ...interactivity_schema_js_1.baseSchema,
+    ...interactivity_schema_js_1.premountSchema,
     pixelDensity: {
         type: 'number',
         min: 1,

package/dist/cjs/Img.d.ts

@@ -13,7 +13,7 @@ export type ImgProps = NativeImgProps & {
     readonly effects?: EffectsProp;
     readonly showInTimeline?: boolean;
     readonly name?: string;
-} & InteractiveBaseProps & InteractiveCropProps & InteractivePremountProps;
+} & Omit<InteractiveBaseProps, 'playbackRate'> & InteractiveCropProps & InteractivePremountProps;
 export declare const imgSchema: {
     readonly 'style.transformOrigin': {
         readonly type: "transform-origin";
@@ -231,5 +231,5 @@ export declare const Img: React.ComponentType<NativeImgProps & {
     readonly effects?: EffectsProp | undefined;
     readonly showInTimeline?: boolean | undefined;
     readonly name?: string | undefined;
-} & InteractiveBaseProps & InteractiveCropProps & InteractivePremountProps>;
+} & Omit<InteractiveBaseProps, "playbackRate"> & InteractiveCropProps & InteractivePremountProps>;
 export {};

package/dist/cjs/Img.js

@@ -235,7 +235,7 @@ exports.imgSchema = {
         description: 'Source',
         keyframable: false,
     },
-    ...interactivity_schema_js_1.baseSchema,
+    ...interactivity_schema_js_1.baseSchemaWithoutPlaybackRate,
     ...interactivity_schema_js_1.cropSchema,
     ...interactivity_schema_js_1.premountSchema,
     ...interactivity_schema_js_1.transformSchema,

package/dist/cjs/Interactive.d.ts

@@ -6,11 +6,11 @@ type InteractiveHtmlTag = 'a' | 'article' | 'aside' | 'button' | 'code' | 'div'
 type InteractiveSvgTag = 'circle' | 'ellipse' | 'g' | 'line' | 'path' | 'rect' | 'svg' | 'text';
 type InteractiveTag = InteractiveHtmlTag | InteractiveSvgTag;
 type ElementForTag<Tag extends InteractiveTag> = Tag extends keyof HTMLElementTagNameMap ? HTMLElementTagNameMap[Tag] : Tag extends keyof SVGElementTagNameMap ? SVGElementTagNameMap[Tag] : Element;
-export type InteractiveBaseProps = Pick<SequenceProps, 'durationInFrames' | 'from' | 'trimBefore' | 'freeze' | 'hidden' | 'name' | 'showInTimeline'>;
+export type InteractiveBaseProps = Pick<SequenceProps, 'durationInFrames' | 'from' | 'trimBefore' | 'playbackRate' | 'freeze' | 'hidden' | 'name' | 'showInTimeline'>;
 export type InteractiveTransformProps = Pick<AbsoluteFillLayout, 'style'>;
 export type InteractiveCropProps = Pick<SequenceProps, 'cropLeft' | 'cropRight' | 'cropTop' | 'cropBottom'>;
 export type InteractivePremountProps = Pick<AbsoluteFillLayout, 'premountFor' | 'postmountFor' | 'styleWhilePremounted' | 'styleWhilePostmounted'>;
-type InteractiveManagedProps = InteractiveBaseProps & InteractiveCropProps;
+type InteractiveManagedProps = InteractiveBaseProps & InteractiveCropProps & InteractivePremountProps;
 type InteractiveElementProps<Tag extends InteractiveTag> = Omit<React.ComponentPropsWithoutRef<Tag>, keyof InteractiveManagedProps> & InteractiveManagedProps;
 type InteractiveElementComponent<Tag extends InteractiveTag> = React.ComponentType<InteractiveElementProps<Tag> & React.RefAttributes<ElementForTag<Tag>>>;
 type RemotionComponentIdentityPackage = 'remotion' | `@remotion/${string}`;
@@ -39,6 +39,15 @@ export declare const Interactive: {
             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;
@@ -367,6 +376,15 @@ export declare const Interactive: {
             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/Interactive.js

@@ -37,9 +37,11 @@ exports.Interactive = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = __importStar(require("react"));
 const enable_sequence_stack_traces_js_1 = require("./enable-sequence-stack-traces.js");
+const freeze_js_1 = require("./freeze.js");
 const interactivity_schema_js_1 = require("./interactivity-schema.js");
 const Sequence_js_1 = require("./Sequence.js");
 const use_crop_style_js_1 = require("./use-crop-style.js");
+const use_premounting_js_1 = require("./use-premounting.js");
 const with_interactivity_schema_js_1 = require("./with-interactivity-schema.js");
 const sourcePathToIdentityPrefix = (packageName) => {
     if (packageName === 'remotion') {
@@ -58,6 +60,7 @@ const makeRemotionComponentIdentity = ({ packageName, componentName, }) => {
 };
 const interactiveElementSchema = {
     ...interactivity_schema_js_1.baseSchema,
+    ...interactivity_schema_js_1.premountSchema,
     ...interactivity_schema_js_1.transformSchema,
     ...interactivity_schema_js_1.cropSchema,
 };
@@ -85,6 +88,15 @@ const interactiveSvgElementSchema = {
     ...interactiveElementSchema,
     ...interactivity_schema_js_1.svgPaintSchema,
 };
+const interactiveSvgPathElementSchema = {
+    ...interactiveSvgElementSchema,
+    d: {
+        type: 'svg-path',
+        default: undefined,
+        description: 'Path',
+        keyframable: false,
+    },
+};
 const interactiveSvgStrokeElementSchema = {
     ...interactiveElementSchema,
     ...interactivity_schema_js_1.svgStrokeSchema,
@@ -108,13 +120,23 @@ const withSchema = (options) => {
 };
 const makeInteractiveElement = (tag, displayName, schema) => {
     const Inner = (0, react_1.forwardRef)((propsWithControls, ref) => {
-        const { durationInFrames, from, trimBefore, freeze, hidden, name, showInTimeline, controls, cropLeft, cropRight, cropTop, cropBottom, style, ...props } = propsWithControls;
+        const { durationInFrames, from, premountFor, postmountFor, styleWhilePremounted, styleWhilePostmounted, trimBefore, playbackRate, freeze, hidden, name, showInTimeline, controls, cropLeft, cropRight, cropTop, cropBottom, style, ...props } = propsWithControls;
+        const { effectivePremountFor, effectivePostmountFor, freezeFrame, isPremountingOrPostmounting, premountingActive, postmountingActive, premountingStyle, } = (0, use_premounting_js_1.usePremounting)({
+            from: from !== null && from !== void 0 ? from : 0,
+            durationInFrames: durationInFrames !== null && durationInFrames !== void 0 ? durationInFrames : Infinity,
+            premountFor: premountFor !== null && premountFor !== void 0 ? premountFor : null,
+            postmountFor: postmountFor !== null && postmountFor !== void 0 ? postmountFor : null,
+            style: style !== null && style !== void 0 ? style : null,
+            styleWhilePremounted: styleWhilePremounted !== null && styleWhilePremounted !== void 0 ? styleWhilePremounted : null,
+            styleWhilePostmounted: styleWhilePostmounted !== null && styleWhilePostmounted !== void 0 ? styleWhilePostmounted : null,
+            hideWhilePremounted: 'opacity',
+        });
         const croppedStyle = (0, use_crop_style_js_1.useCropStyle)({
             cropLeft,
             cropRight,
             cropTop,
             cropBottom,
-            style: style !== null && style !== void 0 ? style : null,
+            style: premountingStyle,
             componentName: displayName,
         });
         const refForOutline = (0, react_1.useRef)(null);
@@ -122,11 +144,11 @@ const makeInteractiveElement = (tag, displayName, schema) => {
             refForOutline.current = element;
             setRef(ref, element);
         }, [ref]);
-        return (jsx_runtime_1.jsx(Sequence_js_1.Sequence, { layout: "none", from: from !== null && from !== void 0 ? from : 0, trimBefore: trimBefore, durationInFrames: durationInFrames !== null && durationInFrames !== void 0 ? durationInFrames : Infinity, freeze: freeze, hidden: hidden, name: name !== null && name !== void 0 ? name : displayName, showInTimeline: showInTimeline !== null && showInTimeline !== void 0 ? showInTimeline : true, controls: controls, _remotionInternalDocumentationLink: "https://www.remotion.dev/docs/interactive", outlineRef: refForOutline, children: react_1.default.createElement(tag, {
-                ...props,
-                style: croppedStyle !== null && croppedStyle !== void 0 ? croppedStyle : undefined,
-                ref: callbackRef,
-            }) }));
+        return (jsx_runtime_1.jsx(freeze_js_1.Freeze, { frame: freezeFrame, active: isPremountingOrPostmounting, children: jsx_runtime_1.jsx(Sequence_js_1.Sequence, { layout: "none", from: from !== null && from !== void 0 ? from : 0, trimBefore: trimBefore, playbackRate: playbackRate, durationInFrames: durationInFrames !== null && durationInFrames !== void 0 ? durationInFrames : Infinity, freeze: freeze, hidden: hidden, name: name !== null && name !== void 0 ? name : displayName, showInTimeline: showInTimeline !== null && showInTimeline !== void 0 ? showInTimeline : true, controls: controls, _remotionInternalDocumentationLink: "https://www.remotion.dev/docs/interactive", outlineRef: refForOutline, _remotionInternalPremountDisplay: effectivePremountFor || null, _remotionInternalPostmountDisplay: effectivePostmountFor || null, _remotionInternalIsPremounting: premountingActive, _remotionInternalIsPostmounting: postmountingActive, children: react_1.default.createElement(tag, {
+                    ...props,
+                    style: croppedStyle !== null && croppedStyle !== void 0 ? croppedStyle : undefined,
+                    ref: callbackRef,
+                }) }) }));
     });
     Inner.displayName = displayName;
     const Wrapped = withSchema({
@@ -194,7 +216,7 @@ exports.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>'),

package/dist/cjs/Sequence.d.ts

@@ -24,6 +24,7 @@ export type SequencePropsWithoutDuration = {
     readonly cropBottom?: number;
     readonly from?: number;
     readonly trimBefore?: number;
+    readonly playbackRate?: number;
     readonly freeze?: number | null;
     readonly name?: string;
     readonly showInTimeline?: boolean;

package/dist/cjs/Sequence.js

@@ -7,6 +7,7 @@ const react_1 = require("react");
 const AbsoluteFillElement_js_1 = require("./AbsoluteFillElement.js");
 const enable_sequence_stack_traces_js_1 = require("./enable-sequence-stack-traces.js");
 const freeze_js_1 = require("./freeze.js");
+const get_sequence_boundary_tolerance_js_1 = require("./get-sequence-boundary-tolerance.js");
 const interactivity_schema_js_1 = require("./interactivity-schema.js");
 const sequence_crop_js_1 = require("./sequence-crop.js");
 const sequence_order_marker_js_1 = require("./sequence-order-marker.js");
@@ -21,11 +22,13 @@ const use_video_config_js_1 = require("./use-video-config.js");
 const v5_flag_js_1 = require("./v5-flag.js");
 const with_interactivity_schema_js_1 = require("./with-interactivity-schema.js");
 const EMPTY_EFFECTS = [];
-const RegularSequenceRefForwardingFunction = ({ from = 0, trimBefore = 0, freeze, durationInFrames = Infinity, children, name, height, width, showInTimeline = true, hidden = false, controls, _remotionInternalEffects, _remotionInternalLoopDisplay: loopDisplay, _remotionInternalStack: stack, _remotionInternalDocumentationLink: documentationLink, _remotionInternalSingleChildComponent: singleChildComponent, _remotionInternalPremountDisplay: premountDisplay, _remotionInternalPostmountDisplay: postmountDisplay, _remotionInternalIsMedia: isMedia, outlineRef: passedRefForOutline, cropLeft, cropRight, cropTop, cropBottom, ...other }, ref) => {
-    var _a, _b, _c, _d;
+const RegularSequenceRefForwardingFunction = ({ from = 0, trimBefore = 0, playbackRate = 1, freeze, durationInFrames = Infinity, children, name, height, width, showInTimeline = true, hidden = false, controls, _remotionInternalEffects, _remotionInternalLoopDisplay: loopDisplay, _remotionInternalStack: stack, _remotionInternalDocumentationLink: documentationLink, _remotionInternalSingleChildComponent: singleChildComponent, _remotionInternalPremountDisplay: premountDisplay, _remotionInternalPostmountDisplay: postmountDisplay, _remotionInternalIsMedia: isMedia, outlineRef: passedRefForOutline, cropLeft, cropRight, cropTop, cropBottom, ...other }, ref) => {
+    var _a, _b, _c, _d, _e;
     const { layout = 'absolute-fill' } = other;
     const [id] = (0, react_1.useState)(() => String(Math.random()));
     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 cumulativePlaybackRate = parentPlaybackRate * playbackRate;
     const cumulatedFrom = parentSequence
         ? parentSequence.cumulatedFrom + parentSequence.relativeFrom
         : 0;
@@ -81,9 +84,21 @@ const RegularSequenceRefForwardingFunction = ({ from = 0, trimBefore = 0, freeze
         }
     }
     const absoluteFrame = (0, timeline_position_state_js_1.useTimelinePosition)();
+    const lastPlaybackRate = (0, react_1.useRef)({ 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 = (0, use_video_config_js_1.useVideoConfig)();
-    const effectiveRelativeFrom = from - trimBefore;
-    const absoluteFrom = ((_a = parentSequence === null || parentSequence === void 0 ? void 0 : parentSequence.absoluteFrom) !== null && _a !== void 0 ? _a : 0) + effectiveRelativeFrom;
+    const effectiveRelativeFrom = from - trimBefore / playbackRate;
+    const relativeFrom = effectiveRelativeFrom / parentPlaybackRate;
+    const absoluteFrom = ((_b = parentSequence === null || parentSequence === void 0 ? void 0 : parentSequence.absoluteFrom) !== null && _b !== void 0 ? _b : 0) + relativeFrom;
     const parentSequenceDuration = parentSequence
         ? Math.min(parentSequence.durationInFrames - effectiveRelativeFrom, durationInFrames)
         : durationInFrames;
@@ -116,23 +131,25 @@ const RegularSequenceRefForwardingFunction = ({ from = 0, trimBefore = 0, freeze
     // 10-frame pre-roll, because the positive child offset cancels part of the
     // negative parent offset. But <Sequence from={10}><Sequence from={-5}>
     // should still trim 5 frames from the media once the parent starts.
-    const currentSequenceStart = cumulatedFrom + effectiveRelativeFrom;
+    const currentSequenceStart = cumulatedFrom + relativeFrom;
     const parentSequenceStart = parentSequence
         ? parentSequence.cumulatedFrom + parentSequence.relativeFrom
         : 0;
     const parentFirstFrame = parentSequence
-        ? parentSequenceStart - parentSequence.cumulatedNegativeFrom
+        ? parentSequenceStart -
+            parentSequence.cumulatedNegativeFrom / parentPlaybackRate
         : 0;
-    const firstFrame = Math.max(0, parentFirstFrame, currentSequenceStart);
-    const cumulatedNegativeFrom = currentSequenceStart - firstFrame;
+    const firstFrame = Math.max(0, parentFirstFrame, cumulatedFrom + from / parentPlaybackRate);
+    const cumulatedNegativeFrom = (currentSequenceStart - firstFrame) * cumulativePlaybackRate;
     const contextValue = (0, react_1.useMemo)(() => {
         var _a, _b, _c;
         return {
+            playbackRate: cumulativePlaybackRate,
             absoluteFrom,
             cumulatedFrom,
-            relativeFrom: effectiveRelativeFrom,
+            relativeFrom,
             cumulatedNegativeFrom,
-            durationInFrames: actualDurationInFrames,
+            durationInFrames: actualDurationInFrames * playbackRate + trimBefore,
             parentFrom: (_a = parentSequence === null || parentSequence === void 0 ? void 0 : parentSequence.relativeFrom) !== null && _a !== void 0 ? _a : 0,
             id,
             height: (_b = height !== null && height !== void 0 ? height : parentSequence === null || parentSequence === void 0 ? void 0 : parentSequence.height) !== null && _b !== void 0 ? _b : null,
@@ -145,7 +162,10 @@ const RegularSequenceRefForwardingFunction = ({ from = 0, trimBefore = 0, freeze
     }, [
         cumulatedFrom,
         absoluteFrom,
-        effectiveRelativeFrom,
+        relativeFrom,
+        cumulativePlaybackRate,
+        playbackRate,
+        trimBefore,
         actualDurationInFrames,
         parentSequence,
         id,
@@ -167,11 +187,11 @@ const RegularSequenceRefForwardingFunction = ({ from = 0, trimBefore = 0, freeze
     // and if it changes, it would lead to-remounting of the sequence.
     const stackRef = (0, react_1.useRef)(null);
     stackRef.current = controls
-        ? ((_c = (_b = (0, enable_sequence_stack_traces_js_1.getStackForControls)(controls)) !== null && _b !== void 0 ? _b : stack) !== null && _c !== void 0 ? _c : null)
+        ? ((_d = (_c = (0, enable_sequence_stack_traces_js_1.getStackForControls)(controls)) !== null && _c !== void 0 ? _c : stack) !== null && _d !== void 0 ? _d : null)
         : (stack !== null && stack !== void 0 ? stack : null);
     const registeredFrozenFrame = typeof freeze === 'number' ? freeze : null;
     const registeredTrimBefore = trimBefore === 0 ? null : trimBefore;
-    const parentCumulatedNegativeFrom = (_d = parentSequence === null || parentSequence === void 0 ? void 0 : parentSequence.cumulatedNegativeFrom) !== null && _d !== void 0 ? _d : 0;
+    const parentCumulatedNegativeFrom = (_e = parentSequence === null || parentSequence === void 0 ? void 0 : parentSequence.cumulatedNegativeFrom) !== null && _e !== void 0 ? _e : 0;
     const startMediaFrom = isMedia && isMedia.type !== 'image'
         ? isMedia.data.startMediaFrom +
             parentCumulatedNegativeFrom -
@@ -233,6 +253,7 @@ const RegularSequenceRefForwardingFunction = ({ from = 0, trimBefore = 0, freeze
         if (isMedia) {
             if (isMedia.type === 'image') {
                 return {
+                    sequencePlaybackRate: playbackRate,
                     type: 'image',
                     controls: registrationControls,
                     effects: _remotionInternalEffects !== null && _remotionInternalEffects !== void 0 ? _remotionInternalEffects : EMPTY_EFFECTS,
@@ -259,6 +280,7 @@ const RegularSequenceRefForwardingFunction = ({ from = 0, trimBefore = 0, freeze
             }
             return {
                 type: isMedia.type,
+                sequencePlaybackRate: playbackRate,
                 controls: registrationControls,
                 effects: _remotionInternalEffects !== null && _remotionInternalEffects !== void 0 ? _remotionInternalEffects : EMPTY_EFFECTS,
                 effectRuntimeValues,
@@ -291,6 +313,7 @@ const RegularSequenceRefForwardingFunction = ({ from = 0, trimBefore = 0, freeze
         }
         return {
             from,
+            sequencePlaybackRate: playbackRate,
             trimBefore: registeredTrimBefore,
             duration: actualDurationInFrames,
             id,
@@ -315,6 +338,7 @@ const RegularSequenceRefForwardingFunction = ({ from = 0, trimBefore = 0, freeze
     }, [
         id,
         timelineClipName,
+        playbackRate,
         parentSequence === null || parentSequence === void 0 ? void 0 : parentSequence.id,
         actualDurationInFrames,
         from,
@@ -342,12 +366,19 @@ const RegularSequenceRefForwardingFunction = ({ from = 0, trimBefore = 0, freeze
             : null,
         id,
     });
-    // Ceil to support floats
-    // https://github.com/remotion-dev/remotion/issues/2958
-    const endThreshold = Math.ceil(cumulatedFrom + from + durationInFrames - 1);
-    const content = absoluteFrame < cumulatedFrom + from
+    // Use an exclusive end so fractional clocks and frozen subframes remain visible.
+    const frameInParent = (absoluteFrame - cumulatedFrom) * parentPlaybackRate;
+    const endThreshold = from + durationInFrames;
+    const boundaryTolerance = (0, get_sequence_boundary_tolerance_js_1.getSequenceBoundaryTolerance)({
+        absoluteFrame,
+        cumulatedFrom,
+        from,
+        parentPlaybackRate,
+        durationInFrames,
+    });
+    const content = frameInParent - from < -boundaryTolerance
         ? null
-        : absoluteFrame > endThreshold
+        : frameInParent - endThreshold >= -boundaryTolerance
             ? null
             : children;
     const frozenContent = content === null || typeof freeze === 'undefined' || freeze === null ? (content) : (jsx_runtime_1.jsx(freeze_js_1.Freeze, { frame: freeze, children: content }));

package/dist/cjs/SequenceContext.d.ts

@@ -1,10 +1,15 @@
 export declare const SequenceContext: import("react").Context<SequenceContextType | null>;
 export type SequenceContextType = {
+    /** Local frames elapsed per composition frame, including all ancestors. */
+    playbackRate: number;
+    /** Clock origins are expressed in composition frames. */
     absoluteFrom: number;
     cumulatedFrom: number;
+    /** Negative elapsed local frames at the first visible frame. */
     cumulatedNegativeFrom: number;
     relativeFrom: number;
     parentFrom: number;
+    /** Exclusive end of the local clock, including trimBefore. */
     durationInFrames: number;
     id: string;
     width: number | null;

package/dist/cjs/TimelineContext.d.ts

@@ -1,6 +1,7 @@
 import type { RefObject } from 'react';
 import React from 'react';
 import { type PlayableMediaTag } from './timeline-position-state';
+import { type TimelineSeek } from './use-timeline-seek';
 export type TimelineContextValue = {
     frame: Record<string, number>;
     isPlaying: () => boolean;
@@ -18,6 +19,7 @@ export type BufferingState = Readonly<{
     buffering: boolean;
 }>;
 export type SetTimelineContextValue = {
+    seek: TimelineSeek | null;
     setFrame: (u: React.SetStateAction<Record<string, number>>) => void;
     setPlaying: (u: React.SetStateAction<boolean>) => void;
     setBuffering: (buffering: boolean) => void;