Infinite Marquee

1"use client";
2 
3import { Timegroup } from "@editframe/react";
4import type { CSSProperties } from "react";
5 
6export interface InfiniteMarqueeProps {
7  text?: string;
8  fontSize?: number;
9  color?: string;
10  fontWeight?: number;
11  pixelsPerFrame?: number;
12  stroke?: boolean;
13  strokeColor?: string;
14  background?: string;
15  speed?: number;
16  fps?: number;
17  durationInFrames?: number;
18  width?: number;
19  height?: number;
20  className?: string;
21}
22 
23export const InfiniteMarquee = ({
24  text = "ship · build · animate · ",
25  fontSize = 120,
26  color = "#171717",
27  fontWeight = 900,
28  pixelsPerFrame = 4,
29  stroke = false,
30  strokeColor = "#171717",
31  background = "#fafafa",
32  speed = 1,
33  fps = 30,
34  durationInFrames = 300,
35  width = 1280,
36  height = 720,
37  className,
38}: InfiniteMarqueeProps) => {
39  const safeSpeed = Math.max(0.01, speed);
40  const durationMs = (durationInFrames / fps) * 1000;
41 
42  const approxWidth = text.length * fontSize * 0.55;
43  const scrollDurationMs =
44    ((approxWidth / pixelsPerFrame / fps) * 1000) / safeSpeed;
45 
46  const containerStyle: CSSProperties = {
47    alignItems: "center",
48    background,
49    display: "flex",
50    height,
51    justifyContent: "center",
52    overflow: "hidden",
53    position: "relative",
54    width,
55  };
56 
57  const spanStyle: CSSProperties = {
58    WebkitTextStroke: stroke ? `2px ${strokeColor}` : undefined,
59    color: stroke ? "transparent" : color,
60    fontFamily:
61      "var(--font-geist-sans), -apple-system, BlinkMacSystemFont, sans-serif",
62    fontSize,
63    fontWeight,
64    letterSpacing: "-0.03em",
65    paddingRight: "0.4em",
66  };
67 
68  return (
69    <Timegroup
70      className={className}
71      duration={`${durationMs}ms`}
72      mode="fixed"
73      style={containerStyle}
74    >
75      <>
76        <style>{`
77          @keyframes framecn-marquee {
78            from { transform: translateX(0); }
79            to { transform: translateX(-${approxWidth}px); }
80          }
81        `}</style>
82        <div
83          style={{
84            animation: `framecn-marquee ${scrollDurationMs}ms linear infinite`,
85            display: "flex",
86            whiteSpace: "nowrap",
87          }}
88        >
89          <span style={spanStyle}>{text}</span>
90          <span style={spanStyle}>{text}</span>
91          <span style={spanStyle}>{text}</span>
92        </div>
93      </>
94    </Timegroup>
95  );
96};