infinite-marquee

1import { measureText } from "@remotion/layout-utils";
2import { useCurrentFrame, useVideoConfig } from "remotion";
3import { scaleFont } from "@/remotion/lib/layout";
4 
5export type InfiniteMarqueeProps = {
6  text: string;
7  speed?: number;
8  fontSize?: number;
9  color?: string;
10  fontWeight?: number;
11  fontFamily?: string;
12  gap?: number;
13};
14 
15function getItemWidth(
16  text: string,
17  fontSize: number,
18  fontWeight: number,
19  fontFamily?: string,
20) {
21  const family = fontFamily ?? "system-ui";
22 
23  if (typeof document !== "undefined") {
24    return measureText({
25      text,
26      fontFamily: family,
27      fontSize,
28      fontWeight: String(fontWeight),
29    }).width;
30  }
31 
32  return text.length * fontSize * 0.55;
33}
34 
35export const InfiniteMarquee: React.FC<InfiniteMarqueeProps> = ({
36  text,
37  speed = 2,
38  fontSize: fontSizeProp,
39  color = "#f4f4f5",
40  fontWeight = 600,
41  fontFamily,
42  gap = 48,
43}) => {
44  const frame = useCurrentFrame();
45  const { width } = useVideoConfig();
46  const fontSize = fontSizeProp ?? scaleFont(56, width);
47 
48  const itemWidth = getItemWidth(text, fontSize, fontWeight, fontFamily);
49  const repetitions = Math.max(4, Math.ceil(width / itemWidth) + 2);
50  const halfWidth =
51    repetitions * itemWidth + Math.max(0, repetitions - 1) * gap;
52  const loopPeriodFrames = Math.max(1, Math.round(halfWidth / speed));
53  const progress = (frame % loopPeriodFrames) / loopPeriodFrames;
54 
55  return (
56    <div
57      style={{
58        width: "100%",
59        overflow: "hidden",
60        whiteSpace: "nowrap",
61      }}
62    >
63      <div
64        style={{
65          display: "inline-flex",
66          gap,
67          whiteSpace: "nowrap",
68          translate: `${-progress * 50}% 0`,
69          fontSize,
70          fontWeight,
71          color,
72          ...(fontFamily ? { fontFamily } : {}),
73        }}
74      >
75        {Array.from({ length: repetitions * 2 }, (_, i) => (
76          <span key={i}>{text}</span>
77        ))}
78      </div>
79    </div>
80  );
81};