Scroll Image Carousel

A randomized image marquee with scroll-reactive velocity, draggable rows, stop-on-hover, and center-out hover fade across one row or every row.

Customize

Rows

Speed1.00

Copies5

Card width170px

Randomize

Stop on hover

Hover fade

Fade mode

Fade radius4

Fade strength0.42

Usage

import { ScrollImageCarousel } from "@/components/lazy-ui/scroll-image-carousel";

const images = [
  { src: "/images/Gallery/1.webp", alt: "Gallery frame 1" },
  { src: "/images/Gallery/2.webp", alt: "Gallery frame 2" },
  { src: "/images/Gallery/3.webp", alt: "Gallery frame 3" },
];

export function Demo() {
  return (
    <ScrollImageCarousel
      images={images}
      rows={3}
      speed={1}
      copies={5}
      cardWidth={170}
      randomize={true}
      stopOnHover={true}
      hoverFade={true}
      hoverFadeMode="all"
      hoverFadeRadius={4}
      hoverFadeIntensity={0.42}
    />
  );
}