infinite-ribbon

1import type * as React from "react";
2 
3import { cn } from "@/lib/utils";
4 
5export interface InfiniteRibbonProps {
6  repeat?: number;
7  duration?: number;
8  reverse?: boolean;
9  rotation?: number;
10  children: React.ReactNode;
11  className?: string;
12}
13 
14const ribbonAnimationStyles = `
15@keyframes iconiq-infinite-ribbon {
16  from {
17    transform: translateX(0);
18  }
19  to {
20    transform: translateX(-50%);
21  }
22}
23 
24@keyframes iconiq-infinite-ribbon-reverse {
25  from {
26    transform: translateX(-50%);
27  }
28  to {
29    transform: translateX(0);
30  }
31}
32 
33@media (prefers-reduced-motion: reduce) {
34  .iconiq-infinite-ribbon-track {
35    animation-duration: 1ms !important;
36    animation-iteration-count: 1 !important;
37  }
38}
39`;
40 
41export function InfiniteRibbon({
42  repeat = 5,
43  duration = 10,
44  reverse = false,
45  rotation = 0,
46  children,
47  className,
48}: InfiniteRibbonProps) {
49  const repeatCount = Math.max(1, Math.floor(repeat));
50  const animationName = reverse
51    ? "iconiq-infinite-ribbon-reverse"
52    : "iconiq-infinite-ribbon";
53 
54  return (
55    <div
56      className={cn(
57        "w-full max-w-full overflow-hidden bg-foreground py-1 text-background text-lg",
58        className
59      )}
60      style={{ transform: `rotate(${rotation}deg)` }}
61    >
62      <span className="sr-only">{children}</span>
63      <div
64        aria-hidden="true"
65        className="iconiq-infinite-ribbon-track flex w-max whitespace-nowrap"
66        style={
67          {
68            "--ribbon-duration": `${Math.max(0.1, duration)}s`,
69            animation: `${animationName} var(--ribbon-duration) linear infinite`,
70          } as React.CSSProperties
71        }
72      >
73        {Array.from({ length: repeatCount * 2 }, (_, index) => (
74          <span className="mr-8 inline-block select-none" key={index}>
75            {children}
76          </span>
77        ))}
78      </div>
79      <style>{ribbonAnimationStyles}</style>
80    </div>
81  );
82}