blur-in

1import { interpolate } from "remotion";
2import {
3  useEnterExit,
4  type MotionPrimitiveProps,
5} from "@/remotion/lib/motion-primitive";
6import { MotionWrapper } from "@/remotion/lib/motion-wrapper";
7 
8export type BlurInProps = MotionPrimitiveProps & {
9  /** Blur radius in pixels at the start. */
10  maxBlur?: number;
11  /** Scale at the start — the push that sells the pull into focus. */
12  scaleFrom?: number;
13};
14 
15/** Blur is gone by this point of the travel, so the element settles sharp. */
16const FOCUS_AT = 0.2;
17 
18/**
19 * Resolves out of a defocus, like a lens finding its subject.
20 *
21 * The blur clears before the move does — holding it to the last frame makes
22 * the whole entrance feel soft, and the eye reads the sharpening, not the
23 * arrival.
24 */
25export const BlurIn: React.FC<BlurInProps> = ({
26  children,
27  maxBlur = 10,
28  scaleFrom = 0.98,
29  block,
30  style,
31  className,
32  ...motionProps
33}) => {
34  const { motion, displace, opacity, exiting, exitProgress } =
35    useEnterExit(motionProps);
36 
37  const scale = interpolate(motion, [0, 1], [scaleFrom, 1]);
38  const defocus = exiting
39    ? exitProgress
40    : interpolate(displace, [FOCUS_AT, 1], [0, 1], {
41        extrapolateLeft: "clamp",
42        extrapolateRight: "clamp",
43      });
44 
45  return (
46    <MotionWrapper
47      block={block}
48      className={className}
49      style={{
50        ...style,
51        opacity,
52        scale,
53        filter: `blur(${(defocus * maxBlur).toFixed(2)}px)`,
54        willChange: "filter",
55      }}
56    >
57      {children}
58    </MotionWrapper>
59  );
60};