@remotion/transitions 4.0.490 → 4.0.491

package/dist/TransitionSeries.d.ts

@@ -1,17 +1,19 @@
 import type { FC, PropsWithChildren } from 'react';
+import React from 'react';
 import type { AbsoluteFillLayout, LayoutAndStyle, SequencePropsWithoutDuration } from 'remotion';
 import { NoReactInternals } from 'remotion/no-react';
 import type { TransitionSeriesOverlayProps, TransitionSeriesTransitionProps } from './types.js';
+type TransitionSeriesTransitionComponent = <PresentationProps extends Record<string, unknown>>(props: TransitionSeriesTransitionProps<PresentationProps>) => React.ReactNode;
 type LayoutBasedProps = true extends typeof NoReactInternals.ENABLE_V5_BREAKING_CHANGES ? AbsoluteFillLayout : LayoutAndStyle;
 type SeriesSequenceProps = PropsWithChildren<{
     readonly durationInFrames: number;
     readonly offset?: number;
     readonly className?: string;
-} & LayoutBasedProps & Pick<SequencePropsWithoutDuration, 'name' | 'showInTimeline' | 'freeze'>>;
+} & LayoutBasedProps & Pick<SequencePropsWithoutDuration, 'name' | 'showInTimeline' | 'freeze' | 'hidden'>>;
 export type DrawFunction = (prevImage: ElementImage | null, nextImage: ElementImage | null, progress: number) => void;
 declare const TransitionSeries: FC<SequencePropsWithoutDuration> & {
-    Sequence: ({ children }: SeriesSequenceProps) => import("react/jsx-runtime").JSX.Element;
-    Transition: <PresentationProps extends Record<string, unknown>>(_props: TransitionSeriesTransitionProps<PresentationProps>) => null;
+    Sequence: FC<SeriesSequenceProps>;
+    Transition: TransitionSeriesTransitionComponent;
     Overlay: FC<TransitionSeriesOverlayProps>;
 };
 export { TransitionSeries };

package/dist/TransitionSeries.js

@@ -1,8 +1,41 @@
 "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.TransitionSeries = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
+const react_1 = __importStar(require("react"));
 const remotion_1 = require("remotion");
 const no_react_1 = require("remotion/no-react");
 const context_js_1 = require("./context.js");
@@ -10,16 +43,61 @@ const flatten_children_js_1 = require("./flatten-children.js");
 const slide_js_1 = require("./presentations/slide.js");
 const validate_js_1 = require("./validate.js");
 const { SequenceWithoutSchema } = remotion_1.Internals;
