@remotion/transitions 4.0.53

package/LICENSE.md

@@ -0,0 +1,45 @@
+# Remotion License
+
+Depending on the type of your legal entity, you are granted permission to use Remotion for your project. Individuals and small companies are allowed to use Remotion to create videos for free (even commercial), while a company license is required for for-profit organizations of a certain size. This two-tier system was designed to ensure funding for this project while still allowing the source code to be available and the program to be free for most. Read below for the exact terms of use.
+
+- [Free license](#free-license)
+- [Company license](#company-license)
+
+## Free license
+
+Copyright © 2023 [Remotion](https://www.remotion.dev)
+
+### Eligibility
+
+You are eligible to use Remotion for free if you are:
+
+- an individual
+- a for-profit organization with up to 3 employees
+- a non-profit or not-for-profit organization
+- evaluating whether Remotion is a good fit, and are not yet using it in a commercial way
+
+### Allowed use cases
+
+Permission is hereby granted, free of charge, to any person eligible for the "Free license", to use the software non-commercially or commercially for the purpose of creating videos and images and to modify the software to their own liking, for the purpose of fulfilling their custom use case or to contribute bug fixes or improvements back to Remotion.
+
+### Disallowed use cases
+
+It is not allowed to copy or modify Remotion code for the purpose of selling, renting, licensing, relicensing, or sublicensing your own derivate of Remotion.
+
+### Warranty notice
+
+The software is provided "as is", without warranty of any kind, express or implied, including but not limited to the warranties of merchantability, fitness for a particular purpose, and non-infringement. In no event shall the author or copyright holders be liable for any claim, damages or other liability, whether in an action of contract, tort or otherwise, arising from, out of or in connection with the software or the use or other dealings in the software.
+
+### Support
+
+Support is provided on a best-we-can-do basis via GitHub Issues and Discord.
+
+## Company license
+
+You are required to obtain a company license to use Remotion if you are not within the group of entities eligible for a free license. This license will enable you to use Remotion for the allowed use cases specified in the free license, and give you access to prioritized support (read the [Support Policy](https://www.remotion.dev/docs/support)).
+
+Visit [remotion.pro](https://www.remotion.pro/license) for pricing and to buy a license.
+
+### FAQs
+
+Are you not sure whether you need a company license because of an edge case? Here are some [frequently asked questions](https://www.remotion.pro/faq).

package/dist/TransitionSeries.d.ts

@@ -0,0 +1,15 @@
+import type { FC, PropsWithChildren } from "react";
+import type { LayoutAndStyle, SequencePropsWithoutDuration } from "remotion";
+import type { TransitionSeriesTransitionProps } from "./types.js";
+declare const TransitionSeriesTransition: <PresentationProps extends Record<string, unknown>>(_props: TransitionSeriesTransitionProps<PresentationProps>) => null;
+type SeriesSequenceProps = PropsWithChildren<{
+    durationInFrames: number;
+    offset?: number;
+    className?: number;
+} & LayoutAndStyle & Pick<SequencePropsWithoutDuration, "name">>;
+declare const SeriesSequence: ({ children }: SeriesSequenceProps) => JSX.Element;
+declare const TransitionSeries: FC<SequencePropsWithoutDuration> & {
+    Sequence: typeof SeriesSequence;
+    Transition: typeof TransitionSeriesTransition;
+};
+export { TransitionSeries };

package/dist/TransitionSeries.js

@@ -0,0 +1,150 @@
+import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
+import { Children, useMemo } from "react";
+import { Sequence, useCurrentFrame, useVideoConfig } from "remotion";
+import { slide } from "./presentations/slide.js";
+import { flattenChildren } from "./flatten-children.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;
+            }
+            const actualStartFrame = currentStartFrame + transitionOffsets;
+            startFrame += durationInFramesProp + offset;
+            const inner = (_jsx(Sequence, { from: Math.floor(actualStartFrame), durationInFrames: durationInFramesProp, ...passedProps, children: child }));
+            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 (
+                // @ts-expect-error
+                _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: inner }) }));
+            }
+            if (prevProgress !== null && prev) {
+                const prevPresentation = (_f = prev.props.presentation) !== null && _f !== void 0 ? _f : slide();
+                const UppercasePrevPresentation = prevPresentation.component;
+                return (
+                // @ts-expect-error
+                _jsx(UppercasePrevPresentation, { passedProps: (_g = prevPresentation.props) !== null && _g !== void 0 ? _g : {}, presentationDirection: "entering", presentationProgress: prevProgress, children: inner }));
+            }
+            if (nextProgress !== null && next) {
+                const nextPresentation = (_h = next.props.presentation) !== null && _h !== void 0 ? _h : slide();
+                const UppercaseNextPresentation = nextPresentation.component;
+                return (
+                // @ts-expect-error
+                _jsx(UppercaseNextPresentation, { passedProps: (_j = nextPresentation.props) !== null && _j !== void 0 ? _j : {}, presentationDirection: "exiting", presentationProgress: nextProgress, children: inner }));
+            }
+            return inner;
+        });
+    }, [children, fps, frame]);
+    // eslint-disable-next-line react/jsx-no-useless-fragment
+    return _jsx(_Fragment, { children: childrenValue });
+};
+const TransitionSeries = ({ children, ...otherProps }) => {
+    var _a;
+    const frame = useCurrentFrame();
+    const showInTimeline = frame < ((_a = otherProps.from) !== null && _a !== void 0 ? _a : 0);
+    return (_jsx(Sequence, { showInTimeline: showInTimeline, ...otherProps, children: _jsx(TransitionSeriesChildren, { children: children }) }));
+};
+TransitionSeries.Sequence = SeriesSequence;
+TransitionSeries.Transition = TransitionSeriesTransition;
+export { TransitionSeries };

