@remotion/transitions 4.0.135 → 4.0.136

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,25 @@
+'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 isEntering = presentationDirection === 'entering';
+    const style = react.useMemo(() => {
+        return {
+            opacity: isEntering ? presentationProgress : 1,
+        };
+    }, [isEntering, 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/flip.js

@@ -0,0 +1,40 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+var react = require('react');
+var remotion = require('remotion');
+
+const Flip = ({ children, presentationDirection, presentationProgress, passedProps: { direction = 'from-left', perspective = 1000 }, }) => {
+    const style = react.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'
+            ? remotion.interpolate(presentationProgress, [0, 1], [startRotationEntering, 0])
+            : remotion.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',
+        };
+    }, [direction, presentationDirection, presentationProgress]);
+    const outer = react.useMemo(() => {
+        return {
+            perspective,
+            // Make children also their backface hidden
+            transformStyle: 'preserve-3d',
+        };
+    }, [perspective]);
+    return (jsxRuntime.jsx(remotion.AbsoluteFill, { style: outer, children: jsxRuntime.jsx(remotion.AbsoluteFill, { style: style, children: children }) }));
+};
+const flip = (props) => {
+    return { component: Flip, props: props !== null && props !== void 0 ? props : {} };
+};
+
+exports.flip = flip;

package/dist/cjs/index.d.ts

@@ -0,0 +1,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';

package/dist/cjs/index.js

