@remotion/transitions 4.0.177 → 4.0.179

package/.rollup.cache/Users/jonathanburger/remotion/packages/transitions/dist/TransitionSeries.js

@@ -0,0 +1,148 @@
+import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
+import { Children, useMemo } from 'react';
+import { Internals, Sequence, useCurrentFrame, useVideoConfig } from 'remotion';
+import { flattenChildren } from './flatten-children.js';
+import { slide } from './presentations/slide.js';
+import { validateDurationInFrames } from './validate.js';
+// eslint-disable-next-line react/function-component-definition
+const TransitionSeriesTransition = function (
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+_props) {
+    return null;
+};
+const SeriesSequence = ({ children }) => {
+    // eslint-disable-next-line react/jsx-no-useless-fragment
+    return _jsx(_Fragment, { children: children });
+};
+const TransitionSeriesChildren = ({ children, }) => {
+    const { fps } = useVideoConfig();
+    const frame = useCurrentFrame();
+    const childrenValue = useMemo(() => {
+        let transitionOffsets = 0;
+        let startFrame = 0;
+        const flattedChildren = flattenChildren(children);
+        return Children.map(flattedChildren, (child, i) => {
+            var _a, _b, _c, _d, _e, _f, _g, _h, _j;
+            const current = child;
+            if (typeof current === 'string') {
+                // Don't throw if it's just some accidential whitespace
+                if (current.trim() === '') {
+                    return null;
+                }
+                throw new TypeError(`The <TransitionSeries /> component only accepts a list of <TransitionSeries.Sequence /> components as its children, but you passed a string "${current}"`);
+            }
+            const hasPrev = flattedChildren[i - 1];
+            const nextPrev = flattedChildren[i + 1];
+            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 prevIsTransition = typeof hasPrev === 'string' || typeof hasPrev === 'undefined'
+                ? false
+                : hasPrev.type === TransitionSeriesTransition;
+            if (current.type === TransitionSeriesTransition) {
+                if (prevIsTransition) {
+                    throw new TypeError(`A <TransitionSeries.Transition /> component must not be followed by another <TransitionSeries.Transition /> component (nth children = ${i - 1} and ${i})`);
+                }
+                return null;
+            }
+            if (current.type !== SeriesSequence) {
+                throw new TypeError(`The <TransitionSeries /> component only accepts a list of <TransitionSeries.Sequence /> and <TransitionSeries.Transition /> components as its children, but got ${current} instead`);
+            }
+            const castedChildAgain = current;
+            const debugInfo = `index = ${i}, duration = ${castedChildAgain.props.durationInFrames}`;
+            if (!(castedChildAgain === null || castedChildAgain === void 0 ? void 0 : castedChildAgain.props.children)) {
+                throw new TypeError(`A <TransitionSeries.Sequence /> component (${debugInfo}) was detected to not have any children. Delete it to fix this error.`);
+            }
+            const durationInFramesProp = castedChildAgain.props.durationInFrames;
+            const { durationInFrames, children: _children, ...passedProps } = castedChildAgain.props;
+            validateDurationInFrames(durationInFramesProp, {
+                component: `of a <TransitionSeries.Sequence /> component`,
+                allowFloats: true,
+            });
+            const offset = (_a = castedChildAgain.props.offset) !== null && _a !== void 0 ? _a : 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;
+            }
+            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 = (_b = next.props.presentation) !== null && _b !== void 0 ? _b : slide();
+                const prevPresentation = (_c = prev.props.presentation) !== null && _c !== void 0 ? _c : slide();
+                const UppercaseNextPresentation = nextPresentation.component;
+                const UppercasePrevPresentation = prevPresentation.component;
+                return (_jsx(Sequence, { name: passedProps.name || '<TS.Sequence>', from: Math.floor(actualStartFrame), durationInFrames: durationInFramesProp, layout: "none", stack: passedProps.stack, children: _jsx(UppercaseNextPresentation, { passedProps: (_d = nextPresentation.props) !== null && _d !== void 0 ? _d : {}, presentationDirection: "exiting", presentationProgress: nextProgress, children: _jsx(UppercasePrevPresentation, { passedProps: (_e = prevPresentation.props) !== null && _e !== void 0 ? _e : {}, presentationDirection: "entering", presentationProgress: prevProgress, children: _jsx(Sequence, { showInTimeline: false, ...passedProps, children: child }) }) }) }));
+            }
+            if (prevProgress !== null && prev) {
+                const prevPresentation = (_f = prev.props.presentation) !== null && _f !== void 0 ? _f : slide();
+                const UppercasePrevPresentation = prevPresentation.component;
+                return (_jsx(Sequence, { name: passedProps.name || '<TS.Sequence>', from: Math.floor(actualStartFrame), durationInFrames: durationInFramesProp, layout: "none", stack: passedProps.stack, children: _jsx(UppercasePrevPresentation, { passedProps: (_g = prevPresentation.props) !== null && _g !== void 0 ? _g : {}, presentationDirection: "entering", presentationProgress: prevProgress, children: _jsx(Sequence, { showInTimeline: false, ...passedProps, children: child }) }) }));
+            }
+            if (nextProgress !== null && next) {
+                const nextPresentation = (_h = next.props.presentation) !== null && _h !== void 0 ? _h : slide();
+                const UppercaseNextPresentation = nextPresentation.component;
+                return (_jsx(Sequence, { name: passedProps.name || '<TS.Sequence>', from: Math.floor(actualStartFrame), durationInFrames: durationInFramesProp, layout: "none", stack: passedProps.stack, children: _jsx(UppercaseNextPresentation, { passedProps: (_j = nextPresentation.props) !== null && _j !== void 0 ? _j : {}, presentationDirection: "exiting", presentationProgress: nextProgress, children: _jsx(Sequence, { showInTimeline: false, ...passedProps, children: child }) }) }));
+            }
+            return (_jsx(Sequence, { name: passedProps.name || '<TS.Sequence>', from: Math.floor(actualStartFrame), durationInFrames: durationInFramesProp, ...passedProps, children: child }));
+        });
+    }, [children, fps, frame]);
+    // eslint-disable-next-line react/jsx-no-useless-fragment
+    return _jsx(_Fragment, { children: childrenValue });
+};
+const TransitionSeries = ({ children, name, ...otherProps }) => {
+    const displayName = name !== null && name !== void 0 ? name : '<TransitionSeries>';
+    return (_jsx(Sequence, { name: displayName, ...otherProps, children: _jsx(TransitionSeriesChildren, { children: children }) }));
+};
+TransitionSeries.Sequence = SeriesSequence;
+TransitionSeries.Transition = TransitionSeriesTransition;
+export { TransitionSeries };
+Internals.addSequenceStackTraces(TransitionSeries);
+Internals.addSequenceStackTraces(SeriesSequence);

