Press Marquee

// "As seen in": publication names drifting by in an endless loop (CSS only,
// pauses on hover), then three short press quotes.
// Pure Tailwind, no dependencies. Works with Tailwind v3 and v4.

type Quote = { quote: string; source: string };

type Props = {
  names?: string[];
  quotes?: Quote[];
  duration?: number;
};

const DEFAULT_NAMES = ["The Mariner Quarterly", "Harbour & Horizon", "Salt & Teak", "Leeward", "The Voyager Review", "Oceanus Journal"];

const DEFAULT_QUOTES: Quote[] = [
  { quote: "The quiet authority in private charter. Nobody does the details better.", source: "The Mariner Quarterly" },
  { quote: "A fleet chosen with a collector's eye, and crews to match.", source: "Salt & Teak" },
  { quote: "Book them once and you will not look anywhere else.", source: "The Voyager Review" },
];

export default function PressMarquee({ names = DEFAULT_NAMES, quotes = DEFAULT_QUOTES, duration = 45 }: Props) {
  const row = (
    <div className="flex shrink-0">
      {names.map((name) => (
        <span key={name} className="flex items-center whitespace-nowrap px-8 py-2 text-5xl leading-[1.2] text-[#0d1114]/75 md:px-12 md:text-6xl">
          {name}
          <span aria-hidden className="ml-16 h-1.5 w-1.5 rounded-full bg-[#a98a5a] md:ml-24" />
        </span>
      ))}
    </div>
  );

  return (
    <section className="border-y border-[#0d1114]/10 bg-white py-16 font-['Helvetica_Neue',Helvetica,Arial,sans-serif] text-[#0d1114] antialiased md:py-20">
      <style>{`@keyframes press-marquee { from { transform: translateX(0) } to { transform: translateX(-50%) } }`}</style>

      <div className="group flex overflow-hidden">
        <div
          className="flex w-max shrink-0 group-hover:[animation-play-state:paused] motion-safe:animate-[press-marquee_var(--duration)_linear_infinite]"
          style={{ "--duration": `${duration}s` } as React.CSSProperties}
        >
          {row}
          <div aria-hidden className="flex shrink-0">
            {row}
          </div>
        </div>
      </div>

      {quotes.length > 0 && (
        <div className="mx-auto mt-16 grid max-w-[100rem] gap-12 px-4 md:mt-20 md:grid-cols-3 md:px-8 lg:px-12">
          {quotes.map((q) => (
            <figure key={q.source}>
              <blockquote className="text-2xl leading-snug md:text-3xl">&ldquo;{q.quote}&rdquo;</blockquote>
              <figcaption className="mt-6 text-xs font-medium uppercase tracking-[0.08em] text-[#0d1114]/50">{q.source}</figcaption>
            </figure>
          ))}
        </div>
      )}
    </section>
  );
}