remotion 4.0.142 → 4.0.144

package/LICENSE.md

@@ -1,5 +1,9 @@
 # Remotion License
 
+In Remotion 5.0, the license will slightly change. [View the changes here](https://github.com/remotion-dev/remotion/pull/3750).
+
+---
+
 Depending on the type of your legal entity, you are granted permission to use Remotion for your project. Individuals and small companies are allowed to use Remotion to create videos for free (even commercial), while a company license is required for for-profit organizations of a certain size. This two-tier system was designed to ensure funding for this project while still allowing the source code to be available and the program to be free for most. Read below for the exact terms of use.
 
 - [Free license](#free-license)

package/bunfig.toml

@@ -0,0 +1,2 @@
+[test]
+#preload = "./happydom.ts"

package/dist/cjs/CanUseRemotionHooks.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
 export declare const CanUseRemotionHooks: React.Context<boolean>;
 export declare const CanUseRemotionHooksProvider: React.FC<{
-    children: React.ReactNode;
+    readonly children: React.ReactNode;
 }>;

package/dist/cjs/Img.js

@@ -65,6 +65,7 @@ const ImgRefForwarding = ({ onError, maxRetries = 2, src, pauseWhenLoading, dela
         (0, cancel_render_js_1.cancelRender)('Error loading image with src: ' + ((_l = imageRef.current) === null || _l === void 0 ? void 0 : _l.src));
     }, [maxRetries, onError, retryIn]);
     if (typeof window !== 'undefined') {
+        const isPremounting = Boolean(sequenceContext === null || sequenceContext === void 0 ? void 0 : sequenceContext.premounting);
         // eslint-disable-next-line react-hooks/rules-of-hooks
         (0, react_1.useLayoutEffect)(() => {
             if (process.env.NODE_ENV === 'test') {
@@ -74,7 +75,7 @@ const ImgRefForwarding = ({ onError, maxRetries = 2, src, pauseWhenLoading, dela
                 retries: delayRenderRetries !== null && delayRenderRetries !== void 0 ? delayRenderRetries : undefined,
                 timeoutInMilliseconds: delayRenderTimeoutInMilliseconds !== null && delayRenderTimeoutInMilliseconds !== void 0 ? delayRenderTimeoutInMilliseconds : undefined,
             });
-            const unblock = pauseWhenLoading && !(sequenceContext === null || sequenceContext === void 0 ? void 0 : sequenceContext.premounting)
+            const unblock = pauseWhenLoading && !isPremounting
                 ? delayPlayback().unblock
                 : () => undefined;
             const { current } = imageRef;
@@ -109,7 +110,7 @@ const ImgRefForwarding = ({ onError, maxRetries = 2, src, pauseWhenLoading, dela
             delayRenderRetries,
             delayRenderTimeoutInMilliseconds,
             pauseWhenLoading,
-            sequenceContext === null || sequenceContext === void 0 ? void 0 : sequenceContext.premounting,
+            isPremounting,
         ]);
     }
     return ((0, jsx_runtime_1.jsx)("img", { ...props, ref: imageRef, src: actualSrc, onError: didGetError }));

package/dist/cjs/Sequence.d.ts

@@ -1,39 +1,40 @@
 import React from 'react';
 import type { LoopDisplay } from './CompositionManager.js';
-export type LayoutAndStyle = {
+export type AbsoluteFillLayout = {
     layout?: 'absolute-fill';
     premountFor?: number;
     style?: React.CSSProperties;
     className?: string;
-} | {
+};
+export type LayoutAndStyle = AbsoluteFillLayout | {
     layout: 'none';
 };
 export type SequencePropsWithoutDuration = {
-    children: React.ReactNode;
-    width?: number;
-    height?: number;
-    from?: number;
-    name?: string;
-    showInTimeline?: boolean;
+    readonly children: React.ReactNode;
+    readonly width?: number;
+    readonly height?: number;
+    readonly from?: number;
+    readonly name?: string;
+    readonly showInTimeline?: boolean;
     /**
      * @deprecated For internal use only.
      */
-    _remotionInternalLoopDisplay?: LoopDisplay;
+    readonly _remotionInternalLoopDisplay?: LoopDisplay;
     /**
      * @deprecated For internal use only.
      */
-    _remotionInternalPremountDisplay?: number | null;
+    readonly _remotionInternalPremountDisplay?: number | null;
     /**
      * @deprecated For internal use only.
      */
-    _remotionInternalStack?: string;
+    readonly _remotionInternalStack?: string;
     /**
      * @deprecated For internal use only.
      */
-    _remotionInternalIsPremounting?: boolean;
+    readonly _remotionInternalIsPremounting?: boolean;
 } & LayoutAndStyle;
 export type SequenceProps = {
-    durationInFrames?: number;
+    readonly durationInFrames?: number;
 } & SequencePropsWithoutDuration;
 /**
  * @description A component that time-shifts its children and wraps them in an absolutely positioned <div>.

package/dist/cjs/audio/Audio.d.ts

@@ -17,9 +17,10 @@ export declare const Audio: React.ForwardRefExoticComponent<Omit<Omit<React.Deta
     showInTimeline?: boolean | undefined;
     delayRenderTimeoutInMilliseconds?: number | undefined;
     delayRenderRetries?: number | undefined;
+    loopVolumeCurveBehavior?: import("./use-audio-frame.js").LoopVolumeCurveBehavior | undefined;
 } & RemotionMainAudioProps & {
     /**
      * @deprecated For internal use only
      */
-    stack?: string | undefined;
+    readonly stack?: string | undefined;
 }, "ref"> & React.RefAttributes<HTMLAudioElement>>;

package/dist/cjs/audio/AudioForPreview.d.ts

@@ -1,12 +1,13 @@
 import React from 'react';
 import type { RemotionAudioProps } from './props.js';
 type AudioForPreviewProps = RemotionAudioProps & {
-    shouldPreMountAudioTags: boolean;
-    onDuration: (src: string, durationInSeconds: number) => void;
-    pauseWhenBuffering: boolean;
-    _remotionInternalNativeLoopPassed: boolean;
-    _remotionInternalStack: string | null;
-    showInTimeline: boolean;
+    readonly shouldPreMountAudioTags: boolean;
+    readonly onDuration: (src: string, durationInSeconds: number) => void;
+    readonly pauseWhenBuffering: boolean;
+    readonly _remotionInternalNativeLoopPassed: boolean;
+    readonly _remotionInternalStack: string | null;
+    readonly showInTimeline: boolean;
+    readonly stack?: string | undefined;
 };
 export declare const AudioForPreview: React.ForwardRefExoticComponent<Omit<AudioForPreviewProps, "ref"> & React.RefAttributes<HTMLAudioElement>>;
 export {};

package/dist/cjs/audio/AudioForPreview.js

@@ -21,10 +21,10 @@ const AudioForDevelopmentForwardRefFunction = (props, ref) => {
     if (props.shouldPreMountAudioTags !== initialShouldPreMountAudioElements) {
         throw new Error('Cannot change the behavior for pre-mounting audio tags dynamically.');
     }
+    const { volume, muted, playbackRate, shouldPreMountAudioTags, src, onDuration, acceptableTimeShiftInSeconds, _remotionInternalNeedsDurationCalculation, _remotionInternalNativeLoopPassed, _remotionInternalStack, allowAmplificationDuringRender, name, pauseWhenBuffering, showInTimeline, loopVolumeCurveBehavior, stack, ...nativeProps } = props;
     const [mediaVolume] = (0, volume_position_state_js_1.useMediaVolumeState)();
     const [mediaMuted] = (0, volume_position_state_js_1.useMediaMutedState)();
-    const volumePropFrame = (0, use_audio_frame_js_1.useFrameForVolumeProp)();
-    const { volume, muted, playbackRate, shouldPreMountAudioTags, src, onDuration, acceptableTimeShiftInSeconds, _remotionInternalNeedsDurationCalculation, _remotionInternalNativeLoopPassed, _remotionInternalStack, allowAmplificationDuringRender, name, pauseWhenBuffering, showInTimeline, ...nativeProps } = props;
+    const volumePropFrame = (0, use_audio_frame_js_1.useFrameForVolumeProp)(loopVolumeCurveBehavior !== null && loopVolumeCurveBehavior !== void 0 ? loopVolumeCurveBehavior : 'repeat');
     const { hidden } = (0, react_1.useContext)(SequenceManager_js_1.SequenceVisibilityToggleContext);
     if (!src) {
         throw new TypeError("No 'src' was passed to <Audio>.");

package/dist/cjs/audio/AudioForRendering.d.ts

@@ -13,6 +13,7 @@ export declare const AudioForRendering: ForwardRefExoticComponent<Omit<React.Det
     showInTimeline?: boolean | undefined;
     delayRenderTimeoutInMilliseconds?: number | undefined;
     delayRenderRetries?: number | undefined;
+    loopVolumeCurveBehavior?: import("./use-audio-frame.js").LoopVolumeCurveBehavior | undefined;
 } & {
     readonly onDuration: (src: string, durationInSeconds: number) => void;
 } & RefAttributes<HTMLAudioElement>>;

package/dist/cjs/audio/AudioForRendering.js

@@ -14,8 +14,9 @@ const volume_prop_js_1 = require("../volume-prop.js");
 const use_audio_frame_js_1 = require("./use-audio-frame.js");
 const AudioForRenderingRefForwardingFunction = (props, ref) => {
     const audioRef = (0, react_1.useRef)(null);
+    const { volume: volumeProp, playbackRate, allowAmplificationDuringRender, onDuration, toneFrequency, _remotionInternalNeedsDurationCalculation, _remotionInternalNativeLoopPassed, acceptableTimeShiftInSeconds, name, onError, delayRenderRetries, delayRenderTimeoutInMilliseconds, loopVolumeCurveBehavior, ...nativeProps } = props;
     const absoluteFrame = (0, timeline_position_state_js_1.useTimelinePosition)();
-    const volumePropFrame = (0, use_audio_frame_js_1.useFrameForVolumeProp)();
+    const volumePropFrame = (0, use_audio_frame_js_1.useFrameForVolumeProp)(loopVolumeCurveBehavior !== null && loopVolumeCurveBehavior !== void 0 ? loopVolumeCurveBehavior : 'repeat');
     const frame = (0, use_current_frame_js_1.useCurrentFrame)();
     const sequenceContext = (0, react_1.useContext)(SequenceContext_js_1.SequenceContext);
     const { registerRenderAsset, unregisterRenderAsset } = (0, react_1.useContext)(RenderAssetManager_js_1.RenderAssetManager);
@@ -30,7 +31,6 @@ const AudioForRenderingRefForwardingFunction = (props, ref) => {
         sequenceContext === null || sequenceContext === void 0 ? void 0 : sequenceContext.cumulatedFrom,
         sequenceContext === null || sequenceContext === void 0 ? void 0 : sequenceContext.durationInFrames,
     ]);
-    const { volume: volumeProp, playbackRate, allowAmplificationDuringRender, onDuration, toneFrequency, _remotionInternalNeedsDurationCalculation, _remotionInternalNativeLoopPassed, acceptableTimeShiftInSeconds, name, onError, delayRenderRetries, delayRenderTimeoutInMilliseconds, ...nativeProps } = props;
     const volume = (0, volume_prop_js_1.evaluateVolume)({
         volume: volumeProp,
         frame: volumePropFrame,

package/dist/cjs/audio/props.d.ts

@@ -1,5 +1,6 @@
 /// <reference types="react" />
 import type { VolumeProp } from '../volume-prop.js';
+import type { LoopVolumeCurveBehavior } from './use-audio-frame.js';
 export type RemotionMainAudioProps = {
     startFrom?: number;
     endAt?: number;
@@ -17,4 +18,5 @@ export type RemotionAudioProps = Omit<React.DetailedHTMLProps<React.AudioHTMLAtt
     showInTimeline?: boolean;
     delayRenderTimeoutInMilliseconds?: number;
     delayRenderRetries?: number;
+    loopVolumeCurveBehavior?: LoopVolumeCurveBehavior;
 };

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

@@ -1,6 +1,7 @@
 export declare const useMediaStartsAt: () => number;
+export type LoopVolumeCurveBehavior = 'repeat' | 'extend';
 /**
  * When passing a function as the prop for `volume`,
  * we calculate the way more intuitive value for currentFrame
  */
-export declare const useFrameForVolumeProp: () => number;
+export declare const useFrameForVolumeProp: (behavior: LoopVolumeCurveBehavior) => number;

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

@@ -3,6 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.useFrameForVolumeProp = exports.useMediaStartsAt = void 0;
 const react_1 = require("react");
 const SequenceContext_js_1 = require("../SequenceContext.js");
+const index_js_1 = require("../loop/index.js");
 const use_current_frame_js_1 = require("../use-current-frame.js");
 const useMediaStartsAt = () => {
     var _a;
@@ -15,9 +16,13 @@ exports.useMediaStartsAt = useMediaStartsAt;
  * When passing a function as the prop for `volume`,
  * we calculate the way more intuitive value for currentFrame
  */
-const useFrameForVolumeProp = () => {
+const useFrameForVolumeProp = (behavior) => {
+    const loop = index_js_1.Loop.useLoop();
     const frame = (0, use_current_frame_js_1.useCurrentFrame)();
     const startsAt = (0, exports.useMediaStartsAt)();
-    return frame + startsAt;
+    if (behavior === 'repeat' || loop === null) {
+        return frame + startsAt;
+    }
+    return frame + startsAt + loop.durationInFrames * loop.iteration;
 };
 exports.useFrameForVolumeProp = useFrameForVolumeProp;

package/dist/cjs/default-css.d.ts

@@ -1,3 +1,3 @@
 export declare const injectCSS: (css: string) => void;
 export declare const OFFTHREAD_VIDEO_CLASS_NAME = "__remotion_offthreadvideo";
-export declare const makeDefaultCSS: (scope: string | null, backgroundColor: string) => string;
+export declare const makeDefaultPreviewCSS: (scope: string | null, backgroundColor: string) => string;

package/dist/cjs/default-css.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.makeDefaultCSS = exports.OFFTHREAD_VIDEO_CLASS_NAME = exports.injectCSS = void 0;
+exports.makeDefaultPreviewCSS = exports.OFFTHREAD_VIDEO_CLASS_NAME = exports.injectCSS = void 0;
 const injected = {};
 const injectCSS = (css) => {
     // Skip in node
@@ -18,7 +18,7 @@ const injectCSS = (css) => {
 };
 exports.injectCSS = injectCSS;
 exports.OFFTHREAD_VIDEO_CLASS_NAME = '__remotion_offthreadvideo';
-const makeDefaultCSS = (scope, backgroundColor) => {
+const makeDefaultPreviewCSS = (scope, backgroundColor) => {
     if (!scope) {
         return `
     * {
@@ -46,4 +46,4 @@ const makeDefaultCSS = (scope, backgroundColor) => {
     }
   `;
 };
-exports.makeDefaultCSS = makeDefaultCSS;
+exports.makeDefaultPreviewCSS = makeDefaultPreviewCSS;

package/dist/cjs/get-static-files.js

@@ -1,6 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.getStaticFiles = void 0;
+const v5_flag_1 = require("./v5-flag");
 let warnedServer = false;
 let warnedPlayer = false;
 const warnServerOnce = () => {
@@ -24,6 +25,9 @@ const warnPlayerOnce = () => {
  * @see [Documentation](https://www.remotion.dev/docs/getstaticfiles)
  */
 const getStaticFiles = () => {
+    if (v5_flag_1.ENABLE_V5_BREAKING_CHANGES) {
+        throw new Error('getStaticFiles() has moved into the `@remotion/studio` package. Update your imports.');
+    }
     if (typeof document === 'undefined') {
         warnServerOnce();
         return [];

package/dist/cjs/index.d.ts

@@ -1,4 +1,4 @@
-/// <reference types="node" />
+/// <reference types="bun-types" />
 /// <reference types="react" />
 import './asset-types.js';
 import type { Codec } from './codec.js';
@@ -16,7 +16,7 @@ declare global {
         remotion_delayRenderTimeouts: {
             [key: string]: {
                 label: string | null;
-                timeout: number | NodeJS.Timeout;
+                timeout: number | Timer;
             };
         };
         remotion_cancelledError: string | undefined;
@@ -90,7 +90,7 @@ export { ClipRegion } from './NativeLayers.js';
 export { EasingFunction, ExtrapolateType, interpolate, InterpolateOptions, random, RandomSeed, } from './no-react';
 export { prefetch, PrefetchOnProgress } from './prefetch.js';
 export { registerRoot } from './register-root.js';
-export { LayoutAndStyle, Sequence, SequenceProps, SequencePropsWithoutDuration, } from './Sequence.js';
+export { AbsoluteFillLayout, LayoutAndStyle, Sequence, SequenceProps, SequencePropsWithoutDuration, } from './Sequence.js';
 export { Series } from './series/index.js';
 export * from './spring/index.js';
 export { staticFile } from './static-file.js';

package/dist/cjs/internals.d.ts

@@ -69,7 +69,7 @@ export declare const Internals: {
     readonly portalNode: () => HTMLElement;
     readonly waitForRoot: (fn: (comp: import("react").FC<{}>) => void) => () => void;
     readonly CanUseRemotionHooksProvider: import("react").FC<{
-        children: import("react").ReactNode;
+        readonly children: import("react").ReactNode;
     }>;
     readonly CanUseRemotionHooks: import("react").Context<boolean>;
     readonly PrefetchProvider: import("react").FC<{
@@ -116,8 +116,6 @@ export declare const Internals: {
         [x: string]: number;
     }) => void;
     readonly useTimelineSetFrame: () => (u: import("react").SetStateAction<Record<string, number>>) => void;
-    readonly FILE_TOKEN: "remotion-file:";
-    readonly DATE_TOKEN: "remotion-date:";
     readonly NativeLayersProvider: import("react").FC<{
         children?: import("react").ReactNode;
     }>;
@@ -146,9 +144,6 @@ export declare const Internals: {
         buffering: import("react").MutableRefObject<boolean>;
     } | null>;
     readonly enableSequenceStackTraces: () => void;
-    readonly colorNames: {
-        [key: string]: number;
-    };
     readonly CurrentScaleContext: import("react").Context<import("./use-current-scale.js").CurrentScaleContextType | null>;
     readonly PreviewSizeContext: import("react").Context<import("./use-current-scale.js").PreviewSizeCtx>;
     readonly calculateScale: ({ canvasSize, compositionHeight, compositionWidth, previewSize, }: {

package/dist/cjs/internals.js

@@ -36,8 +36,6 @@ const EditorProps_js_1 = require("./EditorProps.js");
 const enable_sequence_stack_traces_js_1 = require("./enable-sequence-stack-traces.js");
 const get_preview_dom_element_js_1 = require("./get-preview-dom-element.js");
 const get_remotion_environment_js_1 = require("./get-remotion-environment.js");
-const input_props_serialization_js_1 = require("./input-props-serialization.js");
-const interpolate_colors_js_1 = require("./interpolate-colors.js");
 const is_player_js_1 = require("./is-player.js");
 const NativeLayers_js_1 = require("./NativeLayers.js");
 const nonce_js_1 = require("./nonce.js");
@@ -114,8 +112,6 @@ exports.Internals = {
     RenderAssetManager: RenderAssetManager_js_1.RenderAssetManager,
     persistCurrentFrame: timeline_position_state_js_1.persistCurrentFrame,
     useTimelineSetFrame: timeline_position_state_js_1.useTimelineSetFrame,
-    FILE_TOKEN: input_props_serialization_js_1.FILE_TOKEN,
-    DATE_TOKEN: input_props_serialization_js_1.DATE_TOKEN,
     NativeLayersProvider: NativeLayers_js_1.NativeLayersProvider,
     ClipComposition: Composition_js_1.ClipComposition,
     isIosSafari: video_fragment_js_1.isIosSafari,
@@ -125,7 +121,6 @@ exports.Internals = {
     BufferingProvider: buffering_js_1.BufferingProvider,
     BufferingContextReact: buffering_js_1.BufferingContextReact,
     enableSequenceStackTraces: enable_sequence_stack_traces_js_1.enableSequenceStackTraces,
-    colorNames: interpolate_colors_js_1.colorNames,
     CurrentScaleContext: use_current_scale_js_1.CurrentScaleContext,
     PreviewSizeContext: use_current_scale_js_1.PreviewSizeContext,
     calculateScale: use_current_scale_js_1.calculateScale,

package/dist/cjs/interpolate.d.ts

@@ -1,6 +1,6 @@
 export type ExtrapolateType = 'extend' | 'identity' | 'clamp' | 'wrap';
 /**
- * @description This function allows you to map a range of values to another with a conside syntax
+ * @description This function allows you to map a range of values to another with a concise syntax
  * @see [Documentation](https://www.remotion.dev/docs/interpolate)
  */
 export type EasingFunction = (input: number) => number;

package/dist/cjs/loop/index.d.ts

@@ -1,13 +1,21 @@
 import React from 'react';
 import type { LayoutAndStyle } from '../Sequence.js';
 export type LoopProps = {
-    durationInFrames: number;
-    times?: number;
-    name?: string;
-    children: React.ReactNode;
+    readonly durationInFrames: number;
+    readonly times?: number;
+    readonly name?: string;
+    readonly children: React.ReactNode;
 } & LayoutAndStyle;
+type LoopContextType = {
+    iteration: number;
+    durationInFrames: number;
+};
+declare const useLoop: () => LoopContextType | null;
 /**
  * @description This component allows you to quickly lay out an animation so it repeats itself.
  * @see [Documentation](https://www.remotion.dev/docs/loop)
  */
-export declare const Loop: React.FC<LoopProps>;
+export declare const Loop: React.FC<LoopProps> & {
+    useLoop: typeof useLoop;
+};
+export {};

package/dist/cjs/loop/index.js

@@ -1,12 +1,39 @@
 "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 (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Loop = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
+const react_1 = __importStar(require("react"));
 const Sequence_js_1 = require("../Sequence.js");
 const use_current_frame_js_1 = require("../use-current-frame.js");
 const use_video_config_js_1 = require("../use-video-config.js");
 const validate_duration_in_frames_js_1 = require("../validation/validate-duration-in-frames.js");
+const LoopContext = (0, react_1.createContext)(null);
+const useLoop = () => {
+    return react_1.default.useContext(LoopContext);
+};
 /**
  * @description This component allows you to quickly lay out an animation so it repeats itself.
  * @see [Documentation](https://www.remotion.dev/docs/loop)
@@ -31,7 +58,8 @@ const Loop = ({ durationInFrames, times = Infinity, children, name, ...props })
     const actualTimes = Math.min(maxTimes, times);
     const style = props.layout === 'none' ? undefined : props.style;
     const maxFrame = durationInFrames * (actualTimes - 1);
-    const start = Math.floor(currentFrame / durationInFrames) * durationInFrames;
+    const iteration = Math.floor(currentFrame / durationInFrames);
+    const start = iteration * durationInFrames;
     const from = Math.min(start, maxFrame);
     const loopDisplay = (0, react_1.useMemo)(() => {
         return {
@@ -40,6 +68,13 @@ const Loop = ({ durationInFrames, times = Infinity, children, name, ...props })
             durationInFrames,
         };
     }, [actualTimes, durationInFrames, from]);
-    return ((0, jsx_runtime_1.jsx)(Sequence_js_1.Sequence, { durationInFrames: durationInFrames, from: from, name: name !== null && name !== void 0 ? name : '<Loop>', _remotionInternalLoopDisplay: loopDisplay, layout: props.layout, style: style, children: children }));
+    const loopContext = (0, react_1.useMemo)(() => {
+        return {
+            iteration: Math.floor(currentFrame / durationInFrames),
+            durationInFrames,
+        };
+    }, [currentFrame, durationInFrames]);
+    return ((0, jsx_runtime_1.jsx)(LoopContext.Provider, { value: loopContext, children: (0, jsx_runtime_1.jsx)(Sequence_js_1.Sequence, { durationInFrames: durationInFrames, from: from, name: name !== null && name !== void 0 ? name : '<Loop>', _remotionInternalLoopDisplay: loopDisplay, layout: props.layout, style: style, children: children }) }));
 };
 exports.Loop = Loop;
+exports.Loop.useLoop = useLoop;

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

@@ -45,4 +45,9 @@ export declare const NoReactInternals: {
     ENABLE_V5_BREAKING_CHANGES: false;
     MIN_NODE_VERSION: number;
     MIN_BUN_VERSION: string;
+    colorNames: {
+        [key: string]: number;
+    };
+    DATE_TOKEN: string;
+    FILE_TOKEN: string;
 };

package/dist/cjs/no-react.js

@@ -7,6 +7,7 @@ var random_js_1 = require("./random.js");
 Object.defineProperty(exports, "random", { enumerable: true, get: function () { return random_js_1.random; } });
 const delay_render_1 = require("./delay-render");
 const input_props_serialization_1 = require("./input-props-serialization");
+const input_props_serialization_js_1 = require("./input-props-serialization.js");
 const interpolate_colors_1 = require("./interpolate-colors");
 const truthy_1 = require("./truthy");
 const v5_flag_1 = require("./v5-flag");
@@ -37,4 +38,7 @@ exports.NoReactInternals = {
     ENABLE_V5_BREAKING_CHANGES: v5_flag_1.ENABLE_V5_BREAKING_CHANGES,
     MIN_NODE_VERSION: v5_flag_1.ENABLE_V5_BREAKING_CHANGES ? 18 : 16,
     MIN_BUN_VERSION: v5_flag_1.ENABLE_V5_BREAKING_CHANGES ? '1.1.3' : '1.0.3',
+    colorNames: interpolate_colors_1.colorNames,
+    DATE_TOKEN: input_props_serialization_js_1.DATE_TOKEN,
+    FILE_TOKEN: input_props_serialization_js_1.FILE_TOKEN,
 };

package/dist/cjs/series/index.js

@@ -7,10 +7,12 @@ const Sequence_js_1 = require("../Sequence.js");
 const enable_sequence_stack_traces_js_1 = require("../enable-sequence-stack-traces.js");
 const validate_duration_in_frames_js_1 = require("../validation/validate-duration-in-frames.js");
 const flatten_children_js_1 = require("./flatten-children.js");
+const is_inside_series_js_1 = require("./is-inside-series.js");
 const SeriesSequenceRefForwardingFunction = ({ children }, _ref) => {
+    (0, is_inside_series_js_1.useRequireToBeInsideSeries)();
     // Discard ref
     // eslint-disable-next-line react/jsx-no-useless-fragment
-    return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: children });
+    return (0, jsx_runtime_1.jsx)(is_inside_series_js_1.IsNotInsideSeriesProvider, { children: children });
 };
 const SeriesSequence = (0, react_1.forwardRef)(SeriesSequenceRefForwardingFunction);
 /**
@@ -62,8 +64,7 @@ const Series = ({ children }) => {
             return ((0, jsx_runtime_1.jsx)(Sequence_js_1.Sequence, { name: name || '<Series.Sequence>', from: currentStartFrame, durationInFrames: durationInFramesProp, ...passedProps, ref: castedChild.ref, children: child }));
         });
     }, [children]);
-    /* eslint-disable react/jsx-no-useless-fragment */
-    return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: childrenValue });
+    return (0, jsx_runtime_1.jsx)(is_inside_series_js_1.IsInsideSeriesContainer, { children: childrenValue });
 };
 exports.Series = Series;
 Series.Sequence = SeriesSequence;

package/dist/cjs/series/is-inside-series.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+export declare const IsInsideSeriesContext: React.Context<boolean>;
+export declare const IsInsideSeriesContainer: React.FC<{
+    readonly children: React.ReactNode;
+}>;
+export declare const IsNotInsideSeriesProvider: React.FC<{
+    readonly children: React.ReactNode;
+}>;
+export declare const useRequireToBeInsideSeries: () => void;

package/dist/cjs/series/is-inside-series.js

@@ -0,0 +1,44 @@
+"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 (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useRequireToBeInsideSeries = exports.IsNotInsideSeriesProvider = exports.IsInsideSeriesContainer = exports.IsInsideSeriesContext = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = __importStar(require("react"));
+exports.IsInsideSeriesContext = (0, react_1.createContext)(false);
+const IsInsideSeriesContainer = ({ children }) => {
+    return ((0, jsx_runtime_1.jsx)(exports.IsInsideSeriesContext.Provider, { value: true, children: children }));
+};
+exports.IsInsideSeriesContainer = IsInsideSeriesContainer;
+const IsNotInsideSeriesProvider = ({ children }) => {
+    return ((0, jsx_runtime_1.jsx)(exports.IsInsideSeriesContext.Provider, { value: false, children: children }));
+};
+exports.IsNotInsideSeriesProvider = IsNotInsideSeriesProvider;
+const useRequireToBeInsideSeries = () => {
+    const isInsideSeries = react_1.default.useContext(exports.IsInsideSeriesContext);
+    if (!isInsideSeries) {
+        throw new Error('This component must be inside a <Series /> component.');
+    }
+};
+exports.useRequireToBeInsideSeries = useRequireToBeInsideSeries;

package/dist/cjs/spring/index.d.ts

@@ -1,4 +1,4 @@
-import type { SpringConfig } from './spring-utils.js';
+import type { SpringConfig } from './spring-utils';
 /**
  * @description Calculates a position based on physical parameters, start and end value, and time.
  * @see [Documentation](https://www.remotion.dev/docs/spring)
@@ -28,4 +28,4 @@ export declare function spring({ frame: passedFrame, fps, config, from, to, dura
     reverse?: boolean;
 }): number;
 export { measureSpring } from './measure-spring.js';
-export { SpringConfig } from './spring-utils.js';
+export type { SpringConfig } from './spring-utils';

package/dist/cjs/spring/index.js

@@ -1,6 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.measureSpring = exports.spring = void 0;
+const interpolate_js_1 = require("../interpolate.js");
 const validate_frame_js_1 = require("../validate-frame.js");
 const validate_fps_js_1 = require("../validation/validate-fps.js");
 const validation_spring_duration_js_1 = require("../validation/validation-spring-duration.js");
@@ -64,16 +65,14 @@ function spring({ frame: passedFrame, fps, config = {}, from = 0, to = 1, durati
         fps,
         frame: durationProcessed,
         config,
-        from,
-        to,
     });
-    if (!config.overshootClamping) {
-        return spr.current;
-    }
-    if (to >= from) {
-        return Math.min(spr.current, to);
-    }
-    return Math.max(spr.current, to);
+    const inner = config.overshootClamping
+        ? to >= from
+            ? Math.min(spr.current, to)
+            : Math.max(spr.current, to)
+        : spr.current;
+    const interpolated = from === 0 && to === 1 ? inner : (0, interpolate_js_1.interpolate)(inner, [0, 1], [from, to]);
+    return interpolated;
 }
 exports.spring = spring;
 var measure_spring_js_2 = require("./measure-spring.js");

package/dist/cjs/spring/measure-spring.d.ts

@@ -1,4 +1,4 @@
-import type { SpringConfig } from './spring-utils.js';
+import type { SpringConfig } from './spring-utils';
 /**
  * @description The function returns how long it takes for a spring animation to settle
  * @see [Documentation](https://www.remotion.dev/docs/measure-spring)

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

@@ -49,8 +49,6 @@ function measureSpring({ fps, config = {}, threshold = 0.005, from = 0, to = 1,
             fps,
             frame,
             config,
-            from,
-            to,
         });
     };
     let animation = calc();