remotion 4.0.469 → 4.0.470

package/dist/cjs/RemotionRoot.d.ts

@@ -5,6 +5,7 @@ export declare const RemotionRootContexts: React.FC<{
     readonly numberOfAudioTags: number;
     readonly logLevel: LogLevel;
     readonly audioLatencyHint: AudioContextLatencyCategory;
+    readonly previewSampleRate: number | null;
     readonly videoEnabled: boolean;
     readonly audioEnabled: boolean;
     readonly frameState: Record<string, number> | null;

package/dist/cjs/RemotionRoot.js

@@ -13,7 +13,7 @@ const SequenceManager_js_1 = require("./SequenceManager.js");
 const TimelineContext_js_1 = require("./TimelineContext.js");
 const use_media_enabled_js_1 = require("./use-media-enabled.js");
 const duration_state_js_1 = require("./video/duration-state.js");
-const RemotionRootContexts = ({ children, numberOfAudioTags, logLevel, audioLatencyHint, videoEnabled, audioEnabled, frameState, }) => {
+const RemotionRootContexts = ({ children, numberOfAudioTags, logLevel, audioLatencyHint, previewSampleRate, videoEnabled, audioEnabled, frameState, }) => {
     const nonceContext = (0, react_1.useMemo)(() => {
         let counter = 0;
         return {
@@ -23,6 +23,6 @@ const RemotionRootContexts = ({ children, numberOfAudioTags, logLevel, audioLate
     const logging = (0, react_1.useMemo)(() => {
         return { logLevel, mountTime: Date.now() };
     }, [logLevel]);
-    return ((0, jsx_runtime_1.jsx)(log_level_context_js_1.LogLevelContext.Provider, { value: logging, children: (0, jsx_runtime_1.jsx)(nonce_js_1.NonceContext.Provider, { value: nonceContext, children: (0, jsx_runtime_1.jsx)(TimelineContext_js_1.TimelineContextProvider, { frameState: frameState, children: (0, jsx_runtime_1.jsx)(use_media_enabled_js_1.MediaEnabledProvider, { videoEnabled: videoEnabled, audioEnabled: audioEnabled, children: (0, jsx_runtime_1.jsx)(EditorProps_js_1.EditorPropsProvider, { children: (0, jsx_runtime_1.jsx)(prefetch_state_js_1.PrefetchProvider, { children: (0, jsx_runtime_1.jsx)(SequenceManager_js_1.SequenceManagerProvider, { children: (0, jsx_runtime_1.jsx)(duration_state_js_1.DurationsContextProvider, { children: (0, jsx_runtime_1.jsx)(buffering_js_1.BufferingProvider, { children: (0, jsx_runtime_1.jsx)(shared_audio_tags_js_1.SharedAudioContextProvider, { audioLatencyHint: audioLatencyHint, audioEnabled: audioEnabled, children: (0, jsx_runtime_1.jsx)(shared_audio_tags_js_1.SharedAudioTagsContextProvider, { numberOfAudioTags: numberOfAudioTags, children: children }) }) }) }) }) }) }) }) }) }) }));
+    return ((0, jsx_runtime_1.jsx)(log_level_context_js_1.LogLevelContext.Provider, { value: logging, children: (0, jsx_runtime_1.jsx)(nonce_js_1.NonceContext.Provider, { value: nonceContext, children: (0, jsx_runtime_1.jsx)(TimelineContext_js_1.TimelineContextProvider, { frameState: frameState, children: (0, jsx_runtime_1.jsx)(use_media_enabled_js_1.MediaEnabledProvider, { videoEnabled: videoEnabled, audioEnabled: audioEnabled, children: (0, jsx_runtime_1.jsx)(EditorProps_js_1.EditorPropsProvider, { children: (0, jsx_runtime_1.jsx)(prefetch_state_js_1.PrefetchProvider, { children: (0, jsx_runtime_1.jsx)(SequenceManager_js_1.SequenceManagerProvider, { children: (0, jsx_runtime_1.jsx)(duration_state_js_1.DurationsContextProvider, { children: (0, jsx_runtime_1.jsx)(buffering_js_1.BufferingProvider, { children: (0, jsx_runtime_1.jsx)(shared_audio_tags_js_1.SharedAudioContextProvider, { audioLatencyHint: audioLatencyHint, audioEnabled: audioEnabled, previewSampleRate: previewSampleRate, children: (0, jsx_runtime_1.jsx)(shared_audio_tags_js_1.SharedAudioTagsContextProvider, { numberOfAudioTags: numberOfAudioTags, children: children }) }) }) }) }) }) }) }) }) }) }));
 };
 exports.RemotionRootContexts = RemotionRootContexts;

package/dist/cjs/audio/shared-audio-tags.d.ts

@@ -1,5 +1,4 @@
-import { type AudioHTMLAttributes } from 'react';
-import React from 'react';
+import React, { type AudioHTMLAttributes } from 'react';
 import type { SharedElementSourceNode } from './shared-element-source-node.js';
 import type { RemotionAudioContextState } from './use-audio-context.js';
 /**
@@ -85,6 +84,7 @@ export declare const SharedAudioContextProvider: React.FC<{
     readonly children: React.ReactNode;
     readonly audioLatencyHint: AudioContextLatencyCategory;
     readonly audioEnabled: boolean;
+    readonly previewSampleRate: number | null;
 }>;
 export declare const SharedAudioTagsContextProvider: React.FC<{
     readonly numberOfAudioTags: number;

package/dist/cjs/audio/shared-audio-tags.js

@@ -88,12 +88,20 @@ const shouldSaveForLater = (state) => {
     }
     throw new Error(`Unexpected audio context state: ${state}`);
 };
-const SharedAudioContextProvider = ({ children, audioLatencyHint, audioEnabled }) => {
+const SharedAudioContextProvider = ({ children, audioLatencyHint, audioEnabled, previewSampleRate }) => {
     const logLevel = (0, log_level_context_js_1.useLogLevel)();
+    const sampleRate = previewSampleRate !== null && previewSampleRate !== void 0 ? previewSampleRate : 48000;
+    (0, react_1.useEffect)(() => {
+        if (typeof window === 'undefined') {
+            return;
+        }
+        window.remotion_sampleRate = sampleRate;
+    }, [sampleRate]);
     const ctxAndGain = (0, use_audio_context_js_1.useSingletonAudioContext)({
         logLevel,
         latencyHint: audioLatencyHint,
         audioEnabled,
+        sampleRate,
     });
     const audioContextIsPlayingEventually = (0, react_1.useRef)(false);
     const isResuming = (0, react_1.useRef)(null);

package/dist/cjs/audio/use-audio-context.d.ts

@@ -1,9 +1,10 @@
 import type { LogLevel } from '../log';
 export type RemotionAudioContextState = AudioContextState | 'running-to-suspended' | 'suspended-to-running';
-export declare const useSingletonAudioContext: ({ logLevel, latencyHint, audioEnabled, }: {
+export declare const useSingletonAudioContext: ({ logLevel, latencyHint, audioEnabled, sampleRate, }: {
     logLevel: LogLevel;
     latencyHint: AudioContextLatencyCategory;
     audioEnabled: boolean;
+    sampleRate: number;
 }) => {
     audioContext: AudioContext;
     gainNode: GainNode;

package/dist/cjs/audio/use-audio-context.js

@@ -15,8 +15,12 @@ const warnOnce = (logLevel) => {
         log_1.Log.warn({ logLevel, tag: null }, 'AudioContext is not supported in this browser');
     }
 };
-const useSingletonAudioContext = ({ logLevel, latencyHint, audioEnabled, }) => {
+const useSingletonAudioContext = ({ logLevel, latencyHint, audioEnabled, sampleRate, }) => {
     const env = (0, use_remotion_environment_1.useRemotionEnvironment)();
+    const initialSampleRate = (0, react_1.useRef)(sampleRate);
+    if (sampleRate !== initialSampleRate.current) {
+        throw new Error(`Changing the AudioContext sample rate dynamically is not supported. The sample rate was initialized with ${initialSampleRate.current} Hz, but ${sampleRate} Hz was passed later.`);
+    }
     const context = (0, react_1.useMemo)(() => {
         if (env.isRendering) {
             return null;
@@ -33,7 +37,7 @@ const useSingletonAudioContext = ({ logLevel, latencyHint, audioEnabled, }) => {
             // By default, this can end up being 44100Hz.
             // Playing a 48000Hz file in a 44100Hz context, such as https://remotion.media/video.mp4 in a @remotion/media tag
             // we observe some issues that seem to go away when we set the sample rate to 48000 with Sony LinkBuds Bluetooth headphones.
-            sampleRate: 48000,
+            sampleRate,
         });
         const gainNode = audioContext.createGain();
         gainNode.connect(audioContext.destination);
@@ -79,7 +83,7 @@ const useSingletonAudioContext = ({ logLevel, latencyHint, audioEnabled, }) => {
             resume,
             suspend,
         };
-    }, [logLevel, latencyHint, env.isRendering, audioEnabled]);
+    }, [logLevel, latencyHint, env.isRendering, audioEnabled, sampleRate]);
     return context;
 };
 exports.useSingletonAudioContext = useSingletonAudioContext;

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

@@ -11,8 +11,8 @@ export type EffectApplyParams<P, S> = {
     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.
+     * canvas sources match clip-space UVs. Set by `runEffectChain` — `false` for
+     * `ImageBitmap` bridges from WebGL, which are already oriented for upload.
      */
     readonly flipSourceY: boolean;
 };

package/dist/cjs/effects/run-effect-chain.d.ts

@@ -2,7 +2,7 @@ import { CanvasPool } from './canvas-pool.js';
 import type { EffectDefinition, EffectDefinitionAndStack } from './effect-types.js';
 export type EffectChainState = {
     pool: CanvasPool;
-    setupCache: WeakMap<EffectDefinition<unknown, unknown>, unknown>;
+    setupCache: WeakMap<EffectDefinition<unknown, unknown>, WeakMap<HTMLCanvasElement, unknown>>;
     cleanupRegistry: Array<{
         definition: EffectDefinition<unknown, unknown>;
         state: unknown;

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

@@ -20,11 +20,16 @@ const cleanupEffectChainState = (state) => {
 exports.cleanupEffectChainState = cleanupEffectChainState;
 const ensureSetup = (state, def, target) => {
     const widened = def;
-    if (state.setupCache.has(widened)) {
-        return state.setupCache.get(widened);
+    let cacheForDefinition = state.setupCache.get(widened);
+    if (!cacheForDefinition) {
+        cacheForDefinition = new WeakMap();
+        state.setupCache.set(widened, cacheForDefinition);
+    }
+    if (cacheForDefinition.has(target)) {
+        return cacheForDefinition.get(target);
     }
     const setupState = def.setup(target);
-    state.setupCache.set(widened, setupState);
+    cacheForDefinition.set(target, setupState);
     state.cleanupRegistry.push({ definition: widened, state: setupState });
     return setupState;
 };
@@ -68,7 +73,9 @@ const runEffectChain = async ({ state, source, effects, output, width, height, }
     if (isCancelled()) {
         return false;
     }
-    // Raw component sources are 2D frame canvases (Gif, WrappedCanvas.canvas, …).
+    // Canvas sources are DOM-oriented. Flip them when uploading into WebGL so
+    // texture coordinates match clip-space output. `ImageBitmap` bridges below
+    // opt out because they are already oriented for upload.
     let flipWebGLSourceY = true;
     for (let runIndex = 0; runIndex < runs.length; runIndex++) {
         const run = runs[runIndex];
@@ -88,7 +95,10 @@ const runEffectChain = async ({ state, source, effects, output, width, height, }
                 flipSourceY: run.backend === 'webgl2' ? flipWebGLSourceY : false,
             });
             if (run.backend === 'webgl2') {
-                flipWebGLSourceY = false;
+                // Same-backend ping-pong passes feed the previous WebGL canvas back
+                // through `texImage2D()`. That source is still a DOM canvas, so the
+                // next upload also needs to be flipped.
+                flipWebGLSourceY = true;
                 state.pool.assertContextNotLost(dst);
             }
             currentImage = dst;

package/dist/cjs/index.d.ts

@@ -55,7 +55,8 @@ declare global {
         remotion_envVariables: string;
         remotion_isMainTab: boolean;
         remotion_mediaCacheSizeInBytes: number | null;
-        remotion_sampleRate: number;
+        remotion_sampleRate: number | null;
+        remotion_previewSampleRate: number | null;
         remotion_initialMemoryAvailable: number | null;
         remotion_collectAssets: () => TRenderAsset[];
         remotion_isPlayer: boolean;
@@ -92,20 +93,20 @@ export type BundleEvaluationState = {
 export type BundleState = BundleIndexState | BundleEvaluationState | BundleCompositionState;
 export * from './AbsoluteFill.js';
 export * from './animated-image/index.js';
-export type { EffectDefinitionAndStack, EffectDescriptor, EffectsProp, EffectDefinition, EffectFactory, } from './effects/index.js';
+export type { EffectDefinition, EffectDefinitionAndStack, EffectDescriptor, EffectFactory, EffectsProp, } from './effects/index.js';
 /**
  * @description Renders a solid-color rectangle on a `<canvas>`.
  * @see [Documentation](https://www.remotion.dev/docs/solid)
  */
-export { Solid } from './effects/Solid.js';
-export type { SolidProps } from './effects/Solid.js';
-export { HtmlInCanvas, HTML_IN_CANVAS_UNSUPPORTED_MESSAGE, isHtmlInCanvasSupported, type HtmlInCanvasOnInit, type HtmlInCanvasOnInitCleanup, type HtmlInCanvasOnPaint, } from './HtmlInCanvas.js';
-export type { HtmlInCanvasOnPaintParams, HtmlInCanvasProps, } from './HtmlInCanvas.js';
 export type { AnyZodObject } from './any-zod-type.js';
 export { Artifact } from './Artifact.js';
 export { Audio, Html5Audio, RemotionAudioProps } from './audio/index.js';
 export type { LoopVolumeCurveBehavior } from './audio/use-audio-frame.js';
 export { cancelRender } from './cancel-render.js';
+export { Solid } from './effects/Solid.js';
+export type { SolidProps } from './effects/Solid.js';
+export { HTML_IN_CANVAS_UNSUPPORTED_MESSAGE, HtmlInCanvas, isHtmlInCanvasSupported, type HtmlInCanvasOnInit, type HtmlInCanvasOnInitCleanup, type HtmlInCanvasOnPaint, } from './HtmlInCanvas.js';
+export type { HtmlInCanvasOnPaintParams, HtmlInCanvasProps, } from './HtmlInCanvas.js';
 /**
  * @description Renders a static image to a `<canvas>` and applies Remotion effects.
  * @see [Documentation](https://www.remotion.dev/docs/canvasimage)
@@ -121,16 +122,16 @@ export { DownloadBehavior } from './download-behavior.js';
 export * from './easing.js';
 export * from './Folder.js';
 export * from './freeze.js';
-export type { NonceHistory } from './nonce.js';
 export { getRemotionEnvironment } from './get-remotion-environment.js';
 export { getStaticFiles, StaticFile } from './get-static-files.js';
 export * from './IFrame.js';
 export { Img, ImgProps } from './Img.js';
 export * from './internals.js';
-export { interpolateColors } from './interpolate-colors.js';
+export { interpolateColors, type InterpolateColorsOptions, } from './interpolate-colors.js';
 export { LogLevel } from './log.js';
 export { Loop } from './loop/index.js';
-export { assertValidInterpolateEasingOption, EasingFunction, ExtrapolateType, interpolate, InterpolateOptions, random, RandomSeed, } from './no-react';
+export { assertValidInterpolateEasingOption, assertValidInterpolatePosterizeOption, EasingFunction, ExtrapolateType, interpolate, InterpolateOptions, random, RandomSeed, } from './no-react';
+export type { NonceHistory } from './nonce.js';
 export { prefetch, PrefetchOnProgress } from './prefetch.js';
 export { registerRoot } from './register-root.js';
 export type { PixelFormat, VideoImageFormat } from './render-types.js';

package/dist/cjs/index.js

@@ -14,7 +14,7 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
     for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Config = exports.Experimental = exports.watchStaticFile = exports.MediaPlaybackError = exports.Video = exports.OffthreadVideo = exports.Html5Video = exports.useRemotionEnvironment = exports.useDelayRender = exports.useCurrentScale = exports.useCurrentFrame = exports.useBufferState = exports.staticFile = exports.Series = exports.Sequence = exports.registerRoot = exports.prefetch = exports.random = exports.interpolate = exports.assertValidInterpolateEasingOption = exports.Loop = exports.interpolateColors = exports.Img = exports.getStaticFiles = exports.getRemotionEnvironment = exports.delayRender = exports.continueRender = exports.getInputProps = exports.Composition = exports.CanvasImage = exports.cancelRender = exports.Html5Audio = exports.Audio = exports.Artifact = exports.isHtmlInCanvasSupported = exports.HTML_IN_CANVAS_UNSUPPORTED_MESSAGE = exports.HtmlInCanvas = exports.Solid = void 0;
+exports.Config = exports.Experimental = exports.watchStaticFile = exports.MediaPlaybackError = exports.Video = exports.OffthreadVideo = exports.Html5Video = exports.useRemotionEnvironment = exports.useDelayRender = exports.useCurrentScale = exports.useCurrentFrame = exports.useBufferState = exports.staticFile = exports.Series = exports.Sequence = exports.registerRoot = exports.prefetch = exports.random = exports.interpolate = exports.assertValidInterpolatePosterizeOption = exports.assertValidInterpolateEasingOption = exports.Loop = exports.interpolateColors = exports.Img = exports.getStaticFiles = exports.getRemotionEnvironment = exports.delayRender = exports.continueRender = exports.getInputProps = exports.Composition = exports.CanvasImage = exports.isHtmlInCanvasSupported = exports.HtmlInCanvas = exports.HTML_IN_CANVAS_UNSUPPORTED_MESSAGE = exports.Solid = exports.cancelRender = exports.Html5Audio = exports.Audio = exports.Artifact = void 0;
 require("./_check-rsc.js");
 require("./asset-types.js");
 const Clipper_js_1 = require("./Clipper.js");
@@ -27,16 +27,6 @@ const Sequence_js_1 = require("./Sequence.js");
 (0, multiple_versions_warning_js_1.checkMultipleRemotionVersions)();
 __exportStar(require("./AbsoluteFill.js"), exports);
 __exportStar(require("./animated-image/index.js"), exports);
-/**
- * @description Renders a solid-color rectangle on a `<canvas>`.
- * @see [Documentation](https://www.remotion.dev/docs/solid)
- */
-var Solid_js_1 = require("./effects/Solid.js");
-Object.defineProperty(exports, "Solid", { enumerable: true, get: function () { return Solid_js_1.Solid; } });
-var HtmlInCanvas_js_1 = require("./HtmlInCanvas.js");
-Object.defineProperty(exports, "HtmlInCanvas", { enumerable: true, get: function () { return HtmlInCanvas_js_1.HtmlInCanvas; } });
-Object.defineProperty(exports, "HTML_IN_CANVAS_UNSUPPORTED_MESSAGE", { enumerable: true, get: function () { return HtmlInCanvas_js_1.HTML_IN_CANVAS_UNSUPPORTED_MESSAGE; } });
-Object.defineProperty(exports, "isHtmlInCanvasSupported", { enumerable: true, get: function () { return HtmlInCanvas_js_1.isHtmlInCanvasSupported; } });
 var Artifact_js_1 = require("./Artifact.js");
 Object.defineProperty(exports, "Artifact", { enumerable: true, get: function () { return Artifact_js_1.Artifact; } });
 var index_js_1 = require("./audio/index.js");
@@ -44,6 +34,12 @@ Object.defineProperty(exports, "Audio", { enumerable: true, get: function () { r
 Object.defineProperty(exports, "Html5Audio", { enumerable: true, get: function () { return index_js_1.Html5Audio; } });
 var cancel_render_js_1 = require("./cancel-render.js");
 Object.defineProperty(exports, "cancelRender", { enumerable: true, get: function () { return cancel_render_js_1.cancelRender; } });
+var Solid_js_1 = require("./effects/Solid.js");
+Object.defineProperty(exports, "Solid", { enumerable: true, get: function () { return Solid_js_1.Solid; } });
+var HtmlInCanvas_js_1 = require("./HtmlInCanvas.js");
+Object.defineProperty(exports, "HTML_IN_CANVAS_UNSUPPORTED_MESSAGE", { enumerable: true, get: function () { return HtmlInCanvas_js_1.HTML_IN_CANVAS_UNSUPPORTED_MESSAGE; } });
+Object.defineProperty(exports, "HtmlInCanvas", { enumerable: true, get: function () { return HtmlInCanvas_js_1.HtmlInCanvas; } });
+Object.defineProperty(exports, "isHtmlInCanvasSupported", { enumerable: true, get: function () { return HtmlInCanvas_js_1.isHtmlInCanvasSupported; } });
 /**
  * @description Renders a static image to a `<canvas>` and applies Remotion effects.
  * @see [Documentation](https://www.remotion.dev/docs/canvasimage)
@@ -74,6 +70,7 @@ var index_js_3 = require("./loop/index.js");
 Object.defineProperty(exports, "Loop", { enumerable: true, get: function () { return index_js_3.Loop; } });
 var no_react_1 = require("./no-react");
 Object.defineProperty(exports, "assertValidInterpolateEasingOption", { enumerable: true, get: function () { return no_react_1.assertValidInterpolateEasingOption; } });
+Object.defineProperty(exports, "assertValidInterpolatePosterizeOption", { enumerable: true, get: function () { return no_react_1.assertValidInterpolatePosterizeOption; } });
 Object.defineProperty(exports, "interpolate", { enumerable: true, get: function () { return no_react_1.interpolate; } });
 Object.defineProperty(exports, "random", { enumerable: true, get: function () { return no_react_1.random; } });
 var prefetch_js_1 = require("./prefetch.js");

package/dist/cjs/internals.d.ts

@@ -18,7 +18,7 @@ import { type CanUpdateEffectPropsResponse, type CanUpdateEffectPropsResponseFal
 import * as TimelinePosition from './timeline-position-state.js';
 import { type PlaybackRateContextValue, type SetTimelineContextValue, type TimelineContextValue } from './TimelineContext.js';
 import { truthy } from './truthy.js';
-import type { CanUpdateSequencePropStatusFalse, CanUpdateSequencePropStatusTrue, GetCodeValues, GetDragOverrides, GetEffectCodeValues, GetEffectDragOverrides } from './use-schema.js';
+import type { CanUpdateSequencePropStatusFalse, CanUpdateSequencePropStatusKeyframed, CanUpdateSequencePropStatusTrue, GetCodeValues, GetDragOverrides, GetEffectCodeValues, GetEffectDragOverrides } from './use-schema.js';
 import { type CanUpdateSequencePropStatus, type CodeValues, type DragOverrides, type EffectDragOverrides } from './use-schema.js';
 import type { MediaVolumeContextValue, SetMediaVolumeContextValue } from './volume-position-state.js';
 import type { WatchRemotionStaticFilesPayload } from './watch-static-file.js';
@@ -253,6 +253,7 @@ export declare const Internals: {
         readonly numberOfAudioTags: number;
         readonly logLevel: import("./log.js").LogLevel;
         readonly audioLatencyHint: AudioContextLatencyCategory;
+        readonly previewSampleRate: number | null;
         readonly videoEnabled: boolean;
         readonly audioEnabled: boolean;
         readonly frameState: Record<string, number> | null;
@@ -321,6 +322,7 @@ export declare const Internals: {
         readonly children: React.ReactNode;
         readonly audioLatencyHint: AudioContextLatencyCategory;
         readonly audioEnabled: boolean;
+        readonly previewSampleRate: number | null;
     }>;
     readonly SharedAudioTagsContext: import("react").Context<{
         registerAudio: (options: {
@@ -623,6 +625,8 @@ export declare const Internals: {
     readonly useEffectChainState: () => {
         get: (width: number, height: number) => import("./effects/run-effect-chain.js").EffectChainState | null;
     };
+    readonly createEffectChainState: (width: number, height: number) => import("./effects/run-effect-chain.js").EffectChainState;
+    readonly cleanupEffectChainState: (state: import("./effects/run-effect-chain.js").EffectChainState) => void;
     readonly runEffectChain: ({ state, source, effects, output, width, height, }: import("./effects/run-effect-chain.js").RunEffectChainOptions) => Promise<boolean>;
     readonly useMemoizedEffects: ({ effects, overrideId, }: {
         effects: readonly import("./index.js").EffectDescriptor<unknown>[];
@@ -632,15 +636,20 @@ export declare const Internals: {
     readonly createEffect: <P, S>(definition: import("./index.js").EffectDefinition<P, S>) => import("./index.js").EffectFactory<P>;
     readonly createWebGLContextError: (effectName: string) => Error;
     readonly createWebGL2ContextError: (effectName: string) => Error;
-    readonly computeEffectiveSchemaValuesDotNotation: ({ schema, currentValue, overrideValues, propStatus, }: {
+    readonly computeEffectiveSchemaValuesDotNotation: ({ schema, currentValue, overrideValues, propStatus, frame, }: {
         schema: SequenceSchema;
         currentValue: Record<string, unknown>;
         overrideValues: Record<string, unknown>;
         propStatus: Record<string, CanUpdateSequencePropStatus> | undefined;
+        frame: number | null;
     }) => {
         merged: Record<string, unknown>;
         propsToDelete: Set<string>;
     };
+    readonly interpolateKeyframedStatus: ({ frame, status, }: {
+        frame: number;
+        status: CanUpdateSequencePropStatusKeyframed;
+    }) => number | string | null;
     readonly OverrideIdsToNodePathsGettersContext: import("react").Context<OverrideToNodePathGetters>;
     readonly OverrideIdsToNodePathsSettersContext: import("react").Context<OverrideToNodeSetters>;
     readonly findPropsToDelete: ({ schema, key, value, }: {
@@ -666,4 +675,4 @@ export declare const Internals: {
     };
     readonly hiddenField: SequenceFieldSchema;
 };
-export type { CannotUpdateSequenceReason, CanUpdateEffectPropsResponse, CanUpdateEffectPropsResponseFalse, CanUpdateEffectPropsResponseTrue, CanUpdateSequencePropsResponse, CanUpdateSequencePropsResponseFalse, CanUpdateSequencePropsResponseTrue, CanUpdateSequencePropStatus, CanUpdateSequencePropStatusFalse, CanUpdateSequencePropStatusTrue, CodeValues, CompositionManagerContext, CompProps, DragOverrides, EffectDragOverrides, GetCodeValues, GetDragOverrides, GetEffectCodeValues, GetEffectDragOverrides, LoggingContextValue, MediaVolumeContextValue, NonceHistory, OverrideIdsToNodePathsGettersContext, OverrideIdsToNodePathsSettersContext, OverrideIdToNodePaths, OverrideToNodePathGetters, OverrideToNodeSetters, PlaybackRateContextValue, RemotionEnvironment, ResolvedStackLocation, ScheduleAudioNodeOptions, ScheduleAudioNodeResult, SequenceFieldSchema, SequenceNodePath, SequencePropsSubscriptionKey, SequenceSchema, SerializedJSONWithCustomFields, SetMediaVolumeContextValue, SetTimelineContextValue, TCompMetadata, TComposition, TimelineContextValue, TRenderAsset, TSequence, VisibleFieldSchema, WatchRemotionStaticFilesPayload, RemotionAudioContextState, };
+export type { CannotUpdateSequenceReason, CanUpdateEffectPropsResponse, CanUpdateEffectPropsResponseFalse, CanUpdateEffectPropsResponseTrue, CanUpdateSequencePropsResponse, CanUpdateSequencePropsResponseFalse, CanUpdateSequencePropsResponseTrue, CanUpdateSequencePropStatus, CanUpdateSequencePropStatusFalse, CanUpdateSequencePropStatusKeyframed, CanUpdateSequencePropStatusTrue, CodeValues, CompositionManagerContext, CompProps, DragOverrides, EffectDragOverrides, GetCodeValues, GetDragOverrides, GetEffectCodeValues, GetEffectDragOverrides, LoggingContextValue, MediaVolumeContextValue, NonceHistory, OverrideIdsToNodePathsGettersContext, OverrideIdsToNodePathsSettersContext, OverrideIdToNodePaths, OverrideToNodePathGetters, OverrideToNodeSetters, PlaybackRateContextValue, RemotionAudioContextState, RemotionEnvironment, ResolvedStackLocation, ScheduleAudioNodeOptions, ScheduleAudioNodeResult, SequenceFieldSchema, SequenceNodePath, SequencePropsSubscriptionKey, SequenceSchema, SerializedJSONWithCustomFields, SetMediaVolumeContextValue, SetTimelineContextValue, TCompMetadata, TComposition, TimelineContextValue, TRenderAsset, TSequence, VisibleFieldSchema, WatchRemotionStaticFilesPayload, };

package/dist/cjs/internals.js

@@ -62,6 +62,7 @@ const get_effective_visual_mode_value_js_1 = require("./get-effective-visual-mod
 const get_preview_dom_element_js_1 = require("./get-preview-dom-element.js");
 const get_remotion_environment_js_1 = require("./get-remotion-environment.js");
 const input_props_override_js_1 = require("./input-props-override.js");
+const interpolate_keyframed_status_js_1 = require("./interpolate-keyframed-status.js");
 const is_player_js_1 = require("./is-player.js");
 const log_level_context_js_1 = require("./log-level-context.js");
 const log_js_1 = require("./log.js");
@@ -230,6 +231,8 @@ exports.Internals = {
     getEffectiveVisualModeValue: get_effective_visual_mode_value_js_1.getEffectiveVisualModeValue,
     CompositionRenderErrorContext: composition_render_error_context_js_1.CompositionRenderErrorContext,
     useEffectChainState: use_effect_chain_state_js_1.useEffectChainState,
+    createEffectChainState: run_effect_chain_js_1.createEffectChainState,
+    cleanupEffectChainState: run_effect_chain_js_1.cleanupEffectChainState,
     runEffectChain: run_effect_chain_js_1.runEffectChain,
     useMemoizedEffects: use_memoized_effects_js_1.useMemoizedEffects,
     useMemoizedEffectDefinitions: use_memoized_effects_js_1.useMemoizedEffectDefinitions,
@@ -237,6 +240,7 @@ exports.Internals = {
     createWebGLContextError: webgl2_context_error_js_1.createWebGLContextError,
     createWebGL2ContextError: webgl2_context_error_js_1.createWebGL2ContextError,
     computeEffectiveSchemaValuesDotNotation: use_schema_js_1.computeEffectiveSchemaValuesDotNotation,
+    interpolateKeyframedStatus: interpolate_keyframed_status_js_1.interpolateKeyframedStatus,
     OverrideIdsToNodePathsGettersContext: sequence_node_path_js_1.OverrideIdsToNodePathsGettersContext,
     OverrideIdsToNodePathsSettersContext: sequence_node_path_js_1.OverrideIdsToNodePathsSettersContext,
     findPropsToDelete: find_props_to_delete_js_1.findPropsToDelete,

package/dist/cjs/interpolate-colors.d.ts

@@ -2,8 +2,11 @@
  * Copied from:
  * https://github.com/software-mansion/react-native-reanimated/blob/master/src/reanimated2/Colors.ts
  */
+export type InterpolateColorsOptions = {
+    posterize: number | undefined;
+};
 export declare const colorNames: {
     [key: string]: number;
 };
 export declare function processColor(color: string): number;
-export declare const interpolateColors: (input: number, inputRange: readonly number[], outputRange: readonly string[]) => string;
+export declare const interpolateColors: (input: number, inputRange: readonly number[], outputRange: readonly string[], options?: InterpolateColorsOptions) => string;

package/dist/cjs/interpolate-colors.js

@@ -536,11 +536,12 @@ function processColor(color) {
     const normalizedColor = normalizeColor(color);
     return ((normalizedColor << 24) | (normalizedColor >>> 8)) >>> 0; // argb
 }
-const interpolateColorsRGB = (value, inputRange, colors) => {
+const interpolateColorsRGB = (value, inputRange, colors, options) => {
     const [r, g, b, a] = [red, green, blue, opacity].map((f) => {
         const unrounded = (0, interpolate_js_1.interpolate)(value, inputRange, colors.map((c) => f(c)), {
             extrapolateLeft: 'clamp',
             extrapolateRight: 'clamp',
+            posterize: options === null || options === void 0 ? void 0 : options.posterize,
         });
         if (f === opacity) {
             return Number(unrounded.toFixed(3));
@@ -553,7 +554,7 @@ const interpolateColorsRGB = (value, inputRange, colors) => {
  * @description Allows you to map a range of values to colors using a concise syntax.
  * @see [Documentation](https://remotion.dev/docs/interpolate-colors)
  */
-const interpolateColors = (input, inputRange, outputRange) => {
+const interpolateColors = (input, inputRange, outputRange, options) => {
     if (typeof input === 'undefined') {
         throw new TypeError('input can not be undefined');
     }
@@ -571,6 +572,6 @@ const interpolateColors = (input, inputRange, outputRange) => {
             ' values provided) must have the same length');
     }
     const processedOutputRange = outputRange.map((c) => processColor(c));
-    return interpolateColorsRGB(input, inputRange, processedOutputRange);
+    return interpolateColorsRGB(input, inputRange, processedOutputRange, options);
 };
 exports.interpolateColors = interpolateColors;

package/dist/cjs/interpolate-keyframed-status.d.ts

@@ -0,0 +1,5 @@
+import type { CanUpdateSequencePropStatusKeyframed } from './use-schema.js';
+export declare const interpolateKeyframedStatus: ({ frame, status, }: {
+    frame: number;
+    status: CanUpdateSequencePropStatusKeyframed;
+}) => number | string | null;

package/dist/cjs/interpolate-keyframed-status.js

@@ -0,0 +1,58 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.interpolateKeyframedStatus = void 0;
+const bezier_js_1 = require("./bezier.js");
+const easing_js_1 = require("./easing.js");
+const interpolate_colors_js_1 = require("./interpolate-colors.js");
+const interpolate_js_1 = require("./interpolate.js");
+const easingToFn = (e) => {
+    if (e === 'linear') {
+        return easing_js_1.Easing.linear;
+    }
+    return (0, bezier_js_1.bezier)(e[0], e[1], e[2], e[3]);
+};
+const interpolateKeyframedStatus = ({ frame, status, }) => {
+    const { keyframes, easing, clamping, interpolationFunction } = status;
+    if (keyframes.length === 0) {
+        return null;
+    }
+    const inputRange = keyframes.map((k) => k.frame);
+    const outputs = keyframes.map((k) => k.value);
+    if (interpolationFunction === 'interpolateColors') {
+        if (!outputs.every((v) => typeof v === 'string')) {
+            return null;
+        }
+        if (keyframes.length === 1) {
+            return outputs[0];
+        }
+        try {
+            return (0, interpolate_colors_js_1.interpolateColors)(frame, inputRange, outputs, {
+                posterize: status.posterize,
+            });
+        }
+        catch (_a) {
+            return null;
+        }
+    }
+    if (interpolationFunction !== 'interpolate') {
+        return null;
+    }
+    if (!outputs.every((v) => typeof v === 'number')) {
+        return null;
+    }
+    if (keyframes.length === 1) {
+        return outputs[0];
+    }
+    try {
+        return (0, interpolate_js_1.interpolate)(frame, inputRange, outputs, {
+            easing: easing.map(easingToFn),
+            extrapolateLeft: clamping.left,
+            extrapolateRight: clamping.right,
+            posterize: status.posterize,
+        });
+    }
+    catch (_b) {
+        return null;
+    }
+};
+exports.interpolateKeyframedStatus = interpolateKeyframedStatus;

package/dist/cjs/interpolate.d.ts

@@ -8,6 +8,8 @@ export type InterpolateOptions = Partial<{
     easing: EasingFunction | readonly EasingFunction[];
     extrapolateLeft: ExtrapolateType;
     extrapolateRight: ExtrapolateType;
+    posterize: number;
 }>;
 export declare function assertValidInterpolateEasingOption(easing: EasingFunction | readonly EasingFunction[] | undefined, inputRangeLength: number): void;
+export declare function assertValidInterpolatePosterizeOption(posterize: number | undefined): void;
 export declare function interpolate(input: number, inputRange: readonly number[], outputRange: readonly number[], options?: InterpolateOptions): number;

package/dist/cjs/interpolate.js

@@ -2,6 +2,7 @@
 // Taken from https://github.com/facebook/react-native/blob/0b9ea60b4fee8cacc36e7160e31b91fc114dbc0d/Libraries/Animated/src/nodes/AnimatedInterpolation.js
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.assertValidInterpolateEasingOption = assertValidInterpolateEasingOption;
+exports.assertValidInterpolatePosterizeOption = assertValidInterpolatePosterizeOption;
 exports.interpolate = interpolate;
 function interpolateFunction(input, inputRange, outputRange, options) {
     const { extrapolateLeft, extrapolateRight, easing } = options;
@@ -95,6 +96,16 @@ function assertValidInterpolateEasingOption(easing, inputRangeLength) {
         }
     }
 }
+function assertValidInterpolatePosterizeOption(posterize) {
+    if (posterize === undefined) {
+        return;
+    }
+    if (typeof posterize !== 'number' ||
+        !Number.isFinite(posterize) ||
+        posterize <= 0) {
+        throw new Error(`posterize must be a positive finite number, but got ${posterize}`);
+    }
+}
 /*
  * @description Allows you to map a range of values to another using a concise syntax.
  * @see [Documentation](https://remotion.dev/docs/interpolate)
@@ -120,6 +131,7 @@ function interpolate(input, inputRange, outputRange, options) {
     checkInfiniteRange('outputRange', outputRange);
     checkValidInputRange(inputRange);
     assertValidInterpolateEasingOption(options === null || options === void 0 ? void 0 : options.easing, inputRange.length);
+    assertValidInterpolatePosterizeOption(options === null || options === void 0 ? void 0 : options.posterize);
     const easingOption = options === null || options === void 0 ? void 0 : options.easing;
     const defaultEasing = (num) => num;
     const resolveEasingForSegment = (segmentIndex) => {
@@ -146,8 +158,11 @@ function interpolate(input, inputRange, outputRange, options) {
     if (inputRange.length === 1) {
         return outputRange[0];
     }
-    const range = findRange(input, inputRange);
-    return interpolateFunction(input, [inputRange[range], inputRange[range + 1]], [outputRange[range], outputRange[range + 1]], {
+    const posterizedInput = (options === null || options === void 0 ? void 0 : options.posterize) === undefined
+        ? input
+        : Math.floor(input / options.posterize) * options.posterize;
+    const range = findRange(posterizedInput, inputRange);
+    return interpolateFunction(posterizedInput, [inputRange[range], inputRange[range + 1]], [outputRange[range], outputRange[range + 1]], {
         easing: resolveEasingForSegment(range),
         extrapolateLeft,
         extrapolateRight,

package/dist/cjs/no-react.d.ts

@@ -1,6 +1,6 @@
 export type { ArtifactAsset, AudioOrVideoAsset, InlineAudioAsset, TRenderAsset, } from './CompositionManager';
 export type { DownloadBehavior } from './download-behavior';
-export { assertValidInterpolateEasingOption, interpolate } from './interpolate';
+export { assertValidInterpolateEasingOption, assertValidInterpolatePosterizeOption, interpolate, } from './interpolate';
 export type { EasingFunction, ExtrapolateType, InterpolateOptions, } from './interpolate';
 export { random } from './random.js';
 export type { RandomSeed } from './random.js';

package/dist/cjs/no-react.js

@@ -1,8 +1,9 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.NoReactInternals = exports.random = exports.interpolate = exports.assertValidInterpolateEasingOption = void 0;
+exports.NoReactInternals = exports.random = exports.interpolate = exports.assertValidInterpolatePosterizeOption = exports.assertValidInterpolateEasingOption = void 0;
 var interpolate_1 = require("./interpolate");
 Object.defineProperty(exports, "assertValidInterpolateEasingOption", { enumerable: true, get: function () { return interpolate_1.assertValidInterpolateEasingOption; } });
+Object.defineProperty(exports, "assertValidInterpolatePosterizeOption", { enumerable: true, get: function () { return interpolate_1.assertValidInterpolatePosterizeOption; } });
 Object.defineProperty(exports, "interpolate", { enumerable: true, get: function () { return interpolate_1.interpolate; } });
 var random_js_1 = require("./random.js");
 Object.defineProperty(exports, "random", { enumerable: true, get: function () { return random_js_1.random; } });

package/dist/cjs/use-schema.d.ts

@@ -14,6 +14,7 @@ export type CanUpdateSequencePropStatusClamping = {
     left: ExtrapolateType;
     right: ExtrapolateType;
 };
+export type CanUpdateSequencePropStatusInterpolationFunction = 'interpolate' | 'interpolateColors';
 export type CanUpdateSequencePropStatusComputed = {
     canUpdate: false;
     reason: 'computed';
@@ -21,9 +22,11 @@ export type CanUpdateSequencePropStatusComputed = {
 export type CanUpdateSequencePropStatusKeyframed = {
     canUpdate: false;
     reason: 'keyframed';
+    interpolationFunction: CanUpdateSequencePropStatusInterpolationFunction;
     keyframes: CanUpdateSequencePropStatusKeyframe[];
     easing: CanUpdateSequencePropStatusEasing[];
     clamping: CanUpdateSequencePropStatusClamping;
+    posterize: number | undefined;
 };
 export type CanUpdateSequencePropStatusFalse = CanUpdateSequencePropStatusComputed | CanUpdateSequencePropStatusKeyframed;
 export type CanUpdateSequencePropStatus = CanUpdateSequencePropStatusTrue | CanUpdateSequencePropStatusFalse;
@@ -34,11 +37,12 @@ export type GetCodeValues = (nodePath: SequencePropsSubscriptionKey) => Record<s
 export type GetEffectCodeValues = (nodePath: SequencePropsSubscriptionKey, effectIndex: number) => Record<string, CanUpdateSequencePropStatus> | undefined;
 export type GetDragOverrides = (nodePath: SequencePropsSubscriptionKey) => DragOverrides[string];
 export type GetEffectDragOverrides = (nodePath: SequencePropsSubscriptionKey, effectIndex: number) => Record<string, unknown>;
-export declare const computeEffectiveSchemaValuesDotNotation: ({ schema, currentValue, overrideValues, propStatus, }: {
+export declare const computeEffectiveSchemaValuesDotNotation: ({ schema, currentValue, overrideValues, propStatus, frame, }: {
     schema: SequenceSchema;
     currentValue: Record<string, unknown>;
     overrideValues: Record<string, unknown>;
     propStatus: Record<string, CanUpdateSequencePropStatus> | undefined;
+    frame: number | null;
 }) => {
     merged: Record<string, unknown>;
     propsToDelete: Set<string>;