remotion 4.0.463 → 4.0.465

package/dist/cjs/CompositionErrorBoundary.d.ts

@@ -9,9 +9,14 @@ type State = {
 };
 export declare class CompositionErrorBoundary extends React.Component<Props, State> {
     state: State;
+    private hmrStatusHandler;
     static getDerivedStateFromError(): Partial<State>;
     componentDidCatch(error: Error): void;
-    componentDidUpdate(_prevProps: Props): void;
+    componentDidMount(): void;
+    componentDidUpdate(_prevProps: Props, prevState: State): void;
+    componentWillUnmount(): void;
+    private subscribeToHmrReset;
+    private unsubscribeFromHmrReset;
     render(): React.ReactNode;
 }
 export {};

package/dist/cjs/CompositionErrorBoundary.js

@@ -5,22 +5,86 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.CompositionErrorBoundary = void 0;
 const react_1 = __importDefault(require("react"));
+const getHot = () => {
+    var _a;
+    try {
+        if (typeof __webpack_module__ === 'undefined') {
+            return null;
+        }
+        return (_a = __webpack_module__.hot) !== null && _a !== void 0 ? _a : null;
+    }
+    catch (_b) {
+        return null;
+    }
+};
 class CompositionErrorBoundary extends react_1.default.Component {
     constructor() {
         super(...arguments);
         this.state = { hasError: false };
+        this.hmrStatusHandler = null;
     }
     static getDerivedStateFromError() {
         return { hasError: true };
     }
     componentDidCatch(error) {
         this.props.onError(error);
+        this.subscribeToHmrReset();
     }
-    componentDidUpdate(_prevProps) {
+    componentDidMount() {
+        // A fresh boundary mounting in the success state means any stale
+        // `renderError` left over by a previous boundary instance should be
+        // cleared. Fast Refresh sometimes unmounts the old (errored) boundary
+        // and mounts a new one during `apply`, so `componentDidUpdate`'s
+        // error→success transition never fires.
         if (!this.state.hasError) {
             this.props.onClear();
         }
     }
+    componentDidUpdate(_prevProps, prevState) {
+        if (prevState.hasError && !this.state.hasError) {
+            this.props.onClear();
+        }
+    }
+    componentWillUnmount() {
+        this.unsubscribeFromHmrReset();
+    }
+    subscribeToHmrReset() {
+        if (this.hmrStatusHandler) {
+            return;
+        }
+        const hot = getHot();
+        if (!hot) {
+            return;
+        }
+        // Once the boundary catches a runtime error it returns `null` on every
+        // render and never retries the children — so any subsequent HMR fix
+        // would be invisible. While in the error state, wait for the next
+        // time webpack HMR settles (`idle`), drop the error flag, and let the
+        // boundary re-render. If the children still throw, `componentDidCatch`
+        // resubscribes. If they succeed, `componentDidUpdate` calls
+        // `onClear()`. See https://github.com/remotion-dev/remotion/issues/7447.
+        const handler = (status) => {
+            if (status !== 'idle') {
+                return;
+            }
+            this.unsubscribeFromHmrReset();
+            this.setState({ hasError: false });
+        };
+        this.hmrStatusHandler = handler;
+        hot.addStatusHandler(handler);
+    }
+    unsubscribeFromHmrReset() {
+        const handler = this.hmrStatusHandler;
+        if (!handler) {
+            return;
+        }
+        this.hmrStatusHandler = null;
+        const hot = getHot();
+        if (!hot) {
+            return;
+        }
+        hot.removeStatusHandler(handler);
+    }
     render() {
         if (this.state.hasError) {
             return null;

package/dist/cjs/CompositionManager.d.ts

@@ -65,7 +65,7 @@ export type TSequence = {
     showInTimeline: boolean;
     nonce: NonceHistory;
     loopDisplay: LoopDisplay | undefined;
-    stack: string | null;
+    getStack: () => string | null;
     premountDisplay: number | null;
     postmountDisplay: number | null;
     controls: SequenceControls | null;

package/dist/cjs/HtmlInCanvas.d.ts

@@ -14,10 +14,10 @@ declare global {
         drawElementImage(element: Element | ElementImage, sx: number, sy: number, swidth: number, sheight: number, dx: number, dy: number, dwidth: number, dheight: number): DOMMatrix;
     }
     interface OffscreenCanvasRenderingContext2D {
-        drawElementImage(element: ElementImage, dx: number, dy: number): DOMMatrix;
-        drawElementImage(element: ElementImage, dx: number, dy: number, dwidth: number, dheight: number): DOMMatrix;
-        drawElementImage(element: ElementImage, sx: number, sy: number, swidth: number, sheight: number, dx: number, dy: number): DOMMatrix;
-        drawElementImage(element: ElementImage, sx: number, sy: number, swidth: number, sheight: number, dx: number, dy: number, dwidth: number, dheight: number): DOMMatrix;
+        drawElementImage(element: Element | ElementImage, dx: number, dy: number): DOMMatrix;
+        drawElementImage(element: Element | ElementImage, dx: number, dy: number, dwidth: number, dheight: number): DOMMatrix;
+        drawElementImage(element: Element | ElementImage, sx: number, sy: number, swidth: number, sheight: number, dx: number, dy: number): DOMMatrix;
+        drawElementImage(element: Element | ElementImage, sx: number, sy: number, swidth: number, sheight: number, dx: number, dy: number, dwidth: number, dheight: number): DOMMatrix;
     }
     interface WebGLRenderingContextBase {
         texElementImage2D(target: GLenum, level: GLint, internalformat: GLint, format: GLenum, type: GLenum, element: Element | ElementImage): void;
@@ -37,6 +37,10 @@ declare global {
     }
 }
 export type HtmlInCanvasOnPaintParams = {
+    /**
+     * The `OffscreenCanvas` from {@link HTMLCanvasElement.transferControlToOffscreen}
+     * on the layout `<canvas>` (same logical canvas as the forwarded ref).
+     */
     readonly canvas: OffscreenCanvas;
     readonly element: HTMLDivElement;
     readonly elementImage: ElementImage;
@@ -47,11 +51,11 @@ export declare const HTML_IN_CANVAS_UNSUPPORTED_MESSAGE = "HTML in Canvas is not
 export type HtmlInCanvasOnPaint = (params: HtmlInCanvasOnPaintParams) => void | Promise<void>;
 export type HtmlInCanvasOnInitCleanup = () => void;
 export type HtmlInCanvasOnInit = (params: HtmlInCanvasOnPaintParams) => HtmlInCanvasOnInitCleanup | Promise<HtmlInCanvasOnInitCleanup>;
-export type HtmlInCanvasProps = Omit<SequenceProps, 'children' | 'durationInFrames' | keyof LayoutAndStyle | '_experimentalEffects'> & Omit<AbsoluteFillLayout, 'layout' | 'styleWhilePostmounted' | 'postmountFor' | 'premountFor' | 'styleWhilePremounted'> & {
+export type HtmlInCanvasProps = Omit<SequenceProps, 'children' | 'durationInFrames' | keyof LayoutAndStyle | '_remotionInternalEffects'> & Omit<AbsoluteFillLayout, 'layout' | 'styleWhilePostmounted' | 'postmountFor' | 'premountFor' | 'styleWhilePremounted'> & {
     readonly durationInFrames?: number;
     readonly width: number;
     readonly height: number;
-    readonly _experimentalEffects?: EffectsProp;
+    readonly effects?: EffectsProp;
     readonly children: React.ReactNode;
     readonly onPaint?: HtmlInCanvasOnPaint;
     readonly onInit?: HtmlInCanvasOnInit;

package/dist/cjs/HtmlInCanvas.js

@@ -29,7 +29,8 @@ const isHtmlInCanvasSupported = () => {
     cachedSupport =
         typeof (ctx === null || ctx === void 0 ? void 0 : ctx.drawElementImage) === 'function' &&
             typeof canvas.requestPaint === 'function' &&
-            typeof canvas.captureElementImage === 'function';
+            typeof canvas.captureElementImage === 'function' &&
+            'transferControlToOffscreen' in HTMLCanvasElement.prototype;
     return cachedSupport;
 };
 exports.isHtmlInCanvasSupported = isHtmlInCanvasSupported;
@@ -66,7 +67,9 @@ const HtmlInCanvasContent = (0, react_1.forwardRef)(({ width, height, effects, c
         cancelRender(new Error(exports.HTML_IN_CANVAS_UNSUPPORTED_MESSAGE));
     }
     const canvas2dRef = (0, react_1.useRef)(null);
+    const offscreenRef = (0, react_1.useRef)(null);
     const divRef = (0, react_1.useRef)(null);
+    const canvasSizeKey = `${width}x${height}`;
     const setLayoutCanvasRef = (0, react_1.useCallback)((node) => {
         canvas2dRef.current = node;
         if (typeof ref === 'function') {
@@ -77,7 +80,6 @@ const HtmlInCanvasContent = (0, react_1.forwardRef)(({ width, height, effects, c
                 node;
         }
     }, [ref]);
-    const [offscreenCanvas] = (0, react_1.useState)(() => new OffscreenCanvas(1, 1));
     const chainState = (0, use_effect_chain_state_js_1.useEffectChainState)();
     const memoizedEffects = (0, use_memoized_effects_js_1.useMemoizedEffects)({
         effects,
@@ -99,19 +101,23 @@ const HtmlInCanvasContent = (0, react_1.forwardRef)(({ width, height, effects, c
         if (!element) {
             throw new Error('Canvas or scene element not found');
         }
-        offscreenCanvas.width = width;
-        offscreenCanvas.height = height;
+        const offscreen = offscreenRef.current;
+        if (!offscreen) {
+            throw new Error('HtmlInCanvas: offscreen canvas not ready (transferControlToOffscreen failed or canvas is remounting)');
+        }
+        offscreen.width = width;
+        offscreen.height = height;
         try {
-            const layoutCanvas = canvas2dRef.current;
-            if (!layoutCanvas) {
+            const placeholderCanvas = canvas2dRef.current;
+            if (!placeholderCanvas) {
                 throw new Error('Canvas not found');
             }
             // `GPUQueue.copyElementImageToTexture` / related paths validate the
-            // layout canvas has a rendering context. `runEffectChain` only runs
-            // after `onPaint`, so acquire `2d` here before any capture or handler.
-            const layout2d = layoutCanvas.getContext('2d');
-            if (!layout2d) {
-                throw new Error('Failed to acquire 2D context for <HtmlInCanvas> layout canvas');
+            // linked offscreen surface has a rendering context. Acquire `2d` here
+            // before any capture or handler (must not call getContext on placeholder).
+            const offscreen2d = offscreen.getContext('2d');
+            if (!offscreen2d) {
+                throw new Error('Failed to acquire 2D context for <HtmlInCanvas> offscreen canvas');
             }
             const handle = (0, delay_render_js_1.delayRender)('onPaint');
             if (!initializedRef.current) {
@@ -122,11 +128,11 @@ const HtmlInCanvasContent = (0, react_1.forwardRef)(({ width, height, effects, c
                 // can invalidate the capture's paint context, leaving subsequent
                 // uploads (e.g. `copyElementImageToTexture`) failing with
                 // "No context found for ElementImage" on the very first paint.
-                const initImage = layoutCanvas.captureElementImage(element);
+                const initImage = placeholderCanvas.captureElementImage(element);
                 const currentOnInit = onInitRef.current;
                 if (currentOnInit) {
                     const cleanup = await currentOnInit({
-                        canvas: offscreenCanvas,
+                        canvas: offscreen,
                         element,
                         elementImage: initImage,
                     });
@@ -142,17 +148,17 @@ const HtmlInCanvasContent = (0, react_1.forwardRef)(({ width, height, effects, c
                 }
             }
             const handler = (_a = onPaintRef.current) !== null && _a !== void 0 ? _a : defaultOnPaint;
-            const elImage = layoutCanvas.captureElementImage(element);
+            const elImage = placeholderCanvas.captureElementImage(element);
             await handler({
-                canvas: offscreenCanvas,
+                canvas: offscreen,
                 element,
                 elementImage: elImage,
             });
             await (0, run_effect_chain_js_1.runEffectChain)({
                 state: chainState.get(width, height),
-                source: offscreenCanvas,
+                source: offscreen,
                 effects: effectsRef.current,
-                output: canvas2dRef.current,
+                output: offscreen,
                 width,
                 height,
             });
@@ -161,32 +167,32 @@ const HtmlInCanvasContent = (0, react_1.forwardRef)(({ width, height, effects, c
         catch (error) {
             cancelRender(error);
         }
-    }, [
-        chainState,
-        continueRender,
-        cancelRender,
-        width,
-        height,
-        offscreenCanvas,
-    ]);
-    // Set up layoutSubtree and persistent paint listener. Runs as a
-    // layout effect so the listener is attached before the resize effect
-    // below dispatches its first synthetic paint.
+    }, [chainState, continueRender, cancelRender, width, height]);
+    // Transfer control once per layout canvas instance, then listen for paint on
+    // the placeholder (capture) while drawing on the linked offscreen surface.
     (0, react_1.useLayoutEffect)(() => {
-        const canvas = canvas2dRef.current;
-        if (!canvas) {
+        const placeholder = canvas2dRef.current;
+        if (!placeholder) {
             throw new Error('Canvas not found');
         }
-        canvas.layoutSubtree = true;
-        canvas.addEventListener('paint', onPaintCb);
+        placeholder.layoutSubtree = true;
+        const offscreen = placeholder.transferControlToOffscreen();
+        offscreenRef.current = offscreen;
+        offscreen.width = width;
+        offscreen.height = height;
+        initializedRef.current = false;
+        unmountedRef.current = false;
+        placeholder.addEventListener('paint', onPaintCb);
         return () => {
             var _a;
-            canvas.removeEventListener('paint', onPaintCb);
+            placeholder.removeEventListener('paint', onPaintCb);
+            offscreenRef.current = null;
+            initializedRef.current = false;
             unmountedRef.current = true;
             (_a = onInitCleanupRef.current) === null || _a === void 0 ? void 0 : _a.call(onInitCleanupRef);
             onInitCleanupRef.current = null;
         };
-    }, [onPaintCb, cancelRender]);
+    }, [onPaintCb, cancelRender, width, height]);
     const onPaintChangedRef = (0, react_1.useRef)(false);
     (0, react_1.useLayoutEffect)(() => {
         var _a;
@@ -212,7 +218,7 @@ const HtmlInCanvasContent = (0, react_1.forwardRef)(({ width, height, effects, c
         return () => {
             continueRender(handle);
         };
-    }, [width, height, continueRender]);
+    }, [width, height, continueRender, canvasSizeKey]);
     const innerStyle = (0, react_1.useMemo)(() => {
         return {
             width,
@@ -222,18 +228,18 @@ const HtmlInCanvasContent = (0, react_1.forwardRef)(({ width, height, effects, c
     if (isInsideAncestorHtmlInCanvas) {
         throw new Error('<HtmlInCanvas> effects cannot be nested together. Chrome will only display the outer effect. Consider merging the effects into one if you can.');
     }
-    return ((0, jsx_runtime_1.jsx)(HtmlInCanvasAncestorContext.Provider, { value: true, children: (0, jsx_runtime_1.jsx)("canvas", { ref: setLayoutCanvasRef, width: width, height: height, style: style, children: (0, jsx_runtime_1.jsx)("div", { ref: divRef, style: innerStyle, children: children }) }) }));
+    return ((0, jsx_runtime_1.jsx)(HtmlInCanvasAncestorContext.Provider, { value: true, children: (0, jsx_runtime_1.jsx)("canvas", { ref: setLayoutCanvasRef, width: width, height: height, style: style, children: (0, jsx_runtime_1.jsx)("div", { ref: divRef, style: innerStyle, children: children }) }, canvasSizeKey) }));
 });
 HtmlInCanvasContent.displayName = 'HtmlInCanvasContent';
-const HtmlInCanvasInner = (0, react_1.forwardRef)(({ width, height, _experimentalEffects: effects = [], children, onPaint, onInit, _experimentalControls: controls, style, durationInFrames, name, ...sequenceProps }, ref) => {
+const HtmlInCanvasInner = (0, react_1.forwardRef)(({ width, height, effects = [], children, onPaint, onInit, _experimentalControls: controls, style, durationInFrames, name, ...sequenceProps }, ref) => {
     const { durationInFrames: videoDuration } = (0, use_video_config_js_1.useVideoConfig)();
     const resolvedDuration = durationInFrames !== null && durationInFrames !== void 0 ? durationInFrames : videoDuration;
     const memoizedEffectDefinitions = (0, use_memoized_effects_js_1.useMemoizedEffectDefinitions)(effects);
-    return ((0, jsx_runtime_1.jsx)(Sequence_js_1.Sequence, { durationInFrames: resolvedDuration, name: name !== null && name !== void 0 ? name : '<HtmlInCanvas>', _experimentalControls: controls, _experimentalEffects: memoizedEffectDefinitions, layout: "none", ...sequenceProps, children: (0, jsx_runtime_1.jsx)(HtmlInCanvasContent, { ref: ref, width: width, height: height, effects: effects, onPaint: onPaint, onInit: onInit, controls: controls, style: style, children: children }) }));
+    return ((0, jsx_runtime_1.jsx)(Sequence_js_1.Sequence, { durationInFrames: resolvedDuration, name: name !== null && name !== void 0 ? name : '<HtmlInCanvas>', _experimentalControls: controls, _remotionInternalEffects: memoizedEffectDefinitions, layout: "none", ...sequenceProps, children: (0, jsx_runtime_1.jsx)(HtmlInCanvasContent, { ref: ref, width: width, height: height, effects: effects, onPaint: onPaint, onInit: onInit, controls: controls, style: style, children: children }) }));
 });
 HtmlInCanvasInner.displayName = 'HtmlInCanvas';
 const htmlInCanvasSchema = {
-    ...sequence_field_schema_js_1.sequenceStyleSchema,
+    ...sequence_field_schema_js_1.sequenceVisualStyleSchema,
     hidden: sequence_field_schema_js_1.hiddenField,
 };
 const HtmlInCanvasWrapped = (0, wrap_in_schema_js_1.wrapInSchema)(HtmlInCanvasInner, htmlInCanvasSchema);

package/dist/cjs/Img.d.ts

@@ -1,4 +1,5 @@
 import React from 'react';
+import type { SequenceProps } from './Sequence.js';
 export declare function truncateSrcForLabel(src: string): string;
 type NativeImgProps = Omit<React.DetailedHTMLProps<React.ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>, 'src'>;
 export type ImgProps = NativeImgProps & {
@@ -14,7 +15,7 @@ export type ImgProps = NativeImgProps & {
      * @deprecated For internal use only
      */
     readonly stack?: string;
-};
+} & Pick<SequenceProps, 'durationInFrames' | 'from' | 'hidden'>;
 export declare const Img: React.ComponentType<NativeImgProps & {
     readonly maxRetries?: number;
     readonly pauseWhenLoading?: boolean;
@@ -28,5 +29,5 @@ export declare const Img: React.ComponentType<NativeImgProps & {
      * @deprecated For internal use only
      */
     readonly stack?: string;
-}>;
+} & Pick<SequenceProps, "hidden" | "durationInFrames" | "from">>;
 export {};

package/dist/cjs/Img.js

@@ -8,10 +8,10 @@ const enable_sequence_stack_traces_js_1 = require("./enable-sequence-stack-trace
 const get_cross_origin_value_js_1 = require("./get-cross-origin-value.js");
 const prefetch_js_1 = require("./prefetch.js");
 const sequence_field_schema_js_1 = require("./sequence-field-schema.js");
+const Sequence_js_1 = require("./Sequence.js");
 const SequenceContext_js_1 = require("./SequenceContext.js");
 const use_buffer_state_js_1 = require("./use-buffer-state.js");
 const use_delay_render_js_1 = require("./use-delay-render.js");
-const use_media_in_timeline_js_1 = require("./use-media-in-timeline.js");
 const use_remotion_environment_js_1 = require("./use-remotion-environment.js");
 const wrap_in_schema_js_1 = require("./wrap-in-schema.js");
 function exponentialBackoff(errorCount) {
@@ -181,31 +181,14 @@ const ImgContent = ({ onError, maxRetries = 2, src, pauseWhenLoading, delayRende
     // src gets set once we've loaded and decoded the image.
     return ((0, jsx_runtime_1.jsx)("img", { ...props, ref: imageRef, crossOrigin: crossOriginValue, onError: didGetError, decoding: "sync" }));
 };
-const ImgInner = ({ hidden, name, stack, showInTimeline, src, _experimentalControls: controls, ...props }) => {
-    var _a, _b;
-    const sequenceContext = (0, react_1.useContext)(SequenceContext_js_1.SequenceContext);
-    const [timelineId] = (0, react_1.useState)(() => String(Math.random()));
+const ImgInner = ({ hidden, name, stack, showInTimeline, src, from, durationInFrames, _experimentalControls: controls, ...props }) => {
     if (!src) {
         throw new Error('No "src" prop was passed to <Img>.');
     }
-    (0, use_media_in_timeline_js_1.useImageInTimeline)({
-        src,
-        displayName: name !== null && name !== void 0 ? name : null,
-        id: timelineId,
-        stack: stack !== null && stack !== void 0 ? stack : null,
-        showInTimeline: showInTimeline !== null && showInTimeline !== void 0 ? showInTimeline : true,
-        premountDisplay: (_a = sequenceContext === null || sequenceContext === void 0 ? void 0 : sequenceContext.premountDisplay) !== null && _a !== void 0 ? _a : null,
-        postmountDisplay: (_b = sequenceContext === null || sequenceContext === void 0 ? void 0 : sequenceContext.postmountDisplay) !== null && _b !== void 0 ? _b : null,
-        loopDisplay: undefined,
-        controls: controls !== null && controls !== void 0 ? controls : null,
-    });
-    if (hidden) {
-        return null;
-    }
-    return (0, jsx_runtime_1.jsx)(ImgContent, { src: src, ...props });
+    return ((0, 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, _remotionInternalIsMedia: { type: 'image', src }, name: name !== null && name !== void 0 ? name : '<Img>', _experimentalControls: controls, showInTimeline: showInTimeline !== null && showInTimeline !== void 0 ? showInTimeline : true, hidden: hidden, children: (0, jsx_runtime_1.jsx)(ImgContent, { src: src, ...props }) }));
 };
 const imgSchema = {
-    ...sequence_field_schema_js_1.sequenceStyleSchema,
+    ...sequence_field_schema_js_1.sequenceVisualStyleSchema,
     hidden: sequence_field_schema_js_1.hiddenField,
 };
 /*

package/dist/cjs/Sequence.d.ts

@@ -23,7 +23,7 @@ export type SequencePropsWithoutDuration = {
     readonly showInTimeline?: boolean;
     readonly hidden?: boolean;
     readonly _experimentalControls?: SequenceControls;
-    readonly _experimentalEffects?: readonly EffectDefinition<unknown>[];
+    readonly _remotionInternalEffects?: readonly EffectDefinition<unknown>[];
     /**
      * @deprecated For internal use only.
      */
@@ -54,6 +54,9 @@ export type SequencePropsWithoutDuration = {
     readonly _remotionInternalIsMedia?: {
         type: 'video' | 'audio';
         data: BasicMediaInTimelineReturnType;
+    } | {
+        type: 'image';
+        src: string;
     };
 } & LayoutAndStyle;
 export type SequenceProps = {

package/dist/cjs/Sequence.js

@@ -4,6 +4,7 @@ exports.Sequence = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 /* eslint-disable @typescript-eslint/no-use-before-define */
 const react_1 = require("react");
+const react_2 = require("react");
 const AbsoluteFill_js_1 = require("./AbsoluteFill.js");
 const freeze_js_1 = require("./freeze.js");
 const nonce_js_1 = require("./nonce.js");
@@ -17,7 +18,7 @@ const use_remotion_environment_js_1 = require("./use-remotion-environment.js");
 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 RegularSequenceRefForwardingFunction = ({ from = 0, durationInFrames = Infinity, children, name, height, width, showInTimeline = true, hidden = false, _experimentalControls: controls, _experimentalEffects, _remotionInternalLoopDisplay: loopDisplay, _remotionInternalStack: stack, _remotionInternalPremountDisplay: premountDisplay, _remotionInternalPostmountDisplay: postmountDisplay, _remotionInternalIsMedia: isMedia, ...other }, ref) => {
+const RegularSequenceRefForwardingFunction = ({ from = 0, durationInFrames = Infinity, children, name, height, width, showInTimeline = true, hidden = false, _experimentalControls: controls, _remotionInternalEffects, _remotionInternalLoopDisplay: loopDisplay, _remotionInternalStack: stack, _remotionInternalPremountDisplay: premountDisplay, _remotionInternalPostmountDisplay: postmountDisplay, _remotionInternalIsMedia: isMedia, ...other }, ref) => {
     var _a;
     const { layout = 'absolute-fill' } = other;
     const [id] = (0, react_1.useState)(() => String(Math.random()));
@@ -100,35 +101,58 @@ const RegularSequenceRefForwardingFunction = ({ from = 0, durationInFrames = Inf
     const inheritedStack = (_a = other === null || other === void 0 ? void 0 : other.stack) !== null && _a !== void 0 ? _a : null;
     // Our assumption: Stack doesnt' change. After we symbolicate we assign it a nodePath
     // and if it changes, it would lead to-remounting of the sequence.
-    const [stackDoesntChange] = (0, react_1.useState)(() => stack !== null && stack !== void 0 ? stack : inheritedStack);
+    const stackRef = (0, react_2.useRef)(null);
+    stackRef.current = stack !== null && stack !== void 0 ? stack : inheritedStack;
     (0, react_1.useEffect)(() => {
-        var _a, _b;
+        var _a, _b, _c;
         if (!env.isStudio) {
             return;
         }
         if (isMedia) {
-            registerSequence({
-                type: isMedia.type,
-                controls: controls !== null && controls !== void 0 ? controls : null,
-                effects: _experimentalEffects !== null && _experimentalEffects !== void 0 ? _experimentalEffects : [],
-                displayName: timelineClipName,
-                doesVolumeChange: isMedia.data.doesVolumeChange,
-                duration: actualDurationInFrames,
-                from,
-                id,
-                loopDisplay,
-                nonce: nonce.get(),
-                parent: (_a = parentSequence === null || parentSequence === void 0 ? void 0 : parentSequence.id) !== null && _a !== void 0 ? _a : null,
-                playbackRate: isMedia.data.playbackRate,
-                postmountDisplay: postmountDisplay !== null && postmountDisplay !== void 0 ? postmountDisplay : null,
-                premountDisplay: premountDisplay !== null && premountDisplay !== void 0 ? premountDisplay : null,
-                rootId,
-                showInTimeline,
-                src: isMedia.data.src,
-                stack: stackDoesntChange,
-                startMediaFrom: isMedia.data.startMediaFrom,
-                volume: isMedia.data.volumes,
-            });
+            if (isMedia.type === 'image') {
+                registerSequence({
+                    type: 'image',
+                    controls: controls !== null && controls !== void 0 ? controls : null,
+                    effects: _remotionInternalEffects !== null && _remotionInternalEffects !== void 0 ? _remotionInternalEffects : [],
+                    displayName: timelineClipName,
+                    duration: actualDurationInFrames,
+                    from,
+                    id,
+                    loopDisplay,
+                    nonce: nonce.get(),
+                    parent: (_a = parentSequence === null || parentSequence === void 0 ? void 0 : parentSequence.id) !== null && _a !== void 0 ? _a : null,
+                    postmountDisplay: postmountDisplay !== null && postmountDisplay !== void 0 ? postmountDisplay : null,
+                    premountDisplay: premountDisplay !== null && premountDisplay !== void 0 ? premountDisplay : null,
+                    rootId,
+                    showInTimeline,
+                    src: isMedia.src,
+                    getStack: () => stackRef.current,
+                });
+            }
+            else {
+                registerSequence({
+                    type: isMedia.type,
+                    controls: controls !== null && controls !== void 0 ? controls : null,
+                    effects: _remotionInternalEffects !== null && _remotionInternalEffects !== void 0 ? _remotionInternalEffects : [],
+                    displayName: timelineClipName,
+                    doesVolumeChange: isMedia.data.doesVolumeChange,
+                    duration: actualDurationInFrames,
+                    from,
+                    id,
+                    loopDisplay,
+                    nonce: nonce.get(),
+                    parent: (_b = parentSequence === null || parentSequence === void 0 ? void 0 : parentSequence.id) !== null && _b !== void 0 ? _b : null,
+                    playbackRate: isMedia.data.playbackRate,
+                    postmountDisplay: postmountDisplay !== null && postmountDisplay !== void 0 ? postmountDisplay : null,
+                    premountDisplay: premountDisplay !== null && premountDisplay !== void 0 ? premountDisplay : null,
+                    rootId,
+                    showInTimeline,
+                    src: isMedia.data.src,
+                    getStack: () => stackRef.current,
+                    startMediaFrom: isMedia.data.startMediaFrom,
+                    volume: isMedia.data.volumes,
+                });
+            }
             return () => {
                 unregisterSequence(id);
             };
@@ -138,17 +162,17 @@ const RegularSequenceRefForwardingFunction = ({ from = 0, durationInFrames = Inf
             duration: actualDurationInFrames,
             id,
             displayName: timelineClipName,
-            parent: (_b = parentSequence === null || parentSequence === void 0 ? void 0 : parentSequence.id) !== null && _b !== void 0 ? _b : null,
+            parent: (_c = parentSequence === null || parentSequence === void 0 ? void 0 : parentSequence.id) !== null && _c !== void 0 ? _c : null,
             type: 'sequence',
             rootId,
             showInTimeline,
             nonce: nonce.get(),
             loopDisplay,
-            stack: stackDoesntChange,
+            getStack: () => stackRef.current,
             premountDisplay: premountDisplay !== null && premountDisplay !== void 0 ? premountDisplay : null,
             postmountDisplay: postmountDisplay !== null && postmountDisplay !== void 0 ? postmountDisplay : null,
             controls: controls !== null && controls !== void 0 ? controls : null,
-            effects: _experimentalEffects !== null && _experimentalEffects !== void 0 ? _experimentalEffects : [],
+            effects: _remotionInternalEffects !== null && _remotionInternalEffects !== void 0 ? _remotionInternalEffects : [],
         });
         return () => {
             unregisterSequence(id);
@@ -167,12 +191,11 @@ const RegularSequenceRefForwardingFunction = ({ from = 0, durationInFrames = Inf
         showInTimeline,
         nonce,
         loopDisplay,
-        stackDoesntChange,
         premountDisplay,
         postmountDisplay,
         env.isStudio,
         controls,
-        _experimentalEffects,
+        _remotionInternalEffects,
         isMedia,
     ]);
     // Ceil to support floats

package/dist/cjs/animated-image/AnimatedImage.d.ts

@@ -1,8 +1,10 @@
 import type React from 'react';
 import type { SequenceControls } from '../CompositionManager.js';
+import type { EffectsProp } from '../effects/effect-types.js';
 import type { RemotionAnimatedImageProps } from './props';
-export declare const AnimatedImage: React.ComponentType<Omit<import("../Sequence.js").SequenceProps, "children" | "layout" | "durationInFrames"> & RemotionAnimatedImageProps & {
+export declare const AnimatedImage: React.ComponentType<Omit<import("../Sequence.js").SequenceProps, "children" | "layout" | "durationInFrames" | "_remotionInternalEffects"> & RemotionAnimatedImageProps & {
     readonly durationInFrames?: number;
+    readonly effects?: EffectsProp;
 } & {
     readonly _experimentalControls?: SequenceControls | undefined;
     readonly ref?: React.Ref<HTMLCanvasElement>;