package/dist/cjs/TransitionSeries.d.ts

@@ -0,0 +1,15 @@
+import type { FC, PropsWithChildren } from "react";
+import type { LayoutAndStyle, SequencePropsWithoutDuration } from "remotion";
+import type { TransitionSeriesTransitionProps } from "./types.js";
+declare const TransitionSeriesTransition: <PresentationProps extends Record<string, unknown>>(_props: TransitionSeriesTransitionProps<PresentationProps>) => null;
+type SeriesSequenceProps = PropsWithChildren<{
+    durationInFrames: number;
+    offset?: number;
+    className?: number;
+} & LayoutAndStyle & Pick<SequencePropsWithoutDuration, "name">>;
+declare const SeriesSequence: ({ children }: SeriesSequenceProps) => JSX.Element;
+declare const TransitionSeries: FC<SequencePropsWithoutDuration> & {
+    Sequence: typeof SeriesSequence;
+    Transition: typeof TransitionSeriesTransition;
+};
+export { TransitionSeries };

package/dist/cjs/fade.js

@@ -0,0 +1,24 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+var react = require('react');
+var remotion = require('remotion');
+
+const FadePresentation = ({ children, presentationDirection, presentationProgress }) => {
+    const style = react.useMemo(() => {
+        return {
+            opacity: presentationDirection === "entering" ? presentationProgress : 1,
+        };
+    }, [presentationDirection, presentationProgress]);
+    return (jsxRuntime.jsx(remotion.AbsoluteFill, { children: jsxRuntime.jsx(remotion.AbsoluteFill, { style: style, children: children }) }));
+};
+const fade = (props) => {
+    return {
+        component: FadePresentation,
+        props: props !== null && props !== void 0 ? props : {},
+    };
+};
+
+exports.fade = fade;

package/dist/cjs/flatten-children.d.ts

@@ -0,0 +1,2 @@
+import React from "react";
+export declare const flattenChildren: (children: React.ReactNode) => (string | number | React.ReactElement<any, string | React.JSXElementConstructor<any>> | React.ReactFragment | React.ReactPortal)[];

package/dist/cjs/index.d.ts

@@ -0,0 +1,4 @@
+export { springTiming } from './timings/spring-timing.js';
+export { linearTiming } from "./timings/linear-timing.js";
+export { TransitionSeries } from "./TransitionSeries.js";
+export { TransitionTiming, TransitionPresentation, TransitionPresentationComponentProps, } from "./types.js";

package/dist/cjs/index.js

