Text Marquee

1"use client";
2 
3import React from "react";
4import { cn } from "@/lib/utils";
5 
6interface TextMarqueeProps {
7  children: React.ReactNode[];
8  speed?: number;
9  className?: string;
10  prefix?: React.ReactNode;
11  height?: number;
12}
13 
14export function TextMarquee({
15  children,
16  speed = 1,
17  className,
18  prefix,
19  height = 200,
20}: TextMarqueeProps) {
21  const count = React.Children.count(children);
22 
23  return (
24    <>
25      <style>
26        {`
27          @keyframes slide-vertical {
28            to {
29              translate: 0 var(--destination);
30            }
31          }
32        `}
33      </style>
34      <div className={cn("flex relative", className)}>
35        <div className="flex relative overflow-hidden flex-row gap-1 items-center w-min h-min">
36          {prefix && (
37            <div className="whitespace-pre size-auto relative">
38              {prefix}
39            </div>
40          )}
41          <div
42            className="opacity-100 mask-[linear-gradient(rgba(0,0,0,0)_0%,rgb(0,0,0)_43.6902%,rgba(0,0,0,0)_100%)] relative w-auto overflow-hidden"
43            style={{ height: `${height}px` }}
44          >
45            <div
46              className="relative h-full"
47              style={{
48                "--count": count,
49                "--speed": speed,
50              } as React.CSSProperties}
51            >
52              {React.Children.map(children, (child, index) => (
53                <div
54                  key={index}
55                  className="h-[40px] flex items-center"
56                  style={{
57                    "--index": index,
58                    "--origin": `calc((var(--count) - var(--index)) * 100%)`,
59                    "--destination": `calc((var(--index) + 1) * -100%)`,
60                    "--duration": `calc(var(--speed) * ${count}s)`,
61                    "--delay":
62                      `calc((var(--duration) / var(--count)) * var(--index) - var(--duration))`,
63                    translate: `0 var(--origin)`,
64                    animation:
65                      `slide-vertical var(--duration) var(--delay) infinite linear`,
66                  } as React.CSSProperties}
67                >
68                  {child}
69                </div>
70              ))}
71            </div>
72          </div>
73        </div>
74      </div>
75    </>
76  );
77}