package/.rollup.cache/Users/jonathanburger/remotion/packages/transitions/dist/flatten-children.js

@@ -0,0 +1,12 @@
+import React from 'react';
+export const flattenChildren = (children) => {
+    const childrenArray = React.Children.toArray(children);
+    return childrenArray.reduce((flatChildren, child) => {
+        if (child.type === React.Fragment) {
+            return flatChildren.concat(flattenChildren(child.props
+                .children));
+        }
+        flatChildren.push(child);
+        return flatChildren;
+    }, []);
+};

package/.rollup.cache/Users/jonathanburger/remotion/packages/transitions/dist/index.js

@@ -0,0 +1,5 @@
+// Timings
+export { linearTiming } from './timings/linear-timing.js';
+export { springTiming } from './timings/spring-timing.js';
+// Component
+export { TransitionSeries } from './TransitionSeries.js';

package/.rollup.cache/Users/jonathanburger/remotion/packages/transitions/dist/presentations/clock-wipe.js

@@ -0,0 +1,42 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { translatePath } from '@remotion/paths';
+import { makePie } from '@remotion/shapes';
+import { useMemo, useState } from 'react';
+import { AbsoluteFill, random } from 'remotion';
+const ClockWipePresentation = ({ children, presentationDirection, presentationProgress, passedProps }) => {
+    const finishedRadius = Math.sqrt(passedProps.width ** 2 + passedProps.height ** 2) / 2;
+    const { path } = makePie({
+        radius: finishedRadius,
+        progress: presentationProgress,
+    });
+    const translatedPath = translatePath(path, -(finishedRadius * 2 - passedProps.width) / 2, -(finishedRadius * 2 - passedProps.height) / 2);
+    const [clipId] = useState(() => String(random(null)));
+    const style = useMemo(() => {
+        return {
+            width: '100%',
+            height: '100%',
+            clipPath: presentationDirection === 'exiting' ? undefined : `url(#${clipId})`,
+            ...(presentationDirection === 'entering'
+                ? passedProps.innerEnterStyle
+                : passedProps.innerExitStyle),
+        };
+    }, [
+        clipId,
+        passedProps.innerEnterStyle,
+        passedProps.innerExitStyle,
+        presentationDirection,
+    ]);
+    const outerStyle = useMemo(() => {
+        return presentationDirection === 'entering'
+            ? passedProps.outerEnterStyle
+            : passedProps.outerExitStyle;
+    }, [
+        passedProps.outerEnterStyle,
+        passedProps.outerExitStyle,
+        presentationDirection,
+    ]);
+    return (_jsxs(AbsoluteFill, { style: outerStyle, children: [_jsx(AbsoluteFill, { style: style, children: children }), presentationDirection === 'exiting' ? null : (_jsx(AbsoluteFill, { children: _jsx("svg", { children: _jsx("defs", { children: _jsx("clipPath", { id: clipId, children: _jsx("path", { d: translatedPath, fill: "black" }) }) }) }) }))] }));
+};
+export const clockWipe = (props) => {
+    return { component: ClockWipePresentation, props: props !== null && props !== void 0 ? props : {} };
+};

package/.rollup.cache/Users/jonathanburger/remotion/packages/transitions/dist/presentations/fade.js

@@ -0,0 +1,27 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useMemo } from 'react';
+import { AbsoluteFill } from 'remotion';
+const FadePresentation = ({ children, presentationDirection, presentationProgress, passedProps }) => {
+    const isEntering = presentationDirection === 'entering';
+    const style = useMemo(() => {
+        return {
+            opacity: isEntering ? presentationProgress : 1,
+            ...(presentationDirection === 'entering'
+                ? passedProps.enterStyle
+                : passedProps.exitStyle),
+        };
+    }, [
+        isEntering,
+        passedProps.enterStyle,
+        passedProps.exitStyle,
+        presentationDirection,
+        presentationProgress,
+    ]);
+    return _jsx(AbsoluteFill, { style: style, children: children });
+};
+export const fade = (props) => {
+    return {
+        component: FadePresentation,
+        props: props !== null && props !== void 0 ? props : {},
+    };
+};

package/.rollup.cache/Users/jonathanburger/remotion/packages/transitions/dist/presentations/flip.js

@@ -0,0 +1,45 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useMemo } from 'react';
+import { AbsoluteFill, interpolate } from 'remotion';
+const Flip = ({ children, presentationDirection, presentationProgress, passedProps: { direction = 'from-left', perspective = 1000, innerEnterStyle, innerExitStyle, outerEnterStyle, outerExitStyle, }, }) => {
+    const style = useMemo(() => {
+        const startRotationEntering = direction === 'from-right' || direction === 'from-top' ? 180 : -180;
+        const endRotationEntering = direction === 'from-right' || direction === 'from-top' ? -180 : 180;
+        const rotation = presentationDirection === 'entering'
+            ? interpolate(presentationProgress, [0, 1], [startRotationEntering, 0])
+            : interpolate(presentationProgress, [0, 1], [0, endRotationEntering]);
+        const rotateProperty = direction === 'from-top' || direction === 'from-bottom'
+            ? 'rotateX'
+            : 'rotateY';
+        return {
+            width: '100%',
+            height: '100%',
+            transform: `${rotateProperty}(${rotation}deg)`,
+            backfaceVisibility: 'hidden',
+            WebkitBackfaceVisibility: 'hidden',
+            ...(presentationDirection === 'entering'
+                ? innerEnterStyle
+                : innerExitStyle),
+        };
+    }, [
+        direction,
+        innerEnterStyle,
+        innerExitStyle,
+        presentationDirection,
+        presentationProgress,
+    ]);
+    const outer = useMemo(() => {
+        return {
+            perspective,
+            // Make children also their backface hidden
+            transformStyle: 'preserve-3d',
+            ...(presentationDirection === 'entering'
+                ? outerEnterStyle
+                : outerExitStyle),
+        };
+    }, [outerEnterStyle, outerExitStyle, perspective, presentationDirection]);
+    return (_jsx(AbsoluteFill, { style: outer, children: _jsx(AbsoluteFill, { style: style, children: children }) }));
+};
+export const flip = (props) => {
+    return { component: Flip, props: props !== null && props !== void 0 ? props : {} };
+};

package/.rollup.cache/Users/jonathanburger/remotion/packages/transitions/dist/presentations/slide.js

