Hollow Word Ticker

// Giant hollow italic words drifting sideways in an endless loop, separated by
// a small crest. CSS only. Pure Tailwind, no dependencies. Works with Tailwind v3 and v4.

type Props = {
  words?: string[];
  dark?: boolean;
  duration?: number;
};

const Crest = () => (
  <svg viewBox="0 0 48 48" fill="none" stroke="currentColor" strokeWidth={1.5} aria-hidden className="h-12 w-12 shrink-0 opacity-60 md:h-16 md:w-16">
    <path d="M24 4 40 12v12c0 10-7 17-16 20C15 41 8 34 8 24V12z" />
    <path d="M17 23c3-6 11-6 14 0M18 29h12" />
  </svg>
);

export default function HollowWordTicker({ words = ["Bloodlines", "Breeding", "Sport", "Heritage"], dark = true, duration = 60 }: Props) {
  const row = (
    <div className="flex shrink-0">
      {words.map((word) => (
        <span key={word} className="flex items-center">
          <span className="whitespace-nowrap px-10 font-['Fraunces',Georgia,'Times_New_Roman',serif] text-[clamp(4rem,11vw,10rem)] italic leading-none [-webkit-text-fill-color:transparent] [-webkit-text-stroke:1px_currentColor] md:px-16">
            {word}
          </span>
          <Crest />
        </span>
      ))}
    </div>
  );

  return (
    <section aria-label={words.join(", ")} className={`overflow-hidden py-10 md:py-14 ${dark ? "bg-[#210313] text-[#dcc59a]" : "bg-white text-[#2c081a]"}`}>
      <style>{`@keyframes hollow-ticker { from { transform: translateX(0) } to { transform: translateX(-50%) } }`}</style>
      <div aria-hidden className="flex w-max motion-safe:animate-[hollow-ticker_var(--duration)_linear_infinite]" style={{ "--duration": `${duration}s` } as React.CSSProperties}>
        {row}
        {row}
      </div>
    </section>
  );
}