Bottom-Up Letters

1"use client";
2 
3import { Easing, interpolate, useCurrentFrame } from "remotion";
4 
5export interface BottomUpLettersProps {
6  text: string;
7  staggerDelay?: number;
8  distance?: number;
9  fontSize?: number;
10  color?: string;
11  fontWeight?: number;
12  speed?: number;
13  className?: string;
14}
15 
16export function BottomUpLetters({
17  text,
18  staggerDelay = 3,
19  distance = 46,
20  fontSize = 72,
21  color = "#171717",
22  fontWeight = 600,
23  speed = 1,
24  className,
25}: BottomUpLettersProps) {
26  const frame = useCurrentFrame() * speed;
27 
28  const chars = Array.from(text);
29  const charDurationFrames = 12;
30  const charTravelFrames = 7;
31 
32  return (
33    <div
34      style={{
35        position: "absolute",
36        inset: 0,
37        display: "flex",
38        alignItems: "center",
39        justifyContent: "center",
40        background: "transparent",
41      }}
42    >
43      <span
44        className={className}
45        style={{
46          fontSize,
47          fontWeight,
48          color,
49          letterSpacing: "-0.05em",
50          fontFamily:
51            "var(--font-geist-sans), -apple-system, BlinkMacSystemFont, sans-serif",
52        }}
53      >
54        {chars.map((char, i) => {
55          const local = frame - i * staggerDelay;
56          const easing = Easing.bezier(0.18, 1, 0.32, 1);
57          const opacity = interpolate(local, [0, charDurationFrames], [0, 1], {
58            extrapolateLeft: "clamp",
59            extrapolateRight: "clamp",
60            easing,
61          });
62          const y = interpolate(local, [0, charTravelFrames], [distance, 0], {
63            extrapolateLeft: "clamp",
64            extrapolateRight: "clamp",
65            easing,
66          });
67          return (
68            <span
69              key={i}
70              style={{
71                display: "inline-block",
72                whiteSpace: "pre",
73                backfaceVisibility: "hidden",
74                transformOrigin: "50% 55%",
75                opacity,
76                transform: `translateY(${y}px)`,
77              }}
78            >
79              {char}
80            </span>
81          );
82        })}
83      </span>
84    </div>
85  );
86}