@remotion/transitions 4.0.53

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 { Internals } from "remotion";
+export declare const validateDurationInFrames: typeof Internals.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/dist/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/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/dist/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/index.js

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

package/dist/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/presentations/fade.js

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

package/dist/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/presentations/slide.js

@@ -0,0 +1,65 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useMemo } from "react";
+import { AbsoluteFill } from "remotion";
+const SlidePresentation = ({ children, presentationProgress, presentationDirection, passedProps: { direction = "from-left" }, }) => {
+    const directionStyle = 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 = useMemo(() => {
+        return {
+            width: "100%",
+            height: "100%",
+            justifyContent: "center",
+            alignItems: "center",
+            ...directionStyle,
+        };
+    }, [directionStyle]);
+    return (_jsx(AbsoluteFill, { children: _jsx(AbsoluteFill, { style: style, children: children }) }));
+};
+export const slide = (props) => {
+    return {
+        component: SlidePresentation,
+        props: props !== null && props !== void 0 ? props : {},
+    };
+};

package/dist/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/presentations/wipe.js

@@ -0,0 +1,151 @@
+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" }, }) => {
+    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})`,
+        };
+    }, [clipId]);
+    const svgStyle = useMemo(() => {
+        return {
+            width: "100%",
+            height: "100%",
+            pointerEvents: "none",
+        };
+    }, []);
+    return (_jsxs(AbsoluteFill, { 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/dist/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/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/dist/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/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/dist/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/types.js

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

package/dist/validate.d.ts

@@ -0,0 +1,2 @@
+import { Internals } from "remotion";
+export declare const validateDurationInFrames: typeof Internals.validateDurationInFrames;

package/dist/validate.js

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

package/package.json

@@ -0,0 +1,93 @@
+{
+  "name": "@remotion/transitions",
+  "version": "4.0.53",
+  "description": "Transition presets for Remotion",
+  "sideEffects": false,
+  "main": "dist/cjs/index.js",
+  "module": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "author": "Jonny Burger",
+  "contributors": [],
+  "license": "MIT",
+  "repository": {
+    "url": "https://github.com/remotion-dev/remotion"
+  },
+  "bugs": {
+    "url": "https://github.com/remotion-dev/remotion/issues"
+  },
+  "dependencies": {
+    "remotion": "4.0.53"
+  },
+  "devDependencies": {
+    "@jonny/eslint-config": "3.0.276",
+    "eslint": "8.42.0",
+    "prettier": "3.0.2",
+    "prettier-plugin-organize-imports": "^3.2.2",
+    "react": "18.0.0",
+    "react-dom": "18.0.0",
+    "vitest": "0.31.1",
+    "@types/react": "18.0.26",
+    "@types/react-dom": "18.0.11",
+    "@vitejs/plugin-react": "^2.0.0",
+    "rollup": "^2.70.1",
+    "@rollup/plugin-typescript": "^8.2.0",
+    "remotion": "4.0.53",
+    "@remotion/test-utils": "4.0.53"
+  },
+  "peerDependencies": {
+    "react": ">=16.8.0",
+    "react-dom": ">=16.8.0"
+  },
+  "keywords": [
+    "remotion",
+    "transitions"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "exports": {
+    ".": {
+      "module": "./dist/index.js",
+      "import": "./dist/index.js",
+      "types": "./dist/index.d.ts",
+      "require": "./dist/cjs/index.js"
+    },
+    "./fade": {
+      "module": "./dist/presentations/fade.js",
+      "import": "./dist/presentations/fade.js",
+      "require": "./dist/cjs/presentations/fade.js",
+      "types": "./dist/presentations/fade.d.ts"
+    },
+    "./slide": {
+      "module": "./dist/presentations/slide.js",
+      "import": "./dist/presentations/slide.js",
+      "require": "./dist/cjs/presentations/slide.js",
+      "types": "./dist/presentations/slide.d.ts"
+    },
+    "./wipe": {
+      "module": "./dist/presentations/wipe.js",
+      "import": "./dist/presentations/wipe.js",
+      "require": "./dist/cjs/presentations/wipe.js",
+      "types": "./dist/presentations/wipe.d.ts"
+    },
+    "./package.json": "./package.json"
+  },
+  "typesVersions": {
+    ">=1.0": {
+      "wipe": [
+        "dist/presentations/wipe.d.ts"
+      ],
+      "slide": [
+        "dist/presentations/slide.d.ts"
+      ],
+      "fade": [
+        "dist/presentations/fade.d.ts"
+      ]
+    }
+  },
+  "scripts": {
+    "lint": "eslint src --ext ts,tsx",
+    "watch": "tsc -w",
+    "build": "rollup --config rollup.config.js && tsc -d"
+  }
+}