remotion 4.0.525 → 4.0.527

package/dist/cjs/AbsoluteFill.d.ts

@@ -74,7 +74,6 @@ export declare const absoluteFillSchema: {
         readonly type: "font-weight";
         readonly default: 400;
         readonly description: "Font weight";
-        readonly keyframable: false;
     };
     readonly 'style.fontStyle': {
         readonly type: "enum";

package/dist/cjs/Img.d.ts

@@ -8,6 +8,7 @@ export type ImgProps = NativeImgProps & {
     readonly delayRenderRetries?: number;
     readonly delayRenderTimeoutInMilliseconds?: number;
     readonly onImageFrame?: (imageElement: HTMLImageElement) => void;
+    readonly onImageError?: (error: Error) => void;
     readonly src: string;
     readonly effects?: EffectsProp;
     readonly showInTimeline?: boolean;
@@ -225,6 +226,7 @@ export declare const Img: React.ComponentType<NativeImgProps & {
     readonly delayRenderRetries?: number | undefined;
     readonly delayRenderTimeoutInMilliseconds?: number | undefined;
     readonly onImageFrame?: ((imageElement: HTMLImageElement) => void) | undefined;
+    readonly onImageError?: ((error: Error) => void) | undefined;
     readonly src: string;
     readonly effects?: EffectsProp | undefined;
     readonly showInTimeline?: boolean | undefined;

package/dist/cjs/Img.js

@@ -22,7 +22,7 @@ const with_interactivity_schema_js_1 = require("./with-interactivity-schema.js")
 function exponentialBackoff(errorCount) {
     return 1000 * 2 ** (errorCount - 1);
 }
-const ImgContent = ({ onError, maxRetries = 2, src, pauseWhenLoading, delayRenderRetries, delayRenderTimeoutInMilliseconds, onImageFrame, crossOrigin, decoding, ref, refForOutline, ...props }) => {
+const ImgContent = ({ onError, onImageError, maxRetries = 2, src, pauseWhenLoading, delayRenderRetries, delayRenderTimeoutInMilliseconds, onImageFrame, crossOrigin, decoding, ref, refForOutline, ...props }) => {
     const imageRef = (0, react_1.useRef)(null);
     const errors = (0, react_1.useRef)({});
     const { delayPlayback } = (0, use_buffer_state_js_1.useBufferState)();
@@ -67,34 +67,36 @@ const ImgContent = ({ onError, maxRetries = 2, src, pauseWhenLoading, delayRende
     const isPremounting = Boolean(sequenceContext === null || sequenceContext === void 0 ? void 0 : sequenceContext.premounting);
     const isPostmounting = Boolean(sequenceContext === null || sequenceContext === void 0 ? void 0 : sequenceContext.postmounting);
     const didGetError = (0, react_1.useCallback)((e) => {
-        var _a, _b, _c, _d, _e, _f, _g;
-        var _h, _j, _k, _l;
+        var _a, _b, _c, _d, _e, _f, _g, _h;
+        var _j, _k, _l, _m;
         if (!errors.current) {
             return;
         }
         errors.current[(_a = imageRef.current) === null || _a === void 0 ? void 0 : _a.src] =
-            ((_h = errors.current[(_b = imageRef.current) === null || _b === void 0 ? void 0 : _b.src]) !== null && _h !== void 0 ? _h : 0) + 1;
-        if (onError &&
-            ((_j = errors.current[(_c = imageRef.current) === null || _c === void 0 ? void 0 : _c.src]) !== null && _j !== void 0 ? _j : 0) > maxRetries) {
-            onError(e);
+            ((_j = errors.current[(_b = imageRef.current) === null || _b === void 0 ? void 0 : _b.src]) !== null && _j !== void 0 ? _j : 0) + 1;
+        if ((onError || onImageError) &&
+            ((_k = errors.current[(_c = imageRef.current) === null || _c === void 0 ? void 0 : _c.src]) !== null && _k !== void 0 ? _k : 0) > maxRetries) {
+            onError === null || onError === void 0 ? void 0 : onError(e);
+            onImageError === null || onImageError === void 0 ? void 0 : onImageError(new Error('Error loading image with src: ' +
+                (0, truncate_src_for_label_js_1.truncateSrcForLabel)((_d = imageRef.current) === null || _d === void 0 ? void 0 : _d.src)));
             return;
         }
-        if (((_k = errors.current[(_d = imageRef.current) === null || _d === void 0 ? void 0 : _d.src]) !== null && _k !== void 0 ? _k : 0) <= maxRetries) {
-            const backoff = exponentialBackoff((_l = errors.current[(_e = imageRef.current) === null || _e === void 0 ? void 0 : _e.src]) !== null && _l !== void 0 ? _l : 0);
+        if (((_l = errors.current[(_e = imageRef.current) === null || _e === void 0 ? void 0 : _e.src]) !== null && _l !== void 0 ? _l : 0) <= maxRetries) {
+            const backoff = exponentialBackoff((_m = errors.current[(_f = imageRef.current) === null || _f === void 0 ? void 0 : _f.src]) !== null && _m !== void 0 ? _m : 0);
             // eslint-disable-next-line no-console
-            console.warn(`Could not load image with source ${(0, truncate_src_for_label_js_1.truncateSrcForLabel)((_f = imageRef.current) === null || _f === void 0 ? void 0 : _f.src)}, retrying again in ${backoff}ms`);
+            console.warn(`Could not load image with source ${(0, truncate_src_for_label_js_1.truncateSrcForLabel)((_g = imageRef.current) === null || _g === void 0 ? void 0 : _g.src)}, retrying again in ${backoff}ms`);
             retryIn(backoff);
             return;
         }
         try {
             cancelRender('Error loading image with src: ' +
-                (0, truncate_src_for_label_js_1.truncateSrcForLabel)((_g = imageRef.current) === null || _g === void 0 ? void 0 : _g.src));
+                (0, truncate_src_for_label_js_1.truncateSrcForLabel)((_h = imageRef.current) === null || _h === void 0 ? void 0 : _h.src));
         }
-        catch (_m) {
+        catch (_o) {
             // cancelRender() intentionally throws after storing the error in scope.
             // In async image callbacks, we rely on the stored error for renderer propagation.
         }
-    }, [cancelRender, maxRetries, onError, retryIn]);
+    }, [cancelRender, maxRetries, onError, onImageError, retryIn]);
     if (typeof window !== 'undefined') {
         // eslint-disable-next-line react-hooks/rules-of-hooks
         (0, react_1.useLayoutEffect)(() => {
@@ -200,6 +202,10 @@ const NativeImgInner = ({ hidden, name, showInTimeline, src, from, trimBefore, d
     if (!src) {
         throw new Error('No "src" prop was passed to <Img>.');
     }
+    const isMedia = (0, react_1.useMemo)(() => ({
+        type: 'image',
+        src,
+    }), [src]);
     const { effectivePostmountFor, effectivePremountFor, freezeFrame, isPremountingOrPostmounting, postmountingActive, premountingActive, premountingStyle, } = (0, use_premounting_js_1.usePremounting)({
         from: from !== null && from !== void 0 ? from : 0,
         durationInFrames: durationInFrames !== null && durationInFrames !== void 0 ? durationInFrames : Infinity,
@@ -218,7 +224,7 @@ const NativeImgInner = ({ hidden, name, showInTimeline, src, from, trimBefore, d
         style: premountingStyle,
         componentName: '<Img />',
     });
-    return (jsx_runtime_1.jsx(freeze_js_1.Freeze, { frame: freezeFrame, active: isPremountingOrPostmounting, children: jsx_runtime_1.jsx(Sequence_js_1.Sequence, { layout: "none", from: from !== null && from !== void 0 ? from : 0, trimBefore: trimBefore, durationInFrames: durationInFrames !== null && durationInFrames !== void 0 ? durationInFrames : Infinity, freeze: freeze, _remotionInternalDocumentationLink: "https://www.remotion.dev/docs/img", _remotionInternalIsMedia: { type: 'image', src }, _remotionInternalPremountDisplay: effectivePremountFor || null, _remotionInternalPostmountDisplay: effectivePostmountFor || null, _remotionInternalIsPremounting: premountingActive, _remotionInternalIsPostmounting: postmountingActive, name: name !== null && name !== void 0 ? name : '<Img>', controls: controls, showInTimeline: showInTimeline !== null && showInTimeline !== void 0 ? showInTimeline : true, hidden: hidden, outlineRef: refForOutline, children: jsx_runtime_1.jsx(ImgContent, { src: src, refForOutline: refForOutline, style: croppedStyle !== null && croppedStyle !== void 0 ? croppedStyle : undefined, ...props }) }) }));
+    return (jsx_runtime_1.jsx(freeze_js_1.Freeze, { frame: freezeFrame, active: isPremountingOrPostmounting, children: jsx_runtime_1.jsx(Sequence_js_1.Sequence, { layout: "none", from: from !== null && from !== void 0 ? from : 0, trimBefore: trimBefore, durationInFrames: durationInFrames !== null && durationInFrames !== void 0 ? durationInFrames : Infinity, freeze: freeze, _remotionInternalDocumentationLink: "https://www.remotion.dev/docs/img", _remotionInternalIsMedia: isMedia, _remotionInternalPremountDisplay: effectivePremountFor || null, _remotionInternalPostmountDisplay: effectivePostmountFor || null, _remotionInternalIsPremounting: premountingActive, _remotionInternalIsPostmounting: postmountingActive, name: name !== null && name !== void 0 ? name : '<Img>', controls: controls, showInTimeline: showInTimeline !== null && showInTimeline !== void 0 ? showInTimeline : true, hidden: hidden, outlineRef: refForOutline, children: jsx_runtime_1.jsx(ImgContent, { src: src, refForOutline: refForOutline, style: croppedStyle !== null && croppedStyle !== void 0 ? croppedStyle : undefined, ...props }) }) }));
 };
 const CanvasImageWithPrivateProps = index_js_1.CanvasImage;
 exports.imgSchema = {
@@ -239,7 +245,6 @@ exports.imgSchema = {
 };
 const imgCanvasFallbackIncompatibleProps = new Set([
     'alt',
-    'crossOrigin',
     'decoding',
     'fetchPriority',
     'loading',
@@ -276,12 +281,12 @@ const getFitFromObjectFit = (style) => {
     }
     return undefined;
 };
-const ImgInner = ({ effects = [], ref, hidden, name, showInTimeline, src, from, trimBefore, durationInFrames, freeze, premountFor, postmountFor, styleWhilePremounted, styleWhilePostmounted, controls, width, height, className, style, cropLeft, cropRight, cropTop, cropBottom, id, pauseWhenLoading, maxRetries, delayRenderRetries, delayRenderTimeoutInMilliseconds, ...props }) => {
+const ImgInner = ({ effects = [], ref, hidden, name, showInTimeline, src, from, trimBefore, durationInFrames, freeze, premountFor, postmountFor, styleWhilePremounted, styleWhilePostmounted, controls, width, height, className, style, cropLeft, cropRight, cropTop, cropBottom, id, pauseWhenLoading, maxRetries, delayRenderRetries, delayRenderTimeoutInMilliseconds, onImageError, ...props }) => {
     var _a;
     const refForOutline = (0, react_1.useRef)(null);
     const shouldPauseWhenLoading = (0, v5_flag_js_1.resolveV5Default)(pauseWhenLoading);
     if (effects.length === 0) {
-        return (jsx_runtime_1.jsx(NativeImgInner, { ...props, ref: ref, hidden: hidden, name: name, showInTimeline: showInTimeline, src: src, from: from, trimBefore: trimBefore, durationInFrames: durationInFrames, freeze: freeze, premountFor: premountFor, postmountFor: postmountFor, styleWhilePremounted: styleWhilePremounted, styleWhilePostmounted: styleWhilePostmounted, controls: controls, width: width, height: height, className: className, style: style, cropLeft: cropLeft, cropRight: cropRight, cropTop: cropTop, cropBottom: cropBottom, id: id, pauseWhenLoading: shouldPauseWhenLoading, maxRetries: maxRetries, delayRenderRetries: delayRenderRetries, delayRenderTimeoutInMilliseconds: delayRenderTimeoutInMilliseconds, outlineRef: refForOutline }));
+        return (jsx_runtime_1.jsx(NativeImgInner, { ...props, ref: ref, hidden: hidden, name: name, showInTimeline: showInTimeline, src: src, from: from, trimBefore: trimBefore, durationInFrames: durationInFrames, freeze: freeze, premountFor: premountFor, postmountFor: postmountFor, styleWhilePremounted: styleWhilePremounted, styleWhilePostmounted: styleWhilePostmounted, controls: controls, width: width, height: height, className: className, style: style, cropLeft: cropLeft, cropRight: cropRight, cropTop: cropTop, cropBottom: cropBottom, id: id, pauseWhenLoading: shouldPauseWhenLoading, maxRetries: maxRetries, delayRenderRetries: delayRenderRetries, delayRenderTimeoutInMilliseconds: delayRenderTimeoutInMilliseconds, onImageError: onImageError, outlineRef: refForOutline }));
     }
     if (!src) {
         throw new Error('No "src" prop was passed to <Img>.');
@@ -296,7 +301,7 @@ const ImgInner = ({ effects = [], ref, hidden, name, showInTimeline, src, from,
     const canvasHeight = typeof height === 'number' ? height : undefined;
     const canvasProps = props;
     const canvasFit = (_a = getFitFromObjectFit(style)) !== null && _a !== void 0 ? _a : 'fill';
-    return (jsx_runtime_1.jsx(CanvasImageWithPrivateProps, { src: src, width: canvasWidth, height: canvasHeight, fit: canvasFit, effects: effects, className: className, style: style, cropLeft: cropLeft, cropRight: cropRight, cropTop: cropTop, cropBottom: cropBottom, id: id, pauseWhenLoading: shouldPauseWhenLoading, maxRetries: maxRetries, delayRenderRetries: delayRenderRetries, delayRenderTimeoutInMilliseconds: delayRenderTimeoutInMilliseconds, from: from, trimBefore: trimBefore, durationInFrames: durationInFrames, freeze: freeze, premountFor: premountFor, postmountFor: postmountFor, styleWhilePremounted: styleWhilePremounted, styleWhilePostmounted: styleWhilePostmounted, hidden: hidden, name: name !== null && name !== void 0 ? name : '<Img>', showInTimeline: showInTimeline, _remotionInternalDocumentationLink: "https://www.remotion.dev/docs/img", _remotionInternalCropComponentName: "<Img />", controls: controls, outlineRef: refForOutline, ...canvasProps }));
+    return (jsx_runtime_1.jsx(CanvasImageWithPrivateProps, { src: src, width: canvasWidth, height: canvasHeight, fit: canvasFit, effects: effects, className: className, style: style, cropLeft: cropLeft, cropRight: cropRight, cropTop: cropTop, cropBottom: cropBottom, id: id, onError: onImageError, pauseWhenLoading: shouldPauseWhenLoading, maxRetries: maxRetries, delayRenderRetries: delayRenderRetries, delayRenderTimeoutInMilliseconds: delayRenderTimeoutInMilliseconds, from: from, trimBefore: trimBefore, durationInFrames: durationInFrames, freeze: freeze, premountFor: premountFor, postmountFor: postmountFor, styleWhilePremounted: styleWhilePremounted, styleWhilePostmounted: styleWhilePostmounted, hidden: hidden, name: name !== null && name !== void 0 ? name : '<Img>', showInTimeline: showInTimeline, _remotionInternalDocumentationLink: "https://www.remotion.dev/docs/img", _remotionInternalCropComponentName: "<Img />", controls: controls, outlineRef: refForOutline, ...canvasProps }));
 };
 /*
  * @description Works just like a regular HTML img tag. When you use the <Img> tag, Remotion will ensure that the image is loaded before rendering the frame.

package/dist/cjs/Interactive.d.ts

@@ -126,7 +126,6 @@ export declare const Interactive: {
             readonly type: "font-weight";
             readonly default: 400;
             readonly description: "Font weight";
-            readonly keyframable: false;
         };
         readonly 'style.fontStyle': {
             readonly type: "enum";

package/dist/cjs/canvas-image/CanvasImage.d.ts

@@ -219,6 +219,7 @@ export declare const canvasImageSchema: {
 };
 export declare const CanvasImage: import("react").ComponentType<import("../Interactive.js").InteractiveBaseProps & import("../Interactive.js").InteractiveCropProps & import("../Interactive.js").InteractivePremountProps & CanvasImageCanvasProps & {
     readonly src: string;
+    readonly crossOrigin?: "" | "anonymous" | "use-credentials" | undefined;
     readonly width?: number | undefined;
     readonly height?: number | undefined;
     readonly fit?: import("../calculate-image-fit.js").ImageFit | undefined;

package/dist/cjs/canvas-image/CanvasImage.js

@@ -53,7 +53,7 @@ const makeAbortError = () => {
     error.name = 'AbortError';
     return error;
 };
-const loadImage = ({ src, signal, }) => {
+const loadImage = ({ src, signal, crossOrigin, }) => {
     return new Promise((resolve, reject) => {
         const image = new Image();
         let settled = false;
@@ -94,7 +94,7 @@ const loadImage = ({ src, signal, }) => {
             onAbort();
             return;
         }
-        image.crossOrigin = 'anonymous';
+        image.crossOrigin = crossOrigin !== null && crossOrigin !== void 0 ? crossOrigin : 'anonymous';
         image.src = src;
     });
 };
@@ -109,7 +109,7 @@ const waitForNextFrame = ({ onFrame, }) => {
     const frame = requestAnimationFrame(onFrame);
     return () => cancelAnimationFrame(frame);
 };
-const CanvasImageContent = (0, react_1.forwardRef)(({ src, width, height, fit = 'fill', effects, controls, onError, className, style, id, pauseWhenLoading, maxRetries = 2, delayRenderRetries, delayRenderTimeoutInMilliseconds, refForOutline, ...canvasProps }, ref) => {
+const CanvasImageContent = (0, react_1.forwardRef)(({ src, crossOrigin, width, height, fit = 'fill', effects, controls, onError, className, style, id, pauseWhenLoading, maxRetries = 2, delayRenderRetries, delayRenderTimeoutInMilliseconds, refForOutline, ...canvasProps }, ref) => {
     var _a;
     const { delayRender, continueRender, cancelRender } = (0, use_delay_render_js_1.useDelayRender)();
     const { delayPlayback } = (0, use_buffer_state_js_1.useBufferState)();
@@ -187,7 +187,7 @@ const CanvasImageContent = (0, react_1.forwardRef)(({ src, width, height, fit =
             continued: false,
         };
         const attemptLoad = () => {
-            loadImage({ src: actualSrc, signal: controller.signal })
+            loadImage({ src: actualSrc, signal: controller.signal, crossOrigin })
                 .then((image) => {
                 if (cancelled) {
                     return;
@@ -232,6 +232,7 @@ const CanvasImageContent = (0, react_1.forwardRef)(({ src, width, height, fit =
         actualSrc,
         cancelRender,
         continuePendingLoadDelay,
+        crossOrigin,
         delayRender,
         delayRenderRetries,
         delayRenderTimeoutInMilliseconds,
@@ -329,10 +330,14 @@ const CanvasImageContent = (0, react_1.forwardRef)(({ src, width, height, fit =
     return (jsx_runtime_1.jsx("canvas", { ...canvasProps, ref: canvasRef, width: width, height: height, className: className, style: style, id: id }));
 });
 CanvasImageContent.displayName = 'CanvasImageContent';
-const CanvasImageInner = (0, react_1.forwardRef)(({ src, width, height, fit, effects = [], className, style, id, onError, pauseWhenLoading, maxRetries, delayRenderRetries, delayRenderTimeoutInMilliseconds, durationInFrames, from, trimBefore, freeze, premountFor, postmountFor, styleWhilePremounted, styleWhilePostmounted, hidden, name, showInTimeline, cropLeft, cropRight, cropTop, cropBottom, controls, _remotionInternalDocumentationLink, _remotionInternalCropComponentName, outlineRef, ...canvasProps }, ref) => {
+const CanvasImageInner = (0, react_1.forwardRef)(({ src, crossOrigin, width, height, fit, effects = [], className, style, id, onError, pauseWhenLoading, maxRetries, delayRenderRetries, delayRenderTimeoutInMilliseconds, durationInFrames, from, trimBefore, freeze, premountFor, postmountFor, styleWhilePremounted, styleWhilePostmounted, hidden, name, showInTimeline, cropLeft, cropRight, cropTop, cropBottom, controls, _remotionInternalDocumentationLink, _remotionInternalCropComponentName, outlineRef, ...canvasProps }, ref) => {
     if (!src) {
         throw new Error('No "src" prop was passed to <CanvasImage>.');
     }
+    const isMedia = (0, react_1.useMemo)(() => ({
+        type: 'image',
+        src,
+    }), [src]);
     const memoizedEffectDefinitions = (0, use_memoized_effects_js_1.useMemoizedEffectDefinitions)(effects);
     const actualRef = (0, react_1.useRef)(null);
     (0, react_1.useImperativeHandle)(ref, () => {
@@ -356,7 +361,7 @@ const CanvasImageInner = (0, react_1.forwardRef)(({ src, width, height, fit, eff
         style: premountingStyle,
         componentName: _remotionInternalCropComponentName !== null && _remotionInternalCropComponentName !== void 0 ? _remotionInternalCropComponentName : '<CanvasImage />',
     });
-    return (jsx_runtime_1.jsx(freeze_js_1.Freeze, { frame: freezeFrame, active: isPremountingOrPostmounting, children: jsx_runtime_1.jsx(Sequence_js_1.Sequence, { layout: "none", from: from !== null && from !== void 0 ? from : 0, trimBefore: trimBefore, durationInFrames: durationInFrames !== null && durationInFrames !== void 0 ? durationInFrames : Infinity, freeze: freeze, hidden: hidden, showInTimeline: showInTimeline !== null && showInTimeline !== void 0 ? showInTimeline : true, name: name !== null && name !== void 0 ? name : '<CanvasImage>', _remotionInternalDocumentationLink: _remotionInternalDocumentationLink !== null && _remotionInternalDocumentationLink !== void 0 ? _remotionInternalDocumentationLink : 'https://www.remotion.dev/docs/canvasimage', controls: controls, _remotionInternalEffects: memoizedEffectDefinitions, _remotionInternalIsMedia: { type: 'image', src }, _remotionInternalPremountDisplay: effectivePremountFor || null, _remotionInternalPostmountDisplay: effectivePostmountFor || null, _remotionInternalIsPremounting: premountingActive, _remotionInternalIsPostmounting: postmountingActive, outlineRef: outlineRef !== null && outlineRef !== void 0 ? outlineRef : actualRef, children: jsx_runtime_1.jsx(CanvasImageContent, { ref: actualRef, src: src, width: width, height: height, fit: fit, effects: effects, controls: controls, className: className, style: croppedStyle !== null && croppedStyle !== void 0 ? croppedStyle : undefined, id: id, onError: onError, pauseWhenLoading: pauseWhenLoading, maxRetries: maxRetries, delayRenderRetries: delayRenderRetries, delayRenderTimeoutInMilliseconds: delayRenderTimeoutInMilliseconds, refForOutline: outlineRef !== null && outlineRef !== void 0 ? outlineRef : null, ...canvasProps }) }) }));
+    return (jsx_runtime_1.jsx(freeze_js_1.Freeze, { frame: freezeFrame, active: isPremountingOrPostmounting, children: jsx_runtime_1.jsx(Sequence_js_1.Sequence, { layout: "none", from: from !== null && from !== void 0 ? from : 0, trimBefore: trimBefore, durationInFrames: durationInFrames !== null && durationInFrames !== void 0 ? durationInFrames : Infinity, freeze: freeze, hidden: hidden, showInTimeline: showInTimeline !== null && showInTimeline !== void 0 ? showInTimeline : true, name: name !== null && name !== void 0 ? name : '<CanvasImage>', _remotionInternalDocumentationLink: _remotionInternalDocumentationLink !== null && _remotionInternalDocumentationLink !== void 0 ? _remotionInternalDocumentationLink : 'https://www.remotion.dev/docs/canvasimage', controls: controls, _remotionInternalEffects: memoizedEffectDefinitions, _remotionInternalIsMedia: isMedia, _remotionInternalPremountDisplay: effectivePremountFor || null, _remotionInternalPostmountDisplay: effectivePostmountFor || null, _remotionInternalIsPremounting: premountingActive, _remotionInternalIsPostmounting: postmountingActive, outlineRef: outlineRef !== null && outlineRef !== void 0 ? outlineRef : actualRef, children: jsx_runtime_1.jsx(CanvasImageContent, { ref: actualRef, src: src, crossOrigin: crossOrigin, width: width, height: height, fit: fit, effects: effects, controls: controls, className: className, style: croppedStyle !== null && croppedStyle !== void 0 ? croppedStyle : undefined, id: id, onError: onError, pauseWhenLoading: pauseWhenLoading, maxRetries: maxRetries, delayRenderRetries: delayRenderRetries, delayRenderTimeoutInMilliseconds: delayRenderTimeoutInMilliseconds, refForOutline: outlineRef !== null && outlineRef !== void 0 ? outlineRef : null, ...canvasProps }) }) }));
 });
 /*
  * @description Renders a static image to a `<canvas>` and applies Remotion effects.

package/dist/cjs/canvas-image/props.d.ts

@@ -6,6 +6,7 @@ type CanvasImageSequenceProps = InteractiveBaseProps & InteractiveCropProps & In
 export type CanvasImageCanvasProps = Omit<React.CanvasHTMLAttributes<HTMLCanvasElement>, 'children' | 'height' | 'onError' | 'width'>;
 export type CanvasImageProps = CanvasImageSequenceProps & CanvasImageCanvasProps & {
     readonly src: string;
+    readonly crossOrigin?: React.ImgHTMLAttributes<HTMLImageElement>['crossOrigin'];
     readonly width?: number;
     readonly height?: number;
     readonly fit?: ImageFit;

package/dist/cjs/delay-render.js

@@ -30,7 +30,7 @@ const delayRenderInternal = ({ scope, environment, label, options, }) => {
     scope.remotion_delayRenderHandles.push(handle);
     const called = (_b = (_a = Error().stack) === null || _a === void 0 ? void 0 : _a.replace(/^Error/g, '')) !== null && _b !== void 0 ? _b : '';
     if (environment.isRendering) {
-        const timeoutToUse = ((_d = (_c = options === null || options === void 0 ? void 0 : options.timeoutInMilliseconds) !== null && _c !== void 0 ? _c : scope.remotion_puppeteerTimeout) !== null && _d !== void 0 ? _d : defaultTimeout) - 2000;
+        const timeoutToUse = Math.max(0, ((_d = (_c = options === null || options === void 0 ? void 0 : options.timeoutInMilliseconds) !== null && _c !== void 0 ? _c : scope.remotion_puppeteerTimeout) !== null && _d !== void 0 ? _d : defaultTimeout) - 2000);
         const retriesLeft = ((_e = options === null || options === void 0 ? void 0 : options.retries) !== null && _e !== void 0 ? _e : 0) - (scope.remotion_attempt - 1);
         scope.remotion_delayRenderTimeouts[handle] = {
             label: label !== null && label !== void 0 ? label : null,

package/dist/cjs/index.d.ts

@@ -5,7 +5,7 @@ import type { AnyCompMetadata, AnyComposition, AudioOrVideoAsset, JsxComponentId
 import type { DelayRenderScope } from './delay-render.js';
 import { type TFolder } from './Folder.js';
 import type { StaticFile } from './get-static-files.js';
-import type { AssetFieldSchema, ArrayFieldSchema, ArrayItemFieldSchema, CaptionsFieldSchema, InteractivitySchemaField, InteractivitySchema } from './interactivity-schema.js';
+import type { ArrayFieldSchema, ArrayItemFieldSchema, AssetFieldSchema, CaptionsFieldSchema, InteractivitySchema, InteractivitySchemaField } from './interactivity-schema.js';
 import type { LogLevel } from './log.js';
 import type { ProResProfile } from './prores-profile.js';
 import type { PixelFormat, VideoImageFormat } from './render-types.js';
@@ -135,7 +135,7 @@ export * from './internals.js';
 export { interpolateColors, type InterpolateColorsOptions, } from './interpolate-colors.js';
 export { LogLevel } from './log.js';
 export { Loop } from './loop/index.js';
-export { assertValidInterpolateEasingOption, assertValidInterpolatePosterizeOption, EasingFunction, ExtrapolateType, interpolate, InterpolateOutputOption, InterpolateOptions, random, RandomSeed, } from './no-react';
+export { assertValidInterpolateEasingOption, assertValidInterpolatePosterizeOption, EasingFunction, ExtrapolateType, interpolate, InterpolateOptions, InterpolateOutputOption, InterpolateOutputType, random, RandomSeed, } from './no-react';
 export { prefetch, PrefetchOnProgress } from './prefetch.js';
 export { registerRoot } from './register-root.js';
 export type { PixelFormat, VideoImageFormat } from './render-types.js';
@@ -184,4 +184,4 @@ export type _InternalTypes = {
     TRenderAsset: TRenderAsset;
     ProResProfile: ProResProfile;
 };
-export type { AnyComposition, AssetFieldSchema, ArrayFieldSchema, ArrayItemFieldSchema, CaptionsFieldSchema, DelayRenderScope, JsxComponentIdentity, LoopDisplay, RuntimeValueSnapshot, RuntimeValueStore, SequenceControls, SequenceRegistrationControls, InteractivitySchemaField, InteractivitySchema, UseBufferState, };
+export type { AnyComposition, ArrayFieldSchema, ArrayItemFieldSchema, AssetFieldSchema, CaptionsFieldSchema, DelayRenderScope, InteractivitySchema, InteractivitySchemaField, JsxComponentIdentity, LoopDisplay, RuntimeValueSnapshot, RuntimeValueStore, SequenceControls, SequenceRegistrationControls, UseBufferState, };

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

@@ -101,7 +101,7 @@ export type FontWeightFieldSchema = {
     type: 'font-weight';
     default: number | string | undefined;
     description?: string;
-    keyframable?: false;
+    keyframable?: boolean;
 };
 export type AssetFieldSchema = {
     type: 'asset';
@@ -265,7 +265,6 @@ export declare const textSchema: {
         readonly type: "font-weight";
         readonly default: 400;
         readonly description: "Font weight";
-        readonly keyframable: false;
     };
     readonly 'style.fontStyle': {
         readonly type: "enum";

package/dist/cjs/interactivity-schema.js

@@ -79,7 +79,6 @@ exports.textSchema = {
         type: 'font-weight',
         default: 400,
         description: 'Font weight',
-        keyframable: false,
     },
     'style.fontStyle': {
         type: 'enum',

package/dist/cjs/internals.d.ts

@@ -654,7 +654,6 @@ export declare const Internals: {
             readonly type: "font-weight";
             readonly default: 400;
             readonly description: "Font weight";
-            readonly keyframable: false;
         };
         readonly 'style.fontStyle': {
             readonly type: "enum";

package/dist/cjs/interpolate.d.ts

@@ -1,5 +1,6 @@
 export type ExtrapolateType = 'extend' | 'identity' | 'clamp' | 'wrap';
 export type InterpolateOutputOption = 'linear' | 'perceptual-scale';
+export type InterpolateOutputType = 'font-weight' | 'scale' | 'translate' | 'rotate' | 'transform-origin';
 /**
  * @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)
@@ -12,6 +13,7 @@ export type InterpolateOptions = Partial<{
     extrapolateLeft: ExtrapolateType;
     extrapolateRight: ExtrapolateType;
     output: InterpolateOutputOption;
+    outputType: InterpolateOutputType;
     posterize: number;
 }>;
 type NumericTuple = readonly [number, ...number[]];
@@ -21,6 +23,9 @@ type WidenNumericTuple<T extends readonly 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;
+export declare function interpolate(input: number, inputRange: readonly number[], outputRange: readonly (number | string)[], options: InterpolateOptions & {
+    outputType: 'font-weight';
+}): number;
 export declare function interpolate(input: number, inputRange: readonly number[], outputRange: readonly string[], options?: InterpolateOptions): string;
 export declare function interpolate<const Tuple extends NumericTuple>(input: number, inputRange: readonly number[], outputRange: readonly Tuple[], options?: InterpolateOptions): WidenNumericTuple<Tuple>;
 export declare function interpolate(input: number, inputRange: readonly number[], outputRange: readonly (readonly number[])[], options?: InterpolateOptions): number[];

package/dist/cjs/interpolate.js

@@ -254,7 +254,7 @@ const parseAxisRotationValue = (output) => {
         axisRotation: true,
     };
 };
-const parseStringInterpolationValue = (output) => {
+const parseStringInterpolationValue = (output, outputType) => {
     var _a, _b, _c, _d, _e, _f;
     var _g, _h, _j, _k, _l, _m;
     if (typeof output === 'number') {
@@ -269,8 +269,20 @@ const parseStringInterpolationValue = (output) => {
             axisRotation: false,
         };
     }
+    if (outputType === 'transform-origin') {
+        const transformOriginParts = output.trim().split(/\s+/);
+        if (transformOriginParts.length < 1 ||
+            transformOriginParts.length > 3 ||
+            transformOriginParts[0] === '') {
+            throw new TypeError(`String outputRange values must contain 1 to 3 components, but got "${output}"`);
+        }
+        return parseTransformOriginValue(output, transformOriginParts);
+    }
     const axisRotation = parseAxisRotationValue(output);
     if (axisRotation !== null) {
+        if (outputType !== undefined && outputType !== 'rotate') {
+            throw new TypeError(`Cannot interpolate "${output}" as ${outputType} because it is a rotate value`);
+        }
         return axisRotation;
     }
     const parts = output.trim().split(/\s+/);
@@ -278,6 +290,9 @@ const parseStringInterpolationValue = (output) => {
         throw new TypeError(`String outputRange values must contain 1 to 3 components, but got "${output}"`);
     }
     if (parts.some((part) => transformOriginKeywords.has(part.toLowerCase()))) {
+        if (outputType !== undefined) {
+            throw new TypeError(`Cannot interpolate "${output}" as ${outputType} because it is a transform-origin value`);
+        }
         return parseTransformOriginValue(output, parts);
     }
     const parsed = parts.map((part) => parseStringInterpolationComponent(part, output));
@@ -287,6 +302,9 @@ const parseStringInterpolationValue = (output) => {
             throw new TypeError(`Cannot interpolate "${output}" because it mixes ${kind} and ${part.kind} values`);
         }
     }
+    if (outputType !== undefined && outputType !== kind) {
+        throw new TypeError(`Cannot interpolate "${output}" as ${outputType} because it is a ${kind} value`);
+    }
     if (kind === 'scale') {
         const x = parsed[0].value;
         const y = (_g = (_a = parsed[1]) === null || _a === void 0 ? void 0 : _a.value) !== null && _g !== void 0 ? _g : x;
@@ -486,9 +504,9 @@ const interpolateNumber = ({ input, inputRange, outputRange, options, }) => {
     }
     return result;
 };
-const interpolateString = ({ input, inputRange, outputRange, options, }) => {
+const interpolateString = ({ input, inputRange, outputRange, options, outputType, }) => {
     var _a;
-    const initiallyParsedOutputRange = outputRange.map(parseStringInterpolationValue);
+    const initiallyParsedOutputRange = outputRange.map((output) => parseStringInterpolationValue(output, outputType));
     const hasAxisRotation = initiallyParsedOutputRange.some((parsed) => parsed.axisRotation);
     const posterizedInput = (options === null || options === void 0 ? void 0 : options.posterize) === undefined
         ? input
@@ -589,6 +607,35 @@ const interpolateString = ({ input, inputRange, outputRange, options, }) => {
         axisRotation: hasAxisRotation,
     });
 };
+const interpolateFontWeight = ({ input, inputRange, outputRange, options, }) => {
+    const normalizedOutputRange = outputRange.map((output) => {
+        if (typeof output === 'string') {
+            const lowerCaseOutput = output.toLowerCase();
+            if (lowerCaseOutput === 'normal') {
+                return 400;
+            }
+            if (lowerCaseOutput === 'bold') {
+                return 700;
+            }
+        }
+        const match = typeof output === 'string' ? cssNumberRegex.exec(output) : null;
+        const value = typeof output === 'number'
+            ? output
+            : match !== null && match[2] === undefined
+                ? Number(match[1])
+                : Number.NaN;
+        if (!Number.isFinite(value) || value < 1 || value > 1000) {
+            throw new TypeError(`Cannot interpolate font weight "${output}". Expected "normal", "bold", or a number between 1 and 1000`);
+        }
+        return value;
+    });
+    return interpolateNumber({
+        input,
+        inputRange,
+        outputRange: normalizedOutputRange,
+        options,
+    });
+};
 const interpolateDiscreteString = ({ input, inputRange, outputRange, options, }) => {
     if (inputRange.length === 1) {
         return outputRange[0];
@@ -725,6 +772,17 @@ function assertValidInterpolateOutputOption(output) {
     }
     throw new Error(`output must be "linear" or "perceptual-scale", but got ${String(output)}`);
 }
+function assertValidInterpolateOutputType(outputType) {
+    if (outputType === undefined ||
+        outputType === 'font-weight' ||
+        outputType === 'scale' ||
+        outputType === 'translate' ||
+        outputType === 'rotate' ||
+        outputType === 'transform-origin') {
+        return;
+    }
+    throw new Error(`outputType must be "font-weight", "scale", "translate", "rotate", or "transform-origin", but got ${String(outputType)}`);
+}
 function interpolate(input, inputRange, outputRange, options) {
     if (typeof input === 'undefined') {
         throw new Error('input can not be undefined');
@@ -747,19 +805,41 @@ function interpolate(input, inputRange, outputRange, options) {
     assertValidInterpolateEasingOption(options === null || options === void 0 ? void 0 : options.easing, inputRange.length);
     assertValidInterpolatePosterizeOption(options === null || options === void 0 ? void 0 : options.posterize);
     assertValidInterpolateOutputOption(options === null || options === void 0 ? void 0 : options.output);
+    assertValidInterpolateOutputType(options === null || options === void 0 ? void 0 : options.outputType);
     if (typeof input !== 'number') {
         throw new TypeError('Cannot interpolate an input which is not a number');
     }
     if (!Array.isArray(outputRange)) {
         throw new Error('outputRange must contain only numbers');
     }
+    const outputType = options === null || options === void 0 ? void 0 : options.outputType;
+    if (outputType === 'font-weight') {
+        if (!outputRange.every((output) => typeof output === 'number' || typeof output === 'string')) {
+            throw new TypeError('Font weight outputRange must contain only numbers or strings');
+        }
+        return interpolateFontWeight({
+            input,
+            inputRange,
+            outputRange,
+            options,
+        });
+    }
     const hasStringOutput = outputRange.some((output) => typeof output === 'string');
+    if (outputType !== undefined && outputType !== 'scale' && !hasStringOutput) {
+        throw new TypeError(`${outputType} outputRange must contain strings with the appropriate CSS units`);
+    }
     if (hasStringOutput) {
         if (!outputRange.every((output) => typeof output === 'string' || typeof output === 'number')) {
             throw new TypeError('outputRange must contain only numbers, or supported scale, translate, and rotate strings');
         }
         try {
-            return interpolateString({ input, inputRange, outputRange, options });
+            return interpolateString({
+                input,
+                inputRange,
+                outputRange,
+                options,
+                outputType,
+            });
         }
         catch (error) {
             if (!outputRange.every((output) => typeof output === 'string')) {
@@ -767,7 +847,7 @@ function interpolate(input, inputRange, outputRange, options) {
             }
             const hasNonNumericString = outputRange.some((output) => {
                 try {
-                    parseStringInterpolationValue(output);
+                    parseStringInterpolationValue(output, outputType);
                     return false;
                 }
                 catch (parseError) {

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

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

package/dist/cjs/spring/spring-utils.js

@@ -64,15 +64,24 @@ function advance({ animation, now, config, }) {
 }
 const calculationCache = {};
 function springCalculation({ frame, fps, config = {}, }) {
+    var _a, _b, _c, _d;
     const from = 0;
     const to = 1;
+    // An explicit `undefined` (e.g. a forwarded optional prop) must not
+    // override the defaults, otherwise the physics turn into NaN
+    const resolvedConfig = {
+        damping: (_a = config.damping) !== null && _a !== void 0 ? _a : defaultSpringConfig.damping,
+        mass: (_b = config.mass) !== null && _b !== void 0 ? _b : defaultSpringConfig.mass,
+        stiffness: (_c = config.stiffness) !== null && _c !== void 0 ? _c : defaultSpringConfig.stiffness,
+        overshootClamping: (_d = config.overshootClamping) !== null && _d !== void 0 ? _d : defaultSpringConfig.overshootClamping,
+    };
     const cacheKey = [
         frame,
         fps,
-        config.damping,
-        config.mass,
-        config.overshootClamping,
-        config.stiffness,
+        resolvedConfig.damping,
+        resolvedConfig.mass,
+        resolvedConfig.overshootClamping,
+        resolvedConfig.stiffness,
     ].join('-');
     if (calculationCache[cacheKey]) {
         return calculationCache[cacheKey];
@@ -91,20 +100,14 @@ function springCalculation({ frame, fps, config = {}, }) {
         animation = advance({
             animation,
             now: time,
-            config: {
-                ...defaultSpringConfig,
-                ...config,
-            },
+            config: resolvedConfig,
         });
     }
     if (unevenRest > 0) {
         animation = advance({
             animation,
             now: (frameClamped / fps) * 1000,
-            config: {
-                ...defaultSpringConfig,
-                ...config,
-            },
+            config: resolvedConfig,
         });
     }
     calculationCache[cacheKey] = animation;

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.525";
+export declare const VERSION = "4.0.527";

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.525';
+exports.VERSION = '4.0.527';