remotion 4.0.482 → 4.0.484

package/dist/cjs/HtmlInCanvas.js

@@ -11,6 +11,7 @@ const enable_sequence_stack_traces_js_1 = require("./enable-sequence-stack-trace
 const interactivity_schema_js_1 = require("./interactivity-schema.js");
 const Sequence_js_1 = require("./Sequence.js");
 const use_delay_render_js_1 = require("./use-delay-render.js");
+const use_remotion_environment_js_1 = require("./use-remotion-environment.js");
 const use_video_config_js_1 = require("./use-video-config.js");
 const with_interactivity_schema_js_1 = require("./with-interactivity-schema.js");
 // Memoize the support check across the session — neither the platform
@@ -58,6 +59,10 @@ function resolveHtmlInCanvasPixelDensity(pixelDensity) {
     }
     return pixelDensity;
 }
+const isMissingPaintRecordError = (error) => {
+    return error instanceof DOMException && error.name === 'InvalidStateError';
+};
+const missingPaintRecordMessage = 'HtmlInCanvas: Expected the element to be inside the viewport during rendering, but Chrome had no cached paint record for it.';
 const resizeOffscreenCanvas = ({ offscreen, width, height, }) => {
     if (offscreen.width !== width) {
         offscreen.width = width;
@@ -85,6 +90,7 @@ const HtmlInCanvasContent = (0, react_1.forwardRef)(({ width, height, effects, c
     const canvasWidth = Math.ceil(width * resolvedPixelDensity);
     const canvasHeight = Math.ceil(height * resolvedPixelDensity);
     const { continueRender, cancelRender } = (0, use_delay_render_js_1.useDelayRender)();
+    const { isRendering } = (0, use_remotion_environment_js_1.useRemotionEnvironment)();
     if (!(0, exports.isHtmlInCanvasSupported)()) {
         cancelRender(new Error(exports.HTML_IN_CANVAS_UNSUPPORTED_MESSAGE));
     }
@@ -139,35 +145,68 @@ const HtmlInCanvasContent = (0, react_1.forwardRef)(({ width, height, effects, c
             }
             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 = placeholderCanvas.captureElementImage(element);
-                const currentOnInit = onInitRef.current;
-                if (currentOnInit) {
-                    const cleanup = await currentOnInit({
-                        canvas: offscreen,
-                        element,
-                        elementImage: initImage,
-                        pixelDensity: resolvedPixelDensity,
-                    });
-                    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.');
+                let initImage = null;
+                try {
+                    initImage = placeholderCanvas.captureElementImage(element);
+                }
+                catch (error) {
+                    if (isMissingPaintRecordError(error) && !isRendering) {
+                        // Element may be outside viewport (no cached paint record).
+                        // Skip init — will retry on the next paint cycle.
                     }
-                    if (unmountedRef.current) {
-                        cleanup();
+                    else if (isMissingPaintRecordError(error)) {
+                        throw new Error(missingPaintRecordMessage);
                     }
                     else {
-                        onInitCleanupRef.current = cleanup;
+                        throw error;
+                    }
+                }
+                if (initImage) {
+                    initializedRef.current = true;
+                    const currentOnInit = onInitRef.current;
+                    if (currentOnInit) {
+                        const cleanup = await currentOnInit({
+                            canvas: offscreen,
+                            element,
+                            elementImage: initImage,
+                            pixelDensity: resolvedPixelDensity,
+                        });
+                        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 = placeholderCanvas.captureElementImage(element);
+            let elImage;
+            try {
+                elImage = placeholderCanvas.captureElementImage(element);
+            }
+            catch (error) {
+                // `captureElementImage` throws `InvalidStateError` when the
+                // element is outside the viewport (no cached paint record).
+                // Skip this paint cycle — the canvas retains its last state.
+                if (isMissingPaintRecordError(error) && !isRendering) {
+                    continueRender(handle);
+                    return;
+                }
+                if (isMissingPaintRecordError(error)) {
+                    throw new Error(missingPaintRecordMessage);
+                }
+                throw error;
+            }
             await handler({
                 canvas: offscreen,
                 element,
@@ -194,6 +233,7 @@ const HtmlInCanvasContent = (0, react_1.forwardRef)(({ width, height, effects, c
         continueRender,
         cancelRender,
         resolvedPixelDensity,
+        isRendering,
     ]);
     // Transfer control once per layout canvas instance, then listen for paint on
     // the placeholder (capture) while drawing on the linked offscreen surface.

package/dist/cjs/audio/html5-audio.js

@@ -22,13 +22,17 @@ const shared_audio_tags_js_1 = require("./shared-audio-tags.js");
 const AudioRefForwardingFunction = (props, ref) => {
     var _a, _b, _c;
     const audioTagsContext = (0, react_1.useContext)(shared_audio_tags_js_1.SharedAudioTagsContext);
-    const { startFrom, endAt, trimBefore, trimAfter, name, stack, pauseWhenBuffering, showInTimeline, onError: onRemotionError, ...otherProps } = props;
-    const { loop, ...propsOtherThanLoop } = props;
+    const propsWithFreeze = props;
+    const { startFrom, endAt, trimBefore, trimAfter, name, stack, pauseWhenBuffering, showInTimeline, onError: onRemotionError, freeze, ...otherProps } = propsWithFreeze;
+    const { loop, freeze: _freeze, ...propsOtherThanLoop } = propsWithFreeze;
     const { fps } = (0, use_video_config_js_1.useVideoConfig)();
     const environment = (0, use_remotion_environment_js_1.useRemotionEnvironment)();
     if (environment.isClientSideRendering) {
         throw new Error('<Html5Audio> is not supported in @remotion/web-renderer. Use <Audio> from @remotion/media instead. See https://remotion.dev/docs/client-side-rendering/limitations');
     }
+    if (typeof freeze !== 'undefined') {
+        throw new TypeError('The "freeze" prop is not supported on <Html5Audio />. Use <Sequence freeze={...}> to freeze media playback.');
+    }
     const { durations, setDurations } = (0, react_1.useContext)(duration_state_js_1.DurationsContext);
     if (typeof props.src !== 'string') {
         throw new TypeError(`The \`<Html5Audio>\` tag requires a string for \`src\`, but got ${JSON.stringify(props.src)} instead.`);

package/dist/cjs/easing.d.ts

@@ -1,5 +1,8 @@
 import type { SpringConfig } from './spring/spring-utils.js';
-export type EasingSpringConfig = Partial<Pick<SpringConfig, 'damping' | 'mass' | 'stiffness' | 'overshootClamping'>>;
+export type EasingSpringConfig = Partial<Pick<SpringConfig, 'damping' | 'mass' | 'stiffness' | 'overshootClamping'>> & {
+    readonly allowTail?: boolean;
+    readonly durationRestThreshold?: number;
+};
 /**
  * @description The Easing module implements common easing functions. You can use it with the interpolate() API.
  * @see [Documentation](https://www.remotion.dev/docs/easing)
@@ -17,7 +20,7 @@ export declare class Easing {
     static exp(t: number): number;
     static elastic(bounciness?: number): (t: number) => number;
     static back(s?: number): (t: number) => number;
-    static spring(config?: EasingSpringConfig): (t: number) => number;
+    static spring({ allowTail, durationRestThreshold, ...config }?: EasingSpringConfig): (t: number) => number;
     static bounce(t: number): number;
     static bezier(x1: number, y1: number, x2: number, y2: number): (t: number) => number;
     static in(easing: (t: number) => number): (t: number) => number;

package/dist/cjs/easing.js

@@ -52,21 +52,37 @@ class Easing {
     static back(s = 1.70158) {
         return (t) => t * t * ((s + 1) * t - s);
     }
-    static spring(config = {}) {
-        return (t) => {
+    static spring({ allowTail = false, durationRestThreshold, ...config } = {}) {
+        const easing = (t) => {
             if (t <= 0) {
                 return 0;
             }
-            if (t >= 1) {
+            if (!allowTail && t >= 1) {
                 return 1;
             }
+            if (allowTail) {
+                return (0, index_js_1.spring)({
+                    fps: springEasingDurationInFrames,
+                    frame: t *
+                        (0, index_js_1.measureSpring)({
+                            fps: springEasingDurationInFrames,
+                            config,
+                            threshold: durationRestThreshold,
+                        }),
+                    config,
+                });
+            }
             return (0, index_js_1.spring)({
                 fps: springEasingDurationInFrames,
                 frame: t * springEasingDurationInFrames,
                 config,
                 durationInFrames: springEasingDurationInFrames,
+                durationRestThreshold,
             });
         };
+        return Object.assign(easing, {
+            remotionShouldExtendRight: allowTail,
+        });
     }
     static bounce(t) {
         const u = clampUnit(t);

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

@@ -51,6 +51,7 @@ const resolvePropStatusOverrides = (propStatus, frame) => {
         }
         if (status.status === 'keyframed') {
             const value = (0, interpolate_keyframed_status_js_1.interpolateKeyframedStatus)({
+                forceSpringAllowTail: null,
                 frame,
                 status,
             });

package/dist/cjs/get-effective-visual-mode-value.js

@@ -13,6 +13,7 @@ const resolveDragOverrideValue = ({ dragOverrideValue, frame, }) => {
         return { type: 'none' };
     }
     const interpolated = (0, interpolate_keyframed_status_1.interpolateKeyframedStatus)({
+        forceSpringAllowTail: null,
         frame,
         status: dragOverrideValue.status,
     });
@@ -33,6 +34,7 @@ const getEffectiveVisualModeValue = ({ propStatus, dragOverrideValue, defaultVal
     if (propStatus.status === 'keyframed') {
         if (frame !== null) {
             return (0, interpolate_keyframed_status_1.interpolateKeyframedStatus)({
+                forceSpringAllowTail: null,
                 frame,
                 status: propStatus,
             });

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

@@ -62,7 +62,16 @@ export type UvCoordinateFieldSchema = {
     min?: number;
     max?: number;
     step?: number;
-    lineTo?: string;
+    visual?: {
+        readonly type: 'line';
+        readonly to: string;
+    } | {
+        readonly type: 'ellipse';
+        readonly width: string;
+        readonly height: string;
+        readonly rotation?: string;
+        readonly innerScale?: string;
+    };
     default: readonly [number, number] | undefined;
     description?: string;
     keyframable?: boolean;

package/dist/cjs/internals.d.ts

@@ -859,8 +859,9 @@ export declare const Internals: {
         merged: Record<string, unknown>;
         propsToDelete: Set<string>;
     };
-    readonly interpolateKeyframedStatus: ({ frame, status, }: {
+    readonly interpolateKeyframedStatus: ({ frame, forceSpringAllowTail, status, }: {
         frame: number;
+        forceSpringAllowTail: boolean | null;
         status: CanUpdateSequencePropStatusKeyframed;
     }) => string | number | readonly number[] | null;
     readonly makeStaticDragOverride: (value: unknown) => DragOverrideValue;

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

@@ -1,7 +1,8 @@
 import type { CanUpdateSequencePropStatusKeyframed } from './use-schema.js';
 type InterpolateKeyframedStatusResult = number | string | readonly number[] | null;
-export declare const interpolateKeyframedStatus: ({ frame, status, }: {
+export declare const interpolateKeyframedStatus: ({ frame, forceSpringAllowTail, status, }: {
     frame: number;
+    forceSpringAllowTail: boolean | null;
     status: CanUpdateSequencePropStatusKeyframed;
 }) => InterpolateKeyframedStatusResult;
 export {};

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

@@ -5,24 +5,27 @@ 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) => {
-    switch (e.type) {
+const easingToFn = ({ easing, forceSpringAllowTail, }) => {
+    var _a, _b;
+    switch (easing.type) {
         case 'linear':
             return easing_js_1.Easing.linear;
         case 'spring':
             return easing_js_1.Easing.spring({
-                damping: e.damping,
-                mass: e.mass,
-                overshootClamping: e.overshootClamping,
-                stiffness: e.stiffness,
+                allowTail: (_a = forceSpringAllowTail !== null && forceSpringAllowTail !== void 0 ? forceSpringAllowTail : easing.allowTail) !== null && _a !== void 0 ? _a : undefined,
+                damping: easing.damping,
+                durationRestThreshold: (_b = easing.durationRestThreshold) !== null && _b !== void 0 ? _b : undefined,
+                mass: easing.mass,
+                overshootClamping: easing.overshootClamping,
+                stiffness: easing.stiffness,
             });
         case 'bezier':
-            return (0, bezier_js_1.bezier)(e.x1, e.y1, e.x2, e.y2);
+            return (0, bezier_js_1.bezier)(easing.x1, easing.y1, easing.x2, easing.y2);
         default:
-            throw new TypeError(`Unsupported easing: ${JSON.stringify(e)}`);
+            throw new TypeError(`Unsupported easing: ${JSON.stringify(easing)}`);
     }
 };
-const interpolateKeyframedStatus = ({ frame, status, }) => {
+const interpolateKeyframedStatus = ({ frame, forceSpringAllowTail, status, }) => {
     const { keyframes, easing, clamping, interpolationFunction } = status;
     if (keyframes.length === 0) {
         return null;
@@ -39,7 +42,7 @@ const interpolateKeyframedStatus = ({ frame, status, }) => {
         }
         try {
             return (0, interpolate_colors_js_1.interpolateColors)(frame, inputRange, outputs, {
-                easing: easing.map(easingToFn),
+                easing: easing.map((e) => easingToFn({ easing: e, forceSpringAllowTail })),
                 posterize: status.posterize,
             });
         }
@@ -52,7 +55,7 @@ const interpolateKeyframedStatus = ({ frame, status, }) => {
     }
     try {
         return (0, interpolate_js_1.interpolate)(frame, inputRange, outputs, {
-            easing: easing.map(easingToFn),
+            easing: easing.map((e) => easingToFn({ easing: e, forceSpringAllowTail })),
             extrapolateLeft: clamping.left,
             extrapolateRight: clamping.right,
             posterize: status.posterize,

package/dist/cjs/interpolate.d.ts

@@ -3,7 +3,9 @@ export type ExtrapolateType = 'extend' | 'identity' | 'clamp' | 'wrap';
  * @description This function allows you to map a range of values to another with a concise syntax
  * @see [Documentation](https://www.remotion.dev/docs/interpolate)
  */
-export type EasingFunction = (input: number) => number;
+export type EasingFunction = ((input: number) => number) & {
+    readonly remotionShouldExtendRight?: boolean;
+};
 export type InterpolateOptions = Partial<{
     easing: EasingFunction | readonly EasingFunction[];
     extrapolateLeft: ExtrapolateType;

package/dist/cjs/interpolate.js

@@ -325,21 +325,35 @@ function findRange(input, inputRange) {
     return i - 1;
 }
 const defaultEasing = (num) => num;
+const shouldExtendRightForEasing = (easing) => {
+    return easing.remotionShouldExtendRight === true;
+};
+const resolveEasingForSegment = ({ easing, segmentIndex, }) => {
+    if (easing === undefined) {
+        return defaultEasing;
+    }
+    if (typeof easing === 'function') {
+        return easing;
+    }
+    // `segmentIndex` is in [0, inputRange.length - 2]; array length was validated above.
+    return easing[segmentIndex];
+};
+const interpolateSegment = ({ input, inputRange, outputRange, easing, extrapolateLeft, extrapolateRight, }) => {
+    return interpolateFunction(input, inputRange, outputRange, {
+        easing,
+        extrapolateLeft,
+        extrapolateRight: input > inputRange[1] &&
+            extrapolateRight === 'clamp' &&
+            shouldExtendRightForEasing(easing)
+            ? 'extend'
+            : extrapolateRight,
+    });
+};
 const interpolateNumber = ({ input, inputRange, outputRange, options, }) => {
     if (inputRange.length === 1) {
         return outputRange[0];
     }
     const easingOption = options === null || options === void 0 ? void 0 : options.easing;
-    const resolveEasingForSegment = (segmentIndex) => {
-        if (easingOption === undefined) {
-            return defaultEasing;
-        }
-        if (typeof easingOption === 'function') {
-            return easingOption;
-        }
-        // `segmentIndex` is in [0, inputRange.length - 2]; array length was validated above.
-        return easingOption[segmentIndex];
-    };
     let extrapolateLeft = 'extend';
     if ((options === null || options === void 0 ? void 0 : options.extrapolateLeft) !== undefined) {
         extrapolateLeft = options.extrapolateLeft;
@@ -352,11 +366,41 @@ const interpolateNumber = ({ input, inputRange, outputRange, options, }) => {
         ? 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),
+    const easing = resolveEasingForSegment({
+        easing: easingOption,
+        segmentIndex: range,
+    });
+    let result = interpolateSegment({
+        input: posterizedInput,
+        inputRange: [inputRange[range], inputRange[range + 1]],
+        outputRange: [outputRange[range], outputRange[range + 1]],
+        easing,
         extrapolateLeft,
         extrapolateRight,
     });
+    for (let segmentIndex = 0; segmentIndex < range; segmentIndex++) {
+        const previousEasing = resolveEasingForSegment({
+            easing: easingOption,
+            segmentIndex,
+        });
+        if (!shouldExtendRightForEasing(previousEasing)) {
+            continue;
+        }
+        const previousSegmentEnd = inputRange[segmentIndex + 1];
+        if (posterizedInput <= previousSegmentEnd) {
+            continue;
+        }
+        const continuedSegmentValue = interpolateSegment({
+            input: posterizedInput,
+            inputRange: [inputRange[segmentIndex], previousSegmentEnd],
+            outputRange: [outputRange[segmentIndex], outputRange[segmentIndex + 1]],
+            easing: previousEasing,
+            extrapolateLeft,
+            extrapolateRight: 'extend',
+        });
+        result += continuedSegmentValue - outputRange[segmentIndex + 1];
+    }
+    return result;
 };
 const interpolateString = ({ input, inputRange, outputRange, options, }) => {
     var _a;

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

@@ -21,10 +21,12 @@ export type CanUpdateSequencePropStatusBezierEasing = {
 };
 export type CanUpdateSequencePropStatusSpringEasing = {
     type: 'spring';
+    allowTail: boolean | null;
     damping: number;
     mass: number;
     stiffness: number;
     overshootClamping: boolean;
+    durationRestThreshold: number | null;
 };
 export type CanUpdateSequencePropStatusEasing = CanUpdateSequencePropStatusLinearEasing | CanUpdateSequencePropStatusBezierEasing | CanUpdateSequencePropStatusSpringEasing;
 export declare const DEFAULT_LINEAR_EASING: CanUpdateSequencePropStatusLinearEasing;

package/dist/cjs/use-schema.js

@@ -7,6 +7,13 @@ const interpolate_keyframed_status_js_1 = require("./interpolate-keyframed-statu
 exports.DEFAULT_LINEAR_EASING = {
     type: 'linear',
 };
+const getEasingIndexToDuplicate = ({ insertedKeyframeIndex, easingLength, keyframeCount, }) => {
+    const isSplittingExistingSegment = insertedKeyframeIndex > 0 && insertedKeyframeIndex < keyframeCount - 1;
+    if (!isSplittingExistingSegment || easingLength === 0) {
+        return null;
+    }
+    return Math.min(insertedKeyframeIndex - 1, easingLength - 1);
+};
 const makeStaticDragOverride = (value) => {
     return { type: 'static', value };
 };
@@ -17,6 +24,18 @@ const makeKeyframedDragOverride = ({ status, frame, value, }) => {
         ? [...status.keyframes, { frame, value }].sort((first, second) => first.frame - second.frame)
         : status.keyframes.map((keyframe, index) => index === existingIndex ? { frame, value } : keyframe);
     const easing = [...status.easing];
+    if (existingIndex === -1) {
+        const insertedKeyframeIndex = keyframes.findIndex((keyframe) => keyframe.frame === frame);
+        const easingIndexToDuplicate = getEasingIndexToDuplicate({
+            insertedKeyframeIndex,
+            easingLength: easing.length,
+            keyframeCount: keyframes.length,
+        });
+        const easingToDuplicate = easingIndexToDuplicate === null
+            ? exports.DEFAULT_LINEAR_EASING
+            : easing[easingIndexToDuplicate];
+        easing.splice(insertedKeyframeIndex, 0, easingToDuplicate);
+    }
     while (easing.length < keyframes.length - 1) {
         easing.push(exports.DEFAULT_LINEAR_EASING);
     }
@@ -90,6 +109,7 @@ const computeEffectiveSchemaValuesDotNotation = ({ schema, currentValue, overrid
                 }
                 else if (frame !== null) {
                     const interpolated = (0, interpolate_keyframed_status_js_1.interpolateKeyframedStatus)({
+                        forceSpringAllowTail: null,
                         frame,
                         status,
                     });

package/dist/cjs/version.d.ts

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

package/dist/cjs/version.js

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

package/dist/esm/index.mjs

@@ -1291,7 +1291,7 @@ var addSequenceStackTraces = (component) => {
 };
 
 // src/version.ts
-var VERSION = "4.0.482";
+var VERSION = "4.0.484";
 
 // src/multiple-versions-warning.ts
 var checkMultipleRemotionVersions = () => {
@@ -2593,6 +2593,35 @@ function findRange(input, inputRange) {
   return i - 1;
 }
 var defaultEasing = (num) => num;
+var shouldExtendRightForEasing = (easing) => {
+  return easing.remotionShouldExtendRight === true;
+};
+var resolveEasingForSegment = ({
+  easing,
+  segmentIndex
+}) => {
+  if (easing === undefined) {
+    return defaultEasing;
+  }
+  if (typeof easing === "function") {
+    return easing;
+  }
+  return easing[segmentIndex];
+};
+var interpolateSegment = ({
+  input,
+  inputRange,
+  outputRange,
+  easing,
+  extrapolateLeft,
+  extrapolateRight
+}) => {
+  return interpolateFunction(input, inputRange, outputRange, {
+    easing,
+    extrapolateLeft,
+    extrapolateRight: input > inputRange[1] && extrapolateRight === "clamp" && shouldExtendRightForEasing(easing) ? "extend" : extrapolateRight
+  });
+};
 var interpolateNumber = ({
   input,
   inputRange,
@@ -2603,15 +2632,6 @@ var interpolateNumber = ({
     return outputRange[0];
   }
   const easingOption = options?.easing;
-  const resolveEasingForSegment = (segmentIndex) => {
-    if (easingOption === undefined) {
-      return defaultEasing;
-    }
-    if (typeof easingOption === "function") {
-      return easingOption;
-    }
-    return easingOption[segmentIndex];
-  };
   let extrapolateLeft = "extend";
   if (options?.extrapolateLeft !== undefined) {
     extrapolateLeft = options.extrapolateLeft;
@@ -2622,11 +2642,41 @@ var interpolateNumber = ({
   }
   const posterizedInput = 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),
+  const easing = resolveEasingForSegment({
+    easing: easingOption,
+    segmentIndex: range
+  });
+  let result = interpolateSegment({
+    input: posterizedInput,
+    inputRange: [inputRange[range], inputRange[range + 1]],
+    outputRange: [outputRange[range], outputRange[range + 1]],
+    easing,
     extrapolateLeft,
     extrapolateRight
   });
+  for (let segmentIndex = 0;segmentIndex < range; segmentIndex++) {
+    const previousEasing = resolveEasingForSegment({
+      easing: easingOption,
+      segmentIndex
+    });
+    if (!shouldExtendRightForEasing(previousEasing)) {
+      continue;
+    }
+    const previousSegmentEnd = inputRange[segmentIndex + 1];
+    if (posterizedInput <= previousSegmentEnd) {
+      continue;
+    }
+    const continuedSegmentValue = interpolateSegment({
+      input: posterizedInput,
+      inputRange: [inputRange[segmentIndex], previousSegmentEnd],
+      outputRange: [outputRange[segmentIndex], outputRange[segmentIndex + 1]],
+      easing: previousEasing,
+      extrapolateLeft,
+      extrapolateRight: "extend"
+    });
+    result += continuedSegmentValue - outputRange[segmentIndex + 1];
+  }
+  return result;
 };
 var interpolateString = ({
   input,
@@ -3112,21 +3162,40 @@ class Easing {
   static back(s = 1.70158) {
     return (t) => t * t * ((s + 1) * t - s);
   }
-  static spring(config = {}) {
-    return (t) => {
+  static spring({
+    allowTail = false,
+    durationRestThreshold,
+    ...config
+  } = {}) {
+    const easing = (t) => {
       if (t <= 0) {
         return 0;
       }
-      if (t >= 1) {
+      if (!allowTail && t >= 1) {
         return 1;
       }
+      if (allowTail) {
+        return spring({
+          fps: springEasingDurationInFrames,
+          frame: t * measureSpring({
+            fps: springEasingDurationInFrames,
+            config,
+            threshold: durationRestThreshold
+          }),
+          config
+        });
+      }
       return spring({
         fps: springEasingDurationInFrames,
         frame: t * springEasingDurationInFrames,
         config,
-        durationInFrames: springEasingDurationInFrames
+        durationInFrames: springEasingDurationInFrames,
+        durationRestThreshold
       });
     };
+    return Object.assign(easing, {
+      remotionShouldExtendRight: allowTail
+    });
   }
   static bounce(t) {
     const u = clampUnit(t);
@@ -3661,25 +3730,31 @@ var interpolateColors = (input, inputRange, outputRange, options) => {
 };
 
 // src/interpolate-keyframed-status.ts
-var easingToFn = (e) => {
-  switch (e.type) {
+var easingToFn = ({
+  easing,
+  forceSpringAllowTail
+}) => {
+  switch (easing.type) {
     case "linear":
       return Easing.linear;
     case "spring":
       return Easing.spring({
-        damping: e.damping,
-        mass: e.mass,
-        overshootClamping: e.overshootClamping,
-        stiffness: e.stiffness
+        allowTail: forceSpringAllowTail ?? easing.allowTail ?? undefined,
+        damping: easing.damping,
+        durationRestThreshold: easing.durationRestThreshold ?? undefined,
+        mass: easing.mass,
+        overshootClamping: easing.overshootClamping,
+        stiffness: easing.stiffness
       });
     case "bezier":
-      return bezier(e.x1, e.y1, e.x2, e.y2);
+      return bezier(easing.x1, easing.y1, easing.x2, easing.y2);
     default:
-      throw new TypeError(`Unsupported easing: ${JSON.stringify(e)}`);
+      throw new TypeError(`Unsupported easing: ${JSON.stringify(easing)}`);
   }
 };
 var interpolateKeyframedStatus = ({
   frame,
+  forceSpringAllowTail,
   status
 }) => {
   const { keyframes, easing, clamping, interpolationFunction } = status;
@@ -3698,7 +3773,7 @@ var interpolateKeyframedStatus = ({
     }
     try {
       return interpolateColors(frame, inputRange, outputs, {
-        easing: easing.map(easingToFn),
+        easing: easing.map((e) => easingToFn({ easing: e, forceSpringAllowTail })),
         posterize: status.posterize
       });
     } catch {
@@ -3710,7 +3785,7 @@ var interpolateKeyframedStatus = ({
   }
   try {
     return interpolate(frame, inputRange, outputs, {
-      easing: easing.map(easingToFn),
+      easing: easing.map((e) => easingToFn({ easing: e, forceSpringAllowTail })),
       extrapolateLeft: clamping.left,
       extrapolateRight: clamping.right,
       posterize: status.posterize
@@ -3735,6 +3810,7 @@ var resolveDragOverrideValue = ({
     return { type: "none" };
   }
   const interpolated = interpolateKeyframedStatus({
+    forceSpringAllowTail: null,
     frame,
     status: dragOverrideValue.status
   });
@@ -3760,6 +3836,7 @@ var getEffectiveVisualModeValue = ({
   if (propStatus.status === "keyframed") {
     if (frame !== null) {
       return interpolateKeyframedStatus({
+        forceSpringAllowTail: null,
         frame,
         status: propStatus
       });
@@ -3833,6 +3910,7 @@ var resolvePropStatusOverrides = (propStatus, frame) => {
     }
     if (status.status === "keyframed") {
       const value = interpolateKeyframedStatus({
+        forceSpringAllowTail: null,
         frame,
         status
       });
@@ -4014,6 +4092,17 @@ var findPropsToDelete = ({
 var DEFAULT_LINEAR_EASING = {
   type: "linear"
 };
+var getEasingIndexToDuplicate = ({
+  insertedKeyframeIndex,
+  easingLength,
+  keyframeCount
+}) => {
+  const isSplittingExistingSegment = insertedKeyframeIndex > 0 && insertedKeyframeIndex < keyframeCount - 1;
+  if (!isSplittingExistingSegment || easingLength === 0) {
+    return null;
+  }
+  return Math.min(insertedKeyframeIndex - 1, easingLength - 1);
+};
 var makeStaticDragOverride = (value) => {
   return { type: "static", value };
 };
@@ -4025,6 +4114,16 @@ var makeKeyframedDragOverride = ({
   const existingIndex = status.keyframes.findIndex((keyframe) => keyframe.frame === frame);
   const keyframes = existingIndex === -1 ? [...status.keyframes, { frame, value }].sort((first, second) => first.frame - second.frame) : status.keyframes.map((keyframe, index) => index === existingIndex ? { frame, value } : keyframe);
   const easing = [...status.easing];
+  if (existingIndex === -1) {
+    const insertedKeyframeIndex = keyframes.findIndex((keyframe) => keyframe.frame === frame);
+    const easingIndexToDuplicate = getEasingIndexToDuplicate({
+      insertedKeyframeIndex,
+      easingLength: easing.length,
+      keyframeCount: keyframes.length
+    });
+    const easingToDuplicate = easingIndexToDuplicate === null ? DEFAULT_LINEAR_EASING : easing[easingIndexToDuplicate];
+    easing.splice(insertedKeyframeIndex, 0, easingToDuplicate);
+  }
   while (easing.length < keyframes.length - 1) {
     easing.push(DEFAULT_LINEAR_EASING);
   }
@@ -4096,6 +4195,7 @@ var computeEffectiveSchemaValuesDotNotation = ({
           value = dragOverride.value;
         } else if (frame !== null) {
           const interpolated = interpolateKeyframedStatus({
+            forceSpringAllowTail: null,
             frame,
             status
           });
@@ -8476,6 +8576,7 @@ var AudioForRendering = forwardRef6(AudioForRenderingRefForwardingFunction);
 import { jsx as jsx23 } from "react/jsx-runtime";
 var AudioRefForwardingFunction = (props, ref) => {
   const audioTagsContext = useContext30(SharedAudioTagsContext);
+  const propsWithFreeze = props;
   const {
     startFrom,
     endAt,
@@ -8486,14 +8587,18 @@ var AudioRefForwardingFunction = (props, ref) => {
     pauseWhenBuffering,
     showInTimeline,
     onError: onRemotionError,
+    freeze,
     ...otherProps
-  } = props;
-  const { loop, ...propsOtherThanLoop } = props;
+  } = propsWithFreeze;
+  const { loop, freeze: _freeze, ...propsOtherThanLoop } = propsWithFreeze;
   const { fps } = useVideoConfig();
   const environment = useRemotionEnvironment();
   if (environment.isClientSideRendering) {
     throw new Error("<Html5Audio> is not supported in @remotion/web-renderer. Use <Audio> from @remotion/media instead. See https://remotion.dev/docs/client-side-rendering/limitations");
   }
+  if (typeof freeze !== "undefined") {
+    throw new TypeError('The "freeze" prop is not supported on <Html5Audio />. Use <Sequence freeze={...}> to freeze media playback.');
+  }
   const { durations, setDurations } = useContext30(DurationsContext);
   if (typeof props.src !== "string") {
     throw new TypeError(`The \`<Html5Audio>\` tag requires a string for \`src\`, but got ${JSON.stringify(props.src)} instead.`);
@@ -8854,6 +8959,10 @@ function resolveHtmlInCanvasPixelDensity(pixelDensity) {
   }
   return pixelDensity;
 }
+var isMissingPaintRecordError = (error2) => {
+  return error2 instanceof DOMException && error2.name === "InvalidStateError";
+};
+var missingPaintRecordMessage = "HtmlInCanvas: Expected the element to be inside the viewport during rendering, but Chrome had no cached paint record for it.";
 var resizeOffscreenCanvas = ({
   offscreen,
   width,
@@ -8897,6 +9006,7 @@ var HtmlInCanvasContent = forwardRef9(({
   const canvasWidth = Math.ceil(width * resolvedPixelDensity);
   const canvasHeight = Math.ceil(height * resolvedPixelDensity);
   const { continueRender: continueRender2, cancelRender: cancelRender2 } = useDelayRender();
+  const { isRendering } = useRemotionEnvironment();
   if (!isHtmlInCanvasSupported()) {
     cancelRender2(new Error(HTML_IN_CANVAS_UNSUPPORTED_MESSAGE));
   }
@@ -8947,28 +9057,51 @@ var HtmlInCanvasContent = forwardRef9(({
       }
       const handle = delayRender("onPaint");
       if (!initializedRef.current) {
-        initializedRef.current = true;
-        const initImage = placeholderCanvas.captureElementImage(element);
-        const currentOnInit = onInitRef.current;
-        if (currentOnInit) {
-          const cleanup = await currentOnInit({
-            canvas: offscreen,
-            element,
-            elementImage: initImage,
-            pixelDensity: resolvedPixelDensity
-          });
-          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();
+        let initImage = null;
+        try {
+          initImage = placeholderCanvas.captureElementImage(element);
+        } catch (error2) {
+          if (isMissingPaintRecordError(error2) && !isRendering) {} else if (isMissingPaintRecordError(error2)) {
+            throw new Error(missingPaintRecordMessage);
           } else {
-            onInitCleanupRef.current = cleanup;
+            throw error2;
+          }
+        }
+        if (initImage) {
+          initializedRef.current = true;
+          const currentOnInit = onInitRef.current;
+          if (currentOnInit) {
+            const cleanup = await currentOnInit({
+              canvas: offscreen,
+              element,
+              elementImage: initImage,
+              pixelDensity: resolvedPixelDensity
+            });
+            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 = onPaintRef.current ?? defaultOnPaint;
-      const elImage = placeholderCanvas.captureElementImage(element);
+      let elImage;
+      try {
+        elImage = placeholderCanvas.captureElementImage(element);
+      } catch (error2) {
+        if (isMissingPaintRecordError(error2) && !isRendering) {
+          continueRender2(handle);
+          return;
+        }
+        if (isMissingPaintRecordError(error2)) {
+          throw new Error(missingPaintRecordMessage);
+        }
+        throw error2;
+      }
       await handler({
         canvas: offscreen,
         element,
@@ -8993,7 +9126,8 @@ var HtmlInCanvasContent = forwardRef9(({
     chainState,
     continueRender2,
     cancelRender2,
-    resolvedPixelDensity
+    resolvedPixelDensity,
+    isRendering
   ]);
   useLayoutEffect9(() => {
     const placeholder = canvas2dRef.current;

package/dist/esm/no-react.mjs

@@ -296,6 +296,35 @@ function findRange(input, inputRange) {
   return i - 1;
 }
 var defaultEasing = (num) => num;
+var shouldExtendRightForEasing = (easing) => {
+  return easing.remotionShouldExtendRight === true;
+};
+var resolveEasingForSegment = ({
+  easing,
+  segmentIndex
+}) => {
+  if (easing === undefined) {
+    return defaultEasing;
+  }
+  if (typeof easing === "function") {
+    return easing;
+  }
+  return easing[segmentIndex];
+};
+var interpolateSegment = ({
+  input,
+  inputRange,
+  outputRange,
+  easing,
+  extrapolateLeft,
+  extrapolateRight
+}) => {
+  return interpolateFunction(input, inputRange, outputRange, {
+    easing,
+    extrapolateLeft,
+    extrapolateRight: input > inputRange[1] && extrapolateRight === "clamp" && shouldExtendRightForEasing(easing) ? "extend" : extrapolateRight
+  });
+};
 var interpolateNumber = ({
   input,
   inputRange,
@@ -306,15 +335,6 @@ var interpolateNumber = ({
     return outputRange[0];
   }
   const easingOption = options?.easing;
-  const resolveEasingForSegment = (segmentIndex) => {
-    if (easingOption === undefined) {
-      return defaultEasing;
-    }
-    if (typeof easingOption === "function") {
-      return easingOption;
-    }
-    return easingOption[segmentIndex];
-  };
   let extrapolateLeft = "extend";
   if (options?.extrapolateLeft !== undefined) {
     extrapolateLeft = options.extrapolateLeft;
@@ -325,11 +345,41 @@ var interpolateNumber = ({
   }
   const posterizedInput = 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),
+  const easing = resolveEasingForSegment({
+    easing: easingOption,
+    segmentIndex: range
+  });
+  let result = interpolateSegment({
+    input: posterizedInput,
+    inputRange: [inputRange[range], inputRange[range + 1]],
+    outputRange: [outputRange[range], outputRange[range + 1]],
+    easing,
     extrapolateLeft,
     extrapolateRight
   });
+  for (let segmentIndex = 0;segmentIndex < range; segmentIndex++) {
+    const previousEasing = resolveEasingForSegment({
+      easing: easingOption,
+      segmentIndex
+    });
+    if (!shouldExtendRightForEasing(previousEasing)) {
+      continue;
+    }
+    const previousSegmentEnd = inputRange[segmentIndex + 1];
+    if (posterizedInput <= previousSegmentEnd) {
+      continue;
+    }
+    const continuedSegmentValue = interpolateSegment({
+      input: posterizedInput,
+      inputRange: [inputRange[segmentIndex], previousSegmentEnd],
+      outputRange: [outputRange[segmentIndex], outputRange[segmentIndex + 1]],
+      easing: previousEasing,
+      extrapolateLeft,
+      extrapolateRight: "extend"
+    });
+    result += continuedSegmentValue - outputRange[segmentIndex + 1];
+  }
+  return result;
 };
 var interpolateString = ({
   input,

package/dist/esm/version.mjs

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

package/package.json

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