Dither Dissolve

1"use client";
2 
3import type {
4  TransitionPresentation,
5  TransitionPresentationComponentProps,
6} from "@remotion/transitions";
7import type React from "react";
8import { AbsoluteFill, interpolate } from "remotion";
9import { ShaderDithering } from "@/components/remocn/shader-dithering";
10 
11const clampOpts = {
12  extrapolateLeft: "clamp" as const,
13  extrapolateRight: "clamp" as const,
14};
15 
16const coverEnvelope = (p: number) =>
17  interpolate(p, [0, 0.3, 0.65, 1], [0, 1, 1, 0], clampOpts);
18 
19const coverChildOpacity = (p: number, entering: boolean) =>
20  entering
21    ? interpolate(p, [0.58, 0.66], [0, 1], clampOpts)
22    : interpolate(p, [0.28, 0.36], [1, 0], clampOpts);
23 
24type DitherShape = NonNullable<
25  React.ComponentProps<typeof ShaderDithering>["shape"]
26>;
27 
28export type DitherDissolveProps = {
29  colorBack?: string;
30  colorFront?: string;
31  shape?: DitherShape;
32  speed?: number;
33};
34 
35const DitherDissolvePresentation: React.FC<
36  TransitionPresentationComponentProps<DitherDissolveProps>
37> = ({
38  children,
39  presentationProgress,
40  presentationDirection,
41  passedProps,
42}) => {
43  const {
44    colorBack = "#141318",
45    colorFront = "#8f88ae",
46    shape = "simplex",
47    speed = 1.5,
48  } = passedProps;
49  const entering = presentationDirection === "entering";
50  const p = presentationProgress;
51  const size = interpolate(p, [0, 1], [1.6, 2.8], clampOpts);
52 
53  return (
54    <AbsoluteFill>
55      <AbsoluteFill style={{ opacity: coverChildOpacity(p, entering) }}>
56        {children}
57      </AbsoluteFill>
58      {entering ? (
59        <AbsoluteFill
60          style={{ opacity: coverEnvelope(p), pointerEvents: "none" }}
61        >
62          <ShaderDithering
63            speed={speed}
64            colorBack={colorBack}
65            colorFront={colorFront}
66            shape={shape}
67            size={size}
68          />
69        </AbsoluteFill>
70      ) : null}
71    </AbsoluteFill>
72  );
73};
74 
75export function ditherDissolve(
76  props: DitherDissolveProps = {},
77): TransitionPresentation<DitherDissolveProps> {
78  return {
79    component: DitherDissolvePresentation,
80    props,
81  };
82}