Focus Pull

1"use client";
2 
3import type {
4  TransitionPresentation,
5  TransitionPresentationComponentProps,
6} from "@remotion/transitions";
7import type React from "react";
8import { AbsoluteFill, Easing, interpolate } from "remotion";
9 
10const clampOpts = {
11  extrapolateLeft: "clamp" as const,
12  extrapolateRight: "clamp" as const,
13};
14 
15export type FocusPullProps = {
16  blur?: number;
17};
18 
19const FocusPullPresentation: React.FC<
20  TransitionPresentationComponentProps<FocusPullProps>
21> = ({
22  children,
23  presentationProgress,
24  presentationDirection,
25  passedProps,
26}) => {
27  const { blur = 16 } = passedProps;
28  const entering = presentationDirection === "entering";
29  const p = presentationProgress;
30 
31  if (!entering) {
32    const exitStyle: React.CSSProperties = {
33      opacity: interpolate(p, [0.42, 0.68], [1, 0], {
34        ...clampOpts,
35        easing: Easing.bezier(0.42, 0, 0.58, 1),
36      }),
37      transform: `scale(${interpolate(p, [0, 0.6], [1, 1.05], {
38        ...clampOpts,
39        easing: Easing.bezier(0.42, 0, 0.58, 1),
40      })})`,
41      filter: `blur(${interpolate(p, [0.05, 0.55], [0, blur], {
42        ...clampOpts,
43        easing: Easing.in(Easing.quad),
44      })}px) brightness(${interpolate(p, [0.1, 0.55], [1, 1.3], clampOpts)})`,
45    };
46    return <AbsoluteFill style={exitStyle}>{children}</AbsoluteFill>;
47  }
48 
49  const childStyle: React.CSSProperties = {
50    opacity: interpolate(p, [0.32, 0.52], [0, 1], clampOpts),
51    transform: `scale(${interpolate(p, [0.35, 1], [0.97, 1], {
52      ...clampOpts,
53      easing: Easing.out(Easing.cubic),
54    })})`,
55    filter: `blur(${interpolate(p, [0.35, 0.9], [blur, 0], {
56      ...clampOpts,
57      easing: Easing.out(Easing.quad),
58    })}px) brightness(${interpolate(p, [0.4, 0.85], [1.25, 1], clampOpts)})`,
59  };
60 
61  return <AbsoluteFill style={childStyle}>{children}</AbsoluteFill>;
62};
63 
64export function focusPull(
65  props: FocusPullProps = {},
66): TransitionPresentation<FocusPullProps> {
67  return {
68    component: FocusPullPresentation,
69    props,
70  };
71}