component

Infinite Scrolling Images

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

Released November 14, 2026

Made by Axyl

Installation

npx shadcn@latest add @soralabs/infinite-scrolling-images

File Structure

infinite-scrolling-images.tsx

Usage

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

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`	-

InfiniteScrollingImagesItem

Prop	Type	Default
`src?`	`string`	-
`alt?`	`string`	-

Accessibility

All images include alt attributes for screen readers. Keyboard users can navigate frames using the Arrow keys when keyboardControls is enabled.

Text Reveal Box

Scroll-pinned word-by-word text reveal with a highlight flash, powered by GSAP ScrollTrigger.

Sticky Scroll Cards

Scroll-pinned hero where a front card flips to reveal a stack of back cards, dismissed one at a time as you keep scrolling.

Built by Axyl. A motion-first component registry for React.

Loading preview...