A scroll-driven sequence that cross-fades between stacked items based on scroll position, like an autoplaying slideshow controlled by the user's scroll.
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;
Part of Systaliko UI — browse the full library on 21st.dev.