directional-wipe

1import type { TransitionPresentation } from "@remotion/transitions";
2import { useMemo } from "react";
3import { AbsoluteFill } from "remotion";
4import {
5  resolveTransitionTiming,
6  transitionPhase,
7  type TransitionVariant,
8} from "@/remotion/lib/transition-timing";
9 
10export type DirectionalWipeDirection =
11  | "from-left"
12  | "from-right"
13  | "from-top"
14  | "from-bottom";
15 
16export type DirectionalWipeProps = {
17  direction?: DirectionalWipeDirection;
18  /** Width of the soft edge as a share of the frame, 0→1. 0 cuts hard. */
19  edgeSoftness?: number;
20  /** Parallax the scenes carry under the wipe, as a share of the frame. */
21  depth?: number;
22};
23 
24const GRADIENT_AXIS: Record<DirectionalWipeDirection, string> = {
25  "from-left": "to right",
26  "from-right": "to left",
27  "from-top": "to bottom",
28  "from-bottom": "to top",
29};
30 
31const PARALLAX_AXIS: Record<
32  DirectionalWipeDirection,
33  { axis: "x" | "y"; sign: number }
34> = {
35  "from-left": { axis: "x", sign: -1 },
36  "from-right": { axis: "x", sign: 1 },
37  "from-top": { axis: "y", sign: -1 },
38  "from-bottom": { axis: "y", sign: 1 },
39};
40 
41/**
42 * Soft-edged reveal mask. The edge travels from just past the far side of the
43 * frame to just past the near side, so at `displace === 0` the scene is whole
44 * and at `displace === 1` none of it is left — the feather never clips short.
45 */
46function wipeMask(
47  direction: DirectionalWipeDirection,
48  displace: number,
49  softness: number,
50): string {
51  const feather = Math.max(softness, 0) * 50;
52  const edge = (1 - displace) * (100 + feather * 2) - feather;
53 
54  return `linear-gradient(${GRADIENT_AXIS[direction]}, #000 ${edge - feather}%, transparent ${edge + feather}%)`;
55}
56 
57const DirectionalWipePresentation: React.FC<
58  React.ComponentProps<
59    NonNullable<TransitionPresentation<DirectionalWipeProps>["component"]>
60  >
61> = ({
62  children,
63  presentationProgress,
64  presentationDirection,
65  passedProps: { direction = "from-left", edgeSoftness = 0.12, depth = 0.08 },
66}) => {
67  const phase = transitionPhase(presentationProgress, presentationDirection);
68 
69  const style = useMemo(() => {
70    const { axis, sign } = PARALLAX_AXIS[direction];
71    const travel = sign * phase.displace * depth * 100;
72    const shift =
73      axis === "x"
74        ? `${phase.isEntering ? travel : -travel}% 0%`
75        : `0% ${phase.isEntering ? travel : -travel}%`;
76 
77    // The outgoing scene is covered by the incoming one rather than wiped
78    // itself. Masking both would open a hole onto the background mid-cut.
79// … truncated