-const TransitionSeriesTransition = function (_props) {
+const TransitionSeriesTransitionInner = ({ stack = null, _remotionInternalRender = null, ...props }) => {
+    if (_remotionInternalRender) {
+        return _remotionInternalRender({ ...props, stack });
+    }
     return null;
 };
-const SeriesOverlay = () => {
+const transitionSeriesTransitionSchema = {};
+const TransitionSeriesTransition = remotion_1.Interactive.withSchema({
+    Component: TransitionSeriesTransitionInner,
+    componentName: '<TransitionSeries.Transition>',
+    componentIdentity: 'dev.remotion.transitions.TransitionSeries.Transition',
+    schema: transitionSeriesTransitionSchema,
+    supportsEffects: false,
+});
+const SeriesOverlayInner = ({ stack = null, _remotionInternalRender = null, ...props }) => {
+    if (_remotionInternalRender) {
+        return _remotionInternalRender({ ...props, stack });
+    }
     return null;
 };
-const SeriesSequence = ({ children }) => {
+const transitionSeriesOverlaySchema = {};
+const SeriesOverlay = remotion_1.Interactive.withSchema({
+    Component: SeriesOverlayInner,
+    componentName: '<TransitionSeries.Overlay>',
+    componentIdentity: 'dev.remotion.transitions.TransitionSeries.Overlay',
+    schema: transitionSeriesOverlaySchema,
+    supportsEffects: false,
+});
+const transitionSeriesSequenceSchema = {
+    durationInFrames: remotion_1.Internals.durationInFramesField,
+    name: remotion_1.Internals.sequenceSchema.name,
+    hidden: remotion_1.Internals.sequenceSchema.hidden,
+    showInTimeline: remotion_1.Internals.sequenceSchema.showInTimeline,
+    freeze: remotion_1.Internals.freezeField,
+    layout: remotion_1.Internals.sequenceSchema.layout,
+};
+const SeriesSequenceInner = ({ offset = 0, className = '', stack = null, _remotionInternalRender = null, ...props }) => {
+    if (_remotionInternalRender) {
+        return _remotionInternalRender({
+            ...props,
+            offset,
+            className: className || undefined,
+            stack,
+        });
+    }
     // eslint-disable-next-line react/jsx-no-useless-fragment
-    return jsx_runtime_1.jsx(jsx_runtime_1.Fragment, { children: children });
+    return jsx_runtime_1.jsx(jsx_runtime_1.Fragment, { children: props.children });
 };
+const SeriesSequence = remotion_1.Interactive.withSchema({
+    Component: SeriesSequenceInner,
+    componentName: '<TransitionSeries.Sequence>',
+    componentIdentity: 'dev.remotion.transitions.TransitionSeries.Sequence',
+    schema: transitionSeriesSequenceSchema,
+    supportsEffects: false,
+});
 const transitionSeriesSchema = {
     name: remotion_1.Internals.sequenceSchema.name,
     hidden: remotion_1.Internals.sequenceSchema.hidden,
@@ -67,20 +145,23 @@ const TransitionSeriesChildren = ({ children, }) => {
         drawIfSynced(index);
     }, [drawIfSynced]);
     const childrenValue = (0, react_1.useMemo)(() => {
-        let transitionOffsets = 0;
-        let startFrame = 0;
-        // Collect overlay render info to emit after the main loop
-        const overlayRenders = [];
-        // Track sequence durations for overlay validation
-        const sequenceDurations = [];
-        let pendingOverlayValidation = false;
-        const mainChildren = react_1.Children.map(flattedChildren, (child, i) => {
-            var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
+        const renderChildren = (state) => {
+            const { index: i, transitionOffsets, startFrame, overlayRenders, sequenceDurations, pendingOverlayValidation, } = state;
+            if (i === flattedChildren.length) {
+                return overlayRenders.map((info) => {
+                    var _a, _b;
+                    return (jsx_runtime_1.jsx(SequenceWithoutSchema, { from: Math.round(info.overlayFrom), durationInFrames: info.durationInFrames, name: "<TS.Overlay>", _remotionInternalDocumentationLink: "https://www.remotion.dev/docs/transitions/transitionseries", _remotionInternalStack: (_a = info.stack) !== null && _a !== void 0 ? _a : undefined, controls: (_b = info.controls) !== null && _b !== void 0 ? _b : undefined, layout: "absolute-fill", children: info.children }, `overlay-${info.index}`));
+                });
+            }
+            const child = flattedChildren[i];
             const current = child;
+            const renderNext = (overrides = {}) => {
+                return renderChildren({ ...state, ...overrides, index: i + 1 });
+            };
             if (typeof current === 'string') {
                 // Don't throw if it's just some accidential whitespace
                 if (current.trim() === '') {
-                    return null;
+                    return renderNext();
                 }
                 throw new TypeError(`The <TransitionSeries /> component only accepts a list of <TransitionSeries.Sequence /> components as its children, but you passed a string "${current}"`);
             }
@@ -108,49 +189,58 @@ const TransitionSeriesChildren = ({ children, }) => {
                 if (nextIsTransition) {
                     throw new TypeError(`A <TransitionSeries.Overlay /> component must not be followed by a <TransitionSeries.Transition /> component (nth children = ${i} and ${i + 1})`);
                 }
-                const overlayProps = current.props;
-                (0, validate_js_1.validateDurationInFrames)(overlayProps.durationInFrames, {
-                    component: `of a <TransitionSeries.Overlay /> component`,
-                    allowFloats: false,
-                });
-                const overlayOffset = (_a = overlayProps.offset) !== null && _a !== void 0 ? _a : 0;
-                if (Number.isNaN(overlayOffset)) {
-                    throw new TypeError(`The "offset" property of a <TransitionSeries.Overlay /> must not be NaN, but got NaN.`);
-                }
-                if (!Number.isFinite(overlayOffset)) {
-                    throw new TypeError(`The "offset" property of a <TransitionSeries.Overlay /> must be finite, but got ${overlayOffset}.`);
-                }
-                if (overlayOffset % 1 !== 0) {
-                    throw new TypeError(`The "offset" property of a <TransitionSeries.Overlay /> must be an integer, but got ${overlayOffset}.`);
-                }
-                // Find the previous sequence (the cut point is at startFrame + transitionOffsets)
-                const cutPoint = startFrame + transitionOffsets;
-                const halfDuration = overlayProps.durationInFrames / 2;
-                const overlayFrom = cutPoint - halfDuration + overlayOffset;
-                if (overlayFrom < 0) {
-                    throw new TypeError(`A <TransitionSeries.Overlay /> extends before frame 0. The overlay starts at frame ${overlayFrom}. Reduce the duration or adjust the offset.`);
-                }
-                // Validate: overlay must not exceed the previous sequence duration
-                const prevSeqIdx = sequenceDurations.length - 1;
-                if (prevSeqIdx >= 0) {
-                    const overlayStartInPrev = halfDuration - overlayOffset;
-                    if (overlayStartInPrev > sequenceDurations[prevSeqIdx]) {
-                        throw new TypeError(`A <TransitionSeries.Overlay /> extends beyond the previous sequence. The overlay needs ${overlayStartInPrev} frames before the cut, but the previous sequence is only ${sequenceDurations[prevSeqIdx]} frames long.`);
-                    }
-                }
-                // We'll validate the next sequence side after we process it
-                pendingOverlayValidation = true;
-                // Store overlay info for deferred rendering
-                overlayRenders.push({
-                    cutPoint,
-                    overlayFrom,
-                    durationInFrames: overlayProps.durationInFrames,
-                    overlayOffset,
-                    halfDuration,
-                    children: overlayProps.children,
-                    index: i,
+                const castedOverlay = current;
+                return react_1.default.cloneElement(castedOverlay, {
+                    _remotionInternalRender: (overlayProps) => {
+                        var _a;
+                        (0, validate_js_1.validateDurationInFrames)(overlayProps.durationInFrames, {
+                            component: `of a <TransitionSeries.Overlay /> component`,
+                            allowFloats: false,
+                        });
+                        const overlayOffset = (_a = overlayProps.offset) !== null && _a !== void 0 ? _a : 0;
+                        if (Number.isNaN(overlayOffset)) {
+                            throw new TypeError(`The "offset" property of a <TransitionSeries.Overlay /> must not be NaN, but got NaN.`);
+                        }
+                        if (!Number.isFinite(overlayOffset)) {
+                            throw new TypeError(`The "offset" property of a <TransitionSeries.Overlay /> must be finite, but got ${overlayOffset}.`);
+                        }
+                        if (overlayOffset % 1 !== 0) {
+                            throw new TypeError(`The "offset" property of a <TransitionSeries.Overlay /> must be an integer, but got ${overlayOffset}.`);
+                        }
+                        // Find the previous sequence (the cut point is at startFrame + transitionOffsets)
+                        const cutPoint = startFrame + transitionOffsets;
+                        const halfDuration = overlayProps.durationInFrames / 2;
+                        const overlayFrom = cutPoint - halfDuration + overlayOffset;
+                        if (overlayFrom < 0) {
+                            throw new TypeError(`A <TransitionSeries.Overlay /> extends before frame 0. The overlay starts at frame ${overlayFrom}. Reduce the duration or adjust the offset.`);
+                        }
+                        // Validate: overlay must not exceed the previous sequence duration
+                        const prevSeqIdx = sequenceDurations.length - 1;
+                        if (prevSeqIdx >= 0) {
+                            const overlayStartInPrev = halfDuration - overlayOffset;
+                            if (overlayStartInPrev > sequenceDurations[prevSeqIdx]) {
+                                throw new TypeError(`A <TransitionSeries.Overlay /> extends beyond the previous sequence. The overlay needs ${overlayStartInPrev} frames before the cut, but the previous sequence is only ${sequenceDurations[prevSeqIdx]} frames long.`);
+                            }
+                        }
+                        // Store overlay info for deferred rendering and validate the other
+                        // side once the next sequence has resolved its interactive props.
+                        const overlayRender = {
+                            cutPoint,
+                            overlayFrom,
+                            durationInFrames: overlayProps.durationInFrames,
+                            overlayOffset,
+                            halfDuration,
+                            children: overlayProps.children,
+                            index: i,
+                            controls: overlayProps.controls,
+                            stack: overlayProps.stack,
+                        };
+                        return renderNext({
+                            overlayRenders: [...overlayRenders, overlayRender],
+                            pendingOverlayValidation: true,
+                        });
+                    },
                 });
-                return null;
             }
             if (current.type === TransitionSeriesTransition) {
                 if (prevIsTransition) {
@@ -159,7 +249,15 @@ const TransitionSeriesChildren = ({ children, }) => {
                 if (prevIsOverlay) {
                     throw new TypeError(`A <TransitionSeries.Overlay /> component must not be followed by a <TransitionSeries.Transition /> component (nth children = ${i - 1} and ${i})`);
                 }
-                return null;
+                const castedTransition = current;
+                return react_1.default.cloneElement(castedTransition, {
+                    _remotionInternalRender: (transitionProps) => {
+                        var _a, _b;
+                        const transitionDuration = transitionProps.timing.getDurationInFrames({ fps });
+                        const transitionFrom = startFrame + transitionOffsets - transitionDuration;
+                        return (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [transitionDuration > 0 ? (jsx_runtime_1.jsx(SequenceWithoutSchema, { from: transitionFrom, durationInFrames: transitionDuration, name: "<TS.Transition>", _remotionInternalDocumentationLink: "https://www.remotion.dev/docs/transitions/transitionseries", _remotionInternalStack: (_a = transitionProps.stack) !== null && _a !== void 0 ? _a : undefined, controls: (_b = transitionProps.controls) !== null && _b !== void 0 ? _b : undefined, layout: "none" })) : null, renderNext()] }));
+                    },
+                });
             }
             if (current.type !== SeriesSequence) {
                 throw new TypeError(`The <TransitionSeries /> component only accepts a list of <TransitionSeries.Sequence />, <TransitionSeries.Transition />, and <TransitionSeries.Overlay /> components as its children, but got ${current} instead`);
@@ -175,127 +273,144 @@ const TransitionSeriesChildren = ({ children, }) => {
                     ? nextPrev
                     : null;
             const castedChildAgain = current;
-            const debugInfo = `index = ${i}, duration = ${castedChildAgain.props.durationInFrames}`;
-            const durationInFramesProp = castedChildAgain.props.durationInFrames;
-            const { durationInFrames, children: _children, from: _from, ...passedProps } = castedChildAgain.props;
-            (0, validate_js_1.validateDurationInFrames)(durationInFramesProp, {
-                component: `of a <TransitionSeries.Sequence /> component`,
-                allowFloats: true,
-            });
-            const offset = (_b = castedChildAgain.props.offset) !== null && _b !== void 0 ? _b : 0;
-            if (Number.isNaN(offset)) {
-                throw new TypeError(`The "offset" property of a <TransitionSeries.Sequence /> must not be NaN, but got NaN (${debugInfo}).`);
-            }
-            if (!Number.isFinite(offset)) {
-                throw new TypeError(`The "offset" property of a <TransitionSeries.Sequence /> must be finite, but got ${offset} (${debugInfo}).`);
-            }
-            if (offset % 1 !== 0) {
-                throw new TypeError(`The "offset" property of a <TransitionSeries.Sequence /> must be finite, but got ${offset} (${debugInfo}).`);
-            }
-            const currentStartFrame = startFrame + offset;
-            let duration = 0;
-            if (prev) {
-                duration = prev.props.timing.getDurationInFrames({
-                    fps,
-                });
-                transitionOffsets -= duration;
-            }
-            let actualStartFrame = currentStartFrame + transitionOffsets;
-            startFrame += durationInFramesProp + offset;
-            // Handle the case where the first item is a transition
-            if (actualStartFrame < 0) {
-                startFrame -= actualStartFrame;
-                actualStartFrame = 0;
-            }
-            // Track sequence durations for overlay validation
-            sequenceDurations.push(durationInFramesProp);
-            // Validate: check if a preceding overlay extends beyond this sequence
-            if (pendingOverlayValidation) {
-                pendingOverlayValidation = false;
-                const lastOverlay = overlayRenders[overlayRenders.length - 1];
-                const framesAfterCut = lastOverlay.halfDuration + lastOverlay.overlayOffset;
-                if (framesAfterCut > durationInFramesProp) {
-                    throw new TypeError(`A <TransitionSeries.Overlay /> extends beyond the next sequence. The overlay needs ${framesAfterCut} frames after the cut, but the next sequence is only ${durationInFramesProp} frames long.`);
-                }
-            }
-            const nextProgress = next
-                ? next.props.timing.getProgress({
-                    frame: frame -
-                        actualStartFrame -
-                        durationInFrames +
-                        next.props.timing.getDurationInFrames({ fps }),
-                    fps,
-                })
-                : null;
-            const prevProgress = prev
-                ? prev.props.timing.getProgress({
-                    frame: frame - actualStartFrame,
-                    fps,
-                })
-                : null;
-            if (next &&
-                durationInFramesProp < next.props.timing.getDurationInFrames({ fps })) {
-                throw new Error(`The duration of a <TransitionSeries.Sequence /> must not be shorter than the duration of the next <TransitionSeries.Transition />. The transition is ${next.props.timing.getDurationInFrames({ fps })} frames long, but the sequence is only ${durationInFramesProp} frames long (${debugInfo})`);
-            }
-            if (prev &&
-                durationInFramesProp < prev.props.timing.getDurationInFrames({ fps })) {
-                throw new Error(`The duration of a <TransitionSeries.Sequence /> must not be shorter than the duration of the previous <TransitionSeries.Transition />. The transition is ${prev.props.timing.getDurationInFrames({ fps })} frames long, but the sequence is only ${durationInFramesProp} frames long (${debugInfo})`);
-            }
-            if (next && prev && nextProgress !== null && prevProgress !== null) {
-                const nextPresentation = (_c = next.props.presentation) !== null && _c !== void 0 ? _c : (0, slide_js_1.slide)();
-                const prevPresentation = (_d = prev.props.presentation) !== null && _d !== void 0 ? _d : (0, slide_js_1.slide)();
-                const UppercaseNextPresentation = nextPresentation.component;
-                const UppercasePrevPresentation = prevPresentation.component;
-                return (jsx_runtime_1.jsx(SequenceWithoutSchema
-                // eslint-disable-next-line react/no-array-index-key
-                , { from: actualStartFrame, durationInFrames: durationInFramesProp, ...passedProps, name: passedProps.name || '<TS.Sequence>', _remotionInternalDocumentationLink: passedProps.name
-                        ? undefined
-                        : 'https://www.remotion.dev/docs/transitions/transitionseries', children: jsx_runtime_1.jsx(UppercaseNextPresentation, { passedProps: (_e = nextPresentation.props) !== null && _e !== void 0 ? _e : {}, presentationDirection: "exiting", presentationProgress: nextProgress, presentationDurationInFrames: next.props.timing.getDurationInFrames({ fps }), onElementImage: () => {
-                            throw new Error('Should not call when exiting');
-                        }, onUnmount: () => {
-                            throw new Error('Should not call when exiting');
-                        }, bothEnteringAndExiting: true, children: jsx_runtime_1.jsx(context_js_1.WrapInExitingProgressContext, { presentationProgress: nextProgress, children: jsx_runtime_1.jsx(UppercasePrevPresentation, { passedProps: (_f = prevPresentation.props) !== null && _f !== void 0 ? _f : {}, presentationDirection: "entering", presentationProgress: prevProgress, presentationDurationInFrames: prev.props.timing.getDurationInFrames({ fps }), onElementImage: (elementImage, draw) => {
-                                    onPrevElementImage(elementImage, nextProgress, draw, i + 1);
-                                    onNextElementImage(elementImage, prevProgress, draw, i - 1);
+            return react_1.default.cloneElement(castedChildAgain, {
+                _remotionInternalRender: (resolvedProps) => {
+                    var _a, _b, _c, _d, _e, _f, _g, _h;
+                    const durationInFramesProp = resolvedProps.durationInFrames;
+                    const debugInfo = `index = ${i}, duration = ${durationInFramesProp}`;
+                    const { durationInFrames, children: sequenceChildren, offset: offsetProp, controls, stack, from: _from, ...passedProps } = resolvedProps;
+                    (0, validate_js_1.validateDurationInFrames)(durationInFramesProp, {
+                        component: `of a <TransitionSeries.Sequence /> component`,
+                        allowFloats: true,
+                    });
+                    const offset = offsetProp !== null && offsetProp !== void 0 ? offsetProp : 0;
+                    if (Number.isNaN(offset)) {
+                        throw new TypeError(`The "offset" property of a <TransitionSeries.Sequence /> must not be NaN, but got NaN (${debugInfo}).`);
+                    }
+                    if (!Number.isFinite(offset)) {
+                        throw new TypeError(`The "offset" property of a <TransitionSeries.Sequence /> must be finite, but got ${offset} (${debugInfo}).`);
+                    }
+                    if (offset % 1 !== 0) {
+                        throw new TypeError(`The "offset" property of a <TransitionSeries.Sequence /> must be finite, but got ${offset} (${debugInfo}).`);
+                    }
+                    let resolvedTransitionOffsets = transitionOffsets;
+                    let resolvedStartFrame = startFrame;
+                    let resolvedPendingOverlayValidation = pendingOverlayValidation;
+                    const currentStartFrame = resolvedStartFrame + offset;
+                    let duration = 0;
+                    if (prev) {
+                        duration = prev.props.timing.getDurationInFrames({
+                            fps,
+                        });
+                        resolvedTransitionOffsets -= duration;
+                    }
+                    let actualStartFrame = currentStartFrame + resolvedTransitionOffsets;
+                    resolvedStartFrame += durationInFramesProp + offset;
+                    // Handle the case where the first item is a transition
+                    if (actualStartFrame < 0) {
+                        resolvedStartFrame -= actualStartFrame;
+                        actualStartFrame = 0;
+                    }
+                    // Track resolved durations so later sequences and overlay validation use
+                    // the live Studio override instead of the original JSX value.
+                    const nextSequenceDurations = [
+                        ...sequenceDurations,
+                        durationInFramesProp,
+                    ];
+                    // Validate: check if a preceding overlay extends beyond this sequence
+                    if (resolvedPendingOverlayValidation) {
+                        resolvedPendingOverlayValidation = false;
+                        const lastOverlay = overlayRenders[overlayRenders.length - 1];
+                        if (!lastOverlay) {
+                            throw new Error('Expected an overlay to validate');
+                        }
+                        const framesAfterCut = lastOverlay.halfDuration + lastOverlay.overlayOffset;
+                        if (framesAfterCut > durationInFramesProp) {
+                            throw new TypeError(`A <TransitionSeries.Overlay /> extends beyond the next sequence. The overlay needs ${framesAfterCut} frames after the cut, but the next sequence is only ${durationInFramesProp} frames long.`);
+                        }
+                    }
+                    const renderSequenceAndRest = (sequence) => {
+                        return (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [sequence, renderNext({
+                                    transitionOffsets: resolvedTransitionOffsets,
+                                    startFrame: resolvedStartFrame,
+                                    sequenceDurations: nextSequenceDurations,
+                                    pendingOverlayValidation: resolvedPendingOverlayValidation,
+                                })] }));
+                    };
+                    const nextProgress = next
+                        ? next.props.timing.getProgress({
+                            frame: frame -
+                                actualStartFrame -
+                                durationInFrames +
+                                next.props.timing.getDurationInFrames({ fps }),
+                            fps,
+                        })
+                        : null;
+                    const prevProgress = prev
+                        ? prev.props.timing.getProgress({
+                            frame: frame - actualStartFrame,
+                            fps,
+                        })
+                        : null;
+                    if (next &&
+                        durationInFramesProp < next.props.timing.getDurationInFrames({ fps })) {
+                        throw new Error(`The duration of a <TransitionSeries.Sequence /> must not be shorter than the duration of the next <TransitionSeries.Transition />. The transition is ${next.props.timing.getDurationInFrames({ fps })} frames long, but the sequence is only ${durationInFramesProp} frames long (${debugInfo})`);
+                    }
+                    if (prev &&
+                        durationInFramesProp < prev.props.timing.getDurationInFrames({ fps })) {
+                        throw new Error(`The duration of a <TransitionSeries.Sequence /> must not be shorter than the duration of the previous <TransitionSeries.Transition />. The transition is ${prev.props.timing.getDurationInFrames({ fps })} frames long, but the sequence is only ${durationInFramesProp} frames long (${debugInfo})`);
+                    }
+                    if (next && prev && nextProgress !== null && prevProgress !== null) {
+                        const nextPresentation = (_a = next.props.presentation) !== null && _a !== void 0 ? _a : (0, slide_js_1.slide)();
+                        const prevPresentation = (_b = prev.props.presentation) !== null && _b !== void 0 ? _b : (0, slide_js_1.slide)();
+                        const UppercaseNextPresentation = nextPresentation.component;
+                        const UppercasePrevPresentation = prevPresentation.component;
+                        return renderSequenceAndRest(jsx_runtime_1.jsx(SequenceWithoutSchema, { from: actualStartFrame, durationInFrames: durationInFramesProp, ...passedProps, name: passedProps.name || '<TS.Sequence>', _remotionInternalDocumentationLink: passedProps.name
+                                ? undefined
+                                : 'https://www.remotion.dev/docs/transitions/transitionseries', _remotionInternalStack: stack !== null && stack !== void 0 ? stack : undefined, controls: controls !== null && controls !== void 0 ? controls : undefined, children: jsx_runtime_1.jsx(UppercaseNextPresentation, { passedProps: (_c = nextPresentation.props) !== null && _c !== void 0 ? _c : {}, presentationDirection: "exiting", presentationProgress: nextProgress, presentationDurationInFrames: next.props.timing.getDurationInFrames({ fps }), onElementImage: () => {
+                                    throw new Error('Should not call when exiting');
                                 }, onUnmount: () => {
-                                    onPrevElementImage(null, null, null, i + 1);
+                                    throw new Error('Should not call when exiting');
+                                }, bothEnteringAndExiting: true, children: jsx_runtime_1.jsx(context_js_1.WrapInExitingProgressContext, { presentationProgress: nextProgress, children: jsx_runtime_1.jsx(UppercasePrevPresentation, { passedProps: (_d = prevPresentation.props) !== null && _d !== void 0 ? _d : {}, presentationDirection: "entering", presentationProgress: prevProgress, presentationDurationInFrames: prev.props.timing.getDurationInFrames({ fps }), onElementImage: (elementImage, draw) => {
+                                            onPrevElementImage(elementImage, nextProgress, draw, i + 1);
+                                            onNextElementImage(elementImage, prevProgress, draw, i - 1);
+                                        }, onUnmount: () => {
+                                            onPrevElementImage(null, null, null, i + 1);
+                                            onNextElementImage(null, null, null, i - 1);
+                                        }, bothEnteringAndExiting: true, children: jsx_runtime_1.jsx(context_js_1.WrapInEnteringProgressContext, { presentationProgress: prevProgress, children: sequenceChildren }) }) }) }) }, i));
+                    }
+                    if (prevProgress !== null && prev) {
+                        const prevPresentation = (_e = prev.props.presentation) !== null && _e !== void 0 ? _e : (0, slide_js_1.slide)();
+                        const UppercasePrevPresentation = prevPresentation.component;
+                        return renderSequenceAndRest(jsx_runtime_1.jsx(SequenceWithoutSchema, { from: actualStartFrame, durationInFrames: durationInFramesProp, ...passedProps, name: passedProps.name || '<TS.Sequence>', _remotionInternalDocumentationLink: passedProps.name
+                                ? undefined
+                                : 'https://www.remotion.dev/docs/transitions/transitionseries', _remotionInternalStack: stack !== null && stack !== void 0 ? stack : undefined, controls: controls !== null && controls !== void 0 ? controls : undefined, children: jsx_runtime_1.jsx(UppercasePrevPresentation, { passedProps: (_f = prevPresentation.props) !== null && _f !== void 0 ? _f : {}, presentationDirection: "entering", presentationProgress: prevProgress, presentationDurationInFrames: prev.props.timing.getDurationInFrames({ fps }), onElementImage: (elementImage, draw) => onNextElementImage(elementImage, prevProgress, draw, i - 1), onUnmount: () => {
                                     onNextElementImage(null, null, null, i - 1);
-                                }, bothEnteringAndExiting: true, children: jsx_runtime_1.jsx(context_js_1.WrapInEnteringProgressContext, { presentationProgress: prevProgress, children: child }) }) }) }) }, i));
-            }
-            if (prevProgress !== null && prev) {
-                const prevPresentation = (_g = prev.props.presentation) !== null && _g !== void 0 ? _g : (0, slide_js_1.slide)();
-                const UppercasePrevPresentation = prevPresentation.component;
-                return (jsx_runtime_1.jsx(SequenceWithoutSchema
-                // eslint-disable-next-line react/no-array-index-key
-                , { from: actualStartFrame, durationInFrames: durationInFramesProp, ...passedProps, name: passedProps.name || '<TS.Sequence>', _remotionInternalDocumentationLink: passedProps.name
-                        ? undefined
-                        : 'https://www.remotion.dev/docs/transitions/transitionseries', children: jsx_runtime_1.jsx(UppercasePrevPresentation, { passedProps: (_h = prevPresentation.props) !== null && _h !== void 0 ? _h : {}, presentationDirection: "entering", presentationProgress: prevProgress, presentationDurationInFrames: prev.props.timing.getDurationInFrames({ fps }), onElementImage: (elementImage, draw) => onNextElementImage(elementImage, prevProgress, draw, i - 1), onUnmount: () => {
-                            onNextElementImage(null, null, null, i - 1);
-                        }, bothEnteringAndExiting: false, children: jsx_runtime_1.jsx(context_js_1.WrapInEnteringProgressContext, { presentationProgress: prevProgress, children: child }) }) }, i));
-            }
-            if (nextProgress !== null && next) {
-                const nextPresentation = (_j = next.props.presentation) !== null && _j !== void 0 ? _j : (0, slide_js_1.slide)();
-                const UppercaseNextPresentation = nextPresentation.component;
-                return (jsx_runtime_1.jsx(SequenceWithoutSchema
-                // eslint-disable-next-line react/no-array-index-key
-                , { from: actualStartFrame, durationInFrames: durationInFramesProp, ...passedProps, name: passedProps.name || '<TS.Sequence>', _remotionInternalDocumentationLink: passedProps.name
-                        ? undefined
-                        : 'https://www.remotion.dev/docs/transitions/transitionseries', children: jsx_runtime_1.jsx(UppercaseNextPresentation, { passedProps: (_k = nextPresentation.props) !== null && _k !== void 0 ? _k : {}, presentationDirection: "exiting", presentationProgress: nextProgress, presentationDurationInFrames: next.props.timing.getDurationInFrames({ fps }), onElementImage: (elementImage, draw) => onPrevElementImage(elementImage, nextProgress, draw, i + 1), onUnmount: () => {
-                            onPrevElementImage(null, null, null, i + 1);
-                        }, bothEnteringAndExiting: false, children: jsx_runtime_1.jsx(context_js_1.WrapInExitingProgressContext, { presentationProgress: nextProgress, children: child }) }) }, i));
-            }
-            return (jsx_runtime_1.jsx(SequenceWithoutSchema
-            // eslint-disable-next-line react/no-array-index-key
-            , { from: actualStartFrame, durationInFrames: durationInFramesProp, ...passedProps, name: passedProps.name || '<TS.Sequence>', _remotionInternalDocumentationLink: passedProps.name
-                    ? undefined
-                    : 'https://www.remotion.dev/docs/transitions/transitionseries', children: child }, i));
-        });
-        // Now render overlay sequences
-        const overlayElements = overlayRenders.map((overlayInfo) => {
-            const info = overlayInfo;
-            return (jsx_runtime_1.jsx(SequenceWithoutSchema, { from: Math.round(info.overlayFrom), durationInFrames: info.durationInFrames, name: "<TS.Overlay>", _remotionInternalDocumentationLink: "https://www.remotion.dev/docs/transitions/transitionseries", layout: "absolute-fill", children: info.children }, `overlay-${info.index}`));
+                                }, bothEnteringAndExiting: false, children: jsx_runtime_1.jsx(context_js_1.WrapInEnteringProgressContext, { presentationProgress: prevProgress, children: sequenceChildren }) }) }, i));
+                    }
+                    if (nextProgress !== null && next) {
+                        const nextPresentation = (_g = next.props.presentation) !== null && _g !== void 0 ? _g : (0, slide_js_1.slide)();
+                        const UppercaseNextPresentation = nextPresentation.component;
+                        return renderSequenceAndRest(jsx_runtime_1.jsx(SequenceWithoutSchema, { from: actualStartFrame, durationInFrames: durationInFramesProp, ...passedProps, name: passedProps.name || '<TS.Sequence>', _remotionInternalDocumentationLink: passedProps.name
+                                ? undefined
+                                : 'https://www.remotion.dev/docs/transitions/transitionseries', _remotionInternalStack: stack !== null && stack !== void 0 ? stack : undefined, controls: controls !== null && controls !== void 0 ? controls : undefined, children: jsx_runtime_1.jsx(UppercaseNextPresentation, { passedProps: (_h = nextPresentation.props) !== null && _h !== void 0 ? _h : {}, presentationDirection: "exiting", presentationProgress: nextProgress, presentationDurationInFrames: next.props.timing.getDurationInFrames({ fps }), onElementImage: (elementImage, draw) => onPrevElementImage(elementImage, nextProgress, draw, i + 1), onUnmount: () => {
+                                    onPrevElementImage(null, null, null, i + 1);
+                                }, bothEnteringAndExiting: false, children: jsx_runtime_1.jsx(context_js_1.WrapInExitingProgressContext, { presentationProgress: nextProgress, children: sequenceChildren }) }) }, i));
+                    }
+                    return renderSequenceAndRest(jsx_runtime_1.jsx(SequenceWithoutSchema, { from: actualStartFrame, durationInFrames: durationInFramesProp, ...passedProps, name: passedProps.name || '<TS.Sequence>', _remotionInternalDocumentationLink: passedProps.name
+                            ? undefined
+                            : 'https://www.remotion.dev/docs/transitions/transitionseries', _remotionInternalStack: stack !== null && stack !== void 0 ? stack : undefined, controls: controls !== null && controls !== void 0 ? controls : undefined, children: sequenceChildren }, i));
+                },
+            });
+        };
+        return renderChildren({
+            index: 0,
+            transitionOffsets: 0,
+            startFrame: 0,
+            overlayRenders: [],
+            sequenceDurations: [],
+            pendingOverlayValidation: false,
         });
-        return [...(mainChildren || []), ...overlayElements];
     }, [flattedChildren, fps, frame, onPrevElementImage, onNextElementImage]);
     // eslint-disable-next-line react/jsx-no-useless-fragment
     return jsx_runtime_1.jsx(jsx_runtime_1.Fragment, { children: childrenValue });

package/dist/esm/index.mjs

@@ -1097,7 +1097,7 @@ var springTiming = (options = {}) => {
   };
 };
 // src/TransitionSeries.tsx
-import { Children, useCallback as useCallback2, useMemo as useMemo4, useRef as useRef2 } from "react";
+import React4, { useCallback as useCallback2, useMemo as useMemo4, useRef as useRef2 } from "react";
 import {
   Internals as Internals2,
   Interactive,
@@ -1153,19 +1153,78 @@ import { NoReactInternals } from "remotion/no-react";
 var validateDurationInFrames = NoReactInternals.validateDurationInFrames;
 
 // src/TransitionSeries.tsx
-import { jsx as jsx4, Fragment } from "react/jsx-runtime";
+import { jsx as jsx4, jsxs, Fragment } from "react/jsx-runtime";
 var { SequenceWithoutSchema } = Internals2;
-var TransitionSeriesTransition = function(_props) {
+var TransitionSeriesTransitionInner = ({
+  stack = null,
+  _remotionInternalRender = null,
+  ...props
+}) => {
+  if (_remotionInternalRender) {
+    return _remotionInternalRender({ ...props, stack });
+  }
   return null;
 };
-var SeriesOverlay = () => {
+var transitionSeriesTransitionSchema = {};
+var TransitionSeriesTransition = Interactive.withSchema({
+  Component: TransitionSeriesTransitionInner,
+  componentName: "<TransitionSeries.Transition>",
+  componentIdentity: "dev.remotion.transitions.TransitionSeries.Transition",
+  schema: transitionSeriesTransitionSchema,
+  supportsEffects: false
+});
+var SeriesOverlayInner = ({
+  stack = null,
+  _remotionInternalRender = null,
+  ...props
+}) => {
+  if (_remotionInternalRender) {
+    return _remotionInternalRender({ ...props, stack });
+  }
   return null;
 };
-var SeriesSequence = ({ children }) => {
+var transitionSeriesOverlaySchema = {};
+var SeriesOverlay = Interactive.withSchema({
+  Component: SeriesOverlayInner,
+  componentName: "<TransitionSeries.Overlay>",
+  componentIdentity: "dev.remotion.transitions.TransitionSeries.Overlay",
+  schema: transitionSeriesOverlaySchema,
+  supportsEffects: false
+});
+var transitionSeriesSequenceSchema = {
+  durationInFrames: Internals2.durationInFramesField,
+  name: Internals2.sequenceSchema.name,
+  hidden: Internals2.sequenceSchema.hidden,
+  showInTimeline: Internals2.sequenceSchema.showInTimeline,
+  freeze: Internals2.freezeField,
+  layout: Internals2.sequenceSchema.layout
+};
+var SeriesSequenceInner = ({
+  offset = 0,
+  className = "",
+  stack = null,
+  _remotionInternalRender = null,
+  ...props
+}) => {
+  if (_remotionInternalRender) {
+    return _remotionInternalRender({
+      ...props,
+      offset,
+      className: className || undefined,
+      stack
+    });
+  }
   return /* @__PURE__ */ jsx4(Fragment, {
-    children
+    children: props.children
   });
 };
+var SeriesSequence = Interactive.withSchema({
+  Component: SeriesSequenceInner,
+  componentName: "<TransitionSeries.Sequence>",
+  componentIdentity: "dev.remotion.transitions.TransitionSeries.Sequence",
+  schema: transitionSeriesSequenceSchema,
+  supportsEffects: false
+});
 var transitionSeriesSchema = {
   name: Internals2.sequenceSchema.name,
   hidden: Internals2.sequenceSchema.hidden,
@@ -1211,16 +1270,35 @@ var TransitionSeriesChildren = ({
     drawIfSynced(index);
   }, [drawIfSynced]);
   const childrenValue = useMemo4(() => {
-    let transitionOffsets = 0;
-    let startFrame = 0;
-    const overlayRenders = [];
-    const sequenceDurations = [];
-    let pendingOverlayValidation = false;
-    const mainChildren = Children.map(flattedChildren, (child, i) => {
+    const renderChildren = (state) => {
+      const {
+        index: i,
+        transitionOffsets,
+        startFrame,
+        overlayRenders,
+        sequenceDurations,
+        pendingOverlayValidation
+      } = state;
+      if (i === flattedChildren.length) {
+        return overlayRenders.map((info) => /* @__PURE__ */ jsx4(SequenceWithoutSchema, {
+          from: Math.round(info.overlayFrom),
+          durationInFrames: info.durationInFrames,
+          name: "<TS.Overlay>",
+          _remotionInternalDocumentationLink: "https://www.remotion.dev/docs/transitions/transitionseries",
+          _remotionInternalStack: info.stack ?? undefined,
+          controls: info.controls ?? undefined,
+          layout: "absolute-fill",
+          children: info.children
+        }, `overlay-${info.index}`));
+      }
+      const child = flattedChildren[i];
       const current = child;
+      const renderNext = (overrides = {}) => {
+        return renderChildren({ ...state, ...overrides, index: i + 1 });
+      };
       if (typeof current === "string") {
         if (current.trim() === "") {
-          return null;
+          return renderNext();
         }
         throw new TypeError(`The <TransitionSeries /> component only accepts a list of <TransitionSeries.Sequence /> components as its children, but you passed a string "${current}"`);
       }
@@ -1239,45 +1317,53 @@ var TransitionSeriesChildren = ({
         if (nextIsTransition) {
           throw new TypeError(`A <TransitionSeries.Overlay /> component must not be followed by a <TransitionSeries.Transition /> component (nth children = ${i} and ${i + 1})`);
         }
-        const overlayProps = current.props;
-        validateDurationInFrames(overlayProps.durationInFrames, {
-          component: `of a <TransitionSeries.Overlay /> component`,
-          allowFloats: false
-        });
-        const overlayOffset = overlayProps.offset ?? 0;
-        if (Number.isNaN(overlayOffset)) {
-          throw new TypeError(`The "offset" property of a <TransitionSeries.Overlay /> must not be NaN, but got NaN.`);
-        }
-        if (!Number.isFinite(overlayOffset)) {
-          throw new TypeError(`The "offset" property of a <TransitionSeries.Overlay /> must be finite, but got ${overlayOffset}.`);
-        }
-        if (overlayOffset % 1 !== 0) {
-          throw new TypeError(`The "offset" property of a <TransitionSeries.Overlay /> must be an integer, but got ${overlayOffset}.`);
-        }
-        const cutPoint = startFrame + transitionOffsets;
-        const halfDuration = overlayProps.durationInFrames / 2;
-        const overlayFrom = cutPoint - halfDuration + overlayOffset;
-        if (overlayFrom < 0) {
-          throw new TypeError(`A <TransitionSeries.Overlay /> extends before frame 0. The overlay starts at frame ${overlayFrom}. Reduce the duration or adjust the offset.`);
-        }
-        const prevSeqIdx = sequenceDurations.length - 1;
-        if (prevSeqIdx >= 0) {
-          const overlayStartInPrev = halfDuration - overlayOffset;
-          if (overlayStartInPrev > sequenceDurations[prevSeqIdx]) {
-            throw new TypeError(`A <TransitionSeries.Overlay /> extends beyond the previous sequence. The overlay needs ${overlayStartInPrev} frames before the cut, but the previous sequence is only ${sequenceDurations[prevSeqIdx]} frames long.`);
+        const castedOverlay = current;
+        return React4.cloneElement(castedOverlay, {
+          _remotionInternalRender: (overlayProps) => {
+            validateDurationInFrames(overlayProps.durationInFrames, {
+              component: `of a <TransitionSeries.Overlay /> component`,
+              allowFloats: false
+            });
+            const overlayOffset = overlayProps.offset ?? 0;
+            if (Number.isNaN(overlayOffset)) {
+              throw new TypeError(`The "offset" property of a <TransitionSeries.Overlay /> must not be NaN, but got NaN.`);
+            }
+            if (!Number.isFinite(overlayOffset)) {
+              throw new TypeError(`The "offset" property of a <TransitionSeries.Overlay /> must be finite, but got ${overlayOffset}.`);
+            }
+            if (overlayOffset % 1 !== 0) {
+              throw new TypeError(`The "offset" property of a <TransitionSeries.Overlay /> must be an integer, but got ${overlayOffset}.`);
+            }
+            const cutPoint = startFrame + transitionOffsets;
+            const halfDuration = overlayProps.durationInFrames / 2;
+            const overlayFrom = cutPoint - halfDuration + overlayOffset;
+            if (overlayFrom < 0) {
+              throw new TypeError(`A <TransitionSeries.Overlay /> extends before frame 0. The overlay starts at frame ${overlayFrom}. Reduce the duration or adjust the offset.`);
+            }
+            const prevSeqIdx = sequenceDurations.length - 1;
+            if (prevSeqIdx >= 0) {
+              const overlayStartInPrev = halfDuration - overlayOffset;
+              if (overlayStartInPrev > sequenceDurations[prevSeqIdx]) {
+                throw new TypeError(`A <TransitionSeries.Overlay /> extends beyond the previous sequence. The overlay needs ${overlayStartInPrev} frames before the cut, but the previous sequence is only ${sequenceDurations[prevSeqIdx]} frames long.`);
+              }
+            }
+            const overlayRender = {
+              cutPoint,
+              overlayFrom,
+              durationInFrames: overlayProps.durationInFrames,
+              overlayOffset,
+              halfDuration,
+              children: overlayProps.children,
+              index: i,
+              controls: overlayProps.controls,
+              stack: overlayProps.stack
+            };
+            return renderNext({
+              overlayRenders: [...overlayRenders, overlayRender],
+              pendingOverlayValidation: true
+            });
           }
-        }
-        pendingOverlayValidation = true;
-        overlayRenders.push({
-          cutPoint,
-          overlayFrom,
-          durationInFrames: overlayProps.durationInFrames,
-          overlayOffset,
-          halfDuration,
-          children: overlayProps.children,
-          index: i
         });
-        return null;
       }
       if (current.type === TransitionSeriesTransition) {
         if (prevIsTransition) {
@@ -1286,7 +1372,27 @@ var TransitionSeriesChildren = ({
         if (prevIsOverlay) {
           throw new TypeError(`A <TransitionSeries.Overlay /> component must not be followed by a <TransitionSeries.Transition /> component (nth children = ${i - 1} and ${i})`);
         }
-        return null;
+        const castedTransition = current;
+        return React4.cloneElement(castedTransition, {
+          _remotionInternalRender: (transitionProps) => {
+            const transitionDuration = transitionProps.timing.getDurationInFrames({ fps });
+            const transitionFrom = startFrame + transitionOffsets - transitionDuration;
+            return /* @__PURE__ */ jsxs(Fragment, {
+              children: [
+                transitionDuration > 0 ? /* @__PURE__ */ jsx4(SequenceWithoutSchema, {
+                  from: transitionFrom,
+                  durationInFrames: transitionDuration,
+                  name: "<TS.Transition>",
+                  _remotionInternalDocumentationLink: "https://www.remotion.dev/docs/transitions/transitionseries",
+                  _remotionInternalStack: transitionProps.stack ?? undefined,
+                  controls: transitionProps.controls ?? undefined,
+                  layout: "none"
+                }) : null,
+                renderNext()
+              ]
+            });
+          }
+        });
       }
       if (current.type !== SeriesSequence) {
         throw new TypeError(`The <TransitionSeries /> component only accepts a list of <TransitionSeries.Sequence />, <TransitionSeries.Transition />, and <TransitionSeries.Overlay /> components as its children, but got ${current} instead`);
@@ -1294,186 +1400,219 @@ var TransitionSeriesChildren = ({
       const prev = typeof hasPrev === "string" || typeof hasPrev === "undefined" ? null : hasPrev.type === TransitionSeriesTransition ? hasPrev : null;
       const next = typeof nextPrev === "string" || typeof nextPrev === "undefined" ? null : nextPrev.type === TransitionSeriesTransition ? nextPrev : null;
       const castedChildAgain = current;
-      const debugInfo = `index = ${i}, duration = ${castedChildAgain.props.durationInFrames}`;
-      const durationInFramesProp = castedChildAgain.props.durationInFrames;
-      const {
-        durationInFrames,
-        children: _children,
-        from: _from,
-        ...passedProps
-      } = castedChildAgain.props;
-      validateDurationInFrames(durationInFramesProp, {
-        component: `of a <TransitionSeries.Sequence /> component`,
-        allowFloats: true
-      });
-      const offset = castedChildAgain.props.offset ?? 0;
-      if (Number.isNaN(offset)) {
-        throw new TypeError(`The "offset" property of a <TransitionSeries.Sequence /> must not be NaN, but got NaN (${debugInfo}).`);
-      }
-      if (!Number.isFinite(offset)) {
-        throw new TypeError(`The "offset" property of a <TransitionSeries.Sequence /> must be finite, but got ${offset} (${debugInfo}).`);
-      }
-      if (offset % 1 !== 0) {
-        throw new TypeError(`The "offset" property of a <TransitionSeries.Sequence /> must be finite, but got ${offset} (${debugInfo}).`);
-      }
-      const currentStartFrame = startFrame + offset;
-      let duration = 0;
-      if (prev) {
-        duration = prev.props.timing.getDurationInFrames({
-          fps
-        });
-        transitionOffsets -= duration;
-      }
-      let actualStartFrame = currentStartFrame + transitionOffsets;
-      startFrame += durationInFramesProp + offset;
-      if (actualStartFrame < 0) {
-        startFrame -= actualStartFrame;
-        actualStartFrame = 0;
-      }
-      sequenceDurations.push(durationInFramesProp);
-      if (pendingOverlayValidation) {
-        pendingOverlayValidation = false;
-        const lastOverlay = overlayRenders[overlayRenders.length - 1];
-        const framesAfterCut = lastOverlay.halfDuration + lastOverlay.overlayOffset;
-        if (framesAfterCut > durationInFramesProp) {
-          throw new TypeError(`A <TransitionSeries.Overlay /> extends beyond the next sequence. The overlay needs ${framesAfterCut} frames after the cut, but the next sequence is only ${durationInFramesProp} frames long.`);
-        }
-      }
-      const nextProgress = next ? next.props.timing.getProgress({
-        frame: frame - actualStartFrame - durationInFrames + next.props.timing.getDurationInFrames({ fps }),
-        fps
-      }) : null;
-      const prevProgress = prev ? prev.props.timing.getProgress({
-        frame: frame - actualStartFrame,
-        fps
-      }) : null;
-      if (next && durationInFramesProp < next.props.timing.getDurationInFrames({ fps })) {
-        throw new Error(`The duration of a <TransitionSeries.Sequence /> must not be shorter than the duration of the next <TransitionSeries.Transition />. The transition is ${next.props.timing.getDurationInFrames({ fps })} frames long, but the sequence is only ${durationInFramesProp} frames long (${debugInfo})`);
-      }
-      if (prev && durationInFramesProp < prev.props.timing.getDurationInFrames({ fps })) {
-        throw new Error(`The duration of a <TransitionSeries.Sequence /> must not be shorter than the duration of the previous <TransitionSeries.Transition />. The transition is ${prev.props.timing.getDurationInFrames({ fps })} frames long, but the sequence is only ${durationInFramesProp} frames long (${debugInfo})`);
-      }
-      if (next && prev && nextProgress !== null && prevProgress !== null) {
-        const nextPresentation = next.props.presentation ?? slide();
-        const prevPresentation = prev.props.presentation ?? slide();
-        const UppercaseNextPresentation = nextPresentation.component;
-        const UppercasePrevPresentation = prevPresentation.component;
-        return /* @__PURE__ */ jsx4(SequenceWithoutSchema, {
-          from: actualStartFrame,
-          durationInFrames: durationInFramesProp,
-          ...passedProps,
-          name: passedProps.name || "<TS.Sequence>",
-          _remotionInternalDocumentationLink: passedProps.name ? undefined : "https://www.remotion.dev/docs/transitions/transitionseries",
-          children: /* @__PURE__ */ jsx4(UppercaseNextPresentation, {
-            passedProps: nextPresentation.props ?? {},
-            presentationDirection: "exiting",
-            presentationProgress: nextProgress,
-            presentationDurationInFrames: next.props.timing.getDurationInFrames({ fps }),
-            onElementImage: () => {
-              throw new Error("Should not call when exiting");
-            },
-            onUnmount: () => {
-              throw new Error("Should not call when exiting");
-            },
-            bothEnteringAndExiting: true,
-            children: /* @__PURE__ */ jsx4(WrapInExitingProgressContext, {
-              presentationProgress: nextProgress,
+      return React4.cloneElement(castedChildAgain, {
+        _remotionInternalRender: (resolvedProps) => {
+          const durationInFramesProp = resolvedProps.durationInFrames;
+          const debugInfo = `index = ${i}, duration = ${durationInFramesProp}`;
+          const {
+            durationInFrames,
+            children: sequenceChildren,
+            offset: offsetProp,
+            controls,
+            stack,
+            from: _from,
+            ...passedProps
+          } = resolvedProps;
+          validateDurationInFrames(durationInFramesProp, {
+            component: `of a <TransitionSeries.Sequence /> component`,
+            allowFloats: true
+          });
+          const offset = offsetProp ?? 0;
+          if (Number.isNaN(offset)) {
+            throw new TypeError(`The "offset" property of a <TransitionSeries.Sequence /> must not be NaN, but got NaN (${debugInfo}).`);
+          }
+          if (!Number.isFinite(offset)) {
+            throw new TypeError(`The "offset" property of a <TransitionSeries.Sequence /> must be finite, but got ${offset} (${debugInfo}).`);
+          }
+          if (offset % 1 !== 0) {
+            throw new TypeError(`The "offset" property of a <TransitionSeries.Sequence /> must be finite, but got ${offset} (${debugInfo}).`);
+          }
+          let resolvedTransitionOffsets = transitionOffsets;
+          let resolvedStartFrame = startFrame;
+          let resolvedPendingOverlayValidation = pendingOverlayValidation;
+          const currentStartFrame = resolvedStartFrame + offset;
+          let duration = 0;
+          if (prev) {
+            duration = prev.props.timing.getDurationInFrames({
+              fps
+            });
+            resolvedTransitionOffsets -= duration;
+          }
+          let actualStartFrame = currentStartFrame + resolvedTransitionOffsets;
+          resolvedStartFrame += durationInFramesProp + offset;
+          if (actualStartFrame < 0) {
+            resolvedStartFrame -= actualStartFrame;
+            actualStartFrame = 0;
+          }
+          const nextSequenceDurations = [
+            ...sequenceDurations,
+            durationInFramesProp
+          ];
+          if (resolvedPendingOverlayValidation) {
+            resolvedPendingOverlayValidation = false;
+            const lastOverlay = overlayRenders[overlayRenders.length - 1];
+            if (!lastOverlay) {
+              throw new Error("Expected an overlay to validate");
+            }
+            const framesAfterCut = lastOverlay.halfDuration + lastOverlay.overlayOffset;
+            if (framesAfterCut > durationInFramesProp) {
+              throw new TypeError(`A <TransitionSeries.Overlay /> extends beyond the next sequence. The overlay needs ${framesAfterCut} frames after the cut, but the next sequence is only ${durationInFramesProp} frames long.`);
+            }
+          }
+          const renderSequenceAndRest = (sequence) => {
+            return /* @__PURE__ */ jsxs(Fragment, {
+              children: [
+                sequence,
+                renderNext({
+                  transitionOffsets: resolvedTransitionOffsets,
+                  startFrame: resolvedStartFrame,
+                  sequenceDurations: nextSequenceDurations,
+                  pendingOverlayValidation: resolvedPendingOverlayValidation
+                })
+              ]
+            });
+          };
+          const nextProgress = next ? next.props.timing.getProgress({
+            frame: frame - actualStartFrame - durationInFrames + next.props.timing.getDurationInFrames({ fps }),
+            fps
+          }) : null;
+          const prevProgress = prev ? prev.props.timing.getProgress({
+            frame: frame - actualStartFrame,
+            fps
+          }) : null;
+          if (next && durationInFramesProp < next.props.timing.getDurationInFrames({ fps })) {
+            throw new Error(`The duration of a <TransitionSeries.Sequence /> must not be shorter than the duration of the next <TransitionSeries.Transition />. The transition is ${next.props.timing.getDurationInFrames({ fps })} frames long, but the sequence is only ${durationInFramesProp} frames long (${debugInfo})`);
+          }
+          if (prev && durationInFramesProp < prev.props.timing.getDurationInFrames({ fps })) {
+            throw new Error(`The duration of a <TransitionSeries.Sequence /> must not be shorter than the duration of the previous <TransitionSeries.Transition />. The transition is ${prev.props.timing.getDurationInFrames({ fps })} frames long, but the sequence is only ${durationInFramesProp} frames long (${debugInfo})`);
+          }
+          if (next && prev && nextProgress !== null && prevProgress !== null) {
+            const nextPresentation = next.props.presentation ?? slide();
+            const prevPresentation = prev.props.presentation ?? slide();
+            const UppercaseNextPresentation = nextPresentation.component;
+            const UppercasePrevPresentation = prevPresentation.component;
+            return renderSequenceAndRest(/* @__PURE__ */ jsx4(SequenceWithoutSchema, {
+              from: actualStartFrame,
+              durationInFrames: durationInFramesProp,
+              ...passedProps,
+              name: passedProps.name || "<TS.Sequence>",
+              _remotionInternalDocumentationLink: passedProps.name ? undefined : "https://www.remotion.dev/docs/transitions/transitionseries",
+              _remotionInternalStack: stack ?? undefined,
+              controls: controls ?? undefined,
+              children: /* @__PURE__ */ jsx4(UppercaseNextPresentation, {
+                passedProps: nextPresentation.props ?? {},
+                presentationDirection: "exiting",
+                presentationProgress: nextProgress,
+                presentationDurationInFrames: next.props.timing.getDurationInFrames({ fps }),
+                onElementImage: () => {
+                  throw new Error("Should not call when exiting");
+                },
+                onUnmount: () => {
+                  throw new Error("Should not call when exiting");
+                },
+                bothEnteringAndExiting: true,
+                children: /* @__PURE__ */ jsx4(WrapInExitingProgressContext, {
+                  presentationProgress: nextProgress,
+                  children: /* @__PURE__ */ jsx4(UppercasePrevPresentation, {
+                    passedProps: prevPresentation.props ?? {},
+                    presentationDirection: "entering",
+                    presentationProgress: prevProgress,
+                    presentationDurationInFrames: prev.props.timing.getDurationInFrames({ fps }),
+                    onElementImage: (elementImage, draw) => {
+                      onPrevElementImage(elementImage, nextProgress, draw, i + 1);
+                      onNextElementImage(elementImage, prevProgress, draw, i - 1);
+                    },
+                    onUnmount: () => {
+                      onPrevElementImage(null, null, null, i + 1);
+                      onNextElementImage(null, null, null, i - 1);
+                    },
+                    bothEnteringAndExiting: true,
+                    children: /* @__PURE__ */ jsx4(WrapInEnteringProgressContext, {
+                      presentationProgress: prevProgress,
+                      children: sequenceChildren
+                    })
+                  })
+                })
+              })
+            }, i));
+          }
+          if (prevProgress !== null && prev) {
+            const prevPresentation = prev.props.presentation ?? slide();
+            const UppercasePrevPresentation = prevPresentation.component;
+            return renderSequenceAndRest(/* @__PURE__ */ jsx4(SequenceWithoutSchema, {
+              from: actualStartFrame,
+              durationInFrames: durationInFramesProp,
+              ...passedProps,
+              name: passedProps.name || "<TS.Sequence>",
+              _remotionInternalDocumentationLink: passedProps.name ? undefined : "https://www.remotion.dev/docs/transitions/transitionseries",
+              _remotionInternalStack: stack ?? undefined,
+              controls: controls ?? undefined,
               children: /* @__PURE__ */ jsx4(UppercasePrevPresentation, {
                 passedProps: prevPresentation.props ?? {},
                 presentationDirection: "entering",
                 presentationProgress: prevProgress,
                 presentationDurationInFrames: prev.props.timing.getDurationInFrames({ fps }),
-                onElementImage: (elementImage, draw) => {
-                  onPrevElementImage(elementImage, nextProgress, draw, i + 1);
-                  onNextElementImage(elementImage, prevProgress, draw, i - 1);
-                },
+                onElementImage: (elementImage, draw) => onNextElementImage(elementImage, prevProgress, draw, i - 1),
                 onUnmount: () => {
-                  onPrevElementImage(null, null, null, i + 1);
                   onNextElementImage(null, null, null, i - 1);
                 },
-                bothEnteringAndExiting: true,
+                bothEnteringAndExiting: false,
                 children: /* @__PURE__ */ jsx4(WrapInEnteringProgressContext, {
                   presentationProgress: prevProgress,
-                  children: child
+                  children: sequenceChildren
                 })
               })
-            })
-          })
-        }, i);
-      }
-      if (prevProgress !== null && prev) {
-        const prevPresentation = prev.props.presentation ?? slide();
-        const UppercasePrevPresentation = prevPresentation.component;
-        return /* @__PURE__ */ jsx4(SequenceWithoutSchema, {
-          from: actualStartFrame,
-          durationInFrames: durationInFramesProp,
-          ...passedProps,
-          name: passedProps.name || "<TS.Sequence>",
-          _remotionInternalDocumentationLink: passedProps.name ? undefined : "https://www.remotion.dev/docs/transitions/transitionseries",
-          children: /* @__PURE__ */ jsx4(UppercasePrevPresentation, {
-            passedProps: prevPresentation.props ?? {},
-            presentationDirection: "entering",
-            presentationProgress: prevProgress,
-            presentationDurationInFrames: prev.props.timing.getDurationInFrames({ fps }),
-            onElementImage: (elementImage, draw) => onNextElementImage(elementImage, prevProgress, draw, i - 1),
-            onUnmount: () => {
-              onNextElementImage(null, null, null, i - 1);
-            },
-            bothEnteringAndExiting: false,
-            children: /* @__PURE__ */ jsx4(WrapInEnteringProgressContext, {
-              presentationProgress: prevProgress,
-              children: child
-            })
-          })
-        }, i);
-      }
-      if (nextProgress !== null && next) {
-        const nextPresentation = next.props.presentation ?? slide();
-        const UppercaseNextPresentation = nextPresentation.component;
-        return /* @__PURE__ */ jsx4(SequenceWithoutSchema, {
-          from: actualStartFrame,
-          durationInFrames: durationInFramesProp,
-          ...passedProps,
-          name: passedProps.name || "<TS.Sequence>",
-          _remotionInternalDocumentationLink: passedProps.name ? undefined : "https://www.remotion.dev/docs/transitions/transitionseries",
-          children: /* @__PURE__ */ jsx4(UppercaseNextPresentation, {
-            passedProps: nextPresentation.props ?? {},
-            presentationDirection: "exiting",
-            presentationProgress: nextProgress,
-            presentationDurationInFrames: next.props.timing.getDurationInFrames({ fps }),
-            onElementImage: (elementImage, draw) => onPrevElementImage(elementImage, nextProgress, draw, i + 1),
-            onUnmount: () => {
-              onPrevElementImage(null, null, null, i + 1);
-            },
-            bothEnteringAndExiting: false,
-            children: /* @__PURE__ */ jsx4(WrapInExitingProgressContext, {
-              presentationProgress: nextProgress,
-              children: child
-            })
-          })
-        }, i);
-      }
-      return /* @__PURE__ */ jsx4(SequenceWithoutSchema, {
-        from: actualStartFrame,
-        durationInFrames: durationInFramesProp,
-        ...passedProps,
-        name: passedProps.name || "<TS.Sequence>",
-        _remotionInternalDocumentationLink: passedProps.name ? undefined : "https://www.remotion.dev/docs/transitions/transitionseries",
-        children: child
-      }, i);
-    });
-    const overlayElements = overlayRenders.map((overlayInfo) => {
-      const info = overlayInfo;
-      return /* @__PURE__ */ jsx4(SequenceWithoutSchema, {
-        from: Math.round(info.overlayFrom),
-        durationInFrames: info.durationInFrames,
-        name: "<TS.Overlay>",
-        _remotionInternalDocumentationLink: "https://www.remotion.dev/docs/transitions/transitionseries",
-        layout: "absolute-fill",
-        children: info.children
-      }, `overlay-${info.index}`);
+            }, i));
+          }
+          if (nextProgress !== null && next) {
+            const nextPresentation = next.props.presentation ?? slide();
+            const UppercaseNextPresentation = nextPresentation.component;
+            return renderSequenceAndRest(/* @__PURE__ */ jsx4(SequenceWithoutSchema, {
+              from: actualStartFrame,
+              durationInFrames: durationInFramesProp,
+              ...passedProps,
+              name: passedProps.name || "<TS.Sequence>",
+              _remotionInternalDocumentationLink: passedProps.name ? undefined : "https://www.remotion.dev/docs/transitions/transitionseries",
+              _remotionInternalStack: stack ?? undefined,
+              controls: controls ?? undefined,
+              children: /* @__PURE__ */ jsx4(UppercaseNextPresentation, {
+                passedProps: nextPresentation.props ?? {},
+                presentationDirection: "exiting",
+                presentationProgress: nextProgress,
+                presentationDurationInFrames: next.props.timing.getDurationInFrames({ fps }),
+                onElementImage: (elementImage, draw) => onPrevElementImage(elementImage, nextProgress, draw, i + 1),
+                onUnmount: () => {
+                  onPrevElementImage(null, null, null, i + 1);
+                },
+                bothEnteringAndExiting: false,
+                children: /* @__PURE__ */ jsx4(WrapInExitingProgressContext, {
+                  presentationProgress: nextProgress,
+                  children: sequenceChildren
+                })
+              })
+            }, i));
+          }
+          return renderSequenceAndRest(/* @__PURE__ */ jsx4(SequenceWithoutSchema, {
+            from: actualStartFrame,
+            durationInFrames: durationInFramesProp,
+            ...passedProps,
+            name: passedProps.name || "<TS.Sequence>",
+            _remotionInternalDocumentationLink: passedProps.name ? undefined : "https://www.remotion.dev/docs/transitions/transitionseries",
+            _remotionInternalStack: stack ?? undefined,
+            controls: controls ?? undefined,
+            children: sequenceChildren
+          }, i));
+        }
+      });
+    };
+    return renderChildren({
+      index: 0,
+      transitionOffsets: 0,
+      startFrame: 0,
+      overlayRenders: [],
+      sequenceDurations: [],
+      pendingOverlayValidation: false
     });
-    return [...mainChildren || [], ...overlayElements];
   }, [flattedChildren, fps, frame, onPrevElementImage, onNextElementImage]);
   return /* @__PURE__ */ jsx4(Fragment, {
     children: childrenValue

package/package.json

@@ -3,7 +3,7 @@
 		"url": "https://github.com/remotion-dev/remotion/tree/main/packages/transitions"
 	},
 	"name": "@remotion/transitions",
-	"version": "4.0.490",
+	"version": "4.0.491",
 	"description": "Library for creating transitions in Remotion",
 	"main": "dist/esm/index.mjs",
 	"module": "dist/esm/index.js",
@@ -22,18 +22,18 @@
 		"url": "https://github.com/remotion-dev/remotion/issues"
 	},
 	"dependencies": {
-		"remotion": "4.0.490",
-		"@remotion/shapes": "4.0.490",
-		"@remotion/paths": "4.0.490"
+		"remotion": "4.0.491",
+		"@remotion/shapes": "4.0.491",
+		"@remotion/paths": "4.0.491"
 	},
 	"devDependencies": {
 		"@happy-dom/global-registrator": "14.5.1",
-		"remotion": "4.0.490",
+		"remotion": "4.0.491",
 		"react": "19.2.3",
 		"react-dom": "19.2.3",
-		"@remotion/test-utils": "4.0.490",
-		"@remotion/player": "4.0.490",
-		"@remotion/eslint-config-internal": "4.0.490",
+		"@remotion/test-utils": "4.0.491",
+		"@remotion/player": "4.0.491",
+		"@remotion/eslint-config-internal": "4.0.491",
 		"eslint": "9.19.0",
 		"@typescript/native-preview": "7.0.0-dev.20260217.1"
 	},