@@ -0,0 +1,282 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var remotion = require('remotion');
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+
+const springWithInvalidArgumentRejection = (args) => {
+    if (args.to || args.from) {
+        throw new Error("to / from values are not supported by springWithRoundUpIfThreshold");
+    }
+    return remotion.spring(args);
+};
+const springTiming = (options = {}) => {
+    return {
+        getDurationInFrames: ({ fps }) => {
+            if (options.durationInFrames) {
+                return options.durationInFrames;
+            }
+            return remotion.measureSpring({
+                config: options.config,
+                threshold: options.durationRestThreshold,
+                fps,
+            });
+        },
+        getProgress: ({ fps, frame }) => {
+            return springWithInvalidArgumentRejection({
+                fps,
+                frame,
+                config: options.config,
+                durationInFrames: options.durationInFrames,
+                durationRestThreshold: options.durationRestThreshold,
+            });
+        },
+    };
+};
+
+const linearTiming = (options) => {
+    return {
+        getDurationInFrames: () => {
+            return options.durationInFrames;
+        },
+        getProgress: ({ frame }) => {
+            return remotion.interpolate(frame, [0, options.durationInFrames], [0, 1], {
+                easing: options.easing,
+                extrapolateLeft: 'clamp',
+                extrapolateRight: 'clamp',
+            });
+        },
+    };
+};
+
+const SlidePresentation = ({ children, presentationProgress, presentationDirection, passedProps: { direction = "from-left" }, }) => {
+    const directionStyle = React.useMemo(() => {
+        if (presentationDirection === "exiting") {
+            switch (direction) {
+                case "from-left":
+                    return {
+                        transform: `translateX(${presentationProgress * 100}%)`,
+                    };
+                case "from-right":
+                    return {
+                        transform: `translateX(-${presentationProgress * 100}%)`,
+                    };
+                case "from-top":
+                    return {
+                        transform: `translateY(${presentationProgress * 100}%)`,
+                    };
+                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 - presentationProgress * 100}%)`,
+                };
+            case "from-top":
+                return {
+                    transform: `translateY(${-100 + presentationProgress * 100}%)`,
+                };
+            case "from-bottom":
+                return {
+                    transform: `translateY(${100 - presentationProgress * 100}%)`,
+                };
+            default:
+                throw new Error(`Invalid direction: ${direction}`);
+        }
+    }, [presentationDirection, presentationProgress, direction]);
+    const style = React.useMemo(() => {
+        return {
+            width: "100%",
+            height: "100%",
+            justifyContent: "center",
+            alignItems: "center",
+            ...directionStyle,
+        };
+    }, [directionStyle]);
+    return (jsxRuntime.jsx(remotion.AbsoluteFill, { children: jsxRuntime.jsx(remotion.AbsoluteFill, { style: style, children: children }) }));
+};
+const slide = (props) => {
+    return {
+        component: SlidePresentation,
+        props: props !== null && props !== void 0 ? props : {},
+    };
+};
+
+const flattenChildren = (children) => {
+    const childrenArray = React__default["default"].Children.toArray(children);
+    return childrenArray.reduce((flatChildren, child) => {
+        if (child.type === React__default["default"].Fragment) {
+            return flatChildren.concat(flattenChildren(child.props
+                .children));
+        }
+        flatChildren.push(child);
+        return flatChildren;
+    }, []);
+};
+
+/* eslint-disable prefer-destructuring */
+const validateDurationInFrames = remotion.Internals.validateDurationInFrames;
+
+// 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 jsxRuntime.jsx(jsxRuntime.Fragment, { children: children });
+};
+const TransitionSeriesChildren = ({ children, }) => {
+    const { fps } = remotion.useVideoConfig();
+    const frame = remotion.useCurrentFrame();
+    const childrenValue = React.useMemo(() => {
+        let transitionOffsets = 0;
+        let startFrame = 0;
+        const flattedChildren = flattenChildren(children);
+        return React.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;
+            }
+            const actualStartFrame = currentStartFrame + transitionOffsets;
+            startFrame += durationInFramesProp + offset;
+            const inner = (jsxRuntime.jsx(remotion.Sequence, { from: Math.floor(actualStartFrame), durationInFrames: durationInFramesProp, ...passedProps, children: child }));
+            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 (
+                // @ts-expect-error
+                jsxRuntime.jsx(UppercaseNextPresentation, { passedProps: (_d = nextPresentation.props) !== null && _d !== void 0 ? _d : {}, presentationDirection: "exiting", presentationProgress: nextProgress, children: jsxRuntime.jsx(UppercasePrevPresentation, { passedProps: (_e = prevPresentation.props) !== null && _e !== void 0 ? _e : {}, presentationDirection: "entering", presentationProgress: prevProgress, children: inner }) }));
+            }
+            if (prevProgress !== null && prev) {
+                const prevPresentation = (_f = prev.props.presentation) !== null && _f !== void 0 ? _f : slide();
+                const UppercasePrevPresentation = prevPresentation.component;
+                return (
+                // @ts-expect-error
+                jsxRuntime.jsx(UppercasePrevPresentation, { passedProps: (_g = prevPresentation.props) !== null && _g !== void 0 ? _g : {}, presentationDirection: "entering", presentationProgress: prevProgress, children: inner }));
+            }
+            if (nextProgress !== null && next) {
+                const nextPresentation = (_h = next.props.presentation) !== null && _h !== void 0 ? _h : slide();
+                const UppercaseNextPresentation = nextPresentation.component;
+                return (
+                // @ts-expect-error
+                jsxRuntime.jsx(UppercaseNextPresentation, { passedProps: (_j = nextPresentation.props) !== null && _j !== void 0 ? _j : {}, presentationDirection: "exiting", presentationProgress: nextProgress, children: inner }));
+            }
+            return inner;
+        });
+    }, [children, fps, frame]);
+    // eslint-disable-next-line react/jsx-no-useless-fragment
+    return jsxRuntime.jsx(jsxRuntime.Fragment, { children: childrenValue });
+};
+const TransitionSeries = ({ children, ...otherProps }) => {
+    var _a;
+    const frame = remotion.useCurrentFrame();
+    const showInTimeline = frame < ((_a = otherProps.from) !== null && _a !== void 0 ? _a : 0);
+    return (jsxRuntime.jsx(remotion.Sequence, { showInTimeline: showInTimeline, ...otherProps, children: jsxRuntime.jsx(TransitionSeriesChildren, { children: children }) }));
+};
+TransitionSeries.Sequence = SeriesSequence;
+TransitionSeries.Transition = TransitionSeriesTransition;
+
+exports.TransitionSeries = TransitionSeries;
+exports.linearTiming = linearTiming;
+exports.springTiming = springTiming;

package/dist/cjs/presentations/fade.d.ts

@@ -0,0 +1,4 @@
+import type { TransitionPresentation } from "../types.js";
+type FadeProps = Record<string, never>;
+export declare const fade: (props?: FadeProps) => TransitionPresentation<FadeProps>;
+export {};

package/dist/cjs/presentations/slide.d.ts

@@ -0,0 +1,7 @@
+import type { TransitionPresentation } from "../types.js";
+export type SlideDirection = "from-left" | "from-top" | "from-right" | "from-bottom";
+type SlideProps = {
+    direction?: SlideDirection;
+};
+export declare const slide: (props?: SlideProps) => TransitionPresentation<SlideProps>;
+export {};

package/dist/cjs/presentations/wipe.d.ts

@@ -0,0 +1,7 @@
+import type { TransitionPresentation } from "../types.js";
+export type WipeDirection = "from-left" | "from-top-left" | "from-top" | "from-top-right" | "from-right" | "from-bottom-right" | "from-bottom" | "from-bottom-left";
+type WipeProps = {
+    direction?: WipeDirection;
+};
+export declare const wipe: (props?: WipeProps) => TransitionPresentation<WipeProps>;
+export {};

package/dist/cjs/slide.js

@@ -0,0 +1,72 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+var react = require('react');
+var remotion = require('remotion');
+
+const SlidePresentation = ({ children, presentationProgress, presentationDirection, passedProps: { direction = "from-left" }, }) => {
+    const directionStyle = react.useMemo(() => {
+        if (presentationDirection === "exiting") {
+            switch (direction) {
+                case "from-left":
+                    return {
+                        transform: `translateX(${presentationProgress * 100}%)`,
+                    };
+                case "from-right":
+                    return {
+                        transform: `translateX(-${presentationProgress * 100}%)`,
+                    };
+                case "from-top":
+                    return {
+                        transform: `translateY(${presentationProgress * 100}%)`,
+                    };
+                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 - presentationProgress * 100}%)`,
+                };
+            case "from-top":
+                return {
+                    transform: `translateY(${-100 + presentationProgress * 100}%)`,
+                };
+            case "from-bottom":
+                return {
+                    transform: `translateY(${100 - presentationProgress * 100}%)`,
+                };
+            default:
+                throw new Error(`Invalid direction: ${direction}`);
+        }
+    }, [presentationDirection, presentationProgress, direction]);
+    const style = react.useMemo(() => {
+        return {
+            width: "100%",
+            height: "100%",
+            justifyContent: "center",
+            alignItems: "center",
+            ...directionStyle,
+        };
+    }, [directionStyle]);
+    return (jsxRuntime.jsx(remotion.AbsoluteFill, { children: jsxRuntime.jsx(remotion.AbsoluteFill, { style: style, children: children }) }));
+};
+const slide = (props) => {
+    return {
+        component: SlidePresentation,
+        props: props !== null && props !== void 0 ? props : {},
+    };
+};
+
+exports.slide = slide;

package/dist/cjs/test/transitions.test.d.ts

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

package/dist/cjs/timings/linear-timing.d.ts

@@ -0,0 +1,5 @@
+import type { TransitionTiming } from '../types.js';
+export declare const linearTiming: (options: {
+    durationInFrames: number;
+    easing?: ((input: number) => number) | undefined;
+}) => TransitionTiming;

package/dist/cjs/timings/spring-timing.d.ts

@@ -0,0 +1,7 @@
+import type { SpringConfig } from "remotion";
+import type { TransitionTiming } from "../types.js";
+export declare const springTiming: (options?: {
+    config?: Partial<SpringConfig>;
+    durationInFrames?: number;
+    durationRestThreshold?: number;
+}) => TransitionTiming;