remotion 4.0.495 → 4.0.497

package/dist/cjs/HtmlInCanvas.d.ts

@@ -100,6 +100,41 @@ export declare const htmlInCanvasSchema: {
         readonly description: "Opacity";
         readonly hiddenFromList: false;
     };
+    readonly 'style.borderWidth': {
+        readonly type: "number";
+        readonly default: undefined;
+        readonly min: 0;
+        readonly step: 1;
+        readonly description: "Border width";
+        readonly hiddenFromList: false;
+    };
+    readonly 'style.borderStyle': {
+        readonly type: "enum";
+        readonly default: "none";
+        readonly description: "Border style";
+        readonly variants: {
+            readonly none: {};
+            readonly hidden: {};
+            readonly solid: {};
+            readonly dashed: {};
+            readonly dotted: {};
+            readonly double: {};
+            readonly groove: {};
+            readonly ridge: {};
+            readonly inset: {};
+            readonly outset: {};
+        };
+    };
+    readonly 'style.borderColor': {
+        readonly type: "color";
+        readonly default: undefined;
+        readonly description: "Border color";
+    };
+    readonly 'style.backgroundColor': {
+        readonly type: "color";
+        readonly default: "transparent";
+        readonly description: "Color";
+    };
     readonly durationInFrames: {
         readonly type: "number";
         readonly default: undefined;

package/dist/cjs/HtmlInCanvas.js

@@ -3,7 +3,6 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.HtmlInCanvas = exports.htmlInCanvasSchema = exports.HTML_IN_CANVAS_UNSUPPORTED_MESSAGE = exports.isHtmlInCanvasSupported = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
-const delay_render_js_1 = require("./delay-render.js");
 const run_effect_chain_js_1 = require("./effects/run-effect-chain.js");
 const use_effect_chain_state_js_1 = require("./effects/use-effect-chain-state.js");
 const use_memoized_effects_js_1 = require("./effects/use-memoized-effects.js");
@@ -87,7 +86,7 @@ const HtmlInCanvasContent = (0, react_1.forwardRef)(({ width, height, effects, c
     const resolvedPixelDensity = resolveHtmlInCanvasPixelDensity(pixelDensity);
     const canvasWidth = Math.ceil(width * resolvedPixelDensity);
     const canvasHeight = Math.ceil(height * resolvedPixelDensity);
-    const { continueRender, cancelRender } = (0, use_delay_render_js_1.useDelayRender)();
+    const { delayRender, continueRender, cancelRender } = (0, use_delay_render_js_1.useDelayRender)();
     const { isClientSideRendering, isRendering } = (0, use_remotion_environment_js_1.useRemotionEnvironment)();
     const canRetryMissingPaintRecord = !isRendering || isClientSideRendering;
     const usesDirectLayoutCanvas = onPaint === undefined && onInit === undefined;
@@ -144,7 +143,7 @@ const HtmlInCanvasContent = (0, react_1.forwardRef)(({ width, height, effects, c
             if (!placeholderCanvas) {
                 throw new Error('Canvas not found');
             }
-            const handle = (0, delay_render_js_1.delayRender)('onPaint');
+            const handle = delayRender('onPaint');
             if (!initializedRef.current) {
                 const currentOnInit = onInitRef.current;
                 if (!currentOnInit) {
@@ -265,6 +264,7 @@ const HtmlInCanvasContent = (0, react_1.forwardRef)(({ width, height, effects, c
         chainState,
         continueRender,
         cancelRender,
+        delayRender,
         resolvedPixelDensity,
         canRetryMissingPaintRecord,
     ]);
@@ -323,14 +323,14 @@ const HtmlInCanvasContent = (0, react_1.forwardRef)(({ width, height, effects, c
         if (!canvas) {
             return;
         }
-        const handle = (0, delay_render_js_1.delayRender)('waiting for first paint after canvas resize');
+        const handle = delayRender('waiting for first paint after canvas resize');
         canvas.addEventListener('paint', () => {
             continueRender(handle);
         }, { once: true });
         return () => {
             continueRender(handle);
         };
-    }, [width, height, continueRender, canvasSizeKey]);
+    }, [width, height, continueRender, delayRender, canvasSizeKey]);
     const innerStyle = (0, react_1.useMemo)(() => {
         return {
             width,
@@ -382,6 +382,8 @@ exports.htmlInCanvasSchema = {
         hiddenFromList: false,
     },
     ...interactivity_schema_js_1.transformSchema,
+    ...interactivity_schema_js_1.backgroundSchema,
+    ...interactivity_schema_js_1.borderSchema,
 };
 const HtmlInCanvasWrapped = (0, with_interactivity_schema_js_1.withInteractivitySchema)({
     Component: HtmlInCanvasInner,

package/dist/cjs/Img.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
 import type { EffectsProp } from './effects/effect-types.js';
-import type { InteractiveBaseProps } from './Interactive.js';
+import type { InteractiveBaseProps, InteractivePremountProps } from './Interactive.js';
 type NativeImgProps = Omit<React.DetailedHTMLProps<React.ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>, 'src'>;
 export type ImgProps = NativeImgProps & {
     readonly maxRetries?: number;
@@ -16,7 +16,7 @@ export type ImgProps = NativeImgProps & {
      * @deprecated For internal use only
      */
     readonly stack?: string;
-} & InteractiveBaseProps;
+} & InteractiveBaseProps & InteractivePremountProps;
 export declare const imgSchema: {
     readonly 'style.transformOrigin': {
         readonly type: "transform-origin";
@@ -53,6 +53,58 @@ export declare const imgSchema: {
         readonly description: "Opacity";
         readonly hiddenFromList: false;
     };
+    readonly 'style.borderWidth': {
+        readonly type: "number";
+        readonly default: undefined;
+        readonly min: 0;
+        readonly step: 1;
+        readonly description: "Border width";
+        readonly hiddenFromList: false;
+    };
+    readonly 'style.borderStyle': {
+        readonly type: "enum";
+        readonly default: "none";
+        readonly description: "Border style";
+        readonly variants: {
+            readonly none: {};
+            readonly hidden: {};
+            readonly solid: {};
+            readonly dashed: {};
+            readonly dotted: {};
+            readonly double: {};
+            readonly groove: {};
+            readonly ridge: {};
+            readonly inset: {};
+            readonly outset: {};
+        };
+    };
+    readonly 'style.borderColor': {
+        readonly type: "color";
+        readonly default: undefined;
+        readonly description: "Border color";
+    };
+    readonly 'style.backgroundColor': {
+        readonly type: "color";
+        readonly default: "transparent";
+        readonly description: "Color";
+    };
+    readonly premountFor: {
+        readonly type: "number";
+        readonly default: 0;
+        readonly description: "Premount For";
+        readonly min: 0;
+        readonly step: 1;
+        readonly hiddenFromList: false;
+        readonly keyframable: false;
+    };
+    readonly postmountFor: {
+        readonly type: "number";
+        readonly default: 0;
+        readonly min: 0;
+        readonly step: 1;
+        readonly hiddenFromList: true;
+        readonly keyframable: false;
+    };
     readonly durationInFrames: {
         readonly type: "number";
         readonly default: undefined;
@@ -103,5 +155,5 @@ export declare const Img: React.ComponentType<NativeImgProps & {
      * @deprecated For internal use only
      */
     readonly stack?: string | undefined;
-} & InteractiveBaseProps>;
+} & InteractiveBaseProps & InteractivePremountProps>;
 export {};

package/dist/cjs/Img.js

@@ -5,6 +5,7 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const index_js_1 = require("./canvas-image/index.js");
 const enable_sequence_stack_traces_js_1 = require("./enable-sequence-stack-traces.js");
+const freeze_js_1 = require("./freeze.js");
 const get_cross_origin_value_js_1 = require("./get-cross-origin-value.js");
 const interactivity_schema_js_1 = require("./interactivity-schema.js");
 const prefetch_js_1 = require("./prefetch.js");
@@ -13,6 +14,7 @@ const SequenceContext_js_1 = require("./SequenceContext.js");
 const truncate_src_for_label_js_1 = require("./truncate-src-for-label.js");
 const use_buffer_state_js_1 = require("./use-buffer-state.js");
 const use_delay_render_js_1 = require("./use-delay-render.js");
+const use_premounting_js_1 = require("./use-premounting.js");
 const use_remotion_environment_js_1 = require("./use-remotion-environment.js");
 const with_interactivity_schema_js_1 = require("./with-interactivity-schema.js");
 function exponentialBackoff(errorCount) {
@@ -192,11 +194,21 @@ const ImgContent = ({ onError, maxRetries = 2, src, pauseWhenLoading, delayRende
     // blocks frame rendering.
     return (jsx_runtime_1.jsx("img", { ...props, ref: imageCallbackRef, crossOrigin: crossOriginValue, onError: didGetError, decoding: isRendering ? 'sync' : decoding }));
 };
-const NativeImgInner = ({ hidden, name, stack, showInTimeline, src, from, trimBefore, durationInFrames, freeze, controls, outlineRef: refForOutline, ...props }) => {
+const NativeImgInner = ({ hidden, name, stack, showInTimeline, src, from, trimBefore, durationInFrames, freeze, premountFor, postmountFor, style, styleWhilePremounted, styleWhilePostmounted, controls, outlineRef: refForOutline, ...props }) => {
     if (!src) {
         throw new Error('No "src" prop was passed to <Img>.');
     }
-    return (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, _remotionInternalStack: stack, _remotionInternalDocumentationLink: "https://www.remotion.dev/docs/img", _remotionInternalIsMedia: { type: 'image', src }, 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, ...props }) }));
+    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,
+        premountFor: premountFor !== null && premountFor !== void 0 ? premountFor : null,
+        postmountFor: postmountFor !== null && postmountFor !== void 0 ? postmountFor : null,
+        style: style !== null && style !== void 0 ? style : null,
+        styleWhilePremounted: styleWhilePremounted !== null && styleWhilePremounted !== void 0 ? styleWhilePremounted : null,
+        styleWhilePostmounted: styleWhilePostmounted !== null && styleWhilePostmounted !== void 0 ? styleWhilePostmounted : null,
+        hideWhilePremounted: 'display-none',
+    });
+    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, _remotionInternalStack: stack, _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: premountingStyle !== null && premountingStyle !== void 0 ? premountingStyle : undefined, ...props }) }) }));
 };
 const CanvasImageWithPrivateProps = index_js_1.CanvasImage;
 exports.imgSchema = {
@@ -207,7 +219,10 @@ exports.imgSchema = {
         keyframable: false,
     },
     ...interactivity_schema_js_1.baseSchema,
+    ...interactivity_schema_js_1.premountSchema,
     ...interactivity_schema_js_1.transformSchema,
+    ...interactivity_schema_js_1.backgroundSchema,
+    ...interactivity_schema_js_1.borderSchema,
 };
 const imgCanvasFallbackIncompatibleProps = new Set([
     'alt',
@@ -248,11 +263,11 @@ const getFitFromObjectFit = (style) => {
     }
     return undefined;
 };
-const ImgInner = ({ effects = [], ref, hidden, name, stack, showInTimeline, src, from, trimBefore, durationInFrames, freeze, controls, width, height, className, style, id, pauseWhenLoading, maxRetries, delayRenderRetries, delayRenderTimeoutInMilliseconds, ...props }) => {
+const ImgInner = ({ effects = [], ref, hidden, name, stack, showInTimeline, src, from, trimBefore, durationInFrames, freeze, premountFor, postmountFor, styleWhilePremounted, styleWhilePostmounted, controls, width, height, className, style, id, pauseWhenLoading, maxRetries, delayRenderRetries, delayRenderTimeoutInMilliseconds, ...props }) => {
     var _a;
     const refForOutline = (0, react_1.useRef)(null);
     if (effects.length === 0) {
-        return (jsx_runtime_1.jsx(NativeImgInner, { ...props, ref: ref, hidden: hidden, name: name, stack: stack, showInTimeline: showInTimeline, src: src, from: from, trimBefore: trimBefore, durationInFrames: durationInFrames, freeze: freeze, controls: controls, width: width, height: height, className: className, style: style, id: id, pauseWhenLoading: pauseWhenLoading, maxRetries: maxRetries, delayRenderRetries: delayRenderRetries, delayRenderTimeoutInMilliseconds: delayRenderTimeoutInMilliseconds, outlineRef: refForOutline }));
+        return (jsx_runtime_1.jsx(NativeImgInner, { ...props, ref: ref, hidden: hidden, name: name, stack: stack, 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, id: id, pauseWhenLoading: pauseWhenLoading, maxRetries: maxRetries, delayRenderRetries: delayRenderRetries, delayRenderTimeoutInMilliseconds: delayRenderTimeoutInMilliseconds, outlineRef: refForOutline }));
     }
     if (!src) {
         throw new Error('No "src" prop was passed to <Img>.');
@@ -267,7 +282,7 @@ const ImgInner = ({ effects = [], ref, hidden, name, stack, showInTimeline, src,
     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, id: id, pauseWhenLoading: pauseWhenLoading, maxRetries: maxRetries, delayRenderRetries: delayRenderRetries, delayRenderTimeoutInMilliseconds: delayRenderTimeoutInMilliseconds, from: from, trimBefore: trimBefore, durationInFrames: durationInFrames, freeze: freeze, hidden: hidden, name: name !== null && name !== void 0 ? name : '<Img>', showInTimeline: showInTimeline, stack: stack, _remotionInternalDocumentationLink: "https://www.remotion.dev/docs/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, id: id, pauseWhenLoading: pauseWhenLoading, 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, stack: stack, _remotionInternalDocumentationLink: "https://www.remotion.dev/docs/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

@@ -167,6 +167,45 @@ export declare const Interactive: {
             readonly hiddenFromList: false;
         };
     };
+    backgroundSchema: {
+        readonly 'style.backgroundColor': {
+            readonly type: "color";
+            readonly default: "transparent";
+            readonly description: "Color";
+        };
+    };
+    borderSchema: {
+        readonly 'style.borderWidth': {
+            readonly type: "number";
+            readonly default: undefined;
+            readonly min: 0;
+            readonly step: 1;
+            readonly description: "Border width";
+            readonly hiddenFromList: false;
+        };
+        readonly 'style.borderStyle': {
+            readonly type: "enum";
+            readonly default: "none";
+            readonly description: "Border style";
+            readonly variants: {
+                readonly none: {};
+                readonly hidden: {};
+                readonly solid: {};
+                readonly dashed: {};
+                readonly dotted: {};
+                readonly double: {};
+                readonly groove: {};
+                readonly ridge: {};
+                readonly inset: {};
+                readonly outset: {};
+            };
+        };
+        readonly 'style.borderColor': {
+            readonly type: "color";
+            readonly default: undefined;
+            readonly description: "Border color";
+        };
+    };
     premountSchema: {
         readonly premountFor: {
             readonly type: "number";
@@ -257,6 +296,41 @@ export declare const Interactive: {
                         readonly description: "Opacity";
                         readonly hiddenFromList: false;
                     };
+                    readonly 'style.borderWidth': {
+                        readonly type: "number";
+                        readonly default: undefined;
+                        readonly min: 0;
+                        readonly step: 1;
+                        readonly description: "Border width";
+                        readonly hiddenFromList: false;
+                    };
+                    readonly 'style.borderStyle': {
+                        readonly type: "enum";
+                        readonly default: "none";
+                        readonly description: "Border style";
+                        readonly variants: {
+                            readonly none: {};
+                            readonly hidden: {};
+                            readonly solid: {};
+                            readonly dashed: {};
+                            readonly dotted: {};
+                            readonly double: {};
+                            readonly groove: {};
+                            readonly ridge: {};
+                            readonly inset: {};
+                            readonly outset: {};
+                        };
+                    };
+                    readonly 'style.borderColor': {
+                        readonly type: "color";
+                        readonly default: undefined;
+                        readonly description: "Border color";
+                    };
+                    readonly 'style.backgroundColor': {
+                        readonly type: "color";
+                        readonly default: "transparent";
+                        readonly description: "Color";
+                    };
                     readonly premountFor: {
                         readonly type: "number";
                         readonly default: 0;
@@ -274,12 +348,6 @@ export declare const Interactive: {
                         readonly hiddenFromList: true;
                         readonly keyframable: false;
                     };
-                    readonly styleWhilePremounted: {
-                        readonly type: "hidden";
-                    };
-                    readonly styleWhilePostmounted: {
-                        readonly type: "hidden";
-                    };
                 };
                 readonly none: {};
             };

package/dist/cjs/Interactive.js

@@ -59,7 +59,20 @@ const interactiveElementSchema = {
     ...interactivity_schema_js_1.baseSchema,
     ...interactivity_schema_js_1.transformSchema,
 };
+const interactiveBackgroundElementSchema = {
+    ...interactiveElementSchema,
+    ...interactivity_schema_js_1.backgroundSchema,
+};
+const interactiveBorderElementSchema = {
+    ...interactiveBackgroundElementSchema,
+    ...interactivity_schema_js_1.borderSchema,
+};
 const interactiveTextElementSchema = {
+    ...interactiveBorderElementSchema,
+    ...interactivity_schema_js_1.textSchema,
+    ...interactivity_schema_js_1.textContentSchema,
+};
+const interactiveSvgTextElementSchema = {
     ...interactiveElementSchema,
     ...interactivity_schema_js_1.textSchema,
     ...interactivity_schema_js_1.textContentSchema,
@@ -117,6 +130,8 @@ exports.Interactive = {
     baseSchema: interactivity_schema_js_1.baseSchema,
     transformSchema: interactivity_schema_js_1.transformSchema,
     textSchema: interactivity_schema_js_1.textSchema,
+    backgroundSchema: interactivity_schema_js_1.backgroundSchema,
+    borderSchema: interactivity_schema_js_1.borderSchema,
     premountSchema: interactivity_schema_js_1.premountSchema,
     sequenceSchema: interactivity_schema_js_1.sequenceSchema,
     withSchema,
@@ -153,7 +168,7 @@ exports.Interactive = {
     Small: makeInteractiveTextElement('small', '<Interactive.Small>'),
     Span: makeInteractiveTextElement('span', '<Interactive.Span>'),
     Strong: makeInteractiveTextElement('strong', '<Interactive.Strong>'),
-    Svg: makeInteractiveNonTextElement('svg', '<Interactive.Svg>'),
-    Text: makeInteractiveTextElement('text', '<Interactive.Text>'),
+    Svg: makeInteractiveElement('svg', '<Interactive.Svg>', interactiveBorderElementSchema),
+    Text: makeInteractiveElement('text', '<Interactive.Text>', interactiveSvgTextElementSchema),
     Ul: makeInteractiveTextElement('ul', '<Interactive.Ul>'),
 };

package/dist/cjs/animated-image/AnimatedImage.d.ts

@@ -1,7 +1,141 @@
 import type React from 'react';
 import type { SequenceControls } from '../CompositionManager.js';
 import type { EffectsProp } from '../effects/effect-types.js';
-export declare const AnimatedImage: React.ComponentType<import("../Interactive.js").InteractiveBaseProps & {
+export declare const animatedImageSchema: {
+    readonly 'style.transformOrigin': {
+        readonly type: "transform-origin";
+        readonly step: 1;
+        readonly default: "50% 50%";
+        readonly description: "Transform origin";
+    };
+    readonly 'style.translate': {
+        readonly type: "translate";
+        readonly step: 1;
+        readonly default: "0px 0px";
+        readonly description: "Offset";
+    };
+    readonly 'style.scale': {
+        readonly type: "scale";
+        readonly max: 100;
+        readonly step: 0.01;
+        readonly default: 1;
+        readonly description: "Scale";
+        readonly defaultKeyframeOutput: "perceptual-scale";
+    };
+    readonly 'style.rotate': {
+        readonly type: "rotation-css";
+        readonly step: 1;
+        readonly default: "0deg";
+        readonly description: "Rotation";
+    };
+    readonly 'style.opacity': {
+        readonly type: "number";
+        readonly min: 0;
+        readonly max: 1;
+        readonly step: 0.01;
+        readonly default: 1;
+        readonly description: "Opacity";
+        readonly hiddenFromList: false;
+    };
+    readonly 'style.borderWidth': {
+        readonly type: "number";
+        readonly default: undefined;
+        readonly min: 0;
+        readonly step: 1;
+        readonly description: "Border width";
+        readonly hiddenFromList: false;
+    };
+    readonly 'style.borderStyle': {
+        readonly type: "enum";
+        readonly default: "none";
+        readonly description: "Border style";
+        readonly variants: {
+            readonly none: {};
+            readonly hidden: {};
+            readonly solid: {};
+            readonly dashed: {};
+            readonly dotted: {};
+            readonly double: {};
+            readonly groove: {};
+            readonly ridge: {};
+            readonly inset: {};
+            readonly outset: {};
+        };
+    };
+    readonly 'style.borderColor': {
+        readonly type: "color";
+        readonly default: undefined;
+        readonly description: "Border color";
+    };
+    readonly 'style.backgroundColor': {
+        readonly type: "color";
+        readonly default: "transparent";
+        readonly description: "Color";
+    };
+    readonly premountFor: {
+        readonly type: "number";
+        readonly default: 0;
+        readonly description: "Premount For";
+        readonly min: 0;
+        readonly step: 1;
+        readonly hiddenFromList: false;
+        readonly keyframable: false;
+    };
+    readonly postmountFor: {
+        readonly type: "number";
+        readonly default: 0;
+        readonly min: 0;
+        readonly step: 1;
+        readonly hiddenFromList: true;
+        readonly keyframable: false;
+    };
+    readonly durationInFrames: {
+        readonly type: "number";
+        readonly default: undefined;
+        readonly min: 1;
+        readonly step: 1;
+        readonly hiddenFromList: true;
+    };
+    readonly from: {
+        readonly type: "number";
+        readonly default: 0;
+        readonly step: 1;
+        readonly hiddenFromList: true;
+    };
+    readonly trimBefore: {
+        readonly type: "number";
+        readonly default: 0;
+        readonly min: 0;
+        readonly step: 1;
+        readonly hiddenFromList: true;
+    };
+    readonly freeze: {
+        readonly type: "number";
+        readonly default: null;
+        readonly step: 1;
+        readonly hiddenFromList: true;
+    };
+    readonly hidden: import("../interactivity-schema.js").BooleanFieldSchema;
+    readonly name: import("../interactivity-schema.js").HiddenFieldSchema;
+    readonly showInTimeline: import("../interactivity-schema.js").HiddenFieldSchema;
+    readonly src: {
+        readonly type: "asset";
+        readonly default: undefined;
+        readonly description: "Source";
+        readonly keyframable: false;
+    };
+    readonly playbackRate: {
+        readonly type: "number";
+        readonly min: 0;
+        readonly max: 10;
+        readonly step: 0.1;
+        readonly default: 1;
+        readonly description: "Playback rate";
+        readonly hiddenFromList: false;
+        readonly keyframable: false;
+    };
+};
+export declare const AnimatedImage: React.ComponentType<import("../Interactive.js").InteractiveBaseProps & import("../Interactive.js").InteractivePremountProps & {
     src: string;
     width?: number | undefined;
     height?: number | undefined;