slot-roll

1import { interpolate, useCurrentFrame, useVideoConfig } from "remotion";
2import { scaleFont } from "@/remotion/lib/layout";
3import { EASING_ENTER } from "@/remotion/lib/timing";
4 
5export type SlotRollProps = {
6  from: string;
7  to: string;
8  durationInFrames?: number;
9  delayInFrames?: number;
10  fontSize?: number;
11  color?: string;
12  fontWeight?: number;
13  fontFamily?: string;
14};
15 
16const CHARSET = "0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZ";
17 
18function rollChar(from: string, to: string, progress: number, seed: number): string {
19  if (progress >= 1) return to;
20  if (progress <= 0) return from;
21  if (from === to) return to;
22  const idx = Math.floor(
23    interpolate(progress, [0, 0.85, 1], [0, CHARSET.length - 1, 0], {
24      extrapolateLeft: "clamp",
25      extrapolateRight: "clamp",
26    }) +
27      seed * 3,
28  );
29  return CHARSET[Math.abs(idx) % CHARSET.length] ?? to;
30}
31 
32export const SlotRoll: React.FC<SlotRollProps> = ({
33  from,
34  to,
35  durationInFrames = 40,
36  delayInFrames = 0,
37  fontSize: fontSizeProp,
38  color = "#f4f4f5",
39  fontWeight = 700,
40  fontFamily,
41}) => {
42  const frame = useCurrentFrame();
43  const { width } = useVideoConfig();
44  const fontSize = fontSizeProp ?? scaleFont(96, width);
45  const progress = interpolate(
46    frame,
47    [delayInFrames, delayInFrames + durationInFrames],
48    [0, 1],
49    {
50      easing: EASING_ENTER,
51      extrapolateLeft: "clamp",
52      extrapolateRight: "clamp",
53    },
54  );
55  const len = Math.max(from.length, to.length);
56  const paddedFrom = from.padStart(len, " ");
57  const paddedTo = to.padStart(len, " ");
58  const display = Array.from({ length: len }, (_, i) =>
59    rollChar(paddedFrom[i] ?? " ", paddedTo[i] ?? " ", progress, i),
60  ).join("");
61 
62  return (
63    <span
64      style={{
65        fontSize,
66        fontWeight,
67        color,
68        fontVariantNumeric: "tabular-nums",
69        letterSpacing: "0.04em",
70        ...(fontFamily ? { fontFamily } : {}),
71      }}
72    >
73      {display.trimStart()}
74    </span>
75  );
76};