@@ -0,0 +1,280 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var remotion = require('remotion');
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var noReact = require('remotion/no-react');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+
+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 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 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;
+    }, []);
+};
+
+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 : {},
+    };
+};
+
+/* eslint-disable prefer-destructuring */
+const validateDurationInFrames = noReact.NoReactInternals.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;
+            }
+            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 (jsxRuntime.jsx(remotion.Sequence, { from: Math.floor(actualStartFrame), durationInFrames: durationInFramesProp, layout: "none", showInTimeline: false, children: 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: jsxRuntime.jsx(remotion.Sequence, { ...passedProps, children: child }) }) }) }));
+            }
+            if (prevProgress !== null && prev) {
+                const prevPresentation = (_f = prev.props.presentation) !== null && _f !== void 0 ? _f : slide();
+                const UppercasePrevPresentation = prevPresentation.component;
+                return (jsxRuntime.jsx(remotion.Sequence, { from: Math.floor(actualStartFrame), durationInFrames: durationInFramesProp, layout: "none", showInTimeline: false, children: jsxRuntime.jsx(UppercasePrevPresentation, { passedProps: (_g = prevPresentation.props) !== null && _g !== void 0 ? _g : {}, presentationDirection: "entering", presentationProgress: prevProgress, children: jsxRuntime.jsx(remotion.Sequence, { ...passedProps, children: child }) }) }));
+            }
+            if (nextProgress !== null && next) {
+                const nextPresentation = (_h = next.props.presentation) !== null && _h !== void 0 ? _h : slide();
+                const UppercaseNextPresentation = nextPresentation.component;
+                return (jsxRuntime.jsx(remotion.Sequence, { from: Math.floor(actualStartFrame), durationInFrames: durationInFramesProp, layout: "none", showInTimeline: false, children: jsxRuntime.jsx(UppercaseNextPresentation, { passedProps: (_j = nextPresentation.props) !== null && _j !== void 0 ? _j : {}, presentationDirection: "exiting", presentationProgress: nextProgress, children: jsxRuntime.jsx(remotion.Sequence, { ...passedProps, children: child }) }) }));
+            }
+            return (jsxRuntime.jsx(remotion.Sequence, { from: Math.floor(actualStartFrame), durationInFrames: durationInFramesProp, ...passedProps, children: child }));
+        });
+    }, [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 showInTimeline = ((_a = otherProps.from) !== null && _a !== void 0 ? _a : 0) !== 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,3 @@
+import type { TransitionPresentation } from '../types.js';
+export type FadeProps = Record<string, never>;
+export declare const fade: (props?: FadeProps) => TransitionPresentation<FadeProps>;

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

@@ -0,0 +1,7 @@
+import type { TransitionPresentation } from '../types.js';
+export type FlipDirection = 'from-left' | 'from-right' | 'from-top' | 'from-bottom';
+export type FlipProps = {
+    direction?: FlipDirection;
+    perspective?: number;
+};
+export declare const flip: (props?: FlipProps) => TransitionPresentation<FlipProps>;

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

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

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

@@ -0,0 +1,6 @@
+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';
+export type WipeProps = {
+    direction?: WipeDirection;
+};
+export declare const wipe: (props?: WipeProps) => TransitionPresentation<WipeProps>;

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;

package/dist/cjs/types.d.ts

@@ -0,0 +1,27 @@
+import type { ComponentType } from 'react';
+export type PresentationDirection = 'entering' | 'exiting';
+export type TransitionTiming = {
+    getDurationInFrames: (options: {
+        fps: number;
+    }) => number;
+    getProgress: (options: {
+        frame: number;
+        fps: number;
+    }) => number;
+};
+export type TransitionSeriesTransitionProps<PresentationProps extends Record<string, unknown>> = {
+    timing: TransitionTiming;
+    presentation?: TransitionPresentation<PresentationProps>;
+};
+type LooseComponentType<T> = ComponentType<T> | ((props: T) => React.ReactNode);
+export type TransitionPresentation<PresentationProps extends Record<string, unknown>> = {
+    component: LooseComponentType<TransitionPresentationComponentProps<PresentationProps>>;
+    props: PresentationProps;
+};
+export type TransitionPresentationComponentProps<PresentationProps extends Record<string, unknown>> = {
+    presentationProgress: number;
+    children: React.ReactNode;
+    presentationDirection: PresentationDirection;
+    passedProps: PresentationProps;
+};
+export {};

package/dist/cjs/validate.d.ts

@@ -0,0 +1,2 @@
+import { NoReactInternals } from 'remotion/no-react';
+export declare const validateDurationInFrames: typeof NoReactInternals.validateDurationInFrames;

package/dist/cjs/wipe.js

@@ -0,0 +1,158 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+var react = require('react');
+var remotion = require('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' }, }) => {
+    const [clipId] = react.useState(() => String(remotion.random(null)));
+    const progressInDirection = presentationDirection === 'entering'
+        ? presentationProgress
+        : 1 - presentationProgress;
+    const path = presentationDirection === 'entering'
+        ? makePathIn(progressInDirection, direction)
+        : makePathOut(progressInDirection, direction);
+    const style = react.useMemo(() => {
+        return {
+            width: '100%',
+            height: '100%',
+            justifyContent: 'center',
+            alignItems: 'center',
+            clipPath: `url(#${clipId})`,
+        };
+    }, [clipId]);
+    const svgStyle = react.useMemo(() => {
+        return {
+            width: '100%',
+            height: '100%',
+            pointerEvents: 'none',
+        };
+    }, []);
+    return (jsxRuntime.jsxs(remotion.AbsoluteFill, { children: [jsxRuntime.jsx(remotion.AbsoluteFill, { style: style, children: children }), jsxRuntime.jsx(remotion.AbsoluteFill, { children: jsxRuntime.jsx("svg", { viewBox: "0 0 1 1", style: svgStyle, children: jsxRuntime.jsx("defs", { children: jsxRuntime.jsx("clipPath", { id: clipId, clipPathUnits: "objectBoundingBox", children: jsxRuntime.jsx("path", { d: path, fill: "black" }) }) }) }) })] }));
+};
+const wipe = (props) => {
+    return {
+        component: WipePresentation,
+        props: props !== null && props !== void 0 ? props : {},
+    };
+};
+
+exports.wipe = wipe;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@remotion/transitions",
-  "version": "4.0.135",
+  "version": "4.0.136",
   "description": "Transition presets for Remotion",
   "sideEffects": false,
   "main": "dist/esm/index.mjs",
@@ -16,9 +16,9 @@
     "url": "https://github.com/remotion-dev/remotion/issues"
   },
   "dependencies": {
-    "remotion": "4.0.135",
-    "@remotion/paths": "4.0.135",
-    "@remotion/shapes": "4.0.135"
+    "remotion": "4.0.136",
+    "@remotion/shapes": "4.0.136",
+    "@remotion/paths": "4.0.136"
   },
   "devDependencies": {
     "@jonny/eslint-config": "3.0.276",
@@ -33,8 +33,8 @@
     "@vitejs/plugin-react": "^2.0.0",
     "rollup": "^2.70.1",
     "@rollup/plugin-typescript": "^8.2.0",
-    "remotion": "4.0.135",
-    "@remotion/test-utils": "4.0.135"
+    "remotion": "4.0.136",
+    "@remotion/test-utils": "4.0.136"
   },
   "peerDependencies": {
     "react": ">=16.8.0",