frosted-glass-wipe

1import type { TransitionPresentation } from "@remotion/transitions";
2import { useMemo } from "react";
3import { AbsoluteFill, interpolate } from "remotion";
4import {
5  resolveTransitionTiming,
6  transitionPhase,
7  type TransitionVariant,
8} from "@/remotion/lib/transition-timing";
9 
10export type FrostedGlassDirection =
11  | "from-left"
12  | "from-right"
13  | "from-top"
14  | "from-bottom";
15 
16export type FrostedGlassWipeProps = {
17  blur?: number;
18  /** Panel width as a share of the frame, 0→1. */
19  panelWidth?: number;
20  direction?: FrostedGlassDirection;
21  frostColor?: string;
22};
23 
24const AXIS: Record<
25  FrostedGlassDirection,
26  { vertical: boolean; gradient: string; near: "left" | "right" | "top" | "bottom" }
27> = {
28  "from-left": { vertical: false, gradient: "to right", near: "left" },
29  "from-right": { vertical: false, gradient: "to left", near: "right" },
30  "from-top": { vertical: true, gradient: "to bottom", near: "top" },
31  "from-bottom": { vertical: true, gradient: "to top", near: "bottom" },
32};
33 
34const FrostedGlassWipePresentation: React.FC<
35  React.ComponentProps<
36    NonNullable<TransitionPresentation<FrostedGlassWipeProps>["component"]>
37  >
38> = ({
39  children,
40  presentationProgress,
41  presentationDirection,
42  passedProps: {
43    blur = 20,
44    panelWidth = 0.14,
45    direction = "from-left",
46    frostColor = "rgba(255,255,255,0.12)",
47  },
48}) => {
49  const phase = transitionPhase(presentationProgress, presentationDirection, {
50    lead: 1,
51  });
52  const { vertical, gradient, near } = AXIS[direction];
53  const swept = 1 - phase.displace;
54 
55  const revealStyle = useMemo(() => {
56    // The glass panel covers the frame edge it is crossing, so the scene under
57    // it can be cut hard: the panel is what hides the seam. Only the arriving
58    // scene is clipped — the outgoing one holds whole beneath it.
59    if (!phase.isEntering) {
60      return undefined;
61    }
62 
63    const hidden = `${(1 - swept) * 100}%`;
64 
65    return {
66      clipPath: vertical
67        ? direction === "from-top"
68          ? `inset(0 0 ${hidden} 0)`
69          : `inset(${hidden} 0 0 0)`
70        : direction === "from-left"
71          ? `inset(0 ${hidden} 0 0)`
72          : `inset(0 0 0 ${hidden})`,
73    };
74  }, [direction, phase.isEntering, swept, vertical]);
75 
76  const panelStyle = useMemo(() => {
77    const widthPct = panelWidth * 100;
78    // Rides the seam, and is parked off-frame at both ends so it never sits
79    // over a scene that is not moving.
80    const offset = swept * (100 + widthPct) - widthPct;
81// … truncated