blur-reveal

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 BlurRevealProps = {
11  maxBlur?: number;
12  /** Scale headroom the blur rides on. 0 keeps the frame perfectly still. */
13  scaleBy?: number;
14  shouldBlurOutExitingScene?: boolean;
15};
16 
17const BlurRevealPresentation: React.FC<
18  React.ComponentProps<
19    NonNullable<TransitionPresentation<BlurRevealProps>["component"]>
20  >
21> = ({
22  children,
23  presentationProgress,
24  presentationDirection,
25  passedProps: {
26    maxBlur = 24,
27    scaleBy = 0.03,
28    shouldBlurOutExitingScene = true,
29  },
30}) => {
31  const isEntering = presentationDirection === "entering";
32  const phase = transitionPhase(presentationProgress, presentationDirection, {
33    lead: isEntering ? 0.74 : 0.7,
34    fade: true,
35  });
36  const isHeld = !isEntering && !shouldBlurOutExitingScene;
37 
38  const style = useMemo(() => {
39    if (isHeld) {
40      return { opacity: 1 };
41    }
42 
43    // `displace` is 0 whenever the scene is at rest, so a scene that is not
44    // mid-transition renders untouched — no blur, no scale.
45    return {
46      opacity: phase.opacity,
47      filter:
48        phase.displace > 0.002
49          ? `blur(${(phase.displace * maxBlur).toFixed(2)}px)`
50          : undefined,
51      scale: phase.isEntering
52        ? 1 + phase.displace * scaleBy
53        : 1 - phase.displace * scaleBy * 0.66,
54    };
55  }, [
56    isHeld,
57    maxBlur,
58    phase.displace,
59    phase.isEntering,
60    phase.opacity,
61    scaleBy,
62  ]);
63 
64  return <AbsoluteFill style={style}>{children}</AbsoluteFill>;
65};
66 
67/** Blur + opacity reveal presentation for TransitionSeries */
68export function blurReveal(
69  props: BlurRevealProps = {},
70): TransitionPresentation<BlurRevealProps> {
71  return {
72    component: BlurRevealPresentation,
73    props,
74  };
75}
76 
77export type TransitionBlurRevealConfig = {
78  durationInFrames?: number;
79  maxBlur?: number;
80  scaleBy?: number;
81  variant?: TransitionVariant;
82  shouldBlurOutExitingScene?: boolean;
83};
84 
85/** Blur reveal transition config for use with TransitionSeries.Transition */
86export function transitionBlurReveal({
87  durationInFrames = 22,
88  maxBlur = 24,
89  scaleBy = 0.03,
90  variant = "editorial",
91  shouldBlurOutExitingScene = true,
92}: TransitionBlurRevealConfig = {}) {
93  return {
94// … truncated