spatial-push

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 SpatialPushDirection =
11  | "from-left"
12  | "from-right"
13  | "from-top"
14  | "from-bottom";
15 
16export type SpatialPushProps = {
17  direction?: SpatialPushDirection;
18  perspective?: number;
19  /**
20   * Share of the frame each scene travels, 0→1. Anything below 1 leaves part
21   * of the frame uncovered mid-push, so only lower it over a solid backdrop.
22   */
23  pushDepth?: number;
24  /**
25   * Degrees each panel rotates away from the camera. Off by default: rotating
26   * a full-frame panel in 3D pulls one edge in, and the frame it uncovers is
27   * bare background. Raise it only over a backdrop, or with `pushDepth < 1`.
28   */
29  tilt?: number;
30};
31 
32const AXIS: Record<SpatialPushDirection, { axis: "x" | "y"; sign: number }> = {
33  "from-left": { axis: "x", sign: -1 },
34  "from-right": { axis: "x", sign: 1 },
35  "from-top": { axis: "y", sign: -1 },
36  "from-bottom": { axis: "y", sign: 1 },
37};
38 
39const SpatialPushPresentation: React.FC<
40  React.ComponentProps<
41    NonNullable<TransitionPresentation<SpatialPushProps>["component"]>
42  >
43> = ({
44  children,
45  presentationProgress,
46  presentationDirection,
47  passedProps: {
48    direction = "from-left",
49    perspective = 1200,
50    pushDepth = 1,
51    tilt = 0,
52  },
53}) => {
54  // Both scenes are locked to the same travel across the whole window: a push
55  // is one move of two panels, not two independent entrances.
56  const phase = transitionPhase(presentationProgress, presentationDirection, {
57    lead: 1,
58  });
59 
60  const style = useMemo(() => {
61    const { axis, sign } = AXIS[direction];
62    // A push moves both scenes the same way across the frame: the incoming one
63    // arrives from `direction`, the outgoing one is shoved out the far side.
64    const travel = sign * (phase.isEntering ? 1 : -1) * phase.displace * pushDepth * 100;
65    const rotate = axis === "x" ? "rotateY" : "rotateX";
66    const rotateSign = axis === "x" ? 1 : -1;
67    const angle = sign * rotateSign * (phase.isEntering ? 1 : -1) * phase.displace * tilt;
68    // Overscan only pays for the tilt. Without one the panels are already
69    // flush edge to edge, and scaling them would open the seam it closes.
70    const scale = tilt === 0 ? 1 : 1 + phase.displace * 0.06;
71// … truncated