Infinite Image Carousel

// Endless photo strip that scrolls sideways (CSS only) and pauses on hover.
// Pure Tailwind, no dependencies. Works with Tailwind v3 and v4.

type Props = {
  images?: { src: string; alt: string }[];
  duration?: number;
};

const img = (id: string) => `https://images.unsplash.com/photo-${id}?w=600&q=75&auto=format&fit=crop`;

const DEFAULT_IMAGES = [
  { src: img("1522708323590-d24dbb6b0267"), alt: "Bright open-plan living room" },
  { src: img("1586023492125-27b2c045efd7"), alt: "Yellow armchair in a minimal room" },
  { src: img("1560184897-cca79b749615"), alt: "Living room with a fireplace" },
  { src: img("1512917774080-9991f1c4c750"), alt: "White modern villa with a pool" },
  { src: img("1664225398704-993a0b392a42"), alt: "Open kitchen and lounge" },
  { src: img("1707189855420-0e0e7ba3e384"), alt: "Spacious family room" },
];

export default function InfiniteCarousel({ images = DEFAULT_IMAGES, duration = 30 }: Props) {
  const row = (
    <div className="flex shrink-0">
      {images.map((image) => (
        <div key={image.src} className="relative mx-2 h-[350px] w-72 shrink-0 overflow-hidden">
          <img src={image.src} alt={image.alt} loading="lazy" className="h-full w-full object-cover" />
        </div>
      ))}
    </div>
  );

  return (
    <section className="bg-white py-16 md:py-28">
      <style>{`@keyframes clay-marquee { from { transform: translateX(0) } to { transform: translateX(-50%) } }`}</style>
      <div className="group w-full overflow-hidden">
        <div
          className="flex w-max group-hover:[animation-play-state:paused] motion-safe:animate-[clay-marquee_var(--duration)_linear_infinite]"
          style={{ "--duration": `${duration}s` } as React.CSSProperties}
        >
          {row}
          <div aria-hidden className="flex">
            {row}
          </div>
        </div>
      </div>
    </section>
  );
}