remotion 4.0.464 → 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/HtmlInCanvas.d.ts

@@ -51,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

@@ -231,11 +231,11 @@ const HtmlInCanvasContent = (0, react_1.forwardRef)(({ width, height, effects, c
     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 = {

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,11 @@ 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>.');
     }
-    const stackRef = (0, react_1.useRef)(null);
-    stackRef.current = stack !== null && stack !== void 0 ? stack : null;
-    const getStack = (0, react_1.useCallback)(() => stackRef.current, []);
-    (0, use_media_in_timeline_js_1.useImageInTimeline)({
-        src,
-        displayName: name !== null && name !== void 0 ? name : null,
-        id: timelineId,
-        getStack,
-        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.sequenceVisualStyleSchema,

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

@@ -18,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()));
@@ -104,33 +104,55 @@ const RegularSequenceRefForwardingFunction = ({ from = 0, durationInFrames = Inf
     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,
-                getStack: () => stackRef.current,
-                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);
             };
@@ -140,7 +162,7 @@ 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,
@@ -150,7 +172,7 @@ const RegularSequenceRefForwardingFunction = ({ from = 0, durationInFrames = Inf
             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);
@@ -173,7 +195,7 @@ const RegularSequenceRefForwardingFunction = ({ from = 0, durationInFrames = Inf
         postmountDisplay,
         env.isStudio,
         controls,
-        _experimentalEffects,
+        _remotionInternalEffects,
         isMedia,
     ]);
     // Ceil to support floats

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

@@ -2,9 +2,9 @@ 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" | "_experimentalEffects"> & RemotionAnimatedImageProps & {
+export declare const AnimatedImage: React.ComponentType<Omit<import("../Sequence.js").SequenceProps, "children" | "layout" | "durationInFrames" | "_remotionInternalEffects"> & RemotionAnimatedImageProps & {
     readonly durationInFrames?: number;
-    readonly _experimentalEffects?: EffectsProp;
+    readonly effects?: EffectsProp;
 } & {
     readonly _experimentalControls?: SequenceControls | undefined;
     readonly ref?: React.Ref<HTMLCanvasElement>;

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

@@ -142,7 +142,7 @@ const AnimatedImageContent = (0, react_1.forwardRef)(({ src, width, height, onEr
     return ((0, jsx_runtime_1.jsx)(canvas_1.Canvas, { ref: ref, width: width, height: height, fit: fit, effects: memoizedEffects, ...props }));
 });
 AnimatedImageContent.displayName = 'AnimatedImageContent';
-const AnimatedImageInner = ({ src, width, height, onError, fit, playbackRate, loopBehavior, id, className, style, durationInFrames, _experimentalEffects: effects = [], _experimentalControls: controls, ref, ...sequenceProps }) => {
+const AnimatedImageInner = ({ src, width, height, onError, fit, playbackRate, loopBehavior, id, className, style, durationInFrames, effects = [], _experimentalControls: controls, ref, ...sequenceProps }) => {
     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);
@@ -158,7 +158,7 @@ const AnimatedImageInner = ({ src, width, height, onError, fit, playbackRate, lo
         className,
         style,
     };
-    return ((0, jsx_runtime_1.jsx)(Sequence_js_1.Sequence, { layout: "none", durationInFrames: resolvedDuration, name: "<AnimatedImage>", _experimentalControls: controls, _experimentalEffects: memoizedEffectDefinitions, ...sequenceProps, children: (0, jsx_runtime_1.jsx)(AnimatedImageContent, { ...animatedImageProps, ref: ref, effects: effects, controls: controls }) }));
+    return ((0, jsx_runtime_1.jsx)(Sequence_js_1.Sequence, { layout: "none", durationInFrames: resolvedDuration, name: "<AnimatedImage>", _experimentalControls: controls, _remotionInternalEffects: memoizedEffectDefinitions, ...sequenceProps, children: (0, jsx_runtime_1.jsx)(AnimatedImageContent, { ...animatedImageProps, ref: ref, effects: effects, controls: controls }) }));
 };
 exports.AnimatedImage = (0, wrap_in_schema_js_1.wrapInSchema)(AnimatedImageInner, animatedImageSchema);
 exports.AnimatedImage.displayName = 'AnimatedImage';

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

@@ -13,8 +13,8 @@ export type RemotionAnimatedImageProps = {
     id?: string;
     className?: string;
 };
-export type AnimatedImageProps = Omit<SequenceProps, 'children' | 'durationInFrames' | 'layout' | '_experimentalEffects'> & RemotionAnimatedImageProps & {
+export type AnimatedImageProps = Omit<SequenceProps, 'children' | 'durationInFrames' | 'layout' | '_remotionInternalEffects'> & RemotionAnimatedImageProps & {
     readonly durationInFrames?: number;
-    readonly _experimentalEffects?: EffectsProp;
+    readonly effects?: EffectsProp;
 };
 export type AnimatedImageFillMode = 'contain' | 'cover' | 'fill';

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

@@ -7,7 +7,7 @@ type MandatoryProps = {
 };
 type OptionalProps = {
     readonly color: string | undefined;
-    readonly _experimentalEffects: EffectsProp;
+    readonly effects: EffectsProp;
     readonly className: string | undefined;
     readonly style: React.CSSProperties | undefined;
 };

package/dist/cjs/effects/Solid.js

@@ -33,11 +33,11 @@ const solidSchema = {
     },
     ...sequence_field_schema_js_1.sequenceVisualStyleSchema,
 };
-const SolidInner = ({ color, width, height, _experimentalEffects: experimentalEffects = [], className, style, overrideId, ref, }) => {
+const SolidInner = ({ color, width, height, effects = [], className, style, overrideId, ref, }) => {
     const { delayRender, continueRender, cancelRender } = (0, use_delay_render_js_1.useDelayRender)();
     const [outputCanvas, setOutputCanvas] = (0, react_1.useState)(null);
     const memoizedEffects = (0, use_memoized_effects_js_1.useMemoizedEffects)({
-        effects: experimentalEffects,
+        effects,
         overrideId: overrideId !== null && overrideId !== void 0 ? overrideId : null,
     });
     const sourceCanvas = (0, react_1.useMemo)(() => {
@@ -114,11 +114,11 @@ const SolidInner = ({ color, width, height, _experimentalEffects: experimentalEf
     ]);
     return ((0, jsx_runtime_1.jsx)("canvas", { ref: canvasRef, width: width, height: height, className: className, style: style }));
 };
-const SolidOuter = (0, react_1.forwardRef)(({ _experimentalEffects = [], _experimentalControls: controls, color, height, width, className, durationInFrames, style, name, from, hidden, showInTimeline, ...props }, ref) => {
+const SolidOuter = (0, react_1.forwardRef)(({ effects = [], _experimentalControls: controls, color, height, width, className, durationInFrames, style, name, from, hidden, showInTimeline, ...props }, ref) => {
     var _a;
     props;
-    const memoizedEffectDefinitions = (0, use_memoized_effects_js_1.useMemoizedEffectDefinitions)(_experimentalEffects);
-    return ((0, jsx_runtime_1.jsx)(Sequence_js_1.Sequence, { layout: "none", from: from, hidden: hidden, showInTimeline: showInTimeline, _experimentalControls: controls, _experimentalEffects: memoizedEffectDefinitions, durationInFrames: durationInFrames, name: name !== null && name !== void 0 ? name : '<Solid>', ...props, children: (0, jsx_runtime_1.jsx)(SolidInner, { ref: ref, 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, _experimentalEffects: _experimentalEffects }) }));
+    const memoizedEffectDefinitions = (0, use_memoized_effects_js_1.useMemoizedEffectDefinitions)(effects);
+    return ((0, 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>', ...props, children: (0, jsx_runtime_1.jsx)(SolidInner, { ref: ref, 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 }) }));
 });
 exports.Solid = (0, wrap_in_schema_js_1.wrapInSchema)(SolidOuter, solidSchema);
 exports.Solid.displayName = 'Solid';

package/dist/cjs/effects/effect-types.d.ts

@@ -9,6 +9,12 @@ export type EffectApplyParams<P, S> = {
     readonly width: number;
     readonly height: number;
     readonly gpuDevice: AnyGpuDevice | null;
+    /**
+     * When `true`, WebGL `texImage2D` uploads use `UNPACK_FLIP_Y_WEBGL` so DOM-style
+     * 2D frame canvases match clip-space UVs. Set by `runEffectChain` — `false` for
+     * prior WebGL outputs and `ImageBitmap` bridges from WebGL.
+     */
+    readonly flipSourceY: boolean;
 };
 export type EffectDefinition<P, S = unknown> = {
     readonly type: string;

package/dist/cjs/effects/run-effect-chain.js

@@ -68,6 +68,8 @@ const runEffectChain = async ({ state, source, effects, output, width, height, }
     if (isCancelled()) {
         return false;
     }
+    // Raw component sources are 2D frame canvases (Gif, WrappedCanvas.canvas, …).
+    let flipWebGLSourceY = true;
     for (let runIndex = 0; runIndex < runs.length; runIndex++) {
         const run = runs[runIndex];
         const [a, b] = state.pool.getPair(run.backend);
@@ -83,8 +85,10 @@ const runEffectChain = async ({ state, source, effects, output, width, height, }
                 width,
                 height,
                 gpuDevice,
+                flipSourceY: run.backend === 'webgl2' ? flipWebGLSourceY : false,
             });
             if (run.backend === 'webgl2') {
+                flipWebGLSourceY = false;
                 state.pool.assertContextNotLost(dst);
             }
             currentImage = dst;
@@ -93,19 +97,29 @@ const runEffectChain = async ({ state, source, effects, output, width, height, }
         lastTarget = (_a = currentImage) !== null && _a !== void 0 ? _a : lastTarget;
         const nextRun = runs[runIndex + 1];
         if (nextRun && nextRun.backend !== run.backend && lastTarget) {
-            // Bridge between backend groups via `createImageBitmap` rather than
-            // passing the canvas straight through. A direct `drawImage(webglCanvas)`
-            // in the next backend's first effect forces an implicit GPU readback /
-            // finish on the consuming context, which empirically blows the per-frame
-            // vsync budget and halves the paint rate. `createImageBitmap` performs
-            // the same handoff but pipelines the GPU work, so the next effect reads
-            // from a ready-to-sample bitmap without stalling.
-            const bitmap = await createImageBitmap(lastTarget);
-            if (isCancelled()) {
-                bitmap.close();
-                return false;
+            // 2D → WebGL: pass the 2D canvas directly so `texImage2D` + `UNPACK_FLIP_Y`
+            // matches blur-only on a raw frame canvas. `createImageBitmap` here changes
+            // upload orientation and produced upside-down stacks (wave + blur).
+            if (run.backend === '2d' && nextRun.backend === 'webgl2') {
+                currentImage = lastTarget;
+                flipWebGLSourceY = true;
+            }
+            else {
+                // Other bridges use `createImageBitmap` rather than passing the canvas
+                // straight through. A direct `drawImage(webglCanvas)` in the next
+                // backend's first effect forces an implicit GPU readback / finish on the
+                // consuming context, which empirically blows the per-frame vsync budget and
+                // halves the paint rate. `createImageBitmap` pipelines the GPU work.
+                const bitmap = await createImageBitmap(lastTarget);
+                if (isCancelled()) {
+                    bitmap.close();
+                    return false;
+                }
+                currentImage = bitmap;
+                if (nextRun.backend === 'webgl2') {
+                    flipWebGLSourceY = false;
+                }
             }
-            currentImage = bitmap;
         }
     }
     if (!lastTarget) {

package/dist/cjs/use-media-in-timeline.d.ts

@@ -1,4 +1,4 @@
-import type { LoopDisplay, SequenceControls } from './CompositionManager.js';
+import type { LoopDisplay } from './CompositionManager.js';
 import type { VolumeProp } from './volume-prop.js';
 export declare const useBasicMediaInTimeline: ({ volume, mediaVolume, mediaType, src, displayName, trimBefore, trimAfter, playbackRate, sequenceDurationInFrames, mediaStartsAt, loop, }: {
     volume: VolumeProp | undefined;
@@ -24,17 +24,6 @@ export declare const useBasicMediaInTimeline: ({ volume, mediaVolume, mediaType,
     playbackRate: number;
 };
 export type BasicMediaInTimelineReturnType = ReturnType<typeof useBasicMediaInTimeline>;
-export declare const useImageInTimeline: ({ src, displayName, id, getStack, showInTimeline, premountDisplay, postmountDisplay, loopDisplay, controls, }: {
-    src: string | undefined;
-    displayName: string | null;
-    id: string;
-    getStack: () => string | null;
-    showInTimeline: boolean;
-    premountDisplay: number | null;
-    postmountDisplay: number | null;
-    loopDisplay: LoopDisplay | undefined;
-    controls: SequenceControls | null;
-}) => void;
 export declare const useMediaInTimeline: ({ volume, mediaVolume, src, mediaType, playbackRate, displayName, id, getStack, showInTimeline, premountDisplay, postmountDisplay, loopDisplay, }: {
     volume: VolumeProp | undefined;
     mediaVolume: number;

package/dist/cjs/use-media-in-timeline.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.useMediaInTimeline = exports.useImageInTimeline = exports.useBasicMediaInTimeline = void 0;
+exports.useMediaInTimeline = exports.useBasicMediaInTimeline = void 0;
 const react_1 = require("react");
 const use_audio_frame_js_1 = require("./audio/use-audio-frame.js");
 const get_asset_file_name_js_1 = require("./get-asset-file-name.js");
@@ -86,77 +86,6 @@ const useBasicMediaInTimeline = ({ volume, mediaVolume, mediaType, src, displayN
     return memoizedResult;
 };
 exports.useBasicMediaInTimeline = useBasicMediaInTimeline;
-const useImageInTimeline = ({ src, displayName, id, getStack, showInTimeline, premountDisplay, postmountDisplay, loopDisplay, controls, }) => {
-    const parentSequence = (0, react_1.useContext)(SequenceContext_js_1.SequenceContext);
-    const { registerSequence, unregisterSequence } = (0, react_1.useContext)(SequenceManager_js_1.SequenceManager);
-    const { durationInFrames } = (0, use_video_config_js_1.useVideoConfig)();
-    const mediaStartsAt = (0, use_audio_frame_js_1.useMediaStartsAt)();
-    const { duration, nonce, rootId, finalDisplayName } = (0, exports.useBasicMediaInTimeline)({
-        volume: undefined,
-        mediaVolume: 0,
-        mediaType: 'image',
-        src,
-        displayName,
-        trimAfter: undefined,
-        trimBefore: undefined,
-        playbackRate: 1,
-        sequenceDurationInFrames: durationInFrames,
-        mediaStartsAt,
-        loop: false,
-    });
-    const { isStudio } = (0, use_remotion_environment_js_1.useRemotionEnvironment)();
-    (0, react_1.useEffect)(() => {
-        var _a, _b, _c;
-        if (!src) {
-            throw new Error('No src passed');
-        }
-        if (!isStudio && ((_b = (_a = window.process) === null || _a === void 0 ? void 0 : _a.env) === null || _b === void 0 ? void 0 : _b.NODE_ENV) !== 'test') {
-            return;
-        }
-        if (!showInTimeline) {
-            return;
-        }
-        registerSequence({
-            type: 'image',
-            src,
-            id,
-            duration,
-            from: 0,
-            parent: (_c = parentSequence === null || parentSequence === void 0 ? void 0 : parentSequence.id) !== null && _c !== void 0 ? _c : null,
-            displayName: finalDisplayName,
-            rootId,
-            showInTimeline: true,
-            nonce: nonce.get(),
-            loopDisplay,
-            getStack,
-            premountDisplay,
-            postmountDisplay,
-            controls,
-            effects: [],
-        });
-        return () => {
-            unregisterSequence(id);
-        };
-    }, [
-        duration,
-        id,
-        parentSequence,
-        src,
-        registerSequence,
-        unregisterSequence,
-        nonce,
-        getStack,
-        showInTimeline,
-        premountDisplay,
-        postmountDisplay,
-        isStudio,
-        loopDisplay,
-        rootId,
-        finalDisplayName,
-        controls,
-    ]);
-};
-exports.useImageInTimeline = useImageInTimeline;
 const useMediaInTimeline = ({ volume, mediaVolume, src, mediaType, playbackRate, displayName, id, getStack, showInTimeline, premountDisplay, postmountDisplay, loopDisplay, }) => {
     const parentSequence = (0, react_1.useContext)(SequenceContext_js_1.SequenceContext);
     const startsAt = (0, use_audio_frame_js_1.useMediaStartsAt)();

package/dist/cjs/version.d.ts

@@ -3,4 +3,4 @@
  * @see [Documentation](https://remotion.dev/docs/version)
  * @returns {string} The current version of the remotion package
  */
-export declare const VERSION = "4.0.464";
+export declare const VERSION = "4.0.465";

package/dist/cjs/version.js

@@ -7,4 +7,4 @@ exports.VERSION = void 0;
  * @see [Documentation](https://remotion.dev/docs/version)
  * @returns {string} The current version of the remotion package
  */
-exports.VERSION = '4.0.464';
+exports.VERSION = '4.0.465';

package/dist/esm/index.mjs

@@ -56,20 +56,70 @@ var CompositionRenderErrorContext = createContext3({
 
 // src/CompositionErrorBoundary.tsx
 import React2 from "react";
+var getHot = () => {
+  try {
+    if (typeof __webpack_module__ === "undefined") {
+      return null;
+    }
+    return __webpack_module__.hot ?? null;
+  } catch {
+    return null;
+  }
+};
 
 class CompositionErrorBoundary extends React2.Component {
   state = { hasError: false };
+  hmrStatusHandler = null;
   static getDerivedStateFromError() {
     return { hasError: true };
   }
   componentDidCatch(error) {
     this.props.onError(error);
+    this.subscribeToHmrReset();
   }
-  componentDidUpdate(_prevProps) {
+  componentDidMount() {
     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;
+    }
+    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;
@@ -1238,7 +1288,7 @@ var addSequenceStackTraces = (component) => {
 };
 
 // src/version.ts
-var VERSION = "4.0.464";
+var VERSION = "4.0.465";
 
 // src/multiple-versions-warning.ts
 var checkMultipleRemotionVersions = () => {
@@ -2376,7 +2426,7 @@ var RegularSequenceRefForwardingFunction = ({
   showInTimeline = true,
   hidden = false,
   _experimentalControls: controls,
-  _experimentalEffects,
+  _remotionInternalEffects,
   _remotionInternalLoopDisplay: loopDisplay,
   _remotionInternalStack: stack,
   _remotionInternalPremountDisplay: premountDisplay,
@@ -2458,28 +2508,49 @@ var RegularSequenceRefForwardingFunction = ({
       return;
     }
     if (isMedia) {
-      registerSequence({
-        type: isMedia.type,
-        controls: controls ?? null,
-        effects: _experimentalEffects ?? [],
-        displayName: timelineClipName,
-        doesVolumeChange: isMedia.data.doesVolumeChange,
-        duration: actualDurationInFrames,
-        from,
-        id,
-        loopDisplay,
-        nonce: nonce.get(),
-        parent: parentSequence?.id ?? null,
-        playbackRate: isMedia.data.playbackRate,
-        postmountDisplay: postmountDisplay ?? null,
-        premountDisplay: premountDisplay ?? null,
-        rootId,
-        showInTimeline,
-        src: isMedia.data.src,
-        getStack: () => stackRef.current,
-        startMediaFrom: isMedia.data.startMediaFrom,
-        volume: isMedia.data.volumes
-      });
+      if (isMedia.type === "image") {
+        registerSequence({
+          type: "image",
+          controls: controls ?? null,
+          effects: _remotionInternalEffects ?? [],
+          displayName: timelineClipName,
+          duration: actualDurationInFrames,
+          from,
+          id,
+          loopDisplay,
+          nonce: nonce.get(),
+          parent: parentSequence?.id ?? null,
+          postmountDisplay: postmountDisplay ?? null,
+          premountDisplay: premountDisplay ?? null,
+          rootId,
+          showInTimeline,
+          src: isMedia.src,
+          getStack: () => stackRef.current
+        });
+      } else {
+        registerSequence({
+          type: isMedia.type,
+          controls: controls ?? null,
+          effects: _remotionInternalEffects ?? [],
+          displayName: timelineClipName,
+          doesVolumeChange: isMedia.data.doesVolumeChange,
+          duration: actualDurationInFrames,
+          from,
+          id,
+          loopDisplay,
+          nonce: nonce.get(),
+          parent: parentSequence?.id ?? null,
+          playbackRate: isMedia.data.playbackRate,
+          postmountDisplay: postmountDisplay ?? null,
+          premountDisplay: premountDisplay ?? null,
+          rootId,
+          showInTimeline,
+          src: isMedia.data.src,
+          getStack: () => stackRef.current,
+          startMediaFrom: isMedia.data.startMediaFrom,
+          volume: isMedia.data.volumes
+        });
+      }
       return () => {
         unregisterSequence(id);
       };
@@ -2499,7 +2570,7 @@ var RegularSequenceRefForwardingFunction = ({
       premountDisplay: premountDisplay ?? null,
       postmountDisplay: postmountDisplay ?? null,
       controls: controls ?? null,
-      effects: _experimentalEffects ?? []
+      effects: _remotionInternalEffects ?? []
     });
     return () => {
       unregisterSequence(id);
@@ -2522,7 +2593,7 @@ var RegularSequenceRefForwardingFunction = ({
     postmountDisplay,
     env.isStudio,
     controls,
-    _experimentalEffects,
+    _remotionInternalEffects,
     isMedia
   ]);
   const endThreshold = Math.ceil(cumulatedFrom + from + durationInFrames - 1);
@@ -2821,6 +2892,7 @@ var runEffectChain = async ({
   if (isCancelled()) {
     return false;
   }
+  let flipWebGLSourceY = true;
   for (let runIndex = 0;runIndex < runs.length; runIndex++) {
     const run = runs[runIndex];
     const [a, b] = state.pool.getPair(run.backend);
@@ -2835,9 +2907,11 @@ var runEffectChain = async ({
         params: eff.params,
         width,
         height,
-        gpuDevice
+        gpuDevice,
+        flipSourceY: run.backend === "webgl2" ? flipWebGLSourceY : false
       });
       if (run.backend === "webgl2") {
+        flipWebGLSourceY = false;
         state.pool.assertContextNotLost(dst);
       }
       currentImage = dst;
@@ -2846,12 +2920,20 @@ var runEffectChain = async ({
     lastTarget = currentImage ?? lastTarget;
     const nextRun = runs[runIndex + 1];
     if (nextRun && nextRun.backend !== run.backend && lastTarget) {
-      const bitmap = await createImageBitmap(lastTarget);
-      if (isCancelled()) {
-        bitmap.close();
-        return false;
+      if (run.backend === "2d" && nextRun.backend === "webgl2") {
+        currentImage = lastTarget;
+        flipWebGLSourceY = true;
+      } else {
+        const bitmap = await createImageBitmap(lastTarget);
+        if (isCancelled()) {
+          bitmap.close();
+          return false;
+        }
+        currentImage = bitmap;
+        if (nextRun.backend === "webgl2") {
+          flipWebGLSourceY = false;
+        }
       }
-      currentImage = bitmap;
     }
   }
   if (!lastTarget) {
@@ -3310,7 +3392,7 @@ var AnimatedImageInner = ({
   className,
   style,
   durationInFrames,
-  _experimentalEffects: effects = [],
+  effects = [],
   _experimentalControls: controls,
   ref,
   ...sequenceProps
@@ -3335,7 +3417,7 @@ var AnimatedImageInner = ({
     durationInFrames: resolvedDuration,
     name: "<AnimatedImage>",
     _experimentalControls: controls,
-    _experimentalEffects: memoizedEffectDefinitions,
+    _remotionInternalEffects: memoizedEffectDefinitions,
     ...sequenceProps,
     children: /* @__PURE__ */ jsx13(AnimatedImageContent, {
       ...animatedImageProps,
@@ -3383,7 +3465,7 @@ var SolidInner = ({
   color,
   width,
   height,
-  _experimentalEffects: experimentalEffects = [],
+  effects = [],
   className,
   style,
   overrideId,
@@ -3392,7 +3474,7 @@ var SolidInner = ({
   const { delayRender: delayRender2, continueRender: continueRender2, cancelRender: cancelRender2 } = useDelayRender();
   const [outputCanvas, setOutputCanvas] = useState7(null);
   const memoizedEffects = useMemoizedEffects({
-    effects: experimentalEffects,
+    effects,
     overrideId: overrideId ?? null
   });
   const sourceCanvas = useMemo17(() => {
@@ -3472,7 +3554,7 @@ var SolidInner = ({
   });
 };
 var SolidOuter = forwardRef5(({
-  _experimentalEffects = [],
+  effects = [],
   _experimentalControls: controls,
   color,
   height,
@@ -3486,14 +3568,14 @@ var SolidOuter = forwardRef5(({
   showInTimeline,
   ...props
 }, ref) => {
-  const memoizedEffectDefinitions = useMemoizedEffectDefinitions(_experimentalEffects);
+  const memoizedEffectDefinitions = useMemoizedEffectDefinitions(effects);
   return /* @__PURE__ */ jsx14(Sequence, {
     layout: "none",
     from,
     hidden,
     showInTimeline,
     _experimentalControls: controls,
-    _experimentalEffects: memoizedEffectDefinitions,
+    _remotionInternalEffects: memoizedEffectDefinitions,
     durationInFrames,
     name: name ?? "<Solid>",
     ...props,
@@ -3505,7 +3587,7 @@ var SolidOuter = forwardRef5(({
       width,
       className,
       style,
-      _experimentalEffects
+      effects
     })
   });
 });
@@ -3731,7 +3813,7 @@ HtmlInCanvasContent.displayName = "HtmlInCanvasContent";
 var HtmlInCanvasInner = forwardRef6(({
   width,
   height,
-  _experimentalEffects: effects = [],
+  effects = [],
   children,
   onPaint,
   onInit,
@@ -3748,7 +3830,7 @@ var HtmlInCanvasInner = forwardRef6(({
     durationInFrames: resolvedDuration,
     name: name ?? "<HtmlInCanvas>",
     _experimentalControls: controls,
-    _experimentalEffects: memoizedEffectDefinitions,
+    _remotionInternalEffects: memoizedEffectDefinitions,
     layout: "none",
     ...sequenceProps,
     children: /* @__PURE__ */ jsx15(HtmlInCanvasContent, {
@@ -5380,85 +5462,6 @@ var useBasicMediaInTimeline = ({
   ]);
   return memoizedResult;
 };
-var useImageInTimeline = ({
-  src,
-  displayName,
-  id,
-  getStack,
-  showInTimeline,
-  premountDisplay,
-  postmountDisplay,
-  loopDisplay,
-  controls
-}) => {
-  const parentSequence = useContext24(SequenceContext);
-  const { registerSequence, unregisterSequence } = useContext24(SequenceManager);
-  const { durationInFrames } = useVideoConfig();
-  const mediaStartsAt = useMediaStartsAt();
-  const { duration, nonce, rootId, finalDisplayName } = useBasicMediaInTimeline({
-    volume: undefined,
-    mediaVolume: 0,
-    mediaType: "image",
-    src,
-    displayName,
-    trimAfter: undefined,
-    trimBefore: undefined,
-    playbackRate: 1,
-    sequenceDurationInFrames: durationInFrames,
-    mediaStartsAt,
-    loop: false
-  });
-  const { isStudio } = useRemotionEnvironment();
-  useEffect8(() => {
-    if (!src) {
-      throw new Error("No src passed");
-    }
-    if (!isStudio && window.process?.env?.NODE_ENV !== "test") {
-      return;
-    }
-    if (!showInTimeline) {
-      return;
-    }
-    registerSequence({
-      type: "image",
-      src,
-      id,
-      duration,
-      from: 0,
-      parent: parentSequence?.id ?? null,
-      displayName: finalDisplayName,
-      rootId,
-      showInTimeline: true,
-      nonce: nonce.get(),
-      loopDisplay,
-      getStack,
-      premountDisplay,
-      postmountDisplay,
-      controls,
-      effects: []
-    });
-    return () => {
-      unregisterSequence(id);
-    };
-  }, [
-    duration,
-    id,
-    parentSequence,
-    src,
-    registerSequence,
-    unregisterSequence,
-    nonce,
-    getStack,
-    showInTimeline,
-    premountDisplay,
-    postmountDisplay,
-    isStudio,
-    loopDisplay,
-    rootId,
-    finalDisplayName,
-    controls
-  ]);
-};
 var useMediaInTimeline = ({
   volume,
   mediaVolume,
@@ -7284,8 +7287,7 @@ import {
   useContext as useContext32,
   useImperativeHandle as useImperativeHandle6,
   useLayoutEffect as useLayoutEffect10,
-  useRef as useRef21,
-  useState as useState17
+  useRef as useRef21
 } from "react";
 import { jsx as jsx26 } from "react/jsx-runtime";
 function exponentialBackoff(errorCount) {
@@ -7447,34 +7449,28 @@ var ImgInner = ({
   stack,
   showInTimeline,
   src,
+  from,
+  durationInFrames,
   _experimentalControls: controls,
   ...props2
 }) => {
-  const sequenceContext = useContext32(SequenceContext);
-  const [timelineId] = useState17(() => String(Math.random()));
   if (!src) {
     throw new Error('No "src" prop was passed to <Img>.');
   }
-  const stackRef = useRef21(null);
-  stackRef.current = stack ?? null;
-  const getStack = useCallback17(() => stackRef.current, []);
-  useImageInTimeline({
-    src,
-    displayName: name ?? null,
-    id: timelineId,
-    getStack,
+  return /* @__PURE__ */ jsx26(Sequence, {
+    layout: "none",
+    from: from ?? 0,
+    durationInFrames: durationInFrames ?? Infinity,
+    _remotionInternalStack: stack,
+    _remotionInternalIsMedia: { type: "image", src },
+    name: name ?? "<Img>",
+    _experimentalControls: controls,
     showInTimeline: showInTimeline ?? true,
-    premountDisplay: sequenceContext?.premountDisplay ?? null,
-    postmountDisplay: sequenceContext?.postmountDisplay ?? null,
-    loopDisplay: undefined,
-    controls: controls ?? null
-  });
-  if (hidden) {
-    return null;
-  }
-  return /* @__PURE__ */ jsx26(ImgContent, {
-    src,
-    ...props2
+    hidden,
+    children: /* @__PURE__ */ jsx26(ImgContent, {
+      src,
+      ...props2
+    })
   });
 };
 var imgSchema = {
@@ -7496,7 +7492,7 @@ import {
   useImperativeHandle as useImperativeHandle7,
   useMemo as useMemo31,
   useRef as useRef22,
-  useState as useState18
+  useState as useState17
 } from "react";
 import { jsx as jsx27 } from "react/jsx-runtime";
 var CompositionManagerProvider = ({
@@ -7506,9 +7502,9 @@ var CompositionManagerProvider = ({
   initialCompositions,
   initialCanvasContent
 }) => {
-  const [folders, setFolders] = useState18([]);
-  const [canvasContent, setCanvasContent] = useState18(initialCanvasContent);
-  const [compositions, setCompositions] = useState18(initialCompositions);
+  const [folders, setFolders] = useState17([]);
+  const [canvasContent, setCanvasContent] = useState17(initialCanvasContent);
+  const [compositions, setCompositions] = useState17(initialCompositions);
   const currentcompositionsRef = useRef22(compositions);
   const updateCompositions = useCallback18((updateComps) => {
     setCompositions((comps) => {
@@ -8084,7 +8080,7 @@ import {
   useEffect as useEffect16,
   useLayoutEffect as useLayoutEffect11,
   useMemo as useMemo34,
-  useState as useState19
+  useState as useState18
 } from "react";
 
 // src/video/offthread-video-source.ts
@@ -8199,7 +8195,7 @@ var OffthreadVideoForRendering = ({
       toneMapped
     });
   }, [toneMapped, currentTime, src, transparent]);
-  const [imageSrc, setImageSrc] = useState19(null);
+  const [imageSrc, setImageSrc] = useState18(null);
   const { delayRender: delayRender2, continueRender: continueRender2 } = useDelayRender();
   useLayoutEffect11(() => {
     if (!window.remotion_videoEnabled) {
@@ -8310,7 +8306,7 @@ import React34, {
   useImperativeHandle as useImperativeHandle8,
   useMemo as useMemo35,
   useRef as useRef23,
-  useState as useState20,
+  useState as useState19,
   useCallback as useCallback20
 } from "react";
 
@@ -8416,7 +8412,7 @@ var VideoForDevelopmentRefForwardingFunction = (props2, ref) => {
   const parentSequence = useContext35(SequenceContext);
   const logLevel = useLogLevel();
   const mountTime = useMountTime();
-  const [timelineId] = useState20(() => String(Math.random()));
+  const [timelineId] = useState19(() => String(Math.random()));
   if (typeof acceptableTimeShift !== "undefined") {
     throw new Error("acceptableTimeShift has been removed. Use acceptableTimeShiftInSeconds instead.");
   }
@@ -8485,7 +8481,7 @@ var VideoForDevelopmentRefForwardingFunction = (props2, ref) => {
   useImperativeHandle8(ref, () => {
     return videoRef.current;
   }, []);
-  useState20(() => playbackLogging({
+  useState19(() => playbackLogging({
     logLevel,
     message: `Mounting video with source = ${actualSrc}, v=${VERSION}, user agent=${typeof navigator === "undefined" ? "server" : navigator.userAgent}`,
     tag: "video",

package/dist/esm/version.mjs

@@ -1,5 +1,5 @@
 // src/version.ts
-var VERSION = "4.0.464";
+var VERSION = "4.0.465";
 export {
   VERSION
 };

package/package.json

@@ -3,7 +3,7 @@
 		"url": "https://github.com/remotion-dev/remotion/tree/main/packages/core"
 	},
 	"name": "remotion",
-	"version": "4.0.464",
+	"version": "4.0.465",
 	"description": "Make videos programmatically",
 	"main": "dist/cjs/index.js",
 	"types": "dist/cjs/index.d.ts",
@@ -35,7 +35,7 @@
 		"react-dom": "19.2.3",
 		"webpack": "5.105.0",
 		"zod": "4.3.6",
-		"@remotion/eslint-config-internal": "4.0.464",
+		"@remotion/eslint-config-internal": "4.0.465",
 		"eslint": "9.19.0",
 		"@typescript/native-preview": "7.0.0-dev.20260217.1"
 	},