Focus Blur Resolve

1"use client";
2 
3import { Easing, interpolate, useCurrentFrame, useVideoConfig } from "remotion";
4 
5export interface FocusBlurResolveProps {
6  text: string;
7  blur?: number;
8  fontSize?: number;
9  color?: string;
10  fontWeight?: number;
11  speed?: number;
12  className?: string;
13}
14 
15export function FocusBlurResolve({
16  text,
17  blur = 14,
18  fontSize = 72,
19  color = "#171717",
20  fontWeight = 600,
21  speed = 1,
22  className,
23}: FocusBlurResolveProps) {
24  const frame = useCurrentFrame() * speed;
25  const { durationInFrames } = useVideoConfig();
26 
27  const enterDur = 23;
28  const exitDur = 16;
29  const exitStart = Math.max(enterDur, durationInFrames - exitDur);
30 
31  const enterEasing = Easing.bezier(0.22, 1, 0.36, 1);
32  const exitEasing = Easing.bezier(0.64, 0, 0.78, 0);
33 
34  const enterP = interpolate(frame, [0, enterDur], [0, 1], {
35    extrapolateLeft: "clamp",
36    extrapolateRight: "clamp",
37    easing: enterEasing,
38  });
39 
40  const exitP = interpolate(frame, [exitStart, durationInFrames], [0, 1], {
41    extrapolateLeft: "clamp",
42    extrapolateRight: "clamp",
43    easing: exitEasing,
44  });
45 
46  const opacity = enterP * (1 - exitP);
47 
48  const yEnter = interpolate(frame, [0, enterDur], [14, 0], {
49    extrapolateLeft: "clamp",
50    extrapolateRight: "clamp",
51    easing: enterEasing,
52  });
53 
54  const yExit = interpolate(frame, [exitStart, durationInFrames], [0, -10], {
55    extrapolateLeft: "clamp",
56    extrapolateRight: "clamp",
57    easing: exitEasing,
58  });
59 
60  const y = yEnter + yExit;
61 
62  const blurEnter = interpolate(frame, [0, enterDur], [blur, 0], {
63    extrapolateLeft: "clamp",
64    extrapolateRight: "clamp",
65    easing: enterEasing,
66  });
67 
68  const blurExit = interpolate(frame, [exitStart, durationInFrames], [0, 10], {
69    extrapolateLeft: "clamp",
70    extrapolateRight: "clamp",
71    easing: exitEasing,
72  });
73 
74  const blurVal = blurEnter + blurExit;
75 
76  const scale = interpolate(frame, [0, enterDur], [1.01, 1], {
77    extrapolateLeft: "clamp",
78    extrapolateRight: "clamp",
79    easing: enterEasing,
80  });
81 
82  return (
83    <div
84      style={{
85        position: "absolute",
86        inset: 0,
87        display: "flex",
88        alignItems: "center",
89        justifyContent: "center",
90        background: "transparent",
91      }}
92    >
93      <span
94        className={className}
95        style={{
96          fontSize,
97          fontWeight,
98          color,
99          letterSpacing: "-0.03em",
100          fontFamily:
101            "var(--font-geist-sans), -apple-system, BlinkMacSystemFont, sans-serif",
102// … truncated