@@ -0,0 +1,72 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useMemo } from 'react';
+import { AbsoluteFill } from 'remotion';
+const epsilon = 0.01;
+const SlidePresentation = ({ children, presentationProgress, presentationDirection, passedProps: { direction = 'from-left', enterStyle, exitStyle }, }) => {
+    const directionStyle = useMemo(() => {
+        // Overlay the two slides barely to avoid a white line between them
+        // Remove the correction once the presentation progress is 1
+        const presentationProgressWithEpsilonCorrection = presentationProgress === 1
+            ? presentationProgress * 100
+            : presentationProgress * 100 - epsilon;
+        if (presentationDirection === 'exiting') {
+            switch (direction) {
+                case 'from-left':
+                    return {
+                        transform: `translateX(${presentationProgressWithEpsilonCorrection}%)`,
+                    };
+                case 'from-right':
+                    return {
+                        transform: `translateX(-${presentationProgress * 100}%)`,
+                    };
+                case 'from-top':
+                    return {
+                        transform: `translateY(${presentationProgressWithEpsilonCorrection}%)`,
+                    };
+                case 'from-bottom':
+                    return {
+                        transform: `translateY(-${presentationProgress * 100}%)`,
+                    };
+                default:
+                    throw new Error(`Invalid direction: ${direction}`);
+            }
+        }
+        switch (direction) {
+            case 'from-left':
+                return {
+                    transform: `translateX(${-100 + presentationProgress * 100}%)`,
+                };
+            case 'from-right':
+                return {
+                    transform: `translateX(${100 - presentationProgressWithEpsilonCorrection}%)`,
+                };
+            case 'from-top':
+                return {
+                    transform: `translateY(${-100 + presentationProgress * 100}%)`,
+                };
+            case 'from-bottom':
+                return {
+                    transform: `translateY(${100 - presentationProgressWithEpsilonCorrection}%)`,
+                };
+            default:
+                throw new Error(`Invalid direction: ${direction}`);
+        }
+    }, [presentationDirection, presentationProgress, direction]);
+    const style = useMemo(() => {
+        return {
+            width: '100%',
+            height: '100%',
+            justifyContent: 'center',
+            alignItems: 'center',
+            ...directionStyle,
+            ...(presentationDirection === 'entering' ? enterStyle : exitStyle),
+        };
+    }, [directionStyle, enterStyle, exitStyle, presentationDirection]);
+    return _jsx(AbsoluteFill, { style: style, children: children });
+};
+export const slide = (props) => {
+    return {
+        component: SlidePresentation,
+        props: props !== null && props !== void 0 ? props : {},
+    };
+};

package/.rollup.cache/Users/jonathanburger/remotion/packages/transitions/dist/presentations/wipe.js

@@ -0,0 +1,159 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useMemo, useState } from 'react';
+import { AbsoluteFill, random } from 'remotion';
+const makePathIn = (progress, direction) => {
+    switch (direction) {
+        case 'from-left':
+            return `
+M 0 0
+L ${progress} 0
+L ${progress} 1
+L 0 1
+Z`;
+        case 'from-top-left':
+            return `
+M 0 0
+L ${progress * 2} 0
+L 0 ${progress * 2}
+Z`;
+        case 'from-top':
+            return `
+M 0 0
+L 1 0
+L 1 ${progress}
+L 0 ${progress}
+Z`;
+        case 'from-top-right':
+            return `
+M 1 0
+L ${1 - progress * 2} 0
+L 1 ${progress * 2}
+Z`;
+        case 'from-right':
+            return `
+M 1 0
+L 1 1
+L ${1 - progress} 1
+L ${1 - progress} 0
+Z`;
+        case 'from-bottom-right':
+            return `
+M 1 1
+L ${1 - progress * 2} 1
+L 1 ${1 - progress * 2}
+Z`;
+        case 'from-bottom':
+            return `
+M 0 1
+L 1 1
+L 1 ${1 - progress}
+L 0 ${1 - progress}
+Z`;
+        case 'from-bottom-left':
+            return `
+M 0 1
+L 0 ${1 - progress * 2}
+L ${progress * 2} 1
+Z`;
+        default:
+            throw new Error(`Unknown direction ${JSON.stringify(direction)}`);
+    }
+};
+const makePathOut = (progress, direction) => {
+    switch (direction) {
+        case 'from-left':
+            return `
+M 1 1
+L ${1 - progress} 1
+L ${1 - progress} 0
+L 1 0
+Z`;
+        case 'from-top-left':
+            return `
+M 1 1
+L ${1 - 2 * progress} 1
+L 1 ${1 - 2 * progress}
+Z`;
+        case 'from-top':
+            return `
+M 1 1
+L 0 1
+L 0 ${1 - progress}
+L 1 ${1 - progress}
+Z`;
+        case 'from-top-right':
+            return `
+M 0 1
+L ${progress * 2} 1
+L 0 ${1 - progress * 2}
+Z`;
+        case 'from-right':
+            return `
+M 0 0
+L ${progress} 0
+L ${progress} 1
+L 0 1
+Z`;
+        case 'from-bottom-right':
+            return `
+M 0 0
+L ${progress * 2} 0
+L 0 ${progress * 2}
+Z`;
+        case 'from-bottom':
+            return `
+M 1 0
+L 0 0
+L 0 ${progress}
+L 1 ${progress}
+Z`;
+        case 'from-bottom-left':
+            return `
+M 1 0
+L ${1 - progress * 2} 0
+L 1 ${progress * 2}
+Z`;
+        default:
+            throw new Error(`Unknown direction ${JSON.stringify(direction)}`);
+    }
+};
+const WipePresentation = ({ children, presentationProgress, presentationDirection, passedProps: { direction = 'from-left', innerEnterStyle, innerExitStyle, outerEnterStyle, outerExitStyle, }, }) => {
+    const [clipId] = useState(() => String(random(null)));
+    const progressInDirection = presentationDirection === 'entering'
+        ? presentationProgress
+        : 1 - presentationProgress;
+    const path = presentationDirection === 'entering'
+        ? makePathIn(progressInDirection, direction)
+        : makePathOut(progressInDirection, direction);
+    const style = useMemo(() => {
+        return {
+            width: '100%',
+            height: '100%',
+            justifyContent: 'center',
+            alignItems: 'center',
+            clipPath: `url(#${clipId})`,
+            ...(presentationDirection === 'entering'
+                ? innerEnterStyle
+                : innerExitStyle),
+        };
+    }, [clipId, innerEnterStyle, innerExitStyle, presentationDirection]);
+    const outerStyle = useMemo(() => {
+        return presentationDirection === 'entering'
+            ? outerEnterStyle
+            : outerExitStyle;
+    }, [outerEnterStyle, outerExitStyle, presentationDirection]);
+    const svgStyle = useMemo(() => {
+        return {
+            width: '100%',
+            height: '100%',
+            pointerEvents: 'none',
+        };
+    }, []);
+    return (_jsxs(AbsoluteFill, { style: outerStyle, children: [_jsx(AbsoluteFill, { style: style, children: children }), _jsx(AbsoluteFill, { children: _jsx("svg", { viewBox: "0 0 1 1", style: svgStyle, children: _jsx("defs", { children: _jsx("clipPath", { id: clipId, clipPathUnits: "objectBoundingBox", children: _jsx("path", { d: path, fill: "black" }) }) }) }) })] }));
+};
+export const wipe = (props) => {
+    return {
+        component: WipePresentation,
+        props: props !== null && props !== void 0 ? props : {},
+    };
+};

