remotion 4.0.454 → 4.0.455

package/dist/cjs/CompositionManager.d.ts

@@ -3,6 +3,7 @@ import React from 'react';
 import type { AnyZodObject } from './any-zod-type.js';
 import type { CalculateMetadataFunction } from './Composition.js';
 import type { DownloadBehavior } from './download-behavior.js';
+import type { EffectDefinitionAndStack } from './effects/effect-types.js';
 import type { NonceHistory } from './nonce.js';
 import type { InferProps, PropsIfHasProps } from './props-if-has-props.js';
 import type { SequenceSchema } from './sequence-field-schema.js';
@@ -68,6 +69,7 @@ export type TSequence = {
     premountDisplay: number | null;
     postmountDisplay: number | null;
     controls: SequenceControls | null;
+    effects: EffectDefinitionAndStack<unknown>[];
 } & EnhancedTSequenceData;
 export type AudioOrVideoAsset = {
     type: 'audio' | 'video';

package/dist/cjs/HtmlInCanvas.d.ts

@@ -1,32 +1,59 @@
 import React from 'react';
-import type { EffectsProp } from './canvas-effects/effect-types.js';
+import type { EffectsProp } from './effects/effect-types.js';
 import type { AbsoluteFillLayout, LayoutAndStyle, SequenceProps } from './Sequence.js';
-export type HtmlInCanvasComposeParams = {
-    readonly source: CanvasImageSource;
-    readonly target: HTMLCanvasElement;
-    readonly frame: number;
-    readonly width: number;
-    readonly height: number;
-    readonly pixelRatio: number;
+declare global {
+    interface ElementImage {
+        readonly width: number;
+        readonly height: number;
+        close(): void;
+    }
+    interface CanvasRenderingContext2D {
+        drawElementImage(element: Element | ElementImage, dx: number, dy: number): DOMMatrix;
+        drawElementImage(element: Element | ElementImage, dx: number, dy: number, dwidth: number, dheight: number): DOMMatrix;
+        drawElementImage(element: Element | ElementImage, sx: number, sy: number, swidth: number, sheight: number, dx: number, dy: number): DOMMatrix;
+        drawElementImage(element: Element | ElementImage, sx: number, sy: number, swidth: number, sheight: number, dx: number, dy: number, dwidth: number, dheight: number): DOMMatrix;
+    }
+    interface OffscreenCanvasRenderingContext2D {
+        drawElementImage(element: ElementImage, dx: number, dy: number): DOMMatrix;
+        drawElementImage(element: ElementImage, dx: number, dy: number, dwidth: number, dheight: number): DOMMatrix;
+        drawElementImage(element: ElementImage, sx: number, sy: number, swidth: number, sheight: number, dx: number, dy: number): DOMMatrix;
+        drawElementImage(element: ElementImage, sx: number, sy: number, swidth: number, sheight: number, dx: number, dy: number, dwidth: number, dheight: number): DOMMatrix;
+    }
+    interface WebGLRenderingContextBase {
+        texElementImage2D(target: GLenum, level: GLint, internalformat: GLint, format: GLenum, type: GLenum, element: Element | ElementImage): void;
+        texElementImage2D(target: GLenum, level: GLint, internalformat: GLint, width: GLsizei, height: GLsizei, format: GLenum, type: GLenum, element: Element | ElementImage): void;
+        texElementImage2D(target: GLenum, level: GLint, internalformat: GLint, sx: GLfloat, sy: GLfloat, swidth: GLfloat, sheight: GLfloat, format: GLenum, type: GLenum, element: Element | ElementImage): void;
+        texElementImage2D(target: GLenum, level: GLint, internalformat: GLint, sx: GLfloat, sy: GLfloat, swidth: GLfloat, sheight: GLfloat, width: GLsizei, height: GLsizei, format: GLenum, type: GLenum, element: Element | ElementImage): void;
+    }
+    interface HTMLCanvasElementEventMap {
+        paint: Event;
+    }
+    interface HTMLCanvasElement {
+        layoutSubtree?: boolean;
+        onpaint: ((this: HTMLCanvasElement, ev: Event) => unknown) | null;
+        requestPaint?(): void;
+        captureElementImage(element: Element): ElementImage;
+        getElementTransform(element: Element | ElementImage, drawTransform: DOMMatrix): DOMMatrix;
+    }
+}
+export type HtmlInCanvasOnPaintParams = {
+    readonly canvas: OffscreenCanvas;
+    readonly element: HTMLDivElement;
+    readonly elementImage: ElementImage;
 };
 export declare const isHtmlInCanvasSupported: () => boolean;
-export type HtmlInCanvasProps = Omit<SequenceProps, 'children' | 'durationInFrames' | keyof LayoutAndStyle> & Omit<AbsoluteFillLayout, 'layout'> & {
+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> & Omit<AbsoluteFillLayout, 'layout' | 'styleWhilePostmounted' | 'postmountFor' | 'premountFor' | 'styleWhilePremounted'> & {
     readonly durationInFrames?: number;
     readonly width: number;
     readonly height: number;
-    readonly effects?: EffectsProp;
+    readonly _experimentalEffects?: EffectsProp;
     readonly children: React.ReactNode;
-    readonly pixelRatio?: number;
-    readonly onCompose?: (params: HtmlInCanvasComposeParams) => void | Promise<void>;
+    readonly onPaint?: HtmlInCanvasOnPaint;
+    readonly onInit?: HtmlInCanvasOnInit;
 };
-export declare const HtmlInCanvas: React.ComponentType<Omit<SequenceProps, "children" | "durationInFrames" | "layout"> & Omit<AbsoluteFillLayout, "layout"> & {
-    readonly durationInFrames?: number | undefined;
-    readonly width: number;
-    readonly height: number;
-    readonly effects?: EffectsProp | undefined;
-    readonly children: React.ReactNode;
-    readonly pixelRatio?: number | undefined;
-    readonly onCompose?: ((params: HtmlInCanvasComposeParams) => void | Promise<void>) | undefined;
-}> & {
-    readonly isHtmlInCanvasSupported: () => boolean;
+export declare const HtmlInCanvas: React.ForwardRefExoticComponent<HtmlInCanvasProps & React.RefAttributes<HTMLCanvasElement>> & {
+    readonly isHtmlInCanvasSupported: typeof isHtmlInCanvasSupported;
 };

package/dist/cjs/HtmlInCanvas.js

@@ -3,24 +3,56 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.HtmlInCanvas = exports.isHtmlInCanvasSupported = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
-const run_effect_chain_js_1 = require("./canvas-effects/run-effect-chain.js");
-const use_effect_chain_state_js_1 = require("./canvas-effects/use-effect-chain-state.js");
+const delay_render_js_1 = require("./delay-render.js");
+const run_effect_chain_js_1 = require("./effects/run-effect-chain.js");
+const use_effect_chain_state_js_1 = require("./effects/use-effect-chain-state.js");
 const enable_sequence_stack_traces_js_1 = require("./enable-sequence-stack-traces.js");
 const Sequence_js_1 = require("./Sequence.js");
 const use_current_frame_js_1 = require("./use-current-frame.js");
 const use_delay_render_js_1 = require("./use-delay-render.js");
 const use_video_config_js_1 = require("./use-video-config.js");
 const wrap_in_schema_js_1 = require("./wrap-in-schema.js");
+// Memoize the support check across the session — neither the platform
+// capability nor the chrome://flags toggle can change between calls.
+// SSR results are not cached so the check runs again once `document` exists.
+let cachedSupport = null;
 const isHtmlInCanvasSupported = () => {
+    if (cachedSupport !== null) {
+        return cachedSupport;
+    }
     if (typeof document === 'undefined') {
         return false;
     }
     const canvas = document.createElement('canvas');
     const ctx = canvas.getContext('2d');
-    return (typeof (ctx === null || ctx === void 0 ? void 0 : ctx.drawElementImage) === 'function' &&
-        typeof canvas.requestPaint === 'function');
+    cachedSupport =
+        typeof (ctx === null || ctx === void 0 ? void 0 : ctx.drawElementImage) === 'function' &&
+            typeof canvas.requestPaint === 'function' &&
+            typeof canvas.captureElementImage === 'function';
+    return cachedSupport;
 };
 exports.isHtmlInCanvasSupported = isHtmlInCanvasSupported;
+function assertHtmlInCanvasDimensions(width, height) {
+    if (typeof width !== 'number' || typeof height !== 'number') {
+        throw new Error(`HtmlInCanvas: \`width\` and \`height\` must be numbers. Received width=${String(width)}, height=${String(height)}.`);
+    }
+    if (!Number.isInteger(width) || width <= 0) {
+        throw new Error(`HtmlInCanvas: \`width\` must be a positive integer. Received: ${String(width)}.`);
+    }
+    if (!Number.isInteger(height) || height <= 0) {
+        throw new Error(`HtmlInCanvas: \`height\` must be a positive integer. Received: ${String(height)}.`);
+    }
+}
+const defaultOnPaint = ({ canvas, element, elementImage, }) => {
+    const ctx = canvas.getContext('2d');
+    if (!ctx) {
+        throw new Error('Failed to acquire 2D context for <HtmlInCanvas> canvas');
+    }
+    ctx.reset();
+    const transform = ctx.drawElementImage(elementImage, 0, 0);
+    element.style.transform = transform.toString();
+};
+/* eslint-enable react/require-default-props */
 const htmlInCanvasSchema = {
     'style.translate': {
         type: 'translate',
@@ -51,119 +83,172 @@ const htmlInCanvasSchema = {
         description: 'Opacity',
     },
 };
-const HtmlInCanvasInner = ({ width, height, effects = [], children, style, pixelRatio = 1, onCompose, controls, durationInFrames, ...sequenceProps }) => {
+const HtmlInCanvasInner = (0, react_1.forwardRef)(({ width, height, _experimentalEffects: experimentalEffects = [], children, onPaint, onInit, controls, style, durationInFrames, ...sequenceProps }, ref) => {
+    assertHtmlInCanvasDimensions(width, height);
+    const { continueRender, cancelRender } = (0, use_delay_render_js_1.useDelayRender)();
+    if (!(0, exports.isHtmlInCanvasSupported)()) {
+        cancelRender(new Error('HTML in Canvas is not supported. Open this page in Chrome Canary with chrome://flags/#canvas-draw-element enabled.'));
+    }
     const { durationInFrames: videoDuration } = (0, use_video_config_js_1.useVideoConfig)();
     const resolvedDuration = durationInFrames !== null && durationInFrames !== void 0 ? durationInFrames : videoDuration;
     const frame = (0, use_current_frame_js_1.useCurrentFrame)();
-    const { delayRender, continueRender, cancelRender } = (0, use_delay_render_js_1.useDelayRender)();
-    const canvasRef = (0, react_1.useRef)(null);
-    const sceneRef = (0, react_1.useRef)(null);
-    const chainState = (0, use_effect_chain_state_js_1.useEffectChainState)(width, height);
+    const canvas2dRef = (0, react_1.useRef)(null);
+    const divRef = (0, react_1.useRef)(null);
+    const setLayoutCanvasRef = (0, react_1.useCallback)((node) => {
+        canvas2dRef.current = node;
+        if (typeof ref === 'function') {
+            ref(node);
+        }
+        else if (ref) {
+            ref.current =
+                node;
+        }
+    }, [ref]);
+    const [offscreenCanvas] = (0, react_1.useState)(() => new OffscreenCanvas(1, 1));
+    const chainState = (0, use_effect_chain_state_js_1.useEffectChainState)();
     // Refs so the paint handler always reads fresh values.
-    const effectsRef = (0, react_1.useRef)(effects);
-    effectsRef.current = effects;
+    const effectsRef = (0, react_1.useRef)(experimentalEffects);
+    effectsRef.current = experimentalEffects;
     const frameRef = (0, react_1.useRef)(frame);
     frameRef.current = frame;
-    const pixelRatioRef = (0, react_1.useRef)(pixelRatio);
-    pixelRatioRef.current = pixelRatio;
-    const widthRef = (0, react_1.useRef)(width);
-    widthRef.current = width;
-    const heightRef = (0, react_1.useRef)(height);
-    heightRef.current = height;
-    // Track the current delayRender handle so the paint handler can settle it.
-    const pendingHandleRef = (0, react_1.useRef)(null);
-    const onPaint = (0, react_1.useCallback)(() => {
-        const canvas = canvasRef.current;
-        const sceneEl = sceneRef.current;
-        const handle = pendingHandleRef.current;
-        if (!canvas || !sceneEl || !chainState || handle === null) {
-            return;
+    const onPaintRef = (0, react_1.useRef)(onPaint);
+    onPaintRef.current = onPaint;
+    const onInitRef = (0, react_1.useRef)(onInit);
+    onInitRef.current = onInit;
+    const initializedRef = (0, react_1.useRef)(false);
+    const onInitCleanupRef = (0, react_1.useRef)(null);
+    const unmountedRef = (0, react_1.useRef)(false);
+    const onPaintCb = (0, react_1.useCallback)(async () => {
+        var _a;
+        const element = divRef.current;
+        if (!element) {
+            throw new Error('Canvas or scene element not found');
         }
+        offscreenCanvas.width = width;
+        offscreenCanvas.height = height;
         try {
-            const ctx = canvas.getContext('2d');
-            if (!ctx) {
-                throw new Error('Failed to acquire 2D context for <HtmlInCanvas> canvas');
+            const layoutCanvas = canvas2dRef.current;
+            if (!layoutCanvas) {
+                throw new Error('Canvas not found');
+            }
+            // `GPUQueue.copyElementImageToTexture` / related paths validate the
+            // layout canvas has a rendering context. `runEffectChain` only runs
+            // after `onPaint`, so acquire `2d` here before any capture or handler.
+            const layout2d = layoutCanvas.getContext('2d');
+            if (!layout2d) {
+                throw new Error('Failed to acquire 2D context for <HtmlInCanvas> layout canvas');
             }
-            const w = widthRef.current;
-            const h = heightRef.current;
-            // Layout-subtree children are not shown on-screen until rasterized here;
-            // effects then read from and write back to this same surface (via pool).
-            ctx.reset();
-            ctx.drawElementImage(sceneEl, 0, 0, w, h);
-            const capturedHandle = handle;
-            pendingHandleRef.current = null;
-            (0, run_effect_chain_js_1.runEffectChain)({
-                state: chainState,
-                source: canvas,
+            const handle = (0, delay_render_js_1.delayRender)('onPaint');
+            if (!initializedRef.current) {
+                initializedRef.current = true;
+                // `onInit` may be async (e.g. WebGPU `requestAdapter`/`requestDevice`).
+                // Capture an `ElementImage` here only for `onInit` consumers — do NOT
+                // reuse it for the paint handler below, because awaiting `onInit`
+                // can invalidate the capture's paint context, leaving subsequent
+                // uploads (e.g. `copyElementImageToTexture`) failing with
+                // "No context found for ElementImage" on the very first paint.
+                const initImage = layoutCanvas.captureElementImage(element);
+                const currentOnInit = onInitRef.current;
+                if (currentOnInit) {
+                    const cleanup = await currentOnInit({
+                        canvas: offscreenCanvas,
+                        element,
+                        elementImage: initImage,
+                    });
+                    if (typeof cleanup !== 'function') {
+                        throw new Error('HtmlInCanvas: when `onInit` is provided, it must return a cleanup function, or a Promise that resolves to one.');
+                    }
+                    if (unmountedRef.current) {
+                        cleanup();
+                    }
+                    else {
+                        onInitCleanupRef.current = cleanup;
+                    }
+                }
+            }
+            const handler = (_a = onPaintRef.current) !== null && _a !== void 0 ? _a : defaultOnPaint;
+            const elImage = layoutCanvas.captureElementImage(element);
+            await handler({
+                canvas: offscreenCanvas,
+                element,
+                elementImage: elImage,
+            });
+            await (0, run_effect_chain_js_1.runEffectChain)({
+                state: chainState.get(width, height),
+                source: offscreenCanvas,
                 effects: effectsRef.current,
-                output: canvas,
+                output: canvas2dRef.current,
                 frame: frameRef.current,
-                width: w,
-                height: h,
-                pixelRatio: pixelRatioRef.current,
-            })
-                .then((completed) => {
-                if (completed) {
-                    continueRender(capturedHandle);
-                }
-            })
-                .catch((err) => {
-                cancelRender(err);
+                width,
+                height,
             });
+            continueRender(handle);
         }
         catch (error) {
             cancelRender(error);
         }
-    }, [chainState, continueRender, cancelRender]);
-    // Set up layoutSubtree and persistent paint listener.
-    (0, react_1.useEffect)(() => {
-        if (!(0, exports.isHtmlInCanvasSupported)()) {
-            cancelRender(new Error('HTML in Canvas is not supported. Open this page in Chrome Canary with chrome://flags/#canvas-draw-element enabled.'));
-            return;
-        }
-        const canvas = canvasRef.current;
+    }, [
+        chainState,
+        continueRender,
+        cancelRender,
+        width,
+        height,
+        offscreenCanvas,
+    ]);
+    // Set up layoutSubtree and persistent paint listener. Runs as a
+    // layout effect so the listener is attached before the resize effect
+    // below dispatches its first synthetic paint.
+    (0, react_1.useLayoutEffect)(() => {
+        const canvas = canvas2dRef.current;
         if (!canvas) {
-            return;
+            throw new Error('Canvas not found');
         }
         canvas.layoutSubtree = true;
-        canvas.addEventListener('paint', onPaint);
+        canvas.addEventListener('paint', onPaintCb);
         return () => {
-            canvas.removeEventListener('paint', onPaint);
+            var _a;
+            canvas.removeEventListener('paint', onPaintCb);
+            unmountedRef.current = true;
+            (_a = onInitCleanupRef.current) === null || _a === void 0 ? void 0 : _a.call(onInitCleanupRef);
+            onInitCleanupRef.current = null;
         };
-    }, [onPaint, cancelRender]);
-    // On each frame change: block the renderer and request a paint.
-    (0, react_1.useEffect)(() => {
-        const handle = delayRender(`HtmlInCanvas (frame ${frame})`);
-        // Continue a stale handle from a previous frame that never got a paint.
-        if (pendingHandleRef.current !== null) {
-            continueRender(pendingHandleRef.current);
+    }, [onPaintCb, cancelRender]);
+    const onPaintChangedRef = (0, react_1.useRef)(false);
+    (0, react_1.useLayoutEffect)(() => {
+        var _a;
+        if (!onPaintChangedRef.current) {
+            onPaintChangedRef.current = true;
+            return;
         }
-        pendingHandleRef.current = handle;
-        const canvas = canvasRef.current;
-        canvas === null || canvas === void 0 ? void 0 : canvas.requestPaint();
+        const canvas = canvas2dRef.current;
+        if (!canvas) {
+            return;
+        }
+        (_a = canvas.requestPaint) === null || _a === void 0 ? void 0 : _a.call(canvas);
+    }, [onPaint]);
+    (0, react_1.useLayoutEffect)(() => {
+        const canvas = canvas2dRef.current;
+        if (!canvas) {
+            return;
+        }
+        const handle = (0, delay_render_js_1.delayRender)('waiting for first paint after canvas resize');
+        canvas.addEventListener('paint', () => {
+            continueRender(handle);
+        }, { once: true });
         return () => {
-            if (pendingHandleRef.current === handle) {
-                continueRender(handle);
-                pendingHandleRef.current = null;
-            }
+            continueRender(handle);
         };
-    }, [frame, delayRender, continueRender]);
-    const outerStyle = (0, react_1.useMemo)(() => {
-        return {
-            position: 'absolute',
-            inset: 0,
-            width: width + 'px',
-            height: height + 'px',
-        };
-    }, [width, height]);
+    }, [width, height, continueRender]);
     const innerStyle = (0, react_1.useMemo)(() => {
         return {
             width,
             height,
+            ...style,
         };
-    }, [width, height]);
-    return (jsx_runtime_1.jsx(Sequence_js_1.Sequence, { durationInFrames: resolvedDuration, name: "<HtmlInCanvas>", controls: controls, ...sequenceProps, style: style, children: jsx_runtime_1.jsx("canvas", { ref: canvasRef, width: width, height: height, style: outerStyle, children: jsx_runtime_1.jsx("div", { ref: sceneRef, style: innerStyle, children: children }) }) }));
-};
+    }, [width, height, style]);
+    return ((0, jsx_runtime_1.jsx)(Sequence_js_1.Sequence, { durationInFrames: resolvedDuration, name: "<HtmlInCanvas>", controls: controls, layout: "none", ...sequenceProps, children: (0, jsx_runtime_1.jsx)("canvas", { ref: setLayoutCanvasRef, width: width, height: height, children: (0, jsx_runtime_1.jsx)("div", { ref: divRef, style: innerStyle, children: children }) }) }));
+});
+HtmlInCanvasInner.displayName = 'HtmlInCanvas';
 const HtmlInCanvasWrapped = (0, wrap_in_schema_js_1.wrapInSchema)(HtmlInCanvasInner, htmlInCanvasSchema);
 exports.HtmlInCanvas = Object.assign(HtmlInCanvasWrapped, {
     isHtmlInCanvasSupported: exports.isHtmlInCanvasSupported,

package/dist/cjs/Sequence.d.ts

@@ -1,5 +1,6 @@
 import React from 'react';
 import type { LoopDisplay, SequenceControls } from './CompositionManager.js';
+import type { EffectsProp } from './effects/effect-types.js';
 export type AbsoluteFillLayout = {
     layout?: 'absolute-fill';
     premountFor?: number;
@@ -20,6 +21,7 @@ export type SequencePropsWithoutDuration = {
     readonly name?: string;
     readonly showInTimeline?: boolean;
     readonly controls?: SequenceControls;
+    readonly _experimentalEffects?: EffectsProp;
     /**
      * @deprecated For internal use only.
      */

package/dist/cjs/Sequence.js

@@ -5,6 +5,8 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 /* eslint-disable @typescript-eslint/no-use-before-define */
 const react_1 = require("react");
 const AbsoluteFill_js_1 = require("./AbsoluteFill.js");
+const effect_internals_js_1 = require("./effects/effect-internals.js");
+const use_memoized_effects_js_1 = require("./effects/use-memoized-effects.js");
 const freeze_js_1 = require("./freeze.js");
 const nonce_js_1 = require("./nonce.js");
 const PremountContext_js_1 = require("./PremountContext.js");
@@ -15,7 +17,7 @@ const use_current_frame_1 = require("./use-current-frame");
 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 RegularSequenceRefForwardingFunction = ({ from = 0, durationInFrames = Infinity, children, name, height, width, showInTimeline = true, controls, _remotionInternalLoopDisplay: loopDisplay, _remotionInternalStack: stack, _remotionInternalPremountDisplay: premountDisplay, _remotionInternalPostmountDisplay: postmountDisplay, ...other }, ref) => {
+const RegularSequenceRefForwardingFunction = ({ from = 0, durationInFrames = Infinity, children, name, height, width, showInTimeline = true, controls, _experimentalEffects, _remotionInternalLoopDisplay: loopDisplay, _remotionInternalStack: stack, _remotionInternalPremountDisplay: premountDisplay, _remotionInternalPostmountDisplay: postmountDisplay, ...other }, ref) => {
     var _a, _b;
     const { layout = 'absolute-fill' } = other;
     const [id] = (0, react_1.useState)(() => String(Math.random()));
@@ -95,6 +97,7 @@ const RegularSequenceRefForwardingFunction = ({ from = 0, durationInFrames = Inf
     }, [name]);
     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;
+    const memoizedEffects = (0, use_memoized_effects_js_1.useMemoizedEffects)((0, effect_internals_js_1.flattenEffects)(_experimentalEffects !== null && _experimentalEffects !== void 0 ? _experimentalEffects : []));
     (0, react_1.useEffect)(() => {
         var _a;
         if (!env.isStudio) {
@@ -115,6 +118,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: memoizedEffects,
         });
         return () => {
             unregisterSequence(id);
@@ -139,6 +143,7 @@ const RegularSequenceRefForwardingFunction = ({ from = 0, durationInFrames = Inf
         env.isStudio,
         inheritedStack,
         controls,
+        memoizedEffects,
     ]);
     // Ceil to support floats
     // https://github.com/remotion-dev/remotion/issues/2958

package/dist/cjs/{canvas-effects → effects}/Solid.d.ts

@@ -4,7 +4,7 @@ export type SolidProps = {
     readonly color: string;
     readonly width: number;
     readonly height: number;
-    readonly effects?: EffectsProp;
+    readonly _experimentalEffects?: EffectsProp;
     readonly className?: string;
     readonly style?: React.CSSProperties;
     readonly pixelRatio?: number;

package/dist/cjs/{canvas-effects → effects}/Solid.js

@@ -7,7 +7,7 @@ const use_current_frame_js_1 = require("../use-current-frame.js");
 const use_delay_render_js_1 = require("../use-delay-render.js");
 const run_effect_chain_js_1 = require("./run-effect-chain.js");
 const use_effect_chain_state_js_1 = require("./use-effect-chain-state.js");
-const Solid = ({ color, width, height, effects = [], className, style, pixelRatio = 1, }) => {
+const Solid = ({ color, width, height, _experimentalEffects: experimentalEffects = [], className, style, pixelRatio = 1, }) => {
     const frame = (0, use_current_frame_js_1.useCurrentFrame)();
     const { delayRender, continueRender, cancelRender } = (0, use_delay_render_js_1.useDelayRender)();
     const [outputCanvas, setOutputCanvas] = (0, react_1.useState)(null);
@@ -20,13 +20,19 @@ const Solid = ({ color, width, height, effects = [], className, style, pixelRati
         canvas.height = 1;
         return canvas;
     }, []);
-    const chainState = (0, use_effect_chain_state_js_1.useEffectChainState)(width, height);
+    const chainState = (0, use_effect_chain_state_js_1.useEffectChainState)();
     // Fill source and run effect chain on every frame / color change.
     (0, react_1.useEffect)(() => {
-        if (!outputCanvas || !sourceCanvas || !chainState) {
+        if (!outputCanvas || !sourceCanvas) {
             return;
         }
         const handle = delayRender(`Solid effect chain (frame ${frame})`);
+        if (!chainState) {
+            continueRender(handle);
+            return () => {
+                continueRender(handle);
+            };
+        }
         const ctx = sourceCanvas.getContext('2d', { colorSpace: 'srgb' });
         if (!ctx) {
             cancelRender(new Error('Failed to acquire 2D context for <Solid> source'));
@@ -35,14 +41,13 @@ const Solid = ({ color, width, height, effects = [], className, style, pixelRati
         ctx.fillStyle = color;
         ctx.fillRect(0, 0, 1, 1);
         (0, run_effect_chain_js_1.runEffectChain)({
-            state: chainState,
+            state: chainState.get(width, height),
             source: sourceCanvas,
-            effects,
+            effects: experimentalEffects,
             output: outputCanvas,
             frame,
             width,
             height,
-            pixelRatio,
         })
             .then((completed) => {
             if (completed) {
@@ -58,7 +63,7 @@ const Solid = ({ color, width, height, effects = [], className, style, pixelRati
     }, [
         frame,
         color,
-        effects,
+        experimentalEffects,
         outputCanvas,
         sourceCanvas,
         chainState,
@@ -69,6 +74,6 @@ const Solid = ({ color, width, height, effects = [], className, style, pixelRati
         continueRender,
         cancelRender,
     ]);
-    return (jsx_runtime_1.jsx("canvas", { ref: setOutputCanvas, width: width, height: height, className: className, style: style }));
+    return ((0, jsx_runtime_1.jsx)("canvas", { ref: setOutputCanvas, width: width, height: height, className: className, style: style }));
 };
 exports.Solid = Solid;

package/dist/cjs/{canvas-effects → effects}/canvas-pool.js

@@ -9,11 +9,9 @@ exports.CanvasPool = void 0;
 // are created with the cross-backend alpha/sRGB contract enforced (see
 // `effect-types.ts`).
 class CanvasPool {
-    width;
-    height;
-    pairs = new Map();
-    lostContexts = new Set();
     constructor(width, height) {
+        this.pairs = new Map();
+        this.lostContexts = new Set();
         this.width = width;
         this.height = height;
     }

package/dist/cjs/{canvas-effects → effects}/define-effect.d.ts

@@ -1,3 +1,3 @@
 import type { EffectDefinition, EffectDescriptor } from './effect-types.js';
 export declare const defineEffect: <P, S>(definition: EffectDefinition<P, S>) => EffectDefinition<P, S>;
-export declare const createDescriptor: <P, S>(definition: EffectDefinition<P, S>, params: P) => EffectDescriptor<P>;
+export declare const createDescriptor: <P, S>(definition: EffectDefinition<P, S>, params: P) => EffectDescriptor<unknown>;

package/dist/cjs/{canvas-effects → effects}/define-effect.js

@@ -10,10 +10,14 @@ exports.defineEffect = defineEffect;
 // Factory helper for constructing per-frame descriptors from a definition.
 // Effect authors typically expose a small wrapper (e.g.
 // `export const blur = (params) => createDescriptor(blurDef, params)`) so users
-// don't reach into the internal definition object. The state type `S` is
-// erased to `unknown` in the descriptor because consumers (the chain runtime,
-// other effects in the chain) treat state as opaque; only the definition's
-// own `setup`, `apply`, and `cleanup` functions ever see the real shape.
+// don't reach into the internal definition object.
+//
+// `params` is type-checked against `P` at the call site, but the returned
+// descriptor erases both `P` and `S` to `unknown` so it can be freely
+// composed in `EffectsProp` arrays alongside descriptors of other effects.
+// Without this erasure the descriptor would be contravariant in `P` (via
+// `apply`'s argument), which would prevent assigning a concrete
+// `EffectDescriptor<MyParams>` into an `EffectDescriptor<unknown>` slot.
 const createDescriptor = (definition, params) => {
     return {
         definition: definition,

package/dist/cjs/{canvas-effects → effects}/effect-internals.d.ts

@@ -4,4 +4,4 @@ export type Run = {
     readonly backend: Backend;
     readonly effects: ReadonlyArray<EffectDescriptor<unknown>>;
 };
-export declare const groupByBackend: (effects: readonly EffectDescriptor<unknown>[]) => Run[];
+export declare const groupByBackend: (effects: ReadonlyArray<EffectDescriptor<unknown>>) => Run[];

package/dist/cjs/{canvas-effects → effects}/effect-types.d.ts

@@ -1,4 +1,4 @@
-import type { SequenceSchema } from '../internals';
+import type { SequenceSchema } from '../sequence-field-schema.js';
 export type Backend = '2d' | 'webgl2' | 'webgpu';
 type AnyGpuDevice = unknown;
 export type EffectApplyParams<P, S> = {
@@ -9,15 +9,14 @@ export type EffectApplyParams<P, S> = {
     readonly frame: number;
     readonly width: number;
     readonly height: number;
-    readonly pixelRatio: number;
     readonly gpuDevice: AnyGpuDevice | null;
 };
 export type EffectDefinition<P, S = unknown> = {
     readonly type: string;
     readonly label: string;
     readonly backend: Backend;
-    readonly setup: (target: HTMLCanvasElement) => S | Promise<S>;
-    readonly apply: (params: EffectApplyParams<P, S>) => void | Promise<void>;
+    readonly setup: (target: HTMLCanvasElement) => S;
+    readonly apply: (params: EffectApplyParams<P, S>) => void;
     readonly cleanup: (state: S) => void;
     readonly schema: SequenceSchema | null;
 };
@@ -28,5 +27,5 @@ export type EffectDefinitionAndStack<P = unknown> = {
 export type EffectDescriptor<P = unknown> = EffectDefinitionAndStack<P> & {
     readonly params: P;
 };
-export type EffectsProp = ReadonlyArray<EffectDescriptor<any> | ReadonlyArray<EffectDescriptor<any>>>;
+export type EffectsProp = ReadonlyArray<EffectDescriptor<unknown> | ReadonlyArray<EffectDescriptor<unknown>>>;
 export {};

package/dist/cjs/{canvas-effects → effects}/effect-types.js

@@ -1,5 +1,5 @@
 "use strict";
-// Public types for the canvas-effects system.
+// Internal types for the effects system (exported via `remotion` → `./internals.js`).
 //
 // An effect is a description of how to transform an input image into an output
 // image, executed inside a per-frame chain runtime owned by a source component
@@ -10,4 +10,3 @@
 // sRGB-encoded. Effects that perform color math in linear space are responsible
 // for converting to/from sRGB themselves.
 Object.defineProperty(exports, "__esModule", { value: true });
-/* eslint-enable @typescript-eslint/no-explicit-any */