Marquesina infinita

/**
 * Marquesina infinita solo con CSS: el contenido se duplica y se desplaza sin saltos, con bordes que se desvanecen.
 * Se pausa al pasar el puntero o enfocar dentro, y se detiene con movimiento reducido.
 *
 *   <Marquee duration={30}>
 *     <span>React</span><span>Next.js</span><span>TypeScript</span>
 *   </Marquee>
 *   <Marquee reverse duration={40}>…</Marquee>
 *
 * El contenido se hereda en dos copias; la segunda se oculta a lectores de pantalla.
 */

import type { CSSProperties, ReactNode } from "react";

export type MarqueeProps = {
  children: ReactNode;
  /** Segundos que tarda una vuelta completa. */
  duration?: number;
  /** Espacio entre elementos. */
  gap?: number | string;
  reverse?: boolean;
  pauseOnHover?: boolean;
  /** Desvanece los bordes. */
  fade?: boolean;
  className?: string;
  style?: CSSProperties;
};

const CSS = `
.gcmq-root { display: flex; overflow: hidden; width: 100%; }
.gcmq-root[data-fade="true"] { -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); }
.gcmq-track { display: flex; flex: none; min-width: 100%; align-items: center; justify-content: space-around; gap: var(--gcmq-gap, 32px); padding-right: var(--gcmq-gap, 32px); animation: gcmq-run var(--gcmq-duration, 30s) linear infinite; animation-direction: var(--gcmq-direction, normal); }
.gcmq-root[data-pause="true"]:hover .gcmq-track, .gcmq-root[data-pause="true"]:focus-within .gcmq-track { animation-play-state: paused; }
@keyframes gcmq-run { to { transform: translateX(-100%); } }
@media (prefers-reduced-motion: reduce) { .gcmq-track { animation: none; } .gcmq-track[aria-hidden="true"] { display: none; } .gcmq-root { overflow-x: auto; } }
`;

export function Marquee({ children, duration = 30, gap = 32, reverse = false, pauseOnHover = true, fade = true, className, style }: MarqueeProps) {
  const vars = { ["--gcmq-duration" as string]: `${duration}s`, ["--gcmq-gap" as string]: typeof gap === "number" ? `${gap}px` : gap, ["--gcmq-direction" as string]: reverse ? "reverse" : "normal", ...style } as CSSProperties;

  return (
    <>
      <style>{CSS}</style>
      <div className={["gcmq-root", className].filter(Boolean).join(" ")} style={vars} data-fade={fade} data-pause={pauseOnHover}>
        <div className="gcmq-track">{children}</div>
        <div className="gcmq-track" aria-hidden="true">{children}</div>
      </div>
    </>
  );
}

npx shadcn@latest add https://www.gassierconsulting.com/r/marquee-infinito

import { Marquee } from "./marquee";

export default function Ejemplo() {
  return <Marquee reverse>Contenido</Marquee>;
}