remotion 4.0.464 → 4.0.466

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

@@ -60,6 +60,7 @@ export type TSequence = {
     duration: number;
     id: string;
     displayName: string;
+    documentationLink: string | null;
     parent: string | null;
     rootId: string;
     showInTimeline: boolean;

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,13 @@ 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>', _remotionInternalDocumentationLink: name === undefined
+            ? 'https://www.remotion.dev/docs/remotion/html-in-canvas'
+            : undefined, _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, _remotionInternalDocumentationLink: name === undefined ? 'https://www.remotion.dev/docs/img' : undefined, _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.
      */
@@ -40,6 +40,10 @@ export type SequencePropsWithoutDuration = {
      * @deprecated For internal use only.
      */
     readonly _remotionInternalStack?: string;
+    /**
+     * @deprecated For internal use only.
+     */
+    readonly _remotionInternalDocumentationLink?: string;
     /**
      * @deprecated For internal use only.
      */
@@ -54,6 +58,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, _remotionInternalDocumentationLink: documentationLink, _remotionInternalPremountDisplay: premountDisplay, _remotionInternalPostmountDisplay: postmountDisplay, _remotionInternalIsMedia: isMedia, ...other }, ref) => {
     var _a;
     const { layout = 'absolute-fill' } = other;
     const [id] = (0, react_1.useState)(() => String(Math.random()));
@@ -97,6 +97,7 @@ const RegularSequenceRefForwardingFunction = ({ from = 0, durationInFrames = Inf
     const timelineClipName = (0, react_1.useMemo)(() => {
         return name !== null && name !== void 0 ? name : '';
     }, [name]);
+    const resolvedDocumentationLink = documentationLink !== null && documentationLink !== void 0 ? documentationLink : (name === undefined ? 'https://www.remotion.dev/docs/sequence' : null);
     const env = (0, use_remotion_environment_js_1.useRemotionEnvironment)();
     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
@@ -104,33 +105,57 @@ 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,
+                    documentationLink: resolvedDocumentationLink,
+                    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,
+                    documentationLink: resolvedDocumentationLink,
+                    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 +165,8 @@ 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,
+            documentationLink: resolvedDocumentationLink,
+            parent: (_c = parentSequence === null || parentSequence === void 0 ? void 0 : parentSequence.id) !== null && _c !== void 0 ? _c : null,
             type: 'sequence',
             rootId,
             showInTimeline,
@@ -150,7 +176,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,8 +199,9 @@ const RegularSequenceRefForwardingFunction = ({ from = 0, durationInFrames = Inf
         postmountDisplay,
         env.isStudio,
         controls,
-        _experimentalEffects,
+        _remotionInternalEffects,
         isMedia,
+        resolvedDocumentationLink,
     ]);
     // Ceil to support floats
     // https://github.com/remotion-dev/remotion/issues/2958

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>", _remotionInternalDocumentationLink: "https://www.remotion.dev/docs/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/audio/AudioForPreview.js

@@ -134,6 +134,7 @@ const AudioForDevelopmentForwardRefFunction = (props, ref) => {
         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,
+        documentationLink: name === undefined ? 'https://www.remotion.dev/docs/html5-audio' : null,
     });
     // putting playback before useVolume
     // because volume looks at playbackrate

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>', _remotionInternalDocumentationLink: name === undefined ? 'https://www.remotion.dev/docs/solid' : undefined, ...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/create-effect.js

@@ -21,12 +21,14 @@ exports.disabledEffectField = {
 // erasure the descriptor would be contravariant in `P` (via `apply`'s
 // argument) and concrete descriptors could not flow into `unknown` slots.
 const createEffect = (definition) => {
+    var _a;
     // Wrap `calculateKey` to fold the framework-level `disabled` flag into the
     // memoization key. Without this, toggling `disabled` via code/drag overrides
     // would not invalidate the cached `EffectDefinitionAndStack`.
     const { calculateKey: userCalculateKey, validateParams } = definition;
     const widened = {
         ...definition,
+        documentationLink: (_a = definition.documentationLink) !== null && _a !== void 0 ? _a : null,
         calculateKey: (params) => {
             var _a;
             const disabled = (_a = params.disabled) !== null && _a !== void 0 ? _a : false;

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

@@ -9,10 +9,17 @@ 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;
     readonly label: string;
+    readonly documentationLink: string | null;
     readonly backend: Backend;
     /**
      * Stable string for comparing effect instances: two descriptors with the same

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/internals.d.ts

@@ -269,7 +269,7 @@ export declare const Internals: {
     readonly getRoot: () => import("react").FC<{}> | null;
     readonly useMediaVolumeState: () => readonly [number, (u: number) => void];
     readonly useMediaMutedState: () => readonly [boolean, (u: React.SetStateAction<boolean>) => void];
-    readonly useMediaInTimeline: ({ volume, mediaVolume, src, mediaType, playbackRate, displayName, id, getStack, showInTimeline, premountDisplay, postmountDisplay, loopDisplay, }: {
+    readonly useMediaInTimeline: ({ volume, mediaVolume, src, mediaType, playbackRate, displayName, id, getStack, showInTimeline, premountDisplay, postmountDisplay, loopDisplay, documentationLink, }: {
         volume: import("./volume-prop.js").VolumeProp | undefined;
         mediaVolume: number;
         src: string | undefined;
@@ -282,6 +282,7 @@ export declare const Internals: {
         premountDisplay: number | null;
         postmountDisplay: number | null;
         loopDisplay: import("./CompositionManager.js").LoopDisplay | undefined;
+        documentationLink: string | null;
     }) => void;
     readonly useLazyComponent: <Props>({ compProps, componentName, noSuspense, }: {
         compProps: CompProps<Props>;

package/dist/cjs/loop/index.js

@@ -84,7 +84,7 @@ const Loop = ({ durationInFrames, times = Infinity, children, name, showInTimeli
             durationInFrames,
         };
     }, [currentFrame, durationInFrames]);
-    return ((0, jsx_runtime_1.jsx)(LoopContext.Provider, { value: loopContext, children: (0, jsx_runtime_1.jsx)(Sequence_js_1.Sequence, { durationInFrames: durationInFrames, from: from, name: name !== null && name !== void 0 ? name : '<Loop>', _remotionInternalLoopDisplay: loopDisplay, layout: props.layout, style: style, showInTimeline: showInTimeline, children: children }) }));
+    return ((0, jsx_runtime_1.jsx)(LoopContext.Provider, { value: loopContext, children: (0, jsx_runtime_1.jsx)(Sequence_js_1.Sequence, { durationInFrames: durationInFrames, from: from, name: name !== null && name !== void 0 ? name : '<Loop>', _remotionInternalDocumentationLink: name === undefined ? 'https://www.remotion.dev/docs/loop' : undefined, _remotionInternalLoopDisplay: loopDisplay, layout: props.layout, style: style, showInTimeline: showInTimeline, children: children }) }));
 };
 exports.Loop = Loop;
 exports.Loop.useLoop = useLoop;

package/dist/cjs/series/index.js

@@ -55,10 +55,10 @@ const SeriesInner = (props) => {
             }
             const currentStartFrame = startFrame + offset;
             startFrame += durationInFramesProp + offset;
-            return ((0, jsx_runtime_1.jsx)(Sequence_js_1.Sequence, { name: name || '<Series.Sequence>', from: currentStartFrame, durationInFrames: durationInFramesProp, ...passedProps, ref: castedChild.ref, children: child }));
+            return ((0, jsx_runtime_1.jsx)(Sequence_js_1.Sequence, { name: name || '<Series.Sequence>', _remotionInternalDocumentationLink: name ? undefined : 'https://www.remotion.dev/docs/series', from: currentStartFrame, durationInFrames: durationInFramesProp, ...passedProps, ref: castedChild.ref, children: child }));
         });
     }, [props.children]);
-    return ((0, jsx_runtime_1.jsx)(is_inside_series_js_1.IsInsideSeriesContainer, { children: (0, jsx_runtime_1.jsx)(Sequence_js_1.Sequence, { layout: "none", name: "<Series>", ...props, children: childrenValue }) }));
+    return ((0, jsx_runtime_1.jsx)(is_inside_series_js_1.IsInsideSeriesContainer, { children: (0, jsx_runtime_1.jsx)(Sequence_js_1.Sequence, { layout: "none", name: "<Series>", _remotionInternalDocumentationLink: "https://www.remotion.dev/docs/series", ...props, children: childrenValue }) }));
 };
 /**
  * @description with this component, you can easily stitch together scenes that should play sequentially after another.