package/.rollup.cache/Users/jonathanburger/remotion/packages/transitions/dist/test/transitions.test.js

@@ -0,0 +1,33 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * @vitest-environment jsdom
+ */
+import { makeMockCompositionManagerContext, makeTimelineContext, } from '@remotion/test-utils';
+import { renderToString } from 'react-dom/server';
+import { AbsoluteFill, Internals } from 'remotion';
+import { expect, test } from 'vitest';
+import { fade } from '../presentations/fade.js';
+import { linearTiming } from '../timings/linear-timing.js';
+import { TransitionSeries } from '../TransitionSeries.js';
+const renderForFrame = (frame, markup) => {
+    return renderToString(_jsx(Internals.CanUseRemotionHooksProvider, { children: _jsx(Internals.CompositionManager.Provider, { value: makeMockCompositionManagerContext(), children: _jsx(Internals.Timeline.TimelineContext.Provider, { value: makeTimelineContext(frame), children: markup }) }) }));
+};
+const Letter = ({ children, color }) => {
+    return (_jsx(AbsoluteFill, { style: {
+            backgroundColor: color,
+            opacity: 0.9,
+            justifyContent: 'center',
+            alignItems: 'center',
+            fontSize: 200,
+            color: 'white',
+        }, children: children }));
+};
+test('Should throw if two transitions in a row', () => {
+    expect(() => {
+        return renderForFrame(10, _jsxs(TransitionSeries, { children: [_jsx(TransitionSeries.Sequence, { durationInFrames: 60, children: _jsx(Letter, { color: "green", children: "C" }) }), _jsx(TransitionSeries.Transition, { presentation: fade({}), timing: linearTiming({
+                        durationInFrames: 40,
+                    }) }), _jsx(TransitionSeries.Transition, { presentation: fade({}), timing: linearTiming({
+                        durationInFrames: 40,
+                    }) })] }));
+    }).toThrow('A <TransitionSeries.Transition /> component must not be followed by another <TransitionSeries.Transition /> component (nth children = 1 and 2)');
+});

package/.rollup.cache/Users/jonathanburger/remotion/packages/transitions/dist/timings/linear-timing.js

@@ -0,0 +1,15 @@
+import { interpolate } from 'remotion';
+export const linearTiming = (options) => {
+    return {
+        getDurationInFrames: () => {
+            return options.durationInFrames;
+        },
+        getProgress: ({ frame }) => {
+            return interpolate(frame, [0, options.durationInFrames], [0, 1], {
+                easing: options.easing,
+                extrapolateLeft: 'clamp',
+                extrapolateRight: 'clamp',
+            });
+        },
+    };
+};

package/.rollup.cache/Users/jonathanburger/remotion/packages/transitions/dist/timings/spring-timing.js

@@ -0,0 +1,30 @@
+import { measureSpring, spring } from 'remotion';
+const springWithInvalidArgumentRejection = (args) => {
+    if (args.to || args.from) {
+        throw new Error('to / from values are not supported by springWithRoundUpIfThreshold');
+    }
+    return spring(args);
+};
+export const springTiming = (options = {}) => {
+    return {
+        getDurationInFrames: ({ fps }) => {
+            if (options.durationInFrames) {
+                return options.durationInFrames;
+            }
+            return measureSpring({
+                config: options.config,
+                threshold: options.durationRestThreshold,
+                fps,
+            });
+        },
+        getProgress: ({ fps, frame }) => {
+            return springWithInvalidArgumentRejection({
+                fps,
+                frame,
+                config: options.config,
+                durationInFrames: options.durationInFrames,
+                durationRestThreshold: options.durationRestThreshold,
+            });
+        },
+    };
+};

package/.rollup.cache/Users/jonathanburger/remotion/packages/transitions/dist/types.js

@@ -0,0 +1 @@
+export {};

package/.rollup.cache/Users/jonathanburger/remotion/packages/transitions/dist/validate.js

@@ -0,0 +1,3 @@
+/* eslint-disable prefer-destructuring */
+import { NoReactInternals } from 'remotion/no-react';
+export const validateDurationInFrames = NoReactInternals.validateDurationInFrames;

package/README.md

