@remotion/transitions 4.0.73 → 4.0.75

package/dist/TransitionSeries.d.ts

@@ -5,7 +5,7 @@ declare const TransitionSeriesTransition: <PresentationProps extends Record<stri
 type SeriesSequenceProps = PropsWithChildren<{
     durationInFrames: number;
     offset?: number;
-    className?: number;
+    className?: string;
 } & LayoutAndStyle & Pick<SequencePropsWithoutDuration, 'name'>>;
 declare const SeriesSequence: ({ children }: SeriesSequenceProps) => JSX.Element;
 declare const TransitionSeries: FC<SequencePropsWithoutDuration> & {

package/dist/cjs/TransitionSeries.d.ts

@@ -5,7 +5,7 @@ declare const TransitionSeriesTransition: <PresentationProps extends Record<stri
 type SeriesSequenceProps = PropsWithChildren<{
     durationInFrames: number;
     offset?: number;
-    className?: number;
+    className?: string;
 } & LayoutAndStyle & Pick<SequencePropsWithoutDuration, 'name'>>;
 declare const SeriesSequence: ({ children }: SeriesSequenceProps) => JSX.Element;
 declare const TransitionSeries: FC<SequencePropsWithoutDuration> & {

package/dist/cjs/clock-wipe.js

@@ -0,0 +1,32 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+var paths = require('@remotion/paths');
+var shapes = require('@remotion/shapes');
+var react = require('react');
+var remotion = require('remotion');
+
+const ClockWipePresentation = ({ children, presentationDirection, presentationProgress, passedProps }) => {
+    const finishedRadius = Math.sqrt(passedProps.width ** 2 + passedProps.height ** 2) / 2;
+    const { path } = shapes.makePie({
+        radius: finishedRadius,
+        progress: presentationProgress,
+    });
+    const translatedPath = paths.translatePath(path, -(finishedRadius * 2 - passedProps.width) / 2, -(finishedRadius * 2 - passedProps.height) / 2);
+    const [clipId] = react.useState(() => String(remotion.random(null)));
+    const style = react.useMemo(() => {
+        return {
+            width: '100%',
+            height: '100%',
+            clipPath: presentationDirection === 'exiting' ? undefined : `url(#${clipId})`,
+        };
+    }, [clipId, presentationDirection]);
+    return (jsxRuntime.jsxs(remotion.AbsoluteFill, { children: [jsxRuntime.jsx(remotion.AbsoluteFill, { style: style, children: children }), presentationDirection === 'exiting' ? null : (jsxRuntime.jsx(remotion.AbsoluteFill, { children: jsxRuntime.jsx("svg", { children: jsxRuntime.jsx("defs", { children: jsxRuntime.jsx("clipPath", { id: clipId, children: jsxRuntime.jsx("path", { d: translatedPath, fill: "black" }) }) }) }) }))] }));
+};
+const clockWipe = (props) => {
+    return { component: ClockWipePresentation, props: props !== null && props !== void 0 ? props : {} };
+};
+
+exports.clockWipe = clockWipe;

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

@@ -0,0 +1,6 @@
+import type { TransitionPresentation } from '../types.js';
+export type ClockWipeProps = {
+    width: number;
+    height: number;
+};
+export declare const clockWipe: (props: ClockWipeProps) => TransitionPresentation<ClockWipeProps>;

package/dist/presentations/clock-wipe.d.ts

@@ -0,0 +1,6 @@
+import type { TransitionPresentation } from '../types.js';
+export type ClockWipeProps = {
+    width: number;
+    height: number;
+};
+export declare const clockWipe: (props: ClockWipeProps) => TransitionPresentation<ClockWipeProps>;

package/dist/presentations/clock-wipe.js

@@ -0,0 +1,25 @@
+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})`,
+        };
+    }, [clipId, presentationDirection]);
+    return (_jsxs(AbsoluteFill, { 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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@remotion/transitions",
-  "version": "4.0.73",
+  "version": "4.0.75",
   "description": "Transition presets for Remotion",
   "sideEffects": false,
   "main": "dist/cjs/index.js",
@@ -16,7 +16,9 @@
     "url": "https://github.com/remotion-dev/remotion/issues"
   },
   "dependencies": {
-    "remotion": "4.0.73"
+    "remotion": "4.0.75",
+    "@remotion/paths": "4.0.75",
+    "@remotion/shapes": "4.0.75"
   },
   "devDependencies": {
     "@jonny/eslint-config": "3.0.276",
@@ -31,8 +33,8 @@
     "@vitejs/plugin-react": "^2.0.0",
     "rollup": "^2.70.1",
     "@rollup/plugin-typescript": "^8.2.0",
-    "remotion": "4.0.73",
-    "@remotion/test-utils": "4.0.73"
+    "remotion": "4.0.75",
+    "@remotion/test-utils": "4.0.75"
   },
   "peerDependencies": {
     "react": ">=16.8.0",
@@ -76,6 +78,12 @@
       "require": "./dist/cjs/presentations/flip.js",
       "types": "./dist/presentations/flip.d.ts"
     },
+    "./clock-wipe": {
+      "module": "./dist/presentations/clock-wipe.js",
+      "import": "./dist/presentations/clock-wipe.js",
+      "require": "./dist/cjs/presentations/clock-wipe.js",
+      "types": "./dist/presentations/clock-wipe.d.ts"
+    },
     "./package.json": "./package.json"
   },
   "typesVersions": {
@@ -91,6 +99,9 @@
       ],
       "fade": [
         "dist/presentations/fade.d.ts"
+      ],
+      "clock-wipe": [
+        "dist/presentations/clock-wipe.d.ts"
       ]
     }
   },

package/rollup.config.js

@@ -1,7 +1,7 @@
 // rollup.config.js
 import typescript from '@rollup/plugin-typescript';
 
-const presentations = ['slide', 'flip', 'wipe', 'fade'];
+const presentations = ['slide', 'flip', 'wipe', 'fade', 'clock-wipe'];
 
 export default [
 	{
@@ -32,7 +32,14 @@ export default [
 					sourcemap: false,
 				},
 			],
-			external: ['remotion', 'remotion/no-react', 'react', 'react/jsx-runtime'],
+			external: [
+				'remotion',
+				'remotion/no-react',
+				'react',
+				'react/jsx-runtime',
+				'@remotion/paths',
+				'@remotion/shapes',
+			],
 			plugins: [
 				typescript({
 					tsconfig: 'tsconfig-cjs.json',