remotion 4.0.476 → 4.0.477

package/dist/cjs/CompositionManager.d.ts

@@ -50,11 +50,13 @@ export type LoopDisplay = {
     startOffset: number;
     durationInFrames: number;
 };
+export type JsxComponentIdentity = string;
 export type SequenceControls = {
     schema: SequenceSchema;
     currentRuntimeValueDotNotation: Record<string, unknown>;
     overrideId: string;
     supportsEffects: boolean;
+    componentIdentity: JsxComponentIdentity | null;
 };
 export type TSequence = {
     from: number;

package/dist/cjs/HtmlInCanvas.js

@@ -296,11 +296,13 @@ HtmlInCanvasInner.displayName = 'HtmlInCanvas';
 const htmlInCanvasSchema = {
     durationInFrames: sequence_field_schema_js_1.durationInFramesField,
     from: sequence_field_schema_js_1.fromField,
+    freeze: sequence_field_schema_js_1.freezeField,
     ...sequence_field_schema_js_1.sequenceVisualStyleSchema,
     hidden: sequence_field_schema_js_1.hiddenField,
 };
 const HtmlInCanvasWrapped = (0, wrap_in_schema_js_1.wrapInSchema)({
     Component: HtmlInCanvasInner,
+    componentIdentity: 'dev.remotion.remotion.HtmlInCanvas',
     schema: htmlInCanvasSchema,
     supportsEffects: true,
 });

package/dist/cjs/Img.d.ts

@@ -16,7 +16,7 @@ export type ImgProps = NativeImgProps & {
      * @deprecated For internal use only
      */
     readonly stack?: string;
-} & Pick<SequenceProps, 'durationInFrames' | 'from' | 'hidden'>;
+} & Pick<SequenceProps, 'durationInFrames' | 'from' | 'freeze' | 'hidden'>;
 export declare const imgSchema: {
     readonly 'style.transformOrigin': {
         readonly type: "transform-origin";
@@ -65,6 +65,12 @@ export declare const imgSchema: {
         readonly step: 1;
         readonly hiddenFromList: true;
     };
+    readonly freeze: {
+        readonly type: "number";
+        readonly default: null;
+        readonly step: 1;
+        readonly hiddenFromList: true;
+    };
     readonly hidden: import("./sequence-field-schema.js").SequenceFieldSchema;
 };
 export declare const Img: React.ComponentType<NativeImgProps & {
@@ -81,5 +87,5 @@ export declare const Img: React.ComponentType<NativeImgProps & {
      * @deprecated For internal use only
      */
     readonly stack?: string | undefined;
-} & Pick<SequenceProps, "durationInFrames" | "from" | "hidden">>;
+} & Pick<SequenceProps, "durationInFrames" | "freeze" | "from" | "hidden">>;
 export {};

package/dist/cjs/Img.js

@@ -183,16 +183,17 @@ const ImgContent = ({ onError, maxRetries = 2, src, pauseWhenLoading, delayRende
     // src gets set once we've loaded and decoded the image.
     return (jsx_runtime_1.jsx("img", { ...props, ref: imageCallbackRef, crossOrigin: crossOriginValue, onError: didGetError, decoding: isRendering ? 'sync' : decoding }));
 };
-const NativeImgInner = ({ hidden, name, stack, showInTimeline, src, from, durationInFrames, _experimentalControls: controls, _remotionInternalRefForOutline: refForOutline, ...props }) => {
+const NativeImgInner = ({ hidden, name, stack, showInTimeline, src, from, durationInFrames, freeze, _experimentalControls: controls, _remotionInternalRefForOutline: refForOutline, ...props }) => {
     if (!src) {
         throw new Error('No "src" prop was passed to <Img>.');
     }
-    return (jsx_runtime_1.jsx(Sequence_js_1.Sequence, { layout: "none", from: from !== null && from !== void 0 ? from : 0, durationInFrames: durationInFrames !== null && durationInFrames !== void 0 ? durationInFrames : Infinity, _remotionInternalStack: stack, _remotionInternalDocumentationLink: "https://www.remotion.dev/docs/img", _remotionInternalIsMedia: { type: 'image', src }, name: name !== null && name !== void 0 ? name : '<Img>', _experimentalControls: controls, showInTimeline: showInTimeline !== null && showInTimeline !== void 0 ? showInTimeline : true, hidden: hidden, _remotionInternalRefForOutline: refForOutline, children: jsx_runtime_1.jsx(ImgContent, { src: src, refForOutline: refForOutline, ...props }) }));
+    return (jsx_runtime_1.jsx(Sequence_js_1.Sequence, { layout: "none", from: from !== null && from !== void 0 ? from : 0, durationInFrames: durationInFrames !== null && durationInFrames !== void 0 ? durationInFrames : Infinity, freeze: freeze, _remotionInternalStack: stack, _remotionInternalDocumentationLink: "https://www.remotion.dev/docs/img", _remotionInternalIsMedia: { type: 'image', src }, name: name !== null && name !== void 0 ? name : '<Img>', _experimentalControls: controls, showInTimeline: showInTimeline !== null && showInTimeline !== void 0 ? showInTimeline : true, hidden: hidden, _remotionInternalRefForOutline: refForOutline, children: jsx_runtime_1.jsx(ImgContent, { src: src, refForOutline: refForOutline, ...props }) }));
 };
 const CanvasImageWithPrivateProps = index_js_1.CanvasImage;
 exports.imgSchema = {
     durationInFrames: sequence_field_schema_js_1.durationInFramesField,
     from: sequence_field_schema_js_1.fromField,
+    freeze: sequence_field_schema_js_1.freezeField,
     ...sequence_field_schema_js_1.sequenceVisualStyleSchema,
     hidden: sequence_field_schema_js_1.hiddenField,
 };
@@ -235,11 +236,11 @@ const getFitFromObjectFit = (style) => {
     }
     return undefined;
 };
-const ImgInner = ({ effects = [], ref, hidden, name, stack, showInTimeline, src, from, durationInFrames, _experimentalControls: controls, width, height, className, style, id, pauseWhenLoading, maxRetries, delayRenderRetries, delayRenderTimeoutInMilliseconds, ...props }) => {
+const ImgInner = ({ effects = [], ref, hidden, name, stack, showInTimeline, src, from, durationInFrames, freeze, _experimentalControls: controls, width, height, className, style, id, pauseWhenLoading, maxRetries, delayRenderRetries, delayRenderTimeoutInMilliseconds, ...props }) => {
     var _a;
     const refForOutline = (0, react_1.useRef)(null);
     if (effects.length === 0) {
-        return (jsx_runtime_1.jsx(NativeImgInner, { ...props, ref: ref, hidden: hidden, name: name, stack: stack, showInTimeline: showInTimeline, src: src, from: from, durationInFrames: durationInFrames, _experimentalControls: controls, width: width, height: height, className: className, style: style, id: id, pauseWhenLoading: pauseWhenLoading, maxRetries: maxRetries, delayRenderRetries: delayRenderRetries, delayRenderTimeoutInMilliseconds: delayRenderTimeoutInMilliseconds, _remotionInternalRefForOutline: refForOutline }));
+        return (jsx_runtime_1.jsx(NativeImgInner, { ...props, ref: ref, hidden: hidden, name: name, stack: stack, showInTimeline: showInTimeline, src: src, from: from, durationInFrames: durationInFrames, freeze: freeze, _experimentalControls: controls, width: width, height: height, className: className, style: style, id: id, pauseWhenLoading: pauseWhenLoading, maxRetries: maxRetries, delayRenderRetries: delayRenderRetries, delayRenderTimeoutInMilliseconds: delayRenderTimeoutInMilliseconds, _remotionInternalRefForOutline: refForOutline }));
     }
     if (!src) {
         throw new Error('No "src" prop was passed to <Img>.');
@@ -254,7 +255,7 @@ const ImgInner = ({ effects = [], ref, hidden, name, stack, showInTimeline, src,
     const canvasHeight = typeof height === 'number' ? height : undefined;
     const canvasProps = props;
     const canvasFit = (_a = getFitFromObjectFit(style)) !== null && _a !== void 0 ? _a : 'fill';
-    return (jsx_runtime_1.jsx(CanvasImageWithPrivateProps, { src: src, width: canvasWidth, height: canvasHeight, fit: canvasFit, effects: effects, className: className, style: style, id: id, pauseWhenLoading: pauseWhenLoading, maxRetries: maxRetries, delayRenderRetries: delayRenderRetries, delayRenderTimeoutInMilliseconds: delayRenderTimeoutInMilliseconds, from: from, durationInFrames: durationInFrames, hidden: hidden, name: name !== null && name !== void 0 ? name : '<Img>', showInTimeline: showInTimeline, stack: stack, _remotionInternalDocumentationLink: "https://www.remotion.dev/docs/img", _experimentalControls: controls, _remotionInternalRefForOutline: refForOutline, ...canvasProps }));
+    return (jsx_runtime_1.jsx(CanvasImageWithPrivateProps, { src: src, width: canvasWidth, height: canvasHeight, fit: canvasFit, effects: effects, className: className, style: style, id: id, pauseWhenLoading: pauseWhenLoading, maxRetries: maxRetries, delayRenderRetries: delayRenderRetries, delayRenderTimeoutInMilliseconds: delayRenderTimeoutInMilliseconds, from: from, durationInFrames: durationInFrames, freeze: freeze, hidden: hidden, name: name !== null && name !== void 0 ? name : '<Img>', showInTimeline: showInTimeline, stack: stack, _remotionInternalDocumentationLink: "https://www.remotion.dev/docs/img", _experimentalControls: controls, _remotionInternalRefForOutline: refForOutline, ...canvasProps }));
 };
 /*
  * @description Works just like a regular HTML img tag. When you use the <Img> tag, Remotion will ensure that the image is loaded before rendering the frame.
@@ -262,6 +263,7 @@ const ImgInner = ({ effects = [], ref, hidden, name, stack, showInTimeline, src,
  */
 exports.Img = (0, wrap_in_schema_js_1.wrapInSchema)({
     Component: ImgInner,
+    componentIdentity: 'dev.remotion.remotion.Img',
     schema: exports.imgSchema,
     supportsEffects: true,
 });

package/dist/cjs/Interactive.d.ts

@@ -4,7 +4,7 @@ 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;
-type InteractiveSequenceProps = Pick<SequenceProps, 'durationInFrames' | 'from' | 'hidden' | 'name' | 'showInTimeline'> & {
+type InteractiveSequenceProps = Pick<SequenceProps, 'durationInFrames' | 'from' | 'freeze' | 'hidden' | 'name' | 'showInTimeline'> & {
     /**
      * @deprecated For internal use only
      */

package/dist/cjs/Interactive.js

@@ -43,6 +43,7 @@ const wrap_in_schema_js_1 = require("./wrap-in-schema.js");
 const interactiveElementSchema = {
     durationInFrames: sequence_field_schema_js_1.durationInFramesField,
     from: sequence_field_schema_js_1.fromField,
+    freeze: sequence_field_schema_js_1.freezeField,
     ...sequence_field_schema_js_1.sequenceVisualStyleSchema,
     hidden: sequence_field_schema_js_1.hiddenField,
 };
@@ -56,13 +57,13 @@ const setRef = (ref, value) => {
 };
 const makeInteractiveElement = (tag, displayName) => {
     const Inner = (0, react_1.forwardRef)((propsWithControls, ref) => {
-        const { durationInFrames, from, hidden, name, showInTimeline, stack, _experimentalControls, ...props } = propsWithControls;
+        const { durationInFrames, from, freeze, hidden, name, showInTimeline, stack, _experimentalControls, ...props } = propsWithControls;
         const refForOutline = (0, react_1.useRef)(null);
         const callbackRef = (0, react_1.useCallback)((element) => {
             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, durationInFrames: durationInFrames !== null && durationInFrames !== void 0 ? durationInFrames : Infinity, hidden: hidden, name: name !== null && name !== void 0 ? name : displayName, showInTimeline: showInTimeline !== null && showInTimeline !== void 0 ? showInTimeline : true, _experimentalControls: _experimentalControls, _remotionInternalStack: stack, _remotionInternalDocumentationLink: "https://www.remotion.dev/docs/interactive", _remotionInternalRefForOutline: refForOutline, children: react_1.default.createElement(tag, {
+        return (jsx_runtime_1.jsx(Sequence_js_1.Sequence, { layout: "none", from: from !== null && from !== void 0 ? from : 0, 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, _experimentalControls: _experimentalControls, _remotionInternalStack: stack, _remotionInternalDocumentationLink: "https://www.remotion.dev/docs/interactive", _remotionInternalRefForOutline: refForOutline, children: react_1.default.createElement(tag, {
                 ...props,
                 ref: callbackRef,
             }) }));
@@ -70,6 +71,7 @@ const makeInteractiveElement = (tag, displayName) => {
     Inner.displayName = displayName;
     const Wrapped = (0, wrap_in_schema_js_1.wrapInSchema)({
         Component: Inner,
+        componentIdentity: `dev.remotion.remotion.${displayName.slice(1, -1)}`,
         schema: interactiveElementSchema,
         supportsEffects: false,
     });

package/dist/cjs/Sequence.d.ts

@@ -19,6 +19,7 @@ export type SequencePropsWithoutDuration = {
     readonly width?: number;
     readonly height?: number;
     readonly from?: number;
+    readonly freeze?: number | null;
     readonly name?: string;
     readonly showInTimeline?: boolean;
     readonly hidden?: boolean;

package/dist/cjs/Sequence.js

@@ -19,7 +19,7 @@ const use_video_config_js_1 = require("./use-video-config.js");
 const v5_flag_js_1 = require("./v5-flag.js");
 const wrap_in_schema_js_1 = require("./wrap-in-schema.js");
 const EMPTY_EFFECTS = [];
-const RegularSequenceRefForwardingFunction = ({ from = 0, durationInFrames = Infinity, children, name, height, width, showInTimeline = true, hidden = false, _experimentalControls: controls, _remotionInternalEffects, _remotionInternalLoopDisplay: loopDisplay, _remotionInternalStack: stack, _remotionInternalDocumentationLink: documentationLink, _remotionInternalPremountDisplay: premountDisplay, _remotionInternalPostmountDisplay: postmountDisplay, _remotionInternalIsMedia: isMedia, _remotionInternalRefForOutline: refForOutline, ...other }, ref) => {
+const RegularSequenceRefForwardingFunction = ({ from = 0, freeze, durationInFrames = Infinity, children, name, height, width, showInTimeline = true, hidden = false, _experimentalControls: controls, _remotionInternalEffects, _remotionInternalLoopDisplay: loopDisplay, _remotionInternalStack: stack, _remotionInternalDocumentationLink: documentationLink, _remotionInternalPremountDisplay: premountDisplay, _remotionInternalPostmountDisplay: postmountDisplay, _remotionInternalIsMedia: isMedia, _remotionInternalRefForOutline: passedRefForOutline, ...other }, ref) => {
     var _a, _b;
     const { layout = 'absolute-fill' } = other;
     const [id] = (0, react_1.useState)(() => String(Math.random()));
@@ -51,6 +51,17 @@ const RegularSequenceRefForwardingFunction = ({ from = 0, durationInFrames = Inf
     if (!Number.isFinite(from)) {
         throw new TypeError(`The "from" prop of a sequence must be finite, but got ${from}.`);
     }
+    if (typeof freeze !== 'undefined' && freeze !== null) {
+        if (typeof freeze !== 'number') {
+            throw new TypeError(`The "freeze" prop of <Sequence /> must be a number, but is of type ${typeof freeze}.`);
+        }
+        if (Number.isNaN(freeze)) {
+            throw new TypeError(`The "freeze" prop of <Sequence /> must be a real number, but it is NaN.`);
+        }
+        if (!Number.isFinite(freeze)) {
+            throw new TypeError(`The "freeze" prop of <Sequence /> must be finite, but it is ${freeze}.`);
+        }
+    }
     const absoluteFrame = (0, timeline_position_state_js_1.useTimelinePosition)();
     const videoConfig = (0, use_video_config_js_1.useVideoConfig)();
     const parentSequenceDuration = parentSequence
@@ -58,6 +69,10 @@ const RegularSequenceRefForwardingFunction = ({ from = 0, durationInFrames = Inf
         : durationInFrames;
     const actualDurationInFrames = Math.max(0, Math.min(videoConfig.durationInFrames - from, parentSequenceDuration));
     const { registerSequence, unregisterSequence } = (0, react_1.useContext)(SequenceManager_js_1.SequenceManager);
+    const wrapperRefForOutline = (0, react_1.useRef)(null);
+    const refForOutline = other.layout === 'none'
+        ? (passedRefForOutline !== null && passedRefForOutline !== void 0 ? passedRefForOutline : null)
+        : (passedRefForOutline !== null && passedRefForOutline !== void 0 ? passedRefForOutline : wrapperRefForOutline);
     const premounting = (0, react_1.useMemo)(() => {
         // || is intentional, ?? would not trigger on `false`
         return ((parentSequence === null || parentSequence === void 0 ? void 0 : parentSequence.premounting) ||
@@ -248,7 +263,17 @@ const RegularSequenceRefForwardingFunction = ({ from = 0, durationInFrames = Inf
         : absoluteFrame > endThreshold
             ? null
             : children;
+    const frozenContent = content === null || typeof freeze === 'undefined' || freeze === null ? (content) : (jsx_runtime_1.jsx(freeze_js_1.Freeze, { frame: freeze, children: content }));
     const styleIfThere = other.layout === 'none' ? undefined : other.style;
+    const sequenceRef = (0, react_1.useCallback)((node) => {
+        wrapperRefForOutline.current = node;
+        if (typeof ref === 'function') {
+            ref(node);
+        }
+        else if (ref) {
+            ref.current = node;
+        }
+    }, [ref]);
     const defaultStyle = (0, react_1.useMemo)(() => {
         return {
             flexDirection: undefined,
@@ -263,7 +288,7 @@ const RegularSequenceRefForwardingFunction = ({ from = 0, durationInFrames = Inf
     if (hidden) {
         return null;
     }
-    return (jsx_runtime_1.jsx(SequenceContext_js_1.SequenceContext.Provider, { value: contextValue, children: content === null ? null : other.layout === 'none' ? (content) : (jsx_runtime_1.jsx(AbsoluteFill_js_1.AbsoluteFill, { ref: ref, style: defaultStyle, className: other.className, children: content })) }));
+    return (jsx_runtime_1.jsx(SequenceContext_js_1.SequenceContext.Provider, { value: contextValue, children: frozenContent === null ? null : other.layout === 'none' ? (frozenContent) : (jsx_runtime_1.jsx(AbsoluteFill_js_1.AbsoluteFill, { ref: sequenceRef, style: defaultStyle, className: other.className, children: frozenContent })) }));
 };
 const RegularSequence = (0, react_1.forwardRef)(RegularSequenceRefForwardingFunction);
 const PremountedPostmountedSequenceRefForwardingFunction = (props, ref) => {
@@ -326,11 +351,13 @@ exports.SequenceWithoutSchema = SequenceInner;
  */
 exports.Sequence = (0, wrap_in_schema_js_1.wrapInSchema)({
     Component: SequenceInner,
+    componentIdentity: 'dev.remotion.remotion.Sequence',
     schema: sequence_field_schema_js_1.sequenceSchema,
     supportsEffects: false,
 });
 exports.SequenceWithoutFrom = (0, wrap_in_schema_js_1.wrapInSchema)({
     Component: SequenceInner,
+    componentIdentity: null,
     schema: sequence_field_schema_js_1.sequenceSchemaWithoutFrom,
     supportsEffects: false,
 });

package/dist/cjs/animated-image/AnimatedImage.js

@@ -19,6 +19,7 @@ const resolve_image_source_1 = require("./resolve-image-source");
 const animatedImageSchema = {
     durationInFrames: sequence_field_schema_js_1.durationInFramesField,
     from: sequence_field_schema_js_1.fromField,
+    freeze: sequence_field_schema_js_1.freezeField,
     playbackRate: {
         type: 'number',
         min: 0,
@@ -177,6 +178,7 @@ const AnimatedImageInner = ({ src, width, height, onError, fit, playbackRate, lo
 };
 exports.AnimatedImage = (0, wrap_in_schema_js_1.wrapInSchema)({
     Component: AnimatedImageInner,
+    componentIdentity: 'dev.remotion.remotion.AnimatedImage',
     schema: animatedImageSchema,
     supportsEffects: true,
 });

package/dist/cjs/canvas-image/CanvasImage.d.ts

@@ -49,6 +49,12 @@ export declare const canvasImageSchema: {
         readonly step: 1;
         readonly hiddenFromList: true;
     };
+    readonly freeze: {
+        readonly type: "number";
+        readonly default: null;
+        readonly step: 1;
+        readonly hiddenFromList: true;
+    };
     readonly fit: {
         readonly type: "enum";
         readonly default: "fill";
@@ -61,7 +67,7 @@ export declare const canvasImageSchema: {
     };
     readonly hidden: import("../sequence-field-schema.js").SequenceFieldSchema;
 };
-export declare const CanvasImage: import("react").ComponentType<Pick<import("../Sequence.js").SequenceProps, "durationInFrames" | "from" | "hidden" | "name" | "showInTimeline"> & {
+export declare const CanvasImage: import("react").ComponentType<Pick<import("../Sequence.js").SequenceProps, "durationInFrames" | "freeze" | "from" | "hidden" | "name" | "showInTimeline"> & {
     readonly stack?: string | undefined;
 } & CanvasImageCanvasProps & {
     readonly src: string;

package/dist/cjs/canvas-image/CanvasImage.js

@@ -19,6 +19,7 @@ const wrap_in_schema_js_1 = require("../wrap-in-schema.js");
 exports.canvasImageSchema = {
     durationInFrames: sequence_field_schema_js_1.durationInFramesField,
     from: sequence_field_schema_js_1.fromField,
+    freeze: sequence_field_schema_js_1.freezeField,
     fit: {
         type: 'enum',
         default: 'fill',
@@ -236,7 +237,7 @@ const CanvasImageContent = (0, react_1.forwardRef)(({ src, width, height, fit =
     return (jsx_runtime_1.jsx("canvas", { ...canvasProps, ref: canvasRef, width: width, height: height, className: className, style: style, id: id }));
 });
 CanvasImageContent.displayName = 'CanvasImageContent';
-const CanvasImageInner = (0, react_1.forwardRef)(({ src, width, height, fit, effects = [], className, style, id, onError, pauseWhenLoading, maxRetries, delayRenderRetries, delayRenderTimeoutInMilliseconds, durationInFrames, from, hidden, name, showInTimeline, stack, _experimentalControls: controls, _remotionInternalDocumentationLink, _remotionInternalRefForOutline, ...canvasProps }, ref) => {
+const CanvasImageInner = (0, react_1.forwardRef)(({ src, width, height, fit, effects = [], className, style, id, onError, pauseWhenLoading, maxRetries, delayRenderRetries, delayRenderTimeoutInMilliseconds, durationInFrames, from, freeze, hidden, name, showInTimeline, stack, _experimentalControls: controls, _remotionInternalDocumentationLink, _remotionInternalRefForOutline, ...canvasProps }, ref) => {
     if (!src) {
         throw new Error('No "src" prop was passed to <CanvasImage>.');
     }
@@ -245,7 +246,7 @@ const CanvasImageInner = (0, react_1.forwardRef)(({ src, width, height, fit, eff
     (0, react_1.useImperativeHandle)(ref, () => {
         return actualRef.current;
     }, []);
-    return (jsx_runtime_1.jsx(Sequence_js_1.Sequence, { layout: "none", from: from !== null && from !== void 0 ? from : 0, durationInFrames: durationInFrames !== null && durationInFrames !== void 0 ? durationInFrames : Infinity, hidden: hidden, showInTimeline: showInTimeline !== null && showInTimeline !== void 0 ? showInTimeline : true, name: name !== null && name !== void 0 ? name : '<CanvasImage>', _remotionInternalDocumentationLink: _remotionInternalDocumentationLink !== null && _remotionInternalDocumentationLink !== void 0 ? _remotionInternalDocumentationLink : 'https://www.remotion.dev/docs/canvasimage', _experimentalControls: controls, _remotionInternalEffects: memoizedEffectDefinitions, _remotionInternalIsMedia: { type: 'image', src }, _remotionInternalStack: stack, _remotionInternalRefForOutline: _remotionInternalRefForOutline !== null && _remotionInternalRefForOutline !== void 0 ? _remotionInternalRefForOutline : actualRef, children: jsx_runtime_1.jsx(CanvasImageContent, { ref: actualRef, src: src, width: width, height: height, fit: fit, effects: effects, controls: controls, className: className, style: style, id: id, onError: onError, pauseWhenLoading: pauseWhenLoading, maxRetries: maxRetries, delayRenderRetries: delayRenderRetries, delayRenderTimeoutInMilliseconds: delayRenderTimeoutInMilliseconds, refForOutline: _remotionInternalRefForOutline !== null && _remotionInternalRefForOutline !== void 0 ? _remotionInternalRefForOutline : null, ...canvasProps }) }));
+    return (jsx_runtime_1.jsx(Sequence_js_1.Sequence, { layout: "none", from: from !== null && from !== void 0 ? from : 0, durationInFrames: durationInFrames !== null && durationInFrames !== void 0 ? durationInFrames : Infinity, freeze: freeze, hidden: hidden, showInTimeline: showInTimeline !== null && showInTimeline !== void 0 ? showInTimeline : true, name: name !== null && name !== void 0 ? name : '<CanvasImage>', _remotionInternalDocumentationLink: _remotionInternalDocumentationLink !== null && _remotionInternalDocumentationLink !== void 0 ? _remotionInternalDocumentationLink : 'https://www.remotion.dev/docs/canvasimage', _experimentalControls: controls, _remotionInternalEffects: memoizedEffectDefinitions, _remotionInternalIsMedia: { type: 'image', src }, _remotionInternalStack: stack, _remotionInternalRefForOutline: _remotionInternalRefForOutline !== null && _remotionInternalRefForOutline !== void 0 ? _remotionInternalRefForOutline : actualRef, children: jsx_runtime_1.jsx(CanvasImageContent, { ref: actualRef, src: src, width: width, height: height, fit: fit, effects: effects, controls: controls, className: className, style: style, id: id, onError: onError, pauseWhenLoading: pauseWhenLoading, maxRetries: maxRetries, delayRenderRetries: delayRenderRetries, delayRenderTimeoutInMilliseconds: delayRenderTimeoutInMilliseconds, refForOutline: _remotionInternalRefForOutline !== null && _remotionInternalRefForOutline !== void 0 ? _remotionInternalRefForOutline : null, ...canvasProps }) }));
 });
 /*
  * @description Renders a static image to a `<canvas>` and applies Remotion effects.
@@ -253,6 +254,7 @@ const CanvasImageInner = (0, react_1.forwardRef)(({ src, width, height, fit, eff
  */
 exports.CanvasImage = (0, wrap_in_schema_js_1.wrapInSchema)({
     Component: CanvasImageInner,
+    componentIdentity: 'dev.remotion.remotion.CanvasImage',
     schema: exports.canvasImageSchema,
     supportsEffects: true,
 });

package/dist/cjs/canvas-image/props.d.ts

@@ -2,7 +2,7 @@ import type React from 'react';
 import type { ImageFit } from '../calculate-image-fit.js';
 import type { EffectsProp } from '../effects/effect-types.js';
 import type { SequenceProps } from '../Sequence.js';
-type CanvasImageSequenceProps = Pick<SequenceProps, 'durationInFrames' | 'from' | 'hidden' | 'name' | 'showInTimeline'> & {
+type CanvasImageSequenceProps = Pick<SequenceProps, 'durationInFrames' | 'from' | 'freeze' | 'hidden' | 'name' | 'showInTimeline'> & {
     /**
      * @deprecated For internal use only.
      */

package/dist/cjs/effects/Solid.d.ts

@@ -13,5 +13,5 @@ type OptionalProps = {
     readonly pixelDensity: number | undefined;
 };
 export type SolidProps = MandatoryProps & Partial<OptionalProps>;
-export declare const Solid: React.ComponentType<MandatoryProps & Partial<OptionalProps> & Pick<SequenceProps, "durationInFrames" | "from" | "hidden" | "name" | "showInTimeline"> & React.RefAttributes<HTMLCanvasElement>>;
+export declare const Solid: React.ComponentType<MandatoryProps & Partial<OptionalProps> & Pick<SequenceProps, "durationInFrames" | "freeze" | "from" | "hidden" | "name" | "showInTimeline"> & React.RefAttributes<HTMLCanvasElement>>;
 export {};

package/dist/cjs/effects/Solid.js

@@ -25,6 +25,7 @@ const resolveSolidPixelDensity = (pixelDensity) => {
 const solidSchema = {
     durationInFrames: sequence_field_schema_js_1.durationInFramesField,
     from: sequence_field_schema_js_1.fromField,
+    freeze: sequence_field_schema_js_1.freezeField,
     color: {
         type: 'color',
         default: 'transparent',
@@ -140,7 +141,7 @@ const SolidInner = ({ color, width, height, effects = [], className, style, pixe
     }, [height, style, width]);
     return (jsx_runtime_1.jsx("canvas", { ref: canvasRef, width: canvasWidth, height: canvasHeight, className: className, style: canvasStyle }));
 };
-const SolidOuter = (0, react_1.forwardRef)(({ effects = [], _experimentalControls: controls, color, height, width, className, durationInFrames, style, name, from, hidden, showInTimeline, pixelDensity, ...props }, ref) => {
+const SolidOuter = (0, react_1.forwardRef)(({ effects = [], _experimentalControls: controls, color, height, width, className, durationInFrames, style, name, from, freeze, hidden, showInTimeline, pixelDensity, ...props }, ref) => {
     var _a;
     props;
     const memoizedEffectDefinitions = (0, use_memoized_effects_js_1.useMemoizedEffectDefinitions)(effects);
@@ -148,10 +149,11 @@ const SolidOuter = (0, react_1.forwardRef)(({ effects = [], _experimentalControl
     (0, react_1.useImperativeHandle)(ref, () => {
         return actualRef.current;
     }, []);
-    return (jsx_runtime_1.jsx(Sequence_js_1.Sequence, { layout: "none", from: from, hidden: hidden, showInTimeline: showInTimeline, _experimentalControls: controls, _remotionInternalEffects: memoizedEffectDefinitions, durationInFrames: durationInFrames, name: name !== null && name !== void 0 ? name : '<Solid>', _remotionInternalRefForOutline: actualRef, _remotionInternalDocumentationLink: "https://www.remotion.dev/docs/solid", ...props, children: jsx_runtime_1.jsx(SolidInner, { reference: actualRef, overrideId: (_a = controls === null || controls === void 0 ? void 0 : controls.overrideId) !== null && _a !== void 0 ? _a : null, color: color, height: height, width: width, className: className, style: style, effects: effects, pixelDensity: pixelDensity }) }));
+    return (jsx_runtime_1.jsx(Sequence_js_1.Sequence, { layout: "none", from: from, freeze: freeze, hidden: hidden, showInTimeline: showInTimeline, _experimentalControls: controls, _remotionInternalEffects: memoizedEffectDefinitions, durationInFrames: durationInFrames, name: name !== null && name !== void 0 ? name : '<Solid>', _remotionInternalRefForOutline: actualRef, _remotionInternalDocumentationLink: "https://www.remotion.dev/docs/solid", ...props, children: jsx_runtime_1.jsx(SolidInner, { reference: actualRef, overrideId: (_a = controls === null || controls === void 0 ? void 0 : controls.overrideId) !== null && _a !== void 0 ? _a : null, color: color, height: height, width: width, className: className, style: style, effects: effects, pixelDensity: pixelDensity }) }));
 });
 exports.Solid = (0, wrap_in_schema_js_1.wrapInSchema)({
     Component: SolidOuter,
+    componentIdentity: 'dev.remotion.remotion.Solid',
     schema: solidSchema,
     supportsEffects: true,
 });

package/dist/cjs/index.d.ts

@@ -1,7 +1,7 @@
 import './_check-rsc.js';
 import './asset-types.js';
 import type { Codec } from './codec.js';
-import type { AnyCompMetadata, AnyComposition, AudioOrVideoAsset, LoopDisplay, SequenceControls, TRenderAsset } from './CompositionManager.js';
+import type { AnyCompMetadata, AnyComposition, AudioOrVideoAsset, JsxComponentIdentity, LoopDisplay, SequenceControls, TRenderAsset } from './CompositionManager.js';
 import type { DelayRenderScope } from './delay-render.js';
 import { type TFolder } from './Folder.js';
 import type { StaticFile } from './get-static-files.js';
@@ -182,4 +182,4 @@ export type _InternalTypes = {
     TRenderAsset: TRenderAsset;
     ProResProfile: ProResProfile;
 };
-export type { AnyComposition, ArrayFieldSchema, ArrayItemFieldSchema, DelayRenderScope, LoopDisplay, SequenceControls, SequenceFieldSchema, SequenceSchema, UseBufferState, };
+export type { AnyComposition, ArrayFieldSchema, ArrayItemFieldSchema, DelayRenderScope, JsxComponentIdentity, LoopDisplay, SequenceControls, SequenceFieldSchema, SequenceSchema, UseBufferState, };

package/dist/cjs/internals.d.ts

@@ -2,7 +2,7 @@ import type { ScheduleAudioNodeResult } from './audio/shared-audio-tags.js';
 import { type ScheduleAudioNodeOptions } from './audio/shared-audio-tags.js';
 import type { RemotionAudioContextState } from './audio/use-audio-context.js';
 import { type CompProps } from './Composition.js';
-import type { TCompMetadata, TComposition, TRenderAsset, TSequence } from './CompositionManager.js';
+import type { JsxComponentIdentity, TCompMetadata, TComposition, TRenderAsset, TSequence } from './CompositionManager.js';
 import type { CompositionManagerContext } from './CompositionManagerContext.js';
 import * as CSSUtils from './default-css.js';
 import type { SerializedJSONWithCustomFields } from './input-props-serialization.js';
@@ -77,10 +77,11 @@ export declare const Internals: {
     readonly SequenceManager: import("react").Context<import("./SequenceManager.js").SequenceManagerContext>;
     readonly SequenceManagerRefContext: import("react").Context<import("./SequenceManager.js").SequenceManagerRef>;
     readonly SequenceStackTracesUpdateContext: import("react").Context<import("./sequence-stack-traces.js").UpdateResolvedStackTraceFn>;
-    readonly wrapInSchema: <S extends SequenceSchema, Props extends object>({ Component, schema, supportsEffects, }: {
+    readonly wrapInSchema: <S extends SequenceSchema, Props extends object>({ Component, componentIdentity, schema, supportsEffects, }: {
         Component: import("react").ComponentType<Props & {
             readonly _experimentalControls: import("./CompositionManager.js").SequenceControls | undefined;
         }>;
+        componentIdentity: string | null;
         schema: S;
         supportsEffects: boolean;
     }) => import("react").ComponentType<Props>;
@@ -93,6 +94,12 @@ export declare const Internals: {
             readonly step: 1;
             readonly hiddenFromList: true;
         };
+        readonly freeze: {
+            readonly type: "number";
+            readonly default: null;
+            readonly step: 1;
+            readonly hiddenFromList: true;
+        };
         readonly durationInFrames: {
             readonly type: "number";
             readonly default: undefined;
@@ -739,6 +746,12 @@ export declare const Internals: {
         readonly step: 1;
         readonly hiddenFromList: true;
     };
+    readonly freezeField: {
+        readonly type: "number";
+        readonly default: null;
+        readonly step: 1;
+        readonly hiddenFromList: true;
+    };
     readonly fromField: {
         readonly type: "number";
         readonly default: 0;
@@ -746,4 +759,4 @@ export declare const Internals: {
         readonly hiddenFromList: true;
     };
 };
-export type { ArrayFieldSchema, ArrayItemFieldSchema, CannotUpdateSequenceReason, CanUpdateEffectPropsResponse, CanUpdateEffectPropsResponseFalse, CanUpdateEffectPropsResponseTrue, CanUpdateSequencePropsResponse, CanUpdateSequencePropsResponseFalse, CanUpdateSequencePropsResponseTrue, CanUpdateSequencePropStatus, CanUpdateSequencePropStatusFalse, CanUpdateSequencePropStatusKeyframed, CanUpdateSequencePropStatusStatic, CompositionManagerContext, CompProps, DragOverrides, DragOverrideValue, EffectDragOverrides, GetDragOverrides, GetEffectDragOverrides, GetEffectPropStatuses, GetPropStatuses, LoggingContextValue, MediaVolumeContextValue, NonceHistory, OverrideIdsToNodePathsGettersContext, OverrideIdsToNodePathsSettersContext, OverrideIdToNodePaths, OverrideToNodePathGetters, OverrideToNodeSetters, PlaybackRateContextValue, PropStatuses, RemotionAudioContextState, RemotionEnvironment, ResolvedStackLocation, ScheduleAudioNodeOptions, ScheduleAudioNodeResult, SequenceFieldSchema, SequenceNodePath, SequencePropsSubscriptionKey, SequenceSchema, SerializedJSONWithCustomFields, SetMediaVolumeContextValue, SetTimelineContextValue, TCompMetadata, TComposition, TimelineContextValue, TRenderAsset, TSequence, VisibleFieldSchema, WatchRemotionStaticFilesPayload, };
+export type { ArrayFieldSchema, ArrayItemFieldSchema, CannotUpdateSequenceReason, CanUpdateEffectPropsResponse, CanUpdateEffectPropsResponseFalse, CanUpdateEffectPropsResponseTrue, CanUpdateSequencePropsResponse, CanUpdateSequencePropsResponseFalse, CanUpdateSequencePropsResponseTrue, CanUpdateSequencePropStatus, CanUpdateSequencePropStatusFalse, CanUpdateSequencePropStatusKeyframed, CanUpdateSequencePropStatusStatic, CompositionManagerContext, CompProps, DragOverrides, DragOverrideValue, EffectDragOverrides, GetDragOverrides, GetEffectDragOverrides, GetEffectPropStatuses, GetPropStatuses, JsxComponentIdentity, LoggingContextValue, MediaVolumeContextValue, NonceHistory, OverrideIdsToNodePathsGettersContext, OverrideIdsToNodePathsSettersContext, OverrideIdToNodePaths, OverrideToNodePathGetters, OverrideToNodeSetters, PlaybackRateContextValue, PropStatuses, RemotionAudioContextState, RemotionEnvironment, ResolvedStackLocation, ScheduleAudioNodeOptions, ScheduleAudioNodeResult, SequenceFieldSchema, SequenceNodePath, SequencePropsSubscriptionKey, SequenceSchema, SerializedJSONWithCustomFields, SetMediaVolumeContextValue, SetTimelineContextValue, TCompMetadata, TComposition, TimelineContextValue, TRenderAsset, TSequence, VisibleFieldSchema, WatchRemotionStaticFilesPayload, };

package/dist/cjs/internals.js

@@ -262,5 +262,6 @@ exports.Internals = {
     getEffectPropStatusesCtx: use_memoized_effects_js_1.getEffectPropStatusesCtx,
     hiddenField: sequence_field_schema_js_1.hiddenField,
     durationInFramesField: sequence_field_schema_js_1.durationInFramesField,
+    freezeField: sequence_field_schema_js_1.freezeField,
     fromField: sequence_field_schema_js_1.fromField,
 };

package/dist/cjs/interpolate-translate.d.ts

@@ -0,0 +1,8 @@
+import { type InterpolateOptions } from './interpolate.js';
+export type InterpolateTranslateOptions = InterpolateOptions;
+export declare const interpolateTranslate: (input: number, inputRange: readonly number[], outputRange: readonly string[], options?: Partial<{
+    easing: import("./interpolate.js").EasingFunction | readonly import("./interpolate.js").EasingFunction[];
+    extrapolateLeft: import("./interpolate.js").ExtrapolateType;
+    extrapolateRight: import("./interpolate.js").ExtrapolateType;
+    posterize: number;
+}> | undefined) => string;

package/dist/cjs/interpolate-translate.js

@@ -0,0 +1,70 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.interpolateTranslate = void 0;
+const interpolate_js_1 = require("./interpolate.js");
+const pixelValueRegex = /^([+-]?(?:\d+\.?\d*|\.\d+))px$/;
+const parseTranslate = (value) => {
+    if (typeof value !== 'string') {
+        throw new TypeError(`outputRange must contain only strings, but got ${typeof value}`);
+    }
+    const parts = value.trim().split(/\s+/);
+    if (parts.length < 1 || parts.length > 3 || parts[0] === '') {
+        throw new TypeError(`translate values must contain 1 to 3 pixel values, but got "${value}"`);
+    }
+    return parts.map((part) => {
+        const match = pixelValueRegex.exec(part);
+        if (match === null) {
+            throw new TypeError(`interpolateTranslate() only supports px values, but got "${part}" in "${value}"`);
+        }
+        return Number(match[1]);
+    });
+};
+/*
+ * @description Allows you to map a range of values to CSS translate values using pixel units.
+ * @see [Documentation](https://remotion.dev/docs/interpolate-translate)
+ */
+const interpolateTranslate = (input, inputRange, outputRange, options) => {
+    var _a;
+    if (typeof input === 'undefined') {
+        throw new TypeError('input can not be undefined');
+    }
+    if (typeof inputRange === 'undefined') {
+        throw new TypeError('inputRange can not be undefined');
+    }
+    if (typeof outputRange === 'undefined') {
+        throw new TypeError('outputRange can not be undefined');
+    }
+    if (inputRange.length !== outputRange.length) {
+        throw new TypeError('inputRange (' +
+            inputRange.length +
+            ' values provided) and outputRange (' +
+            outputRange.length +
+            ' values provided) must have the same length');
+    }
+    const parsedOutputRange = outputRange.map((translateValue) => parseTranslate(translateValue));
+    const firstValueLength = (_a = parsedOutputRange[0]) === null || _a === void 0 ? void 0 : _a.length;
+    if (firstValueLength === undefined) {
+        throw new TypeError('outputRange must have at least 1 element');
+    }
+    for (const parsedTranslate of parsedOutputRange) {
+        if (parsedTranslate.length !== firstValueLength) {
+            throw new TypeError(`All translate values must have the same number of pixel values, but got ${firstValueLength} and ${parsedTranslate.length}`);
+        }
+    }
+    return new Array(firstValueLength)
+        .fill(true)
+        .map((_, index) => {
+        const outputValues = [];
+        for (const translateValue of parsedOutputRange) {
+            const value = translateValue[index];
+            if (value === undefined) {
+                throw new TypeError(`All translate values must have the same number of pixel values, but got ${firstValueLength} and ${translateValue.length}`);
+            }
+            outputValues.push(value);
+        }
+        const interpolatedValue = (0, interpolate_js_1.interpolate)(input, inputRange, outputValues, options);
+        return `${interpolatedValue}px`;
+    })
+        .join(' ');
+};
+exports.interpolateTranslate = interpolateTranslate;

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

@@ -70,6 +70,12 @@ export declare const NoReactInternals: {
             readonly step: 1;
             readonly hiddenFromList: true;
         };
+        readonly freeze: {
+            readonly type: "number";
+            readonly default: null;
+            readonly step: 1;
+            readonly hiddenFromList: true;
+        };
         readonly durationInFrames: {
             readonly type: "number";
             readonly default: undefined;

package/dist/cjs/sequence-field-schema.d.ts

@@ -7,7 +7,7 @@ export type NumberFieldSchema = {
     min?: number;
     max?: number;
     step?: number;
-    default: number | undefined;
+    default: number | null | undefined;
     description?: string;
     hiddenFromList: boolean;
     keyframable?: boolean;
@@ -242,6 +242,12 @@ export declare const fromField: {
     readonly step: 1;
     readonly hiddenFromList: true;
 };
+export declare const freezeField: {
+    readonly type: "number";
+    readonly default: null;
+    readonly step: 1;
+    readonly hiddenFromList: true;
+};
 export declare const sequenceSchema: {
     readonly hidden: BooleanFieldSchema;
     readonly showInTimeline: HiddenFieldSchema;
@@ -251,6 +257,12 @@ export declare const sequenceSchema: {
         readonly step: 1;
         readonly hiddenFromList: true;
     };
+    readonly freeze: {
+        readonly type: "number";
+        readonly default: null;
+        readonly step: 1;
+        readonly hiddenFromList: true;
+    };
     readonly durationInFrames: {
         readonly type: "number";
         readonly default: undefined;
@@ -329,6 +341,12 @@ export declare const sequenceSchema: {
 export declare const sequenceSchemaWithoutFrom: {
     readonly hidden: BooleanFieldSchema;
     readonly showInTimeline: HiddenFieldSchema;
+    readonly freeze: {
+        readonly type: "number";
+        readonly default: null;
+        readonly step: 1;
+        readonly hiddenFromList: true;
+    };
     readonly durationInFrames: {
         readonly type: "number";
         readonly default: undefined;

package/dist/cjs/sequence-field-schema.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.sequenceSchemaDefaultLayoutNone = exports.sequenceSchemaWithoutFrom = exports.sequenceSchema = exports.fromField = exports.durationInFramesField = exports.extendSchemaWithSequenceName = exports.sequenceNameField = exports.hiddenField = exports.sequenceStyleSchema = exports.sequencePremountSchema = exports.sequenceVisualStyleSchema = void 0;
+exports.sequenceSchemaDefaultLayoutNone = exports.sequenceSchemaWithoutFrom = exports.sequenceSchema = exports.freezeField = exports.fromField = exports.durationInFramesField = exports.extendSchemaWithSequenceName = exports.sequenceNameField = exports.hiddenField = exports.sequenceStyleSchema = exports.sequencePremountSchema = exports.sequenceVisualStyleSchema = void 0;
 exports.sequenceVisualStyleSchema = {
     'style.transformOrigin': {
         type: 'transform-origin',
@@ -95,10 +95,17 @@ exports.fromField = {
     step: 1,
     hiddenFromList: true,
 };
+exports.freezeField = {
+    type: 'number',
+    default: null,
+    step: 1,
+    hiddenFromList: true,
+};
 exports.sequenceSchema = (0, exports.extendSchemaWithSequenceName)({
     hidden: exports.hiddenField,
     showInTimeline: showInTimelineField,
     from: exports.fromField,
+    freeze: exports.freezeField,
     durationInFrames: exports.durationInFramesField,
     layout: {
         type: 'enum',
@@ -113,6 +120,7 @@ exports.sequenceSchema = (0, exports.extendSchemaWithSequenceName)({
 exports.sequenceSchemaWithoutFrom = (0, exports.extendSchemaWithSequenceName)({
     hidden: exports.hiddenField,
     showInTimeline: showInTimelineField,
+    freeze: exports.freezeField,
     durationInFrames: exports.durationInFramesField,
     layout: exports.sequenceSchema.layout,
 });