transition-clock-wipe

1import type { TransitionPresentation } from "@remotion/transitions";
2import { clockWipe } from "@remotion/transitions/clock-wipe";
3import { useVideoConfig } from "remotion";
4import {
5  resolveTransitionTiming,
6  type TransitionVariant,
7} from "@/remotion/lib/transition-timing";
8 
9export type ClockWipeProps = {
10  /** Defaults to the composition width. */
11  width?: number;
12  /** Defaults to the composition height. */
13  height?: number;
14};
15 
16/**
17 * `clockWipe()` needs the frame size to build its sweep, which forced every
18 * caller to reach for `useVideoConfig()` first and pass it down — including in
19 * the config helpers, where hooks are not available. Resolving it inside the
20 * presentation instead makes the size optional everywhere.
21 */
22const AutoSizedClockWipe: React.FC<
23  React.ComponentProps<
24    NonNullable<TransitionPresentation<ClockWipeProps>["component"]>
25  >
26> = ({ passedProps, ...rest }) => {
27  const config = useVideoConfig();
28  const presentation = clockWipe({
29    width: passedProps.width ?? config.width,
30    height: passedProps.height ?? config.height,
31  });
32  const Presentation = presentation.component;
33 
34  return <Presentation {...rest} passedProps={presentation.props} />;
35};
36 
37export function autoClockWipe(
38  props: ClockWipeProps = {},
39): TransitionPresentation<ClockWipeProps> {
40  return { component: AutoSizedClockWipe, props };
41}
42 
43export type TransitionClockWipeConfig = {
44  durationInFrames?: number;
45  width?: number;
46  height?: number;
47  variant?: TransitionVariant;
48};
49 
50/** Clock wipe transition config for use with TransitionSeries.Transition */
51export function transitionClockWipe({
52  durationInFrames = 26,
53  width,
54  height,
55  variant = "editorial",
56}: TransitionClockWipeConfig = {}) {
57  return {
58    presentation: autoClockWipe({ width, height }),
59    timing: resolveTransitionTiming({ durationInFrames, variant }),
60  };
61}
62 
63export function getTransitionClockWipeDuration(
64  config: TransitionClockWipeConfig = {},
65  fps: number,
66): number {
67  return transitionClockWipe(config).timing.getDurationInFrames({ fps });
68}