@remotion/transitions: New clockWipe() presentation added

packages/docs/components/TableOfContents/transitions/presentations.tsx

@@ -1,6 +1,8 @@
 import { fade } from "@remotion/transitions/fade";
 import { flip } from "@remotion/transitions/flip";
 import { slide } from "@remotion/transitions/slide";
+
+import { clockWipe } from "@remotion/transitions/clock-wipe";
 import { wipe } from "@remotion/transitions/wipe";
 import React from "react";
 import { PresentationPreview } from "../../transitions/previews";
@@ -13,6 +15,9 @@ const row: React.CSSProperties = {
   justifyContent: "space-between",
 };
 
+export const presentationCompositionWidth = 540;
+export const presentationCompositionHeight = 280;
+
 export const Presentations: React.FC = () => {
   return (
     <Grid>
@@ -68,6 +73,23 @@ export const Presentations: React.FC = () => {
           </div>
         </div>
       </TOCItem>
+      <TOCItem link="/docs/transitions/presentations/clock-wipe">
+        <div style={row}>
+          <PresentationPreview
+            durationRestThreshold={0.001}
+            effect={clockWipe({
+              width: presentationCompositionWidth,
+              height: presentationCompositionHeight,
+            })}
+          />
+          <div style={{ flex: 1, marginLeft: 10 }}>
+            <strong>
+              <code>{"clockWipe()"}</code>
+            </strong>
+            <div>Reveal the new scene in a circular movement</div>
+          </div>
+        </div>
+      </TOCItem>
       <TOCItem link="/docs/transitions/audio-transitions">
         <div style={row}>
           <div style={{ flex: 1 }}>

packages/docs/components/demos/index.tsx

@@ -7,6 +7,7 @@ import styles from "./styles.module.css";
 import type { DemoType } from "./types";
 import {
   circleDemo,
+  clockWipePresentationDemo,
   customPresentationDemo,
   customTimingDemo,
   ellipseDemo,
@@ -57,6 +58,7 @@ const demos: DemoType[] = [
   flipPresentationDemo,
   customPresentationDemo,
   customTimingDemo,
+  clockWipePresentationDemo,
 ];
 
 export const Demo: React.FC<{

packages/docs/components/demos/types.ts

@@ -1,4 +1,5 @@
 import {
+  ClockWipeDemo,
   CustomTimingDemo,
   CustomTransitionDemo,
   FadeDemo,
@@ -614,6 +615,17 @@ export const wipePresentationDemo: DemoType = {
   ],
 };
 
+export const clockWipePresentationDemo: DemoType = {
+  comp: ClockWipeDemo,
+  compHeight: 280,
+  compWidth: 540,
+  durationInFrames: 60,
+  fps: 30,
+  id: "clock-wipe",
+  autoPlay: true,
+  options: [],
+};
+
 export const customPresentationDemo: DemoType = {
   comp: CustomTransitionDemo,
   compHeight: 280,

packages/docs/components/transitions/previews.tsx

@@ -5,6 +5,7 @@ import type {
   TransitionTiming,
 } from "@remotion/transitions";
 import { springTiming, TransitionSeries } from "@remotion/transitions";
+import { clockWipe } from "@remotion/transitions/clock-wipe";
 import { fade } from "@remotion/transitions/fade";
 import type { FlipDirection } from "@remotion/transitions/flip";
 import { flip } from "@remotion/transitions/flip";
@@ -15,6 +16,10 @@ import { wipe } from "@remotion/transitions/wipe";
 import React, { useEffect, useRef } from "react";
 import type { SpringConfig } from "remotion";
 import { AbsoluteFill, measureSpring, spring, useVideoConfig } from "remotion";
+import {
+  presentationCompositionHeight,
+  presentationCompositionWidth,
+} from "../TableOfContents/transitions/presentations";
 import { customPresentation } from "./custom-transition";
 
 const SceneA: React.FC = () => {
@@ -131,6 +136,17 @@ export const WipeDemo: React.FC<{
   );
 };
 
+export const ClockWipeDemo: React.FC<{}> = () => {
+  const { width, height } = useVideoConfig();
+
+  return (
+    <SampleTransition
+      effect={clockWipe({ width, height })}
+      durationRestThreshold={0.001}
+    />
+  );
+};
+
 export const CustomTransitionDemo: React.FC<{}> = () => {
   const { width, height } = useVideoConfig();
 
@@ -214,8 +230,8 @@ export const PresentationPreview: React.FC<{
     <Player
       ref={ref}
       component={SampleTransition}
-      compositionHeight={280}
-      compositionWidth={540}
+      compositionHeight={presentationCompositionHeight}
+      compositionWidth={presentationCompositionWidth}
       durationInFrames={60}
       fps={30}
       numberOfSharedAudioTags={0}

packages/docs/docs/transitions/presentations/clock-wipe.mdx

@@ -0,0 +1,69 @@
+---
+image: /generated/articles-docs-transitions-presentations-clock-wipe.png
+crumb: "@remotion/transitions - Presentations"
+title: "clockWipe()"
+---
+
+# clockWipe()<AvailableFrom v="4.0.74"/>
+
+A presentation where the exiting slide is wiped out in a circular movement, revealing the next slide underneath it.
+
+<Demo type="clock-wipe" />
+
+## Example
+
+```tsx twoslash title="ClockWipeTransition.tsx"
+import { AbsoluteFill } from "remotion";
+
+const Letter: React.FC<{
+  children: React.ReactNode;
+  color: string;
+}> = ({ children, color }) => {
+  return (
+    <AbsoluteFill
+      style={{
+        backgroundColor: color,
+        opacity: 0.9,
+        justifyContent: "center",
+        alignItems: "center",
+        fontSize: 200,
+        color: "white",
+      }}
+    >
+      {children}
+    </AbsoluteFill>
+  );
+};
+// ---cut---
+import { linearTiming, TransitionSeries } from "@remotion/transitions";
+import { clockWipe } from "@remotion/transitions/clock-wipe";
+import { useVideoConfig } from "remotion";
+
+const BasicTransition = () => {
+  const { width, height } = useVideoConfig();
+
+  return (
+    <TransitionSeries>
+      <TransitionSeries.Sequence durationInFrames={40}>
+        <Letter color="#0b84f3">A</Letter>
+      </TransitionSeries.Sequence>
+      <TransitionSeries.Transition
+        presentation={clockWipe({ width, height })}
+        timing={linearTiming({ durationInFrames: 30 })}
+      />
+      <TransitionSeries.Sequence durationInFrames={60}>
+        <Letter color="pink">B</Letter>
+      </TransitionSeries.Sequence>
+    </TransitionSeries>
+  );
+};
+```
+
+## API
+
+Accepts an object composed of `width` and `height`, which should be set to the width and height of the video.
+
+## See also
+
+- [Source code for this presentation](https://github.com/remotion-dev/remotion/blob/main/packages/transitions/src/presentations/clock-wipe.tsx)
+- [Presentations](/docs/transitions/presentations)

packages/docs/sidebars.js

@@ -428,6 +428,7 @@ module.exports = {
             "transitions/presentations/slide",
             "transitions/presentations/wipe",
             "transitions/presentations/flip",
+            "transitions/presentations/clock-wipe",
             "transitions/presentations/custom",
             "transitions/audio-transitions",
           ],

packages/docs/src/data/articles.ts

@@ -2528,6 +2528,13 @@ export const articles = [
     compId: "articles-docs-transitions-index",
     crumb: null,
   },
+  {
+    id: "transitions/presentations/clock-wipe",
+    title: "clockWipe()",
+    relativePath: "docs/transitions/presentations/clock-wipe.mdx",
+    compId: "articles-docs-transitions-presentations-clock-wipe",
+    crumb: "@remotion/transitions - Presentations",
+  },
   {
     id: "transitions/presentations/custom",
     title: "Custom presentations",

packages/transitions/package.json

@@ -22,7 +22,9 @@
 		"url": "https://github.com/remotion-dev/remotion/issues"
 	},
 	"dependencies": {
-		"remotion": "workspace:*"
+		"remotion": "workspace:*",
+		"@remotion/shapes": "workspace:*",
+		"@remotion/paths": "workspace:*"
 	},
 	"devDependencies": {
 		"@jonny/eslint-config": "3.0.276",
@@ -82,6 +84,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": {
@@ -97,6 +105,9 @@
 			],
 			"fade": [
 				"dist/presentations/fade.d.ts"
+			],
+			"clock-wipe": [
+				"dist/presentations/clock-wipe.d.ts"
 			]
 		}
 	}

packages/transitions/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',

packages/transitions/src/presentations/clock-wipe.tsx

@@ -0,0 +1,64 @@
+import {translatePath} from '@remotion/paths';
+import {makePie} from '@remotion/shapes';
+import React, {useMemo, useState} from 'react';
+import {AbsoluteFill, random} from 'remotion';
+import type {
+	TransitionPresentation,
+	TransitionPresentationComponentProps,
+} from '../types.js';
+
+export type ClockWipeProps = {
+	width: number;
+	height: number;
+};
+
+const ClockWipePresentation: React.FC<
+	TransitionPresentationComponentProps<ClockWipeProps>
+> = ({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: React.CSSProperties = useMemo(() => {
+		return {
+			width: '100%',
+			height: '100%',
+			clipPath:
+				presentationDirection === 'exiting' ? undefined : `url(#${clipId})`,
+		};
+	}, [clipId, presentationDirection]);
+
+	return (
+		<AbsoluteFill>
+			<AbsoluteFill style={style}>{children}</AbsoluteFill>
+			{presentationDirection === 'exiting' ? null : (
+				<AbsoluteFill>
+					<svg>
+						<defs>
+							<clipPath id={clipId}>
+								<path d={translatedPath} fill="black" />
+							</clipPath>
+						</defs>
+					</svg>
+				</AbsoluteFill>
+			)}
+		</AbsoluteFill>
+	);
+};
+
+export const clockWipe = (
+	props: ClockWipeProps,
+): TransitionPresentation<ClockWipeProps> => {
+	return {component: ClockWipePresentation, props: props ?? {}};
+};