remotion 4.0.536 → 4.0.538

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

@@ -16,52 +16,52 @@ type OptionalProps = {
 export type SolidProps = MandatoryProps & Partial<OptionalProps> & InteractiveCropProps;
 export declare const solidSchema: {
     readonly 'style.transformOrigin': {
-        readonly type: "transform-origin";
+        readonly type: 'transform-origin';
         readonly step: 1;
-        readonly default: "50% 50%";
-        readonly description: "Transform origin";
+        readonly default: '50% 50%';
+        readonly description: 'Transform origin';
     };
     readonly 'style.translate': {
-        readonly type: "translate";
+        readonly type: 'translate';
         readonly step: 1;
-        readonly default: "0px 0px";
-        readonly description: "Offset";
+        readonly default: '0px 0px';
+        readonly description: 'Offset';
     };
     readonly 'style.scale': {
-        readonly type: "scale";
+        readonly type: 'scale';
         readonly max: 100;
         readonly step: 0.01;
         readonly default: 1;
-        readonly description: "Scale";
-        readonly defaultKeyframeOutput: "perceptual-scale";
+        readonly description: 'Scale';
+        readonly defaultKeyframeOutput: 'perceptual-scale';
     };
     readonly 'style.rotate': {
-        readonly type: "rotation-css";
+        readonly type: 'rotation-css';
         readonly step: 1;
-        readonly default: "0deg";
-        readonly description: "Rotation";
+        readonly default: '0deg';
+        readonly description: 'Rotation';
     };
     readonly 'style.opacity': {
-        readonly type: "number";
+        readonly type: 'number';
         readonly min: 0;
         readonly max: 1;
         readonly step: 0.01;
         readonly default: 1;
-        readonly description: "Opacity";
+        readonly description: 'Opacity';
         readonly hiddenFromList: false;
     };
     readonly 'style.borderWidth': {
-        readonly type: "number";
+        readonly type: 'number';
         readonly default: undefined;
         readonly min: 0;
         readonly step: 1;
-        readonly description: "Border width";
+        readonly description: 'Border width';
         readonly hiddenFromList: false;
     };
     readonly 'style.borderStyle': {
-        readonly type: "enum";
-        readonly default: "none";
-        readonly description: "Border style";
+        readonly type: 'enum';
+        readonly default: 'none';
+        readonly description: 'Border style';
         readonly variants: {
             readonly none: {};
             readonly hidden: {};
@@ -76,67 +76,67 @@ export declare const solidSchema: {
         };
     };
     readonly 'style.borderColor': {
-        readonly type: "color";
+        readonly type: 'color';
         readonly default: undefined;
-        readonly description: "Border color";
+        readonly description: 'Border color';
     };
     readonly 'style.borderRadius': {
-        readonly type: "number";
+        readonly type: 'number';
         readonly default: 0;
         readonly min: 0;
         readonly step: 1;
-        readonly description: "Border radius";
+        readonly description: 'Border radius';
         readonly hiddenFromList: false;
         readonly keyframable: true;
     };
     readonly 'style.borderTopLeftRadius': {
-        readonly type: "number";
+        readonly type: 'number';
         readonly default: 0;
         readonly min: 0;
         readonly step: 1;
-        readonly description: "Top left radius";
+        readonly description: 'Top left radius';
         readonly hiddenFromList: false;
     };
     readonly 'style.borderTopRightRadius': {
-        readonly type: "number";
+        readonly type: 'number';
         readonly default: 0;
         readonly min: 0;
         readonly step: 1;
-        readonly description: "Top right radius";
+        readonly description: 'Top right radius';
         readonly hiddenFromList: false;
     };
     readonly 'style.borderBottomRightRadius': {
-        readonly type: "number";
+        readonly type: 'number';
         readonly default: 0;
         readonly min: 0;
         readonly step: 1;
-        readonly description: "Bottom right radius";
+        readonly description: 'Bottom right radius';
         readonly hiddenFromList: false;
     };
     readonly 'style.borderBottomLeftRadius': {
-        readonly type: "number";
+        readonly type: 'number';
         readonly default: 0;
         readonly min: 0;
         readonly step: 1;
-        readonly description: "Bottom left radius";
+        readonly description: 'Bottom left radius';
         readonly hiddenFromList: false;
     };
     readonly 'style.backgroundColor': {
-        readonly type: "color";
-        readonly default: "transparent";
-        readonly description: "Color";
+        readonly type: 'color';
+        readonly default: 'transparent';
+        readonly description: 'Color';
     };
     readonly premountFor: {
-        readonly type: "number";
+        readonly type: 'number';
         readonly default: undefined;
-        readonly description: "Premount For";
+        readonly description: 'Premount For';
         readonly min: 0;
         readonly step: 1;
         readonly hiddenFromList: false;
         readonly keyframable: false;
     };
     readonly postmountFor: {
-        readonly type: "number";
+        readonly type: 'number';
         readonly default: 0;
         readonly min: 0;
         readonly step: 1;
@@ -144,9 +144,9 @@ export declare const solidSchema: {
         readonly keyframable: false;
     };
     readonly cropLeft: {
-        readonly type: "number";
+        readonly type: 'number';
         readonly default: 0;
-        readonly description: "Crop left";
+        readonly description: 'Crop left';
         readonly min: 0;
         readonly max: 1;
         readonly step: 0.01;
@@ -154,9 +154,9 @@ export declare const solidSchema: {
         readonly keyframable: true;
     };
     readonly cropRight: {
-        readonly type: "number";
+        readonly type: 'number';
         readonly default: 0;
-        readonly description: "Crop right";
+        readonly description: 'Crop right';
         readonly min: 0;
         readonly max: 1;
         readonly step: 0.01;
@@ -164,9 +164,9 @@ export declare const solidSchema: {
         readonly keyframable: true;
     };
     readonly cropTop: {
-        readonly type: "number";
+        readonly type: 'number';
         readonly default: 0;
-        readonly description: "Crop top";
+        readonly description: 'Crop top';
         readonly min: 0;
         readonly max: 1;
         readonly step: 0.01;
@@ -174,9 +174,9 @@ export declare const solidSchema: {
         readonly keyframable: true;
     };
     readonly cropBottom: {
-        readonly type: "number";
+        readonly type: 'number';
         readonly default: 0;
-        readonly description: "Crop bottom";
+        readonly description: 'Crop bottom';
         readonly min: 0;
         readonly max: 1;
         readonly step: 0.01;
@@ -184,36 +184,36 @@ export declare const solidSchema: {
         readonly keyframable: true;
     };
     readonly durationInFrames: {
-        readonly type: "number";
+        readonly type: 'number';
         readonly default: undefined;
         readonly min: 1;
         readonly step: 1;
         readonly hiddenFromList: true;
     };
     readonly from: {
-        readonly type: "number";
+        readonly type: 'number';
         readonly default: 0;
         readonly step: 1;
         readonly hiddenFromList: true;
     };
     readonly trimBefore: {
-        readonly type: "number";
+        readonly type: 'number';
         readonly default: 0;
         readonly min: 0;
         readonly step: 1;
         readonly hiddenFromList: true;
     };
     readonly playbackRate: {
-        readonly type: "number";
+        readonly type: 'number';
         readonly default: 1;
         readonly min: 0.01;
         readonly step: 0.1;
-        readonly description: "Playback rate";
+        readonly description: 'Playback rate';
         readonly hiddenFromList: false;
         readonly keyframable: false;
     };
     readonly freeze: {
-        readonly type: "number";
+        readonly type: 'number';
         readonly default: null;
         readonly step: 1;
         readonly hiddenFromList: true;
@@ -222,33 +222,33 @@ export declare const solidSchema: {
     readonly name: import("../interactivity-schema.js").HiddenFieldSchema;
     readonly showInTimeline: import("../interactivity-schema.js").HiddenFieldSchema;
     readonly color: {
-        readonly type: "color";
-        readonly default: "transparent";
-        readonly description: "Color";
+        readonly type: 'color';
+        readonly default: 'transparent';
+        readonly description: 'Color';
     };
     readonly width: {
-        readonly type: "number";
+        readonly type: 'number';
         readonly min: 1;
         readonly step: 1;
         readonly default: 1920;
-        readonly description: "Width";
+        readonly description: 'Width';
         readonly hiddenFromList: false;
     };
     readonly height: {
-        readonly type: "number";
+        readonly type: 'number';
         readonly min: 1;
         readonly step: 1;
         readonly default: 1080;
-        readonly description: "Height";
+        readonly description: 'Height';
         readonly hiddenFromList: false;
     };
     readonly pixelDensity: {
-        readonly type: "number";
+        readonly type: 'number';
         readonly min: 1;
         readonly max: 3;
         readonly step: 0.1;
         readonly default: 1;
-        readonly description: "Pixel density";
+        readonly description: 'Pixel density';
         readonly hiddenFromList: false;
     };
 };

package/dist/cjs/effects/Solid.js

@@ -156,7 +156,7 @@ const SolidInner = ({ color, width, height, effects = [], effectsOutputSize = nu
             ...(style !== null && style !== void 0 ? style : {}),
         };
     }, [height, style, width]);
-    return (jsx_runtime_1.jsx("canvas", { ref: canvasRef, width: canvasWidth, height: canvasHeight, className: className, style: canvasStyle }));
+    return ((0, jsx_runtime_1.jsx)("canvas", { ref: canvasRef, width: canvasWidth, height: canvasHeight, className: className, style: canvasStyle }));
 };
 const SolidOuter = (0, react_1.forwardRef)(({ effects = [], effectsOutputSize = null, controls, color, height, width, className, durationInFrames, style, name, from, premountFor, postmountFor, styleWhilePremounted, styleWhilePostmounted, trimBefore, playbackRate, loop, freeze, hidden, showInTimeline, pixelDensity, cropLeft, cropRight, cropTop, cropBottom, ...props }, ref) => {
     var _a, _b;
@@ -188,7 +188,7 @@ const SolidOuter = (0, react_1.forwardRef)(({ effects = [], effectsOutputSize =
         style: premountingStyle,
         componentName: '<Solid />',
     });
-    return (jsx_runtime_1.jsx(freeze_js_1.Freeze, { frame: freezeFrame, active: isPremountingOrPostmounting, _remotionInternalIsPremounting: premountingActive, children: jsx_runtime_1.jsx(Sequence_js_1.Sequence, { layout: "none", from: from, trimBefore: trimBefore, playbackRate: playbackRate, loop: loop, freeze: freeze, hidden: hidden, showInTimeline: showInTimeline, controls: controls, _remotionInternalEffects: memoizedEffectDefinitions, durationInFrames: durationInFrames, name: name !== null && name !== void 0 ? name : '<Solid>', _remotionInternalDocumentationLink: "https://www.remotion.dev/docs/solid", ...props, _remotionInternalPremountDisplay: effectivePremountFor || null, _remotionInternalPostmountDisplay: effectivePostmountFor || null, _remotionInternalIsPremounting: premountingActive, _remotionInternalIsPostmounting: postmountingActive, children: jsx_runtime_1.jsx(sequence_activity_context_js_1.SequenceContent, { children: jsx_runtime_1.jsx(SolidInner, { reference: actualRef, videoConfigValues: (_a = controls === null || controls === void 0 ? void 0 : controls.videoConfigValues) !== null && _a !== void 0 ? _a : null, overrideId: (_b = controls === null || controls === void 0 ? void 0 : controls.overrideId) !== null && _b !== void 0 ? _b : null, color: color, height: height, width: width, className: className, style: croppedStyle !== null && croppedStyle !== void 0 ? croppedStyle : undefined, effects: effects, effectsOutputSize: effectsOutputSize, pixelDensity: pixelDensity }) }) }) }));
+    return ((0, jsx_runtime_1.jsx)(freeze_js_1.Freeze, { frame: freezeFrame, active: isPremountingOrPostmounting, _remotionInternalIsPremounting: premountingActive, children: (0, jsx_runtime_1.jsx)(Sequence_js_1.Sequence, { layout: "none", from: from, trimBefore: trimBefore, playbackRate: playbackRate, loop: loop, freeze: freeze, hidden: hidden, showInTimeline: showInTimeline, controls: controls, _remotionInternalEffects: memoizedEffectDefinitions, durationInFrames: durationInFrames, name: name !== null && name !== void 0 ? name : '<Solid>', _remotionInternalDocumentationLink: "https://www.remotion.dev/docs/solid", ...props, _remotionInternalPremountDisplay: effectivePremountFor || null, _remotionInternalPostmountDisplay: effectivePostmountFor || null, _remotionInternalIsPremounting: premountingActive, _remotionInternalIsPostmounting: postmountingActive, children: (0, jsx_runtime_1.jsx)(sequence_activity_context_js_1.SequenceContent, { children: (0, jsx_runtime_1.jsx)(SolidInner, { reference: actualRef, videoConfigValues: (_a = controls === null || controls === void 0 ? void 0 : controls.videoConfigValues) !== null && _a !== void 0 ? _a : null, overrideId: (_b = controls === null || controls === void 0 ? void 0 : controls.overrideId) !== null && _b !== void 0 ? _b : null, color: color, height: height, width: width, className: className, style: croppedStyle !== null && croppedStyle !== void 0 ? croppedStyle : undefined, effects: effects, effectsOutputSize: effectsOutputSize, pixelDensity: pixelDensity }) }) }) }));
 });
 exports.Solid = (0, with_interactivity_schema_js_1.withInteractivitySchema)({
     Component: SolidOuter,

package/dist/cjs/effects/canvas-pool.js

@@ -16,16 +16,13 @@ const webgl2_context_error_js_1 = require("./webgl2-context-error.js");
 // contexts and backing stores as soon as the chain is torn down instead of
 // leaving that to the garbage collector.
 class CanvasPool {
-    width;
-    height;
-    pairs = new Map();
-    // Tracked individually rather than through `pairs` so that a canvas whose
-    // sibling failed to allocate still gets released.
-    allocated = [];
-    lostContexts = new Set();
-    onContextLost;
-    disposed = false;
     constructor(width, height, onContextLost) {
+        this.pairs = new Map();
+        // Tracked individually rather than through `pairs` so that a canvas whose
+        // sibling failed to allocate still gets released.
+        this.allocated = [];
+        this.lostContexts = new Set();
+        this.disposed = false;
         this.width = width;
         this.height = height;
         this.onContextLost = onContextLost;

package/dist/cjs/effects/index.js

@@ -1,5 +1,5 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.createEffect = void 0;
-const create_effect_js_1 = require("./create-effect.js");
+var create_effect_js_1 = require("./create-effect.js");
 Object.defineProperty(exports, "createEffect", { enumerable: true, get: function () { return create_effect_js_1.createEffect; } });

package/dist/cjs/effects/use-memoized-effects.d.ts

@@ -1,5 +1,5 @@
 import type { RuntimeValueStore } from '../runtime-value-store.js';
-import type { CannotUpdateEffectReason, CannotUpdateSequenceReason } from '../SequenceManager.js';
+import type { CannotUpdateEffectReason, CannotUpdateSequenceReason, CanUpdateSequencePropsResponse } from '../SequenceManager.js';
 import { type SequencePropsSubscriptionKey } from '../SequenceManager.js';
 import { type CanUpdateSequencePropStatus, type PropStatuses } from '../use-schema.js';
 import type { VideoConfigValues } from '../video-config.js';
@@ -22,6 +22,7 @@ export declare const getEffectPropStatusesCtx: ({ propStatuses, nodePath, effect
     nodePath: SequencePropsSubscriptionKey;
     effectIndex: number;
 }) => EffectStatus;
+export declare const getPropStatusesForSequenceStatus: (status: CanUpdateSequencePropsResponse | null, videoConfigValues: VideoConfigValues | null) => Record<string, CanUpdateSequencePropStatus> | undefined;
 export declare const getPropStatusesCtx: (propStatuses: PropStatuses, nodePath: SequencePropsSubscriptionKey) => Record<string, CanUpdateSequencePropStatus> | undefined;
 export type GetPropStatusesType = typeof getPropStatusesCtx;
 export declare const useMemoizedEffects: ({ effects, overrideId, videoConfigValues, }: {

package/dist/cjs/effects/use-memoized-effects.js

@@ -34,11 +34,12 @@ var __importStar = (this && this.__importStar) || (function () {
 })();
 var _a;
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.useMemoizedEffects = exports.getPropStatusesCtx = exports.getEffectPropStatusesCtx = exports.useMemoizedEffectDefinitions = void 0;
+exports.useMemoizedEffects = exports.getPropStatusesCtx = exports.getPropStatusesForSequenceStatus = exports.getEffectPropStatusesCtx = exports.useMemoizedEffectDefinitions = void 0;
 const react_1 = __importStar(require("react"));
 const evaluate_source_expressions_js_1 = require("../evaluate-source-expressions.js");
 const get_effective_visual_mode_value_js_1 = require("../get-effective-visual-mode-value.js");
 const interpolate_keyframed_status_js_1 = require("../interpolate-keyframed-status.js");
+const registry_store_js_1 = require("../registry-store.js");
 const runtime_value_store_js_1 = require("../runtime-value-store.js");
 const sequence_activity_context_js_1 = require("../sequence-activity-context.js");
 const sequence_node_path_js_1 = require("../sequence-node-path.js");
@@ -46,6 +47,20 @@ const SequenceManager_js_1 = require("../SequenceManager.js");
 const use_current_frame_js_1 = require("../use-current-frame.js");
 const emptyDragOverrides = {};
 const useCacheCommitEffect = (_a = react_1.default.useInsertionEffect) !== null && _a !== void 0 ? _a : react_1.useLayoutEffect;
+const areEffectParamsEqual = (previous, next) => {
+    if (Object.is(previous, next)) {
+        return true;
+    }
+    if (previous === null ||
+        next === null ||
+        typeof previous !== 'object' ||
+        typeof next !== 'object' ||
+        Object.getPrototypeOf(previous) !== Object.prototype ||
+        Object.getPrototypeOf(next) !== Object.prototype) {
+        return false;
+    }
+    return (0, registry_store_js_1.areRegistryEntriesEqual)(previous, next);
+};
 const mergeOverrides = ({ descriptor, propStatusOverrides, dragOverrides, frame, }) => {
     if (!propStatusOverrides && !dragOverrides) {
         return { params: descriptor.params, effectKey: descriptor.effectKey };
@@ -105,17 +120,16 @@ const resolvePropStatusOverrides = (propStatus, frame) => {
 const useMemoizedEffectDefinitions = (effects) => {
     const activityDormant = (0, react_1.useContext)(sequence_activity_context_js_1.SequenceActivityDormantContext);
     const previousRef = (0, react_1.useRef)(null);
-    const definitions = effects.map((descriptor) => descriptor.definition);
     const previous = previousRef.current;
     const isSame = previous !== null &&
-        previous.definitions.length === definitions.length &&
-        previous.definitions.every((definition, i) => definition === definitions[i]);
+        previous.definitions.length === effects.length &&
+        previous.definitions.every((definition, i) => definition === effects[i].definition);
     const controllers = isSame
         ? previous.controllers
         : effects.map((effect) => (0, runtime_value_store_js_1.createRuntimeValueStore)(effect.params));
     const stableDefinitions = isSame
         ? previous.definitions
-        : Object.assign(definitions, {
+        : Object.assign(effects.map((descriptor) => descriptor.definition), {
             runtimeValues: controllers.map((controller) => controller.store),
         });
     useCacheCommitEffect(() => {
@@ -125,6 +139,12 @@ const useMemoizedEffectDefinitions = (effects) => {
         if (!activityDormant || controllers.length === 0) {
             return;
         }
+        if (controllers.every((controller, index) => {
+            var _a;
+            return areEffectParamsEqual(controller.store.getSnapshot(), (_a = effects[index]) === null || _a === void 0 ? void 0 : _a.params);
+        })) {
+            return;
+        }
         let cancelled = false;
         queueMicrotask(() => {
             if (cancelled) {
@@ -134,21 +154,10 @@ const useMemoizedEffectDefinitions = (effects) => {
                 var _a;
                 const snapshot = (_a = effects[index]) === null || _a === void 0 ? void 0 : _a.params;
                 const currentSnapshot = controller.store.getSnapshot();
-                if (Object.is(snapshot, currentSnapshot)) {
-                    return;
-                }
                 // Equivalent inline params should not notify inspector subscribers on
                 // every dormant render. Preserve changes to keys and leaf references.
-                if (snapshot !== null &&
-                    currentSnapshot !== null &&
-                    typeof snapshot === 'object' &&
-                    typeof currentSnapshot === 'object') {
-                    const keys = Object.keys(snapshot);
-                    if (keys.length === Object.keys(currentSnapshot).length &&
-                        keys.every((key) => Object.prototype.hasOwnProperty.call(currentSnapshot, key) &&
-                            Object.is(snapshot[key], currentSnapshot[key]))) {
-                        return;
-                    }
+                if (areEffectParamsEqual(snapshot, currentSnapshot)) {
+                    return;
                 }
                 controller.setSnapshot(snapshot);
             });
@@ -164,14 +173,15 @@ const useMemoizedEffectDefinitions = (effects) => {
         stableDefinitions.forEach((_definition, index) => {
             var _a;
             const snapshot = (_a = effects[index]) === null || _a === void 0 ? void 0 : _a.params;
-            controllers[index].setSnapshot(snapshot);
+            if (!areEffectParamsEqual(controllers[index].store.getSnapshot(), snapshot)) {
+                controllers[index].setSnapshot(snapshot);
+            }
         });
     }, [controllers, effects, stableDefinitions]);
     return stableDefinitions;
 };
 exports.useMemoizedEffectDefinitions = useMemoizedEffectDefinitions;
-const getEffectPropStatusesCtx = ({ propStatuses, nodePath, effectIndex, }) => {
-    const status = propStatuses[(0, SequenceManager_js_1.makeSequencePropsSubscriptionKey)(nodePath)];
+const getEffectStatusForSequenceStatus = ({ status, effectIndex, videoConfigValues, }) => {
     if (!status) {
         return { type: 'cannot-update-sequence', reason: 'not-found' };
     }
@@ -187,74 +197,117 @@ const getEffectPropStatusesCtx = ({ propStatuses, nodePath, effectIndex, }) => {
     }
     return {
         type: 'can-update-effect',
-        props: (0, evaluate_source_expressions_js_1.evaluateSourcePropStatuses)(effect.props, nodePath.videoConfigValues),
+        props: (0, evaluate_source_expressions_js_1.evaluateSourcePropStatuses)(effect.props, videoConfigValues),
     };
 };
+const getEffectPropStatusesCtx = ({ propStatuses, nodePath, effectIndex, }) => {
+    var _a;
+    return getEffectStatusForSequenceStatus({
+        status: (_a = propStatuses[(0, SequenceManager_js_1.makeSequencePropsSubscriptionKey)(nodePath)]) !== null && _a !== void 0 ? _a : null,
+        effectIndex,
+        videoConfigValues: nodePath.videoConfigValues,
+    });
+};
 exports.getEffectPropStatusesCtx = getEffectPropStatusesCtx;
-const getPropStatusesCtx = (propStatuses, nodePath) => {
-    const status = propStatuses[(0, SequenceManager_js_1.makeSequencePropsSubscriptionKey)(nodePath)];
+const getPropStatusesForSequenceStatus = (status, videoConfigValues) => {
     if (!status) {
         return undefined;
     }
     if (!status.canUpdate) {
         return undefined;
     }
-    return (0, evaluate_source_expressions_js_1.evaluateSourcePropStatuses)(status.props, nodePath.videoConfigValues);
+    return (0, evaluate_source_expressions_js_1.evaluateSourcePropStatuses)(status.props, videoConfigValues);
+};
+exports.getPropStatusesForSequenceStatus = getPropStatusesForSequenceStatus;
+const getPropStatusesCtx = (propStatuses, nodePath) => {
+    var _a;
+    return (0, exports.getPropStatusesForSequenceStatus)((_a = propStatuses[(0, SequenceManager_js_1.makeSequencePropsSubscriptionKey)(nodePath)]) !== null && _a !== void 0 ? _a : null, nodePath.videoConfigValues);
 };
 exports.getPropStatusesCtx = getPropStatusesCtx;
 const useMemoizedEffects = ({ effects, overrideId, videoConfigValues, }) => {
     var _a;
     const previousRef = (0, react_1.useRef)(null);
-    const { propStatuses } = (0, react_1.useContext)(SequenceManager_js_1.VisualModePropStatusesContext);
-    const frame = (0, use_current_frame_js_1.useCurrentFrame)();
     const { overrideIdToNodePathMappings } = (0, react_1.useContext)(sequence_node_path_js_1.OverrideIdsToNodePathsGettersContext);
     const previous = previousRef.current;
     const nodePath = overrideId
         ? ((_a = overrideIdToNodePathMappings[overrideId]) !== null && _a !== void 0 ? _a : null)
         : null;
     const effectDragOverrides = (0, SequenceManager_js_1.useEffectDragOverridesForNodePath)(nodePath);
-    const resolved = effects.map((descriptor, index) => {
-        var _a;
+    const sequenceStatus = (0, SequenceManager_js_1.usePropStatusForNodePath)(nodePath);
+    const effectPropStatuses = (0, react_1.useMemo)(() => Array.from({ length: effects.length }, (_, effectIndex) => {
         if (nodePath === null) {
-            return {
-                descriptor,
-                params: descriptor.params,
-                effectKey: descriptor.effectKey,
-            };
+            return null;
         }
-        const effectStatus = (0, exports.getEffectPropStatusesCtx)({
-            propStatuses,
-            nodePath: { ...nodePath, videoConfigValues },
-            effectIndex: index,
+        const status = getEffectStatusForSequenceStatus({
+            status: sequenceStatus,
+            effectIndex,
+            videoConfigValues,
         });
-        const propStatusOverrides = effectStatus.type === 'can-update-effect'
-            ? resolvePropStatusOverrides(effectStatus.props, frame)
-            : null;
+        return status.type === 'can-update-effect' ? status.props : null;
+    }), [effects.length, nodePath, sequenceStatus, videoConfigValues]);
+    const animatedEffects = (0, react_1.useMemo)(() => effectPropStatuses.map((status, index) => {
+        var _a;
+        return Object.values(status !== null && status !== void 0 ? status : {}).some((prop) => prop.status === 'keyframed') ||
+            Object.values((_a = effectDragOverrides[index]) !== null && _a !== void 0 ? _a : emptyDragOverrides).some((override) => override.type === 'keyframed');
+    }), [effectDragOverrides, effectPropStatuses]);
+    // Runtime animations arrive through props. Only source/drag keyframes need
+    // their own clock, and an animated effect must not invalidate static siblings.
+    const frame = (0, use_current_frame_js_1.useCurrentFrameWithOptionalSubscription)(animatedEffects.some(Boolean));
+    const prepared = effects.map((descriptor, index) => {
+        var _a;
+        const propStatus = effectPropStatuses[index];
         const dragOverridesMap = (_a = effectDragOverrides[index]) !== null && _a !== void 0 ? _a : emptyDragOverrides;
         const dragOverrides = Object.keys(dragOverridesMap).length === 0 ? null : dragOverridesMap;
+        const effectFrame = animatedEffects[index] ? frame : null;
+        const cached = previous === null || previous === void 0 ? void 0 : previous.prepared[index];
+        if (cached &&
+            cached.definition === descriptor.definition &&
+            cached.sourceKey === descriptor.effectKey &&
+            areEffectParamsEqual(cached.params, descriptor.params) &&
+            cached.propStatus === propStatus &&
+            cached.dragOverrides === dragOverrides &&
+            cached.frame === effectFrame) {
+            return cached;
+        }
+        const propStatusOverrides = resolvePropStatusOverrides(propStatus !== null && propStatus !== void 0 ? propStatus : undefined, frame);
         const { params, effectKey } = mergeOverrides({
             descriptor,
             propStatusOverrides,
             dragOverrides,
             frame,
         });
-        return { descriptor, params, effectKey };
+        return {
+            definition: descriptor.definition,
+            sourceKey: descriptor.effectKey,
+            // Snapshot plain params so shallow comparisons see in-place field edits.
+            params: descriptor.params !== null &&
+                typeof descriptor.params === 'object' &&
+                Object.getPrototypeOf(descriptor.params) === Object.prototype
+                ? { ...descriptor.params }
+                : descriptor.params,
+            propStatus,
+            dragOverrides,
+            frame: effectFrame,
+            value: (cached === null || cached === void 0 ? void 0 : cached.value.definition) === descriptor.definition &&
+                cached.value.effectKey === effectKey
+                ? cached.value
+                : {
+                    definition: descriptor.definition,
+                    effectKey,
+                    params,
+                    memoized: true,
+                },
+        };
     });
     const isSame = previous !== null &&
-        previous.length === resolved.length &&
-        previous.every((p, i) => p.definition === resolved[i].descriptor.definition &&
-            p.effectKey === resolved[i].effectKey);
+        previous.effects.length === prepared.length &&
+        previous.effects.every((effect, i) => effect === prepared[i].value);
     const next = isSame
-        ? previous
-        : resolved.map(({ descriptor, params, effectKey }) => ({
-            definition: descriptor.definition,
-            effectKey,
-            params,
-            memoized: true,
-        }));
+        ? previous.effects
+        : prepared.map((effect) => effect.value);
     useCacheCommitEffect(() => {
-        previousRef.current = next;
-    }, [next]);
+        previousRef.current = { prepared, effects: next };
+    }, [next, prepared]);
     return next;
 };
 exports.useMemoizedEffects = useMemoizedEffects;

package/dist/cjs/freeze.js

@@ -77,7 +77,7 @@ const Freeze = ({ frame: frameToFreeze, children, active = true, _remotionIntern
         };
     }, [sequenceContext, isActive]);
     const providedTimeline = isActive ? frozenTimelineValue : timelineContext;
-    return (jsx_runtime_1.jsx(NonPremountFreezeContext.Provider, { value: isInsideNonPremountFreeze ||
-            (Boolean(isActive) && !_remotionInternalIsPremounting), children: jsx_runtime_1.jsx(TimelineContext_js_1.TimelineContext.Provider, { value: providedTimeline, children: jsx_runtime_1.jsx(sequence_activity_context_js_1.SequenceActivityTimelineContext.Provider, { value: activityDormant ? providedTimeline : null, children: jsx_runtime_1.jsx(SequenceContext_js_1.SequenceContext.Provider, { value: newSequenceContext, children: children }) }) }) }));
+    return ((0, jsx_runtime_1.jsx)(NonPremountFreezeContext.Provider, { value: isInsideNonPremountFreeze ||
+            (Boolean(isActive) && !_remotionInternalIsPremounting), children: (0, jsx_runtime_1.jsx)(TimelineContext_js_1.TimelineContext.Provider, { value: providedTimeline, children: (0, jsx_runtime_1.jsx)(sequence_activity_context_js_1.SequenceActivityTimelineContext.Provider, { value: activityDormant ? providedTimeline : null, children: (0, jsx_runtime_1.jsx)(SequenceContext_js_1.SequenceContext.Provider, { value: newSequenceContext, children: children }) }) }) }));
 };
 exports.Freeze = Freeze;

package/dist/cjs/get-cross-origin-value.d.ts

@@ -1,5 +1,5 @@
 export declare const getCrossOriginValue: ({ crossOrigin, requestsVideoFrame, isClientSideRendering, }: {
-    crossOrigin: "" | "anonymous" | "use-credentials" | undefined;
+    crossOrigin: '' | 'anonymous' | 'use-credentials' | undefined;
     requestsVideoFrame: boolean;
     isClientSideRendering: boolean;
 }) => "" | "anonymous" | "use-credentials" | undefined;