@@ -0,0 +1,18 @@
+# @remotion/transitions
+ 
+Library for creating transitions in Remotion
+ 
+[![NPM Downloads](https://img.shields.io/npm/dm/@remotion/transitions.svg?style=flat&color=black&label=Downloads)](https://npmcharts.com/compare/@remotion/transitions?minimal=true)
+ 
+## Installation
+ 
+```bash
+npm install @remotion/transitions --save-exact
+```
+ 
+When installing a Remotion package, make sure to align the version of all `remotion` and `@remotion/*` packages to the same version.
+Remove the `^` character from the version number to use the exact version.
+ 
+## Usage
+ 
+See the [documentation](https://www.remotion.dev/transitions) for more information.

package/bundle.ts

@@ -5,7 +5,7 @@ if (process.env.NODE_ENV !== 'production') {
 	throw new Error('This script must be run using NODE_ENV=production');
 }
 
-const presentations = ['slide', 'flip', 'wipe', 'fade', 'clock-wipe'];
+const presentations = ['slide', 'flip', 'wipe', 'fade', 'clock-wipe', 'none'];
 
 const output = await build({
 	entrypoints: [

package/dist/TransitionSeries.js

@@ -5,6 +5,7 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const remotion_1 = require("remotion");
 const no_react_1 = require("remotion/no-react");
+const context_js_1 = require("./context.js");
 const flatten_children_js_1 = require("./flatten-children.js");
 const slide_js_1 = require("./presentations/slide.js");
 const validate_js_1 = require("./validate.js");
@@ -125,21 +126,21 @@ const TransitionSeriesChildren = ({ children, }) => {
                 const UppercasePrevPresentation = prevPresentation.component;
                 return ((0, jsx_runtime_1.jsx)(remotion_1.Sequence
                 // eslint-disable-next-line react/no-array-index-key
-                , { from: Math.floor(actualStartFrame), durationInFrames: durationInFramesProp, ...passedProps, name: passedProps.name || '<TS.Sequence>', children: (0, jsx_runtime_1.jsx)(UppercaseNextPresentation, { passedProps: (_d = nextPresentation.props) !== null && _d !== void 0 ? _d : {}, presentationDirection: "exiting", presentationProgress: nextProgress, presentationDurationInFrames: next.props.timing.getDurationInFrames({ fps }), children: (0, jsx_runtime_1.jsx)(UppercasePrevPresentation, { passedProps: (_e = prevPresentation.props) !== null && _e !== void 0 ? _e : {}, presentationDirection: "entering", presentationProgress: prevProgress, presentationDurationInFrames: prev.props.timing.getDurationInFrames({ fps }), children: child }) }) }, i));
+                , { from: Math.floor(actualStartFrame), durationInFrames: durationInFramesProp, ...passedProps, name: passedProps.name || '<TS.Sequence>', children: (0, jsx_runtime_1.jsx)(UppercaseNextPresentation, { passedProps: (_d = nextPresentation.props) !== null && _d !== void 0 ? _d : {}, presentationDirection: "exiting", presentationProgress: nextProgress, presentationDurationInFrames: next.props.timing.getDurationInFrames({ fps }), children: (0, jsx_runtime_1.jsx)(context_js_1.WrapInExitingProgressContext, { presentationProgress: nextProgress, children: (0, jsx_runtime_1.jsx)(UppercasePrevPresentation, { passedProps: (_e = prevPresentation.props) !== null && _e !== void 0 ? _e : {}, presentationDirection: "entering", presentationProgress: prevProgress, presentationDurationInFrames: prev.props.timing.getDurationInFrames({ fps }), children: (0, jsx_runtime_1.jsx)(context_js_1.WrapInEnteringProgressContext, { presentationProgress: prevProgress, children: child }) }) }) }) }, i));
             }
             if (prevProgress !== null && prev) {
                 const prevPresentation = (_f = prev.props.presentation) !== null && _f !== void 0 ? _f : (0, slide_js_1.slide)();
                 const UppercasePrevPresentation = prevPresentation.component;
                 return ((0, jsx_runtime_1.jsx)(remotion_1.Sequence
                 // eslint-disable-next-line react/no-array-index-key
-                , { from: Math.floor(actualStartFrame), durationInFrames: durationInFramesProp, ...passedProps, name: passedProps.name || '<TS.Sequence>', children: (0, jsx_runtime_1.jsx)(UppercasePrevPresentation, { passedProps: (_g = prevPresentation.props) !== null && _g !== void 0 ? _g : {}, presentationDirection: "entering", presentationProgress: prevProgress, presentationDurationInFrames: prev.props.timing.getDurationInFrames({ fps }), children: child }) }, i));
+                , { from: Math.floor(actualStartFrame), durationInFrames: durationInFramesProp, ...passedProps, name: passedProps.name || '<TS.Sequence>', children: (0, jsx_runtime_1.jsx)(UppercasePrevPresentation, { passedProps: (_g = prevPresentation.props) !== null && _g !== void 0 ? _g : {}, presentationDirection: "entering", presentationProgress: prevProgress, presentationDurationInFrames: prev.props.timing.getDurationInFrames({ fps }), children: (0, jsx_runtime_1.jsx)(context_js_1.WrapInEnteringProgressContext, { presentationProgress: prevProgress, children: child }) }) }, i));
             }
             if (nextProgress !== null && next) {
                 const nextPresentation = (_h = next.props.presentation) !== null && _h !== void 0 ? _h : (0, slide_js_1.slide)();
                 const UppercaseNextPresentation = nextPresentation.component;
                 return ((0, jsx_runtime_1.jsx)(remotion_1.Sequence
                 // eslint-disable-next-line react/no-array-index-key
-                , { from: Math.floor(actualStartFrame), durationInFrames: durationInFramesProp, ...passedProps, name: passedProps.name || '<TS.Sequence>', children: (0, jsx_runtime_1.jsx)(UppercaseNextPresentation, { passedProps: (_j = nextPresentation.props) !== null && _j !== void 0 ? _j : {}, presentationDirection: "exiting", presentationProgress: nextProgress, presentationDurationInFrames: next.props.timing.getDurationInFrames({ fps }), children: child }) }, i));
+                , { from: Math.floor(actualStartFrame), durationInFrames: durationInFramesProp, ...passedProps, name: passedProps.name || '<TS.Sequence>', children: (0, jsx_runtime_1.jsx)(UppercaseNextPresentation, { passedProps: (_j = nextPresentation.props) !== null && _j !== void 0 ? _j : {}, presentationDirection: "exiting", presentationProgress: nextProgress, presentationDurationInFrames: next.props.timing.getDurationInFrames({ fps }), children: (0, jsx_runtime_1.jsx)(context_js_1.WrapInExitingProgressContext, { presentationProgress: nextProgress, children: child }) }) }, i));
             }
             return ((0, jsx_runtime_1.jsx)(remotion_1.Sequence
             // eslint-disable-next-line react/no-array-index-key

package/dist/context.d.ts

@@ -1,9 +1,12 @@
 import React from 'react';
-export type TransitionState = {
-    entering: number;
-    exiting: number;
-    isInTransitionSeries: boolean;
+type EnteringState = {
+    enteringProgress: number;
 };
+type ExitingState = {
+    exitingProgress: number;
+};
+export declare const EnteringContext: React.Context<EnteringState | null>;
+export declare const ExitingContext: React.Context<ExitingState | null>;
 export declare const WrapInEnteringProgressContext: React.FC<{
     readonly presentationProgress: number;
     readonly children: React.ReactNode;
@@ -12,7 +15,4 @@ export declare const WrapInExitingProgressContext: React.FC<{
     readonly presentationProgress: number;
     readonly children: React.ReactNode;
 }>;
-/**
- * Gets the progress and direction of a transition with a context() presentation.
- */
-export declare const useTransitionProgress: () => TransitionState;
+export {};

package/dist/context.js

@@ -23,18 +23,18 @@ var __importStar = (this && this.__importStar) || function (mod) {
     return result;
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.useTransitionProgress = exports.WrapInExitingProgressContext = exports.WrapInEnteringProgressContext = void 0;
+exports.WrapInExitingProgressContext = exports.WrapInEnteringProgressContext = exports.ExitingContext = exports.EnteringContext = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = __importStar(require("react"));
-const EnteringContext = react_1.default.createContext(null);
-const ExitingContext = react_1.default.createContext(null);
+exports.EnteringContext = react_1.default.createContext(null);
+exports.ExitingContext = react_1.default.createContext(null);
 const WrapInEnteringProgressContext = ({ presentationProgress, children }) => {
     const value = (0, react_1.useMemo)(() => {
         return {
             enteringProgress: presentationProgress,
         };
     }, [presentationProgress]);
-    return ((0, jsx_runtime_1.jsx)(EnteringContext.Provider, { value: value, children: children }));
+    return ((0, jsx_runtime_1.jsx)(exports.EnteringContext.Provider, { value: value, children: children }));
 };
 exports.WrapInEnteringProgressContext = WrapInEnteringProgressContext;
 const WrapInExitingProgressContext = ({ presentationProgress, children }) => {
@@ -43,27 +43,6 @@ const WrapInExitingProgressContext = ({ presentationProgress, children }) => {
             exitingProgress: presentationProgress,
         };
     }, [presentationProgress]);
-    return ((0, jsx_runtime_1.jsx)(ExitingContext.Provider, { value: value, children: children }));
+    return ((0, jsx_runtime_1.jsx)(exports.ExitingContext.Provider, { value: value, children: children }));
 };
 exports.WrapInExitingProgressContext = WrapInExitingProgressContext;
-/**
- * Gets the progress and direction of a transition with a context() presentation.
- */
-const useTransitionProgress = () => {
-    var _a, _b;
-    const entering = react_1.default.useContext(EnteringContext);
-    const exiting = react_1.default.useContext(ExitingContext);
-    if (!entering && !exiting) {
-        return {
-            isInTransitionSeries: false,
-            entering: 1,
-            exiting: 0,
-        };
-    }
-    return {
-        isInTransitionSeries: true,
-        entering: (_a = entering === null || entering === void 0 ? void 0 : entering.enteringProgress) !== null && _a !== void 0 ? _a : 1,
-        exiting: (_b = exiting === null || exiting === void 0 ? void 0 : exiting.exitingProgress) !== null && _b !== void 0 ? _b : 0,
-    };
-};
-exports.useTransitionProgress = useTransitionProgress;

package/dist/esm/index.mjs

@@ -127,16 +127,46 @@ var springTiming = (options = {}) => {
 };
 
 // src/TransitionSeries.tsx
-import {Children, useMemo as useMemo2} from "react";
+import {Children, useMemo as useMemo3} from "react";
 import {Internals, Sequence, useCurrentFrame, useVideoConfig} from "remotion";
 import {NoReactInternals as NoReactInternals2} from "remotion/no-react";
 
+// src/context.tsx
+import React2, {useMemo as useMemo2} from "react";
+import {
+jsx as jsx2
+} from "react/jsx-runtime";
+var EnteringContext = React2.createContext(null);
+var ExitingContext = React2.createContext(null);
+var WrapInEnteringProgressContext = ({ presentationProgress, children }) => {
+  const value = useMemo2(() => {
+    return {
+      enteringProgress: presentationProgress
+    };
+  }, [presentationProgress]);
+  return jsx2(EnteringContext.Provider, {
+    value,
+    children
+  });
+};
+var WrapInExitingProgressContext = ({ presentationProgress, children }) => {
+  const value = useMemo2(() => {
+    return {
+      exitingProgress: presentationProgress
+    };
+  }, [presentationProgress]);
+  return jsx2(ExitingContext.Provider, {
+    value,
+    children
+  });
+};
+
 // src/flatten-children.ts
-import React2 from "react";
+import React3 from "react";
 var flattenChildren = (children) => {
-  const childrenArray = React2.Children.toArray(children);
+  const childrenArray = React3.Children.toArray(children);
   return childrenArray.reduce((flatChildren, child) => {
-    if (child.type === React2.Fragment) {
+    if (child.type === React3.Fragment) {
       return flatChildren.concat(flattenChildren(child.props.children));
     }
     flatChildren.push(child);
@@ -150,14 +180,14 @@ var validateDurationInFrames = NoReactInternals.validateDurationInFrames;
 
 // src/TransitionSeries.tsx
 import {
-jsx as jsx2,
+jsx as jsx3,
 Fragment
 } from "react/jsx-runtime";
 var TransitionSeriesTransition = function(_props) {
   return null;
 };
 var SeriesSequence = ({ children }) => {
-  return jsx2(Fragment, {
+  return jsx3(Fragment, {
     children
   });
 };
@@ -166,7 +196,7 @@ var TransitionSeriesChildren = ({
 }) => {
   const { fps } = useVideoConfig();
   const frame = useCurrentFrame();
-  const childrenValue = useMemo2(() => {
+  const childrenValue = useMemo3(() => {
     let transitionOffsets = 0;
     let startFrame = 0;
     const flattedChildren = flattenChildren(children);
@@ -250,22 +280,28 @@ var TransitionSeriesChildren = ({
         const prevPresentation = prev.props.presentation ?? slide();
         const UppercaseNextPresentation = nextPresentation.component;
         const UppercasePrevPresentation = prevPresentation.component;
-        return jsx2(Sequence, {
+        return jsx3(Sequence, {
           from: Math.floor(actualStartFrame),
           durationInFrames: durationInFramesProp,
           ...passedProps,
           name: passedProps.name || "<TS.Sequence>",
-          children: jsx2(UppercaseNextPresentation, {
+          children: jsx3(UppercaseNextPresentation, {
             passedProps: nextPresentation.props ?? {},
             presentationDirection: "exiting",
             presentationProgress: nextProgress,
             presentationDurationInFrames: next.props.timing.getDurationInFrames({ fps }),
-            children: jsx2(UppercasePrevPresentation, {
-              passedProps: prevPresentation.props ?? {},
-              presentationDirection: "entering",
-              presentationProgress: prevProgress,
-              presentationDurationInFrames: prev.props.timing.getDurationInFrames({ fps }),
-              children: child
+            children: jsx3(WrapInExitingProgressContext, {
+              presentationProgress: nextProgress,
+              children: jsx3(UppercasePrevPresentation, {
+                passedProps: prevPresentation.props ?? {},
+                presentationDirection: "entering",
+                presentationProgress: prevProgress,
+                presentationDurationInFrames: prev.props.timing.getDurationInFrames({ fps }),
+                children: jsx3(WrapInEnteringProgressContext, {
+                  presentationProgress: prevProgress,
+                  children: child
+                })
+              })
             })
           })
         }, i);
@@ -273,38 +309,44 @@ var TransitionSeriesChildren = ({
       if (prevProgress !== null && prev) {
         const prevPresentation = prev.props.presentation ?? slide();
         const UppercasePrevPresentation = prevPresentation.component;
-        return jsx2(Sequence, {
+        return jsx3(Sequence, {
           from: Math.floor(actualStartFrame),
           durationInFrames: durationInFramesProp,
           ...passedProps,
           name: passedProps.name || "<TS.Sequence>",
-          children: jsx2(UppercasePrevPresentation, {
+          children: jsx3(UppercasePrevPresentation, {
             passedProps: prevPresentation.props ?? {},
             presentationDirection: "entering",
             presentationProgress: prevProgress,
             presentationDurationInFrames: prev.props.timing.getDurationInFrames({ fps }),
-            children: child
+            children: jsx3(WrapInEnteringProgressContext, {
+              presentationProgress: prevProgress,
+              children: child
+            })
           })
         }, i);
       }
       if (nextProgress !== null && next) {
         const nextPresentation = next.props.presentation ?? slide();
         const UppercaseNextPresentation = nextPresentation.component;
-        return jsx2(Sequence, {
+        return jsx3(Sequence, {
           from: Math.floor(actualStartFrame),
           durationInFrames: durationInFramesProp,
           ...passedProps,
           name: passedProps.name || "<TS.Sequence>",
-          children: jsx2(UppercaseNextPresentation, {
+          children: jsx3(UppercaseNextPresentation, {
             passedProps: nextPresentation.props ?? {},
             presentationDirection: "exiting",
             presentationProgress: nextProgress,
             presentationDurationInFrames: next.props.timing.getDurationInFrames({ fps }),
-            children: child
+            children: jsx3(WrapInExitingProgressContext, {
+              presentationProgress: nextProgress,
+              children: child
+            })
           })
         }, i);
       }
-      return jsx2(Sequence, {
+      return jsx3(Sequence, {
         from: Math.floor(actualStartFrame),
         durationInFrames: durationInFramesProp,
         ...passedProps,
@@ -313,7 +355,7 @@ var TransitionSeriesChildren = ({
       }, i);
     });
   }, [children, fps, frame]);
-  return jsx2(Fragment, {
+  return jsx3(Fragment, {
     children: childrenValue
   });
 };
@@ -323,11 +365,11 @@ var TransitionSeries = ({ children, name, layout: passedLayout, ...otherProps })
   if (NoReactInternals2.ENABLE_V5_BREAKING_CHANGES && layout !== "absolute-fill") {
     throw new TypeError(`The "layout" prop of <TransitionSeries /> is not supported anymore in v5. TransitionSeries' must be absolutely positioned.`);
   }
-  return jsx2(Sequence, {
+  return jsx3(Sequence, {
     name: displayName,
     layout,
     ...otherProps,
-    children: jsx2(TransitionSeriesChildren, {
+    children: jsx3(TransitionSeriesChildren, {
       children
     })
   });
@@ -336,7 +378,27 @@ TransitionSeries.Sequence = SeriesSequence;
 TransitionSeries.Transition = TransitionSeriesTransition;
 Internals.addSequenceStackTraces(TransitionSeries);
 Internals.addSequenceStackTraces(SeriesSequence);
+
+// src/use-transition-progress.ts
+import React4 from "react";
+var useTransitionProgress = () => {
+  const entering = React4.useContext(EnteringContext);
+  const exiting = React4.useContext(ExitingContext);
+  if (!entering && !exiting) {
+    return {
+      isInTransitionSeries: false,
+      entering: 1,
+      exiting: 0
+    };
+  }
+  return {
+    isInTransitionSeries: true,
+    entering: entering?.enteringProgress ?? 1,
+    exiting: exiting?.exitingProgress ?? 0
+  };
+};
 export {
+  useTransitionProgress,
   springTiming,
   linearTiming,
   TransitionSeries

package/dist/esm/none.mjs

@@ -0,0 +1,26 @@
+// src/presentations/none.tsx
+import {useMemo} from "react";
+import {AbsoluteFill} from "remotion";
+import {
+jsx
+} from "react/jsx-runtime";
+var NonePresentation = ({ children, presentationDirection, passedProps }) => {
+  const style = useMemo(() => {
+    return {
+      ...presentationDirection === "entering" ? passedProps.enterStyle : passedProps.exitStyle
+    };
+  }, [passedProps.enterStyle, passedProps.exitStyle, presentationDirection]);
+  return jsx(AbsoluteFill, {
+    style,
+    children
+  });
+};
+var none = (props) => {
+  return {
+    component: NonePresentation,
+    props: props ?? {}
+  };
+};
+export {
+  none
+};

package/dist/index.d.ts

@@ -2,3 +2,4 @@ export { linearTiming } from './timings/linear-timing.js';
 export { springTiming } from './timings/spring-timing.js';
 export { TransitionSeries } from './TransitionSeries.js';
 export { TransitionPresentation, TransitionPresentationComponentProps, TransitionTiming, } from './types.js';
+export { TransitionState, useTransitionProgress, } from './use-transition-progress.js';

package/dist/index.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.TransitionSeries = exports.springTiming = exports.linearTiming = void 0;
+exports.useTransitionProgress = exports.TransitionSeries = exports.springTiming = exports.linearTiming = void 0;
 // Timings
 var linear_timing_js_1 = require("./timings/linear-timing.js");
 Object.defineProperty(exports, "linearTiming", { enumerable: true, get: function () { return linear_timing_js_1.linearTiming; } });
@@ -9,3 +9,6 @@ Object.defineProperty(exports, "springTiming", { enumerable: true, get: function
 // Component
 var TransitionSeries_js_1 = require("./TransitionSeries.js");
 Object.defineProperty(exports, "TransitionSeries", { enumerable: true, get: function () { return TransitionSeries_js_1.TransitionSeries; } });
+// Hooks
+var use_transition_progress_js_1 = require("./use-transition-progress.js");
+Object.defineProperty(exports, "useTransitionProgress", { enumerable: true, get: function () { return use_transition_progress_js_1.useTransitionProgress; } });

package/dist/presentations/{context.d.ts → none.d.ts}

@@ -10,4 +10,4 @@ export type NoneProps = {
  * @param {NoneProps} [props] Optional properties to define 'enterStyle' and 'exitStyle'.
  * @returns {TransitionPresentation<NoneProps>} The transition presentation component setup.
  */
-export declare const context: (props?: NoneProps) => TransitionPresentation<NoneProps>;
+export declare const none: (props?: NoneProps) => TransitionPresentation<NoneProps>;

package/dist/presentations/{context.js → none.js}

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.context = void 0;
+exports.none = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const remotion_1 = require("remotion");
@@ -20,10 +20,10 @@ const NonePresentation = ({ children, presentationDirection, passedProps }) => {
  * @param {NoneProps} [props] Optional properties to define 'enterStyle' and 'exitStyle'.
  * @returns {TransitionPresentation<NoneProps>} The transition presentation component setup.
  */
-const context = (props) => {
+const none = (props) => {
     return {
         component: NonePresentation,
         props: props !== null && props !== void 0 ? props : {},
     };
 };
-exports.context = context;
+exports.none = none;

package/dist/use-transition-progress.d.ts

@@ -0,0 +1,9 @@
+export type TransitionState = {
+    entering: number;
+    exiting: number;
+    isInTransitionSeries: boolean;
+};
+/**
+ * Gets the progress and direction of a transition with a context() presentation.
+ */
+export declare const useTransitionProgress: () => TransitionState;

package/dist/use-transition-progress.js

@@ -0,0 +1,29 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useTransitionProgress = void 0;
+const react_1 = __importDefault(require("react"));
+const context_1 = require("./context");
+/**
+ * Gets the progress and direction of a transition with a context() presentation.
+ */
+const useTransitionProgress = () => {
+    var _a, _b;
+    const entering = react_1.default.useContext(context_1.EnteringContext);
+    const exiting = react_1.default.useContext(context_1.ExitingContext);
+    if (!entering && !exiting) {
+        return {
+            isInTransitionSeries: false,
+            entering: 1,
+            exiting: 0,
+        };
+    }
+    return {
+        isInTransitionSeries: true,
+        entering: (_a = entering === null || entering === void 0 ? void 0 : entering.enteringProgress) !== null && _a !== void 0 ? _a : 1,
+        exiting: (_b = exiting === null || exiting === void 0 ? void 0 : exiting.exitingProgress) !== null && _b !== void 0 ? _b : 0,
+    };
+};
+exports.useTransitionProgress = useTransitionProgress;

package/none.js

@@ -0,0 +1,2 @@
+// For backwards compatibility when you use `esm-wallaby`
+module.exports = require('./dist/presentations/none.js');

package/package.json

@@ -1,7 +1,10 @@
 {
+  "repository": {
+    "url": "https://github.com/remotion-dev/remotion/tree/main/packages/transitions"
+  },
   "name": "@remotion/transitions",
-  "version": "4.0.177",
-  "description": "Transition presets for Remotion",
+  "version": "4.0.179",
+  "description": "Library for creating transitions in Remotion",
   "sideEffects": false,
   "main": "dist/esm/index.mjs",
   "module": "dist/esm/index.js",
@@ -9,31 +12,21 @@
   "author": "Jonny Burger",
   "contributors": [],
   "license": "UNLICENSED",
-  "repository": {
-    "url": "https://github.com/remotion-dev/remotion"
-  },
   "bugs": {
     "url": "https://github.com/remotion-dev/remotion/issues"
   },
   "dependencies": {
-    "remotion": "4.0.177",
-    "@remotion/shapes": "4.0.177",
-    "@remotion/paths": "4.0.177"
+    "remotion": "4.0.179",
+    "@remotion/paths": "4.0.179",
+    "@remotion/shapes": "4.0.179"
   },
   "devDependencies": {
-    "@jonny/eslint-config": "3.0.281",
-    "eslint": "8.56.0",
-    "prettier": "3.2.5",
-    "prettier-plugin-organize-imports": "3.2.4",
+    "@happy-dom/global-registrator": "14.5.1",
     "react": "18.3.1",
     "react-dom": "18.3.1",
-    "vitest": "0.31.1",
-    "@types/react": "18.3.1",
-    "@types/react-dom": "18.3.0",
-    "@types/bun": "1.0.12",
     "@vitejs/plugin-react": "^2.0.0",
-    "remotion": "4.0.177",
-    "@remotion/test-utils": "4.0.177"
+    "remotion": "4.0.179",
+    "@remotion/test-utils": "4.0.179"
   },
   "peerDependencies": {
     "react": ">=16.8.0",
@@ -83,6 +76,12 @@
       "require": "./dist/presentations/clock-wipe.js",
       "types": "./dist/presentations/clock-wipe.d.ts"
     },
+    "./none": {
+      "module": "./dist/esm/none.mjs",
+      "import": "./dist/esm/none.mjs",
+      "require": "./dist/presentations/none.js",
+      "types": "./dist/presentations/none.d.ts"
+    },
     "./package.json": "./package.json"
   },
   "typesVersions": {
@@ -99,13 +98,17 @@
       "fade": [
         "dist/presentations/fade.d.ts"
       ],
+      "none": [
+        "dist/presentations/none.d.ts"
+      ],
       "clock-wipe": [
         "dist/presentations/clock-wipe.d.ts"
       ]
     }
   },
+  "homepage": "https://www.remotion.dev/transitions",
   "scripts": {
-    "test": "vitest src --run",
+    "test": "bun test src",
     "lint": "eslint src --ext ts,tsx",
     "formatting": "prettier src --check",
     "build": "bun --env-file=../.env.bundle bundle.ts"

package/.prettierrc.js

@@ -1,14 +0,0 @@
-module.exports = {
-	singleQuote: true,
-	bracketSpacing: false,
-	useTabs: true,
-	overrides: [
-		{
-			files: ['*.yml'],
-			options: {
-				singleQuote: false,
-			},
-		},
-	],
-	plugins: [require.resolve('prettier-plugin-organize-imports')],
-};

package/dist/esm/context.mjs

@@ -1,44 +0,0 @@
-// src/presentations/context.tsx
-import React, {useMemo} from "react";
-import {AbsoluteFill} from "remotion";
-import {
-jsx
-} from "react/jsx-runtime";
-var ContextPresentationContext = React.createContext(null);
-var ContextPresentation = ({ children, presentationDirection, presentationProgress, passedProps }) => {
-  const style = useMemo(() => {
-    return {
-      ...presentationDirection === "entering" ? passedProps.enterStyle : passedProps.exitStyle
-    };
-  }, [passedProps.enterStyle, passedProps.exitStyle, presentationDirection]);
-  const value = useMemo(() => {
-    return {
-      progress: presentationProgress,
-      direction: presentationDirection
-    };
-  }, [presentationDirection, presentationProgress]);
-  return jsx(ContextPresentationContext.Provider, {
-    value,
-    children: jsx(AbsoluteFill, {
-      style,
-      children
-    })
-  });
-};
-var context = (props) => {
-  return {
-    component: ContextPresentation,
-    props: props ?? {}
-  };
-};
-var useTransitionContext = () => {
-  const value = React.useContext(ContextPresentationContext);
-  if (!value) {
-    return null;
-  }
-  return value;
-};
-export {
-  useTransitionContext,
-  context
-};

package/vitest.config.mts

@@ -1,11 +0,0 @@
-import react from '@vitejs/plugin-react';
-import {defineConfig} from 'vitest/config';
-
-export default defineConfig({
-	test: {
-		testTimeout: 90000,
-		maxConcurrency: 1,
-		threads: false,
-	},
-	plugins: [react()],
-});