Scroll Autoplay

Galleries 68

About

A scroll-driven sequence that cross-fades between stacked items based on scroll position, like an autoplaying slideshow controlled by the user's scroll.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Scroll Autoplay to your project and fits it to your theme.

Code

How Scroll Autoplay is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

import {
  ScrollAutoplay,
  ScrollAutoplayContainer,
  ScrollAutoplayItem,
} from "@/components/ui/scroll-autoplay";
import Image from "next/image";

const IMAGES = [
  "https://cdn.21st.dev/assets/mirror/3e/3ea6deb405209841367127ed1dce82f2a65106e5d46f071d3e4e5cad9e97e107.jpg",
  "https://cdn.21st.dev/assets/mirror/7b/7bab093fa5169b8c409e68df5c59cd492d82dd295b9b275fed683365412da1f2.jpg",
  "https://cdn.21st.dev/assets/mirror/63/63e7ed2d249b88910e9f9fac52566c9d94509aebcce2b37279d5cd4ef17b9de5.jpg",
  "https://cdn.21st.dev/assets/mirror/c7/c7a6c78002305930a66e36564241258be1a67b255b3d3b0b98ce6a13c206b03f.jpg",
  "https://cdn.21st.dev/assets/mirror/11/118263dadc56a8ce8dcbca46d389d0574a91aa00d43edda9692f5c38bb551c5c.jpg",
];
export function ScrollAutoplayDemo() {
  return (
    <ScrollAutoplay className="h-[300vh]">
      <ScrollAutoplayContainer className="sticky top-0 left-0 w-full h-screen place-content-center">
        <div className="relative w-full min-w-3xs md:min-w-md aspect-video  p-2 bg-linear-120 from-muted-foreground/30 to-muted/40 bg-no-repeat border border-foreground/10 rounded-3xl shadow-[inset_0_.450581px_#ffffff4d,0_0_36.0465px_#ffffff0f]">
          <div className="size-full border-16 border-zinc-800 ring ring-black rounded-[19px] relative">
            {IMAGES.map((imageUrl, index) => {
              return (
                <ScrollAutoplayItem
                  key={index}
                  totalImages={IMAGES.length}
                  index={index}
                >
                  <Image
                    fill
                    alt="tokyo city"
                    src={imageUrl}
                    className="size-full inset-0 object-cover "
                    priority
                  />
                </ScrollAutoplayItem>
              );
            })}
          </div>
        </div>
      </ScrollAutoplayContainer>
    </ScrollAutoplay>
  );
}
export default ScrollAutoplayDemo;