component

Infinite Scrolling Images

Infinite stacked image cards that advance with wheel, touch, and keyboard controls.

Made by Axyl

Installation

File Structure

infinite-scrolling-images.tsx
use-prefers-reduced-motion.tsx

Usage

import { InfiniteScrollingImages } from "@/components/sora-ui/effects/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.

Props

PropTypeDefault
items?
InfiniteScrollingImagesItem[]
-
frameOffset?
number
-30
framesVisible?
number
3
renderBuffer?
number
8
scrollThreshold?
number
40
minUpdateInterval?
number
75
keyboardControls?
boolean
true
className?
string
-

InfiniteScrollingImagesItem

PropTypeDefault
src?
string
-
alt?
string
-

Accessibility

When prefers-reduced-motion: reduce is set, animated transitions and wheel/touch progression are disabled, and the stack renders as a static single image.

Loading preview...