chromatic-aberration-wipe

1import type { TransitionPresentation } from "@remotion/transitions";
2import { useId, 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 ChromaticAberrationAxis = "horizontal" | "vertical";
11 
12export type ChromaticAberrationWipeProps = {
13  /** Peak channel separation in px, reached in the middle of the cut. */
14  intensity?: number;
15  axis?: ChromaticAberrationAxis;
16  /** Share of the frame the scenes slide across, 0→1. */
17  slide?: number;
18};
19 
20/**
21 * Isolates one channel and drops the other two, so three stacked copies
22 * recombine to the original image under `screen` — an actual channel
23 * separation rather than a coloured drop-shadow behind the whole layer.
24 */
25const CHANNEL_MATRIX = {
26  red: "1 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 1 0",
27  green: "0 0 0 0 0  0 1 0 0 0  0 0 0 0 0  0 0 0 1 0",
28  blue: "0 0 0 0 0  0 0 0 0 0  0 0 1 0 0  0 0 0 1 0",
29} as const;
30 
31const CHANNEL_OFFSET: Record<keyof typeof CHANNEL_MATRIX, number> = {
32  red: 1,
33  green: 0,
34  blue: -1,
35};
36 
37const ChromaticPresentation: React.FC<
38  React.ComponentProps<
39    NonNullable<TransitionPresentation<ChromaticAberrationWipeProps>["component"]>
40  >
41> = ({
42  children,
43  presentationProgress,
44  presentationDirection,
45  passedProps: { intensity = 12, axis = "horizontal", slide = 1 },
46}) => {
47  const filterId = useId().replace(/:/g, "");
48  // No fade: the two scenes slide locked together and cover the frame between
49  // them, so dropping either one's opacity only lets the background through.
50  const phase = transitionPhase(presentationProgress, presentationDirection, {
51    lead: 1,
52  });
53 
54  // The split is a stress artefact of the move: nothing at either end, hardest
55  // where the frame is travelling fastest.
56  const separation = interpolate(
57    phase.displace,
58    [0, 0.5, 1],
59    [0, intensity, 0],
60    { extrapolateLeft: "clamp", extrapolateRight: "clamp" },
61  );
62  const travel = phase.displace * (phase.isEntering ? 100 : -100) * slide;
63 
64  const shift = useMemo(
65    () => (axis === "horizontal" ? `${travel}% 0%` : `0% ${travel}%`),
66    [axis, travel],
67  );
68 
69  const channels = useMemo(
70    () =>
71      (Object.keys(CHANNEL_MATRIX) as (keyof typeof CHANNEL_MATRIX)[]).map(
72        (channel) => {
73          const offset = CHANNEL_OFFSET[channel] * separation;
74 
75          return {
76            channel,
77            style: {
78// … truncated