remotion 4.0.474 → 4.0.476

package/dist/cjs/HtmlInCanvas.js

@@ -290,9 +290,7 @@ const HtmlInCanvasInner = (0, react_1.forwardRef)(({ width, height, effects = []
                 node;
         }
     }, [ref]);
-    return (jsx_runtime_1.jsx(Sequence_js_1.Sequence, { durationInFrames: resolvedDuration, name: name !== null && name !== void 0 ? name : '<HtmlInCanvas>', _remotionInternalDocumentationLink: name === undefined
-            ? 'https://www.remotion.dev/docs/remotion/html-in-canvas'
-            : undefined, _experimentalControls: controls, _remotionInternalEffects: memoizedEffectDefinitions, _remotionInternalRefForOutline: actualRef, layout: "none", ...sequenceProps, children: jsx_runtime_1.jsx(HtmlInCanvasContent, { ref: setCanvasRef, width: width, height: height, effects: effects, onPaint: onPaint, onInit: onInit, pixelDensity: pixelDensity, controls: controls, style: style, children: children }) }));
+    return (jsx_runtime_1.jsx(Sequence_js_1.Sequence, { durationInFrames: resolvedDuration, name: name !== null && name !== void 0 ? name : '<HtmlInCanvas>', _remotionInternalDocumentationLink: "https://www.remotion.dev/docs/remotion/html-in-canvas", _experimentalControls: controls, _remotionInternalEffects: memoizedEffectDefinitions, _remotionInternalRefForOutline: actualRef, layout: "none", ...sequenceProps, children: jsx_runtime_1.jsx(HtmlInCanvasContent, { ref: setCanvasRef, width: width, height: height, effects: effects, onPaint: onPaint, onInit: onInit, pixelDensity: pixelDensity, controls: controls, style: style, children: children }) }));
 });
 HtmlInCanvasInner.displayName = 'HtmlInCanvas';
 const htmlInCanvasSchema = {

package/dist/cjs/Img.d.ts

@@ -18,6 +18,12 @@ export type ImgProps = NativeImgProps & {
     readonly stack?: string;
 } & Pick<SequenceProps, 'durationInFrames' | 'from' | 'hidden'>;
 export declare const imgSchema: {
+    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;

package/dist/cjs/Img.js

@@ -187,7 +187,7 @@ const NativeImgInner = ({ hidden, name, stack, showInTimeline, src, from, durati
     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, durationInFrames: durationInFrames !== null && durationInFrames !== void 0 ? durationInFrames : Infinity, _remotionInternalStack: stack, _remotionInternalDocumentationLink: name === undefined ? 'https://www.remotion.dev/docs/img' : undefined, _remotionInternalIsMedia: { type: 'image', src }, name: name !== null && name !== void 0 ? name : '<Img>', _experimentalControls: controls, showInTimeline: showInTimeline !== null && showInTimeline !== void 0 ? showInTimeline : true, hidden: hidden, _remotionInternalRefForOutline: refForOutline, children: jsx_runtime_1.jsx(ImgContent, { src: src, refForOutline: refForOutline, ...props }) }));
+    return (jsx_runtime_1.jsx(Sequence_js_1.Sequence, { layout: "none", from: from !== null && from !== void 0 ? from : 0, durationInFrames: durationInFrames !== null && durationInFrames !== void 0 ? durationInFrames : Infinity, _remotionInternalStack: stack, _remotionInternalDocumentationLink: "https://www.remotion.dev/docs/img", _remotionInternalIsMedia: { type: 'image', src }, name: name !== null && name !== void 0 ? name : '<Img>', _experimentalControls: controls, showInTimeline: showInTimeline !== null && showInTimeline !== void 0 ? showInTimeline : true, hidden: hidden, _remotionInternalRefForOutline: refForOutline, children: jsx_runtime_1.jsx(ImgContent, { src: src, refForOutline: refForOutline, ...props }) }));
 };
 const CanvasImageWithPrivateProps = index_js_1.CanvasImage;
 exports.imgSchema = {
@@ -254,7 +254,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, durationInFrames: durationInFrames, hidden: hidden, name: name !== null && name !== void 0 ? name : '<Img>', showInTimeline: showInTimeline, stack: stack, _remotionInternalDocumentationLink: name === undefined ? 'https://www.remotion.dev/docs/img' : undefined, _experimentalControls: controls, _remotionInternalRefForOutline: 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, durationInFrames: durationInFrames, hidden: hidden, name: name !== null && name !== void 0 ? name : '<Img>', showInTimeline: showInTimeline, stack: stack, _remotionInternalDocumentationLink: "https://www.remotion.dev/docs/img", _experimentalControls: controls, _remotionInternalRefForOutline: 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

@@ -0,0 +1,56 @@
+import React from 'react';
+import type { SequenceProps } from './Sequence.js';
+type InteractiveHtmlTag = 'a' | 'article' | 'aside' | 'button' | 'code' | 'div' | 'em' | 'footer' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'header' | 'label' | 'li' | 'main' | 'nav' | 'ol' | 'p' | 'pre' | 'section' | 'small' | 'span' | 'strong' | 'ul';
+type InteractiveSvgTag = 'circle' | 'ellipse' | 'g' | 'line' | 'path' | 'rect' | 'svg' | 'text';
+type InteractiveTag = InteractiveHtmlTag | InteractiveSvgTag;
+type ElementForTag<Tag extends InteractiveTag> = Tag extends keyof HTMLElementTagNameMap ? HTMLElementTagNameMap[Tag] : Tag extends keyof SVGElementTagNameMap ? SVGElementTagNameMap[Tag] : Element;
+type InteractiveSequenceProps = Pick<SequenceProps, 'durationInFrames' | 'from' | 'hidden' | 'name' | 'showInTimeline'> & {
+    /**
+     * @deprecated For internal use only
+     */
+    readonly stack?: string;
+};
+type InteractiveElementProps<Tag extends InteractiveTag> = Omit<React.ComponentPropsWithoutRef<Tag>, keyof InteractiveSequenceProps> & InteractiveSequenceProps;
+type InteractiveElementComponent<Tag extends InteractiveTag> = React.ComponentType<InteractiveElementProps<Tag> & React.RefAttributes<ElementForTag<Tag>>>;
+/**
+ * @description HTML and SVG elements that are registered in the Remotion Studio timeline and can be visually edited.
+ */
+export declare const Interactive: {
+    A: InteractiveElementComponent<"a">;
+    Article: InteractiveElementComponent<"article">;
+    Aside: InteractiveElementComponent<"aside">;
+    Button: InteractiveElementComponent<"button">;
+    Circle: InteractiveElementComponent<"circle">;
+    Code: InteractiveElementComponent<"code">;
+    Div: InteractiveElementComponent<"div">;
+    Ellipse: InteractiveElementComponent<"ellipse">;
+    Em: InteractiveElementComponent<"em">;
+    Footer: InteractiveElementComponent<"footer">;
+    G: InteractiveElementComponent<"g">;
+    H1: InteractiveElementComponent<"h1">;
+    H2: InteractiveElementComponent<"h2">;
+    H3: InteractiveElementComponent<"h3">;
+    H4: InteractiveElementComponent<"h4">;
+    H5: InteractiveElementComponent<"h5">;
+    H6: InteractiveElementComponent<"h6">;
+    Header: InteractiveElementComponent<"header">;
+    Label: InteractiveElementComponent<"label">;
+    Li: InteractiveElementComponent<"li">;
+    Line: InteractiveElementComponent<"line">;
+    Main: InteractiveElementComponent<"main">;
+    Nav: InteractiveElementComponent<"nav">;
+    Ol: InteractiveElementComponent<"ol">;
+    P: InteractiveElementComponent<"p">;
+    Path: InteractiveElementComponent<"path">;
+    Pre: InteractiveElementComponent<"pre">;
+    Rect: InteractiveElementComponent<"rect">;
+    Section: InteractiveElementComponent<"section">;
+    Small: InteractiveElementComponent<"small">;
+    Span: InteractiveElementComponent<"span">;
+    Strong: InteractiveElementComponent<"strong">;
+    Svg: InteractiveElementComponent<"svg">;
+    Text: InteractiveElementComponent<"text">;
+    Ul: InteractiveElementComponent<"ul">;
+};
+export type InteractiveProps<Tag extends InteractiveTag> = InteractiveElementProps<Tag>;
+export {};

package/dist/cjs/Interactive.js

@@ -0,0 +1,119 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Interactive = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = __importStar(require("react"));
+const enable_sequence_stack_traces_js_1 = require("./enable-sequence-stack-traces.js");
+const sequence_field_schema_js_1 = require("./sequence-field-schema.js");
+const Sequence_js_1 = require("./Sequence.js");
+const wrap_in_schema_js_1 = require("./wrap-in-schema.js");
+const interactiveElementSchema = {
+    durationInFrames: sequence_field_schema_js_1.durationInFramesField,
+    from: sequence_field_schema_js_1.fromField,
+    ...sequence_field_schema_js_1.sequenceVisualStyleSchema,
+    hidden: sequence_field_schema_js_1.hiddenField,
+};
+const setRef = (ref, value) => {
+    if (typeof ref === 'function') {
+        ref(value);
+    }
+    else if (ref) {
+        ref.current = value;
+    }
+};
+const makeInteractiveElement = (tag, displayName) => {
+    const Inner = (0, react_1.forwardRef)((propsWithControls, ref) => {
+        const { durationInFrames, from, hidden, name, showInTimeline, stack, _experimentalControls, ...props } = propsWithControls;
+        const refForOutline = (0, react_1.useRef)(null);
+        const callbackRef = (0, react_1.useCallback)((element) => {
+            refForOutline.current = element;
+            setRef(ref, element);
+        }, [ref]);
+        return (jsx_runtime_1.jsx(Sequence_js_1.Sequence, { layout: "none", from: from !== null && from !== void 0 ? from : 0, durationInFrames: durationInFrames !== null && durationInFrames !== void 0 ? durationInFrames : Infinity, hidden: hidden, name: name !== null && name !== void 0 ? name : displayName, showInTimeline: showInTimeline !== null && showInTimeline !== void 0 ? showInTimeline : true, _experimentalControls: _experimentalControls, _remotionInternalStack: stack, _remotionInternalDocumentationLink: "https://www.remotion.dev/docs/interactive", _remotionInternalRefForOutline: refForOutline, children: react_1.default.createElement(tag, {
+                ...props,
+                ref: callbackRef,
+            }) }));
+    });
+    Inner.displayName = displayName;
+    const Wrapped = (0, wrap_in_schema_js_1.wrapInSchema)({
+        Component: Inner,
+        schema: interactiveElementSchema,
+        supportsEffects: false,
+    });
+    Wrapped.displayName = displayName;
+    (0, enable_sequence_stack_traces_js_1.addSequenceStackTraces)(Wrapped);
+    return Wrapped;
+};
+/**
+ * @description HTML and SVG elements that are registered in the Remotion Studio timeline and can be visually edited.
+ */
+exports.Interactive = {
+    A: makeInteractiveElement('a', '<Interactive.A>'),
+    Article: makeInteractiveElement('article', '<Interactive.Article>'),
+    Aside: makeInteractiveElement('aside', '<Interactive.Aside>'),
+    Button: makeInteractiveElement('button', '<Interactive.Button>'),
+    Circle: makeInteractiveElement('circle', '<Interactive.Circle>'),
+    Code: makeInteractiveElement('code', '<Interactive.Code>'),
+    Div: makeInteractiveElement('div', '<Interactive.Div>'),
+    Ellipse: makeInteractiveElement('ellipse', '<Interactive.Ellipse>'),
+    Em: makeInteractiveElement('em', '<Interactive.Em>'),
+    Footer: makeInteractiveElement('footer', '<Interactive.Footer>'),
+    G: makeInteractiveElement('g', '<Interactive.G>'),
+    H1: makeInteractiveElement('h1', '<Interactive.H1>'),
+    H2: makeInteractiveElement('h2', '<Interactive.H2>'),
+    H3: makeInteractiveElement('h3', '<Interactive.H3>'),
+    H4: makeInteractiveElement('h4', '<Interactive.H4>'),
+    H5: makeInteractiveElement('h5', '<Interactive.H5>'),
+    H6: makeInteractiveElement('h6', '<Interactive.H6>'),
+    Header: makeInteractiveElement('header', '<Interactive.Header>'),
+    Label: makeInteractiveElement('label', '<Interactive.Label>'),
+    Li: makeInteractiveElement('li', '<Interactive.Li>'),
+    Line: makeInteractiveElement('line', '<Interactive.Line>'),
+    Main: makeInteractiveElement('main', '<Interactive.Main>'),
+    Nav: makeInteractiveElement('nav', '<Interactive.Nav>'),
+    Ol: makeInteractiveElement('ol', '<Interactive.Ol>'),
+    P: makeInteractiveElement('p', '<Interactive.P>'),
+    Path: makeInteractiveElement('path', '<Interactive.Path>'),
+    Pre: makeInteractiveElement('pre', '<Interactive.Pre>'),
+    Rect: makeInteractiveElement('rect', '<Interactive.Rect>'),
+    Section: makeInteractiveElement('section', '<Interactive.Section>'),
+    Small: makeInteractiveElement('small', '<Interactive.Small>'),
+    Span: makeInteractiveElement('span', '<Interactive.Span>'),
+    Strong: makeInteractiveElement('strong', '<Interactive.Strong>'),
+    Svg: makeInteractiveElement('svg', '<Interactive.Svg>'),
+    Text: makeInteractiveElement('text', '<Interactive.Text>'),
+    Ul: makeInteractiveElement('ul', '<Interactive.Ul>'),
+};

package/dist/cjs/Sequence.js

@@ -20,7 +20,7 @@ const v5_flag_js_1 = require("./v5-flag.js");
 const wrap_in_schema_js_1 = require("./wrap-in-schema.js");
 const EMPTY_EFFECTS = [];
 const RegularSequenceRefForwardingFunction = ({ from = 0, durationInFrames = Infinity, children, name, height, width, showInTimeline = true, hidden = false, _experimentalControls: controls, _remotionInternalEffects, _remotionInternalLoopDisplay: loopDisplay, _remotionInternalStack: stack, _remotionInternalDocumentationLink: documentationLink, _remotionInternalPremountDisplay: premountDisplay, _remotionInternalPostmountDisplay: postmountDisplay, _remotionInternalIsMedia: isMedia, _remotionInternalRefForOutline: refForOutline, ...other }, ref) => {
-    var _a;
+    var _a, _b;
     const { layout = 'absolute-fill' } = other;
     const [id] = (0, react_1.useState)(() => String(Math.random()));
     const parentSequence = (0, react_1.useContext)(SequenceContext_js_1.SequenceContext);
@@ -28,6 +28,7 @@ const RegularSequenceRefForwardingFunction = ({ from = 0, durationInFrames = Inf
     const cumulatedFrom = parentSequence
         ? parentSequence.cumulatedFrom + parentSequence.relativeFrom
         : 0;
+    const absoluteFrom = ((_a = parentSequence === null || parentSequence === void 0 ? void 0 : parentSequence.absoluteFrom) !== null && _a !== void 0 ? _a : 0) + from;
     const nonce = (0, nonce_js_1.useNonce)();
     if (layout !== 'absolute-fill' && layout !== 'none') {
         throw new TypeError(`The layout prop of <Sequence /> expects either "absolute-fill" or "none", but you passed: ${layout}`);
@@ -92,6 +93,7 @@ const RegularSequenceRefForwardingFunction = ({ from = 0, durationInFrames = Inf
     const contextValue = (0, react_1.useMemo)(() => {
         var _a, _b, _c;
         return {
+            absoluteFrom,
             cumulatedFrom,
             relativeFrom: from,
             cumulatedNegativeFrom,
@@ -107,6 +109,7 @@ const RegularSequenceRefForwardingFunction = ({ from = 0, durationInFrames = Inf
         };
     }, [
         cumulatedFrom,
+        absoluteFrom,
         from,
         actualDurationInFrames,
         parentSequence,
@@ -122,10 +125,10 @@ const RegularSequenceRefForwardingFunction = ({ from = 0, durationInFrames = Inf
     const timelineClipName = (0, react_1.useMemo)(() => {
         return name !== null && name !== void 0 ? name : '';
     }, [name]);
-    const resolvedDocumentationLink = documentationLink !== null && documentationLink !== void 0 ? documentationLink : (name === undefined ? 'https://www.remotion.dev/docs/sequence' : null);
+    const resolvedDocumentationLink = documentationLink !== null && documentationLink !== void 0 ? documentationLink : 'https://www.remotion.dev/docs/sequence';
     const env = (0, use_remotion_environment_js_1.useRemotionEnvironment)();
     const isInsideSeries = (0, react_1.useContext)(is_inside_series_js_1.IsInsideSeriesContext);
-    const inheritedStack = (_a = other === null || other === void 0 ? void 0 : other.stack) !== null && _a !== void 0 ? _a : null;
+    const inheritedStack = (_b = other === null || other === void 0 ? void 0 : other.stack) !== null && _b !== void 0 ? _b : null;
     // Our assumption: Stack doesnt' change. After we symbolicate we assign it a nodePath
     // and if it changes, it would lead to-remounting of the sequence.
     const stackRef = (0, react_1.useRef)(null);

package/dist/cjs/SequenceContext.d.ts

@@ -1,5 +1,6 @@
 export declare const SequenceContext: import("react").Context<SequenceContextType | null>;
 export type SequenceContextType = {
+    absoluteFrom: number;
     cumulatedFrom: number;
     cumulatedNegativeFrom: number;
     relativeFrom: number;

package/dist/cjs/animated-image/AnimatedImage.js

@@ -25,7 +25,7 @@ const animatedImageSchema = {
         max: 10,
         step: 0.1,
         default: 1,
-        description: 'Playback Rate',
+        description: 'Playback rate',
         hiddenFromList: false,
         keyframable: false,
     },

package/dist/cjs/audio/AudioForPreview.js

@@ -134,7 +134,7 @@ const AudioForDevelopmentForwardRefFunction = (props, ref) => {
         premountDisplay: (_a = sequenceContext === null || sequenceContext === void 0 ? void 0 : sequenceContext.premountDisplay) !== null && _a !== void 0 ? _a : null,
         postmountDisplay: (_b = sequenceContext === null || sequenceContext === void 0 ? void 0 : sequenceContext.postmountDisplay) !== null && _b !== void 0 ? _b : null,
         loopDisplay: undefined,
-        documentationLink: name === undefined ? 'https://www.remotion.dev/docs/html5-audio' : null,
+        documentationLink: 'https://www.remotion.dev/docs/html5-audio',
         refForOutline: null,
     });
     // putting playback before useVolume

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

@@ -2,6 +2,12 @@ import { type RefObject } from 'react';
 import type { EffectsProp } from '../effects/effect-types.js';
 import type { CanvasImageCanvasProps } from './props.js';
 export declare const canvasImageSchema: {
+    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;

package/dist/cjs/easing.d.ts

@@ -1,3 +1,5 @@
+import type { SpringConfig } from './spring/spring-utils.js';
+export type EasingSpringConfig = Partial<Pick<SpringConfig, 'damping' | 'mass' | 'stiffness' | 'overshootClamping'>>;
 /**
  * @description The Easing module implements common easing functions. You can use it with the interpolate() API.
  * @see [Documentation](https://www.remotion.dev/docs/easing)
@@ -15,6 +17,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 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

@@ -3,10 +3,12 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Easing = void 0;
 const bezier_js_1 = require("./bezier.js");
+const index_js_1 = require("./spring/index.js");
 // Some easing curves are only defined on [0, 1] (e.g. quarter circle, bounce segments).
 // `interpolate(..., { extrapolate: 'extend' })` can pass values outside that interval; clamp
 // there so we return endpoints instead of NaN or unintended extrapolation.
 const clampUnit = (t) => Math.min(1, Math.max(0, t));
+const springEasingDurationInFrames = 30;
 /**
  * @description The Easing module implements common easing functions. You can use it with the interpolate() API.
  * @see [Documentation](https://www.remotion.dev/docs/easing)
@@ -50,6 +52,22 @@ class Easing {
     static back(s = 1.70158) {
         return (t) => t * t * ((s + 1) * t - s);
     }
+    static spring(config = {}) {
+        return (t) => {
+            if (t <= 0) {
+                return 0;
+            }
+            if (t >= 1) {
+                return 1;
+            }
+            return (0, index_js_1.spring)({
+                fps: springEasingDurationInFrames,
+                frame: t * springEasingDurationInFrames,
+                config,
+                durationInFrames: springEasingDurationInFrames,
+            });
+        };
+    }
     static bounce(t) {
         const u = clampUnit(t);
         if (u < 1 / 2.75) {

package/dist/cjs/effects/Solid.js

@@ -148,7 +148,7 @@ const SolidOuter = (0, react_1.forwardRef)(({ effects = [], _experimentalControl
     (0, react_1.useImperativeHandle)(ref, () => {
         return actualRef.current;
     }, []);
-    return (jsx_runtime_1.jsx(Sequence_js_1.Sequence, { layout: "none", from: from, hidden: hidden, showInTimeline: showInTimeline, _experimentalControls: controls, _remotionInternalEffects: memoizedEffectDefinitions, durationInFrames: durationInFrames, name: name !== null && name !== void 0 ? name : '<Solid>', _remotionInternalRefForOutline: actualRef, _remotionInternalDocumentationLink: name === undefined ? 'https://www.remotion.dev/docs/solid' : undefined, ...props, children: jsx_runtime_1.jsx(SolidInner, { reference: actualRef, overrideId: (_a = controls === null || controls === void 0 ? void 0 : controls.overrideId) !== null && _a !== void 0 ? _a : null, color: color, height: height, width: width, className: className, style: style, effects: effects, pixelDensity: pixelDensity }) }));
+    return (jsx_runtime_1.jsx(Sequence_js_1.Sequence, { layout: "none", from: from, hidden: hidden, showInTimeline: showInTimeline, _experimentalControls: controls, _remotionInternalEffects: memoizedEffectDefinitions, durationInFrames: durationInFrames, name: name !== null && name !== void 0 ? name : '<Solid>', _remotionInternalRefForOutline: actualRef, _remotionInternalDocumentationLink: "https://www.remotion.dev/docs/solid", ...props, children: jsx_runtime_1.jsx(SolidInner, { reference: actualRef, overrideId: (_a = controls === null || controls === void 0 ? void 0 : controls.overrideId) !== null && _a !== void 0 ? _a : null, color: color, height: height, width: width, className: className, style: style, effects: effects, pixelDensity: pixelDensity }) }));
 });
 exports.Solid = (0, wrap_in_schema_js_1.wrapInSchema)({
     Component: SolidOuter,

package/dist/cjs/index.d.ts

@@ -127,6 +127,7 @@ export { getRemotionEnvironment } from './get-remotion-environment.js';
 export { getStaticFiles, StaticFile } from './get-static-files.js';
 export * from './IFrame.js';
 export { Img, ImgProps } from './Img.js';
+export { Interactive, type InteractiveProps } from './Interactive.js';
 export * from './internals.js';
 export { interpolateColors, type InterpolateColorsOptions, } from './interpolate-colors.js';
 export { LogLevel } from './log.js';

package/dist/cjs/index.js

@@ -14,7 +14,7 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
     for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Config = exports.Experimental = exports.watchStaticFile = exports.MediaPlaybackError = exports.Video = exports.OffthreadVideo = exports.Html5Video = exports.useRemotionEnvironment = exports.usePixelDensity = exports.useDelayRender = exports.useCurrentScale = exports.useCurrentFrame = exports.useBufferState = exports.staticFile = exports.Series = exports.Sequence = exports.registerRoot = exports.prefetch = exports.random = exports.interpolate = exports.assertValidInterpolatePosterizeOption = exports.assertValidInterpolateEasingOption = exports.Loop = exports.interpolateColors = exports.Img = exports.getStaticFiles = exports.getRemotionEnvironment = exports.delayRender = exports.continueRender = exports.getInputProps = exports.Composition = exports.CanvasImage = exports.isHtmlInCanvasSupported = exports.HtmlInCanvas = exports.HTML_IN_CANVAS_UNSUPPORTED_MESSAGE = exports.Solid = exports.cancelRender = exports.Html5Audio = exports.Audio = exports.Artifact = void 0;
+exports.Config = exports.Experimental = exports.watchStaticFile = exports.MediaPlaybackError = exports.Video = exports.OffthreadVideo = exports.Html5Video = exports.useRemotionEnvironment = exports.usePixelDensity = exports.useDelayRender = exports.useCurrentScale = exports.useCurrentFrame = exports.useBufferState = exports.staticFile = exports.Series = exports.Sequence = exports.registerRoot = exports.prefetch = exports.random = exports.interpolate = exports.assertValidInterpolatePosterizeOption = exports.assertValidInterpolateEasingOption = exports.Loop = exports.interpolateColors = exports.Interactive = exports.Img = exports.getStaticFiles = exports.getRemotionEnvironment = exports.delayRender = exports.continueRender = exports.getInputProps = exports.Composition = exports.CanvasImage = exports.isHtmlInCanvasSupported = exports.HtmlInCanvas = exports.HTML_IN_CANVAS_UNSUPPORTED_MESSAGE = exports.Solid = exports.cancelRender = exports.Html5Audio = exports.Audio = exports.Artifact = void 0;
 require("./_check-rsc.js");
 require("./asset-types.js");
 const Clipper_js_1 = require("./Clipper.js");
@@ -64,6 +64,8 @@ Object.defineProperty(exports, "getStaticFiles", { enumerable: true, get: functi
 __exportStar(require("./IFrame.js"), exports);
 const Img_js_1 = require("./Img.js");
 Object.defineProperty(exports, "Img", { enumerable: true, get: function () { return Img_js_1.Img; } });
+const Interactive_js_1 = require("./Interactive.js");
+Object.defineProperty(exports, "Interactive", { enumerable: true, get: function () { return Interactive_js_1.Interactive; } });
 __exportStar(require("./internals.js"), exports);
 const interpolate_colors_js_1 = require("./interpolate-colors.js");
 Object.defineProperty(exports, "interpolateColors", { enumerable: true, get: function () { return interpolate_colors_js_1.interpolateColors; } });

package/dist/cjs/internals.d.ts

@@ -86,6 +86,7 @@ export declare const Internals: {
     }) => import("react").ComponentType<Props>;
     readonly sequenceSchema: {
         readonly hidden: import("./sequence-field-schema.js").BooleanFieldSchema;
+        readonly showInTimeline: import("./sequence-field-schema.js").HiddenFieldSchema;
         readonly from: {
             readonly type: "number";
             readonly default: 0;
@@ -105,6 +106,12 @@ export declare const Internals: {
             readonly description: "Layout";
             readonly variants: {
                 readonly 'absolute-fill': {
+                    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;
@@ -158,9 +165,17 @@ export declare const Internals: {
                 readonly none: {};
             };
         };
+    } & {
+        name: SequenceFieldSchema;
     };
     readonly SequenceWithoutSchema: import("react").ForwardRefExoticComponent<import("./Sequence.js").SequenceProps & import("react").RefAttributes<HTMLDivElement>>;
     readonly sequenceStyleSchema: {
+        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;
@@ -212,6 +227,12 @@ export declare const Internals: {
         };
     };
     readonly sequenceVisualStyleSchema: {
+        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;

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

@@ -2,9 +2,8 @@
  * Copied from:
  * https://github.com/software-mansion/react-native-reanimated/blob/master/src/reanimated2/Colors.ts
  */
-export type InterpolateColorsOptions = {
-    posterize: number | undefined;
-};
+import { type InterpolateOptions } from './interpolate.js';
+export type InterpolateColorsOptions = Pick<InterpolateOptions, 'easing' | 'posterize'>;
 export declare const colorNames: {
     [key: string]: number;
 };

package/dist/cjs/interpolate-colors.js

@@ -539,6 +539,7 @@ function processColor(color) {
 const interpolateColorsRGB = (value, inputRange, colors, options) => {
     const [r, g, b, a] = [red, green, blue, opacity].map((f) => {
         const unrounded = (0, interpolate_js_1.interpolate)(value, inputRange, colors.map((c) => f(c)), {
+            easing: options === null || options === void 0 ? void 0 : options.easing,
             extrapolateLeft: 'clamp',
             extrapolateRight: 'clamp',
             posterize: options === null || options === void 0 ? void 0 : options.posterize,

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

@@ -28,6 +28,7 @@ const interpolateKeyframedStatus = ({ frame, status, }) => {
         }
         try {
             return (0, interpolate_colors_js_1.interpolateColors)(frame, inputRange, outputs, {
+                easing: easing.map(easingToFn),
                 posterize: status.posterize,
             });
         }