component
Infinite stacked image cards that advance with wheel, touch, and keyboard controls.
Loading code…import { InfiniteScrollingImages } from "@/components/sora-ui/catalog/infinite-scrolling-images";
const items = [
{ src: "/images/frame-1.jpg", alt: "Frame 1" },
{ src: "/images/frame-2.jpg", alt: "Frame 2" },
{ src: "/images/frame-3.jpg", alt: "Frame 3" },
];
export default function Section() {
return (
<div className="h-[70vh] w-full">
<InfiniteScrollingImages items={items} />
</div>
);
}Use a fixed-height wrapper (h-[60vh] to h-[80vh]) so the stack has enough room to breathe.
| Prop | Type | Default |
|---|---|---|
items? | InfiniteScrollingImagesItem[] | - |
frameOffset? | number | -30 |
framesVisible? | number | 3 |
renderBuffer? | number | 8 |
scrollThreshold? | number | 40 |
minUpdateInterval? | number | 75 |
keyboardControls? | boolean | true |
className? | string | - |
| Prop | Type | Default |
|---|---|---|
src? | string | - |
alt? | string | - |
All images include alt attributes for screen readers. Keyboard users can navigate frames using the Arrow keys when keyboardControls is enabled.
Built by Axyl. A motion-first component registry for React.