Blur Out Up

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