Infinite Scroll

Galleries 9

About

A smooth infinite scrolling component with customizable grid layout and image display. Features - Smooth scrolling animation powered by Lenis - Customizable grid layout (2-4 columns) - Adjustable scroll speed and behavior - Responsive image loading - Dark mode compatible - Multiple size variants - Customizable gaps and padding - Image repetition control

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

Code

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

Usage.tsx

"use client"

import { InfiniteScroll } from "@/components/ui/infinite-scroll"

const images = [
  "https://cdn.21st.dev/assets/mirror/03/03b9a30c5d1fd748b9db2b9a2863f79d89f24e03f9bfd74303271059ecb4bf4a.jpg",
  "https://cdn.21st.dev/assets/mirror/29/298482dbc3bccb089897be4cd58229c1c4a2ecb0f5b92d8f3034a2df21193543.jpg",
  "https://cdn.21st.dev/assets/mirror/1a/1aa0abe0739fe000c815c34a6a0cae018fdeafce8934d413ffa458aa0c368246.jpg",
  "https://cdn.21st.dev/assets/mirror/a1/a1589cba4618aa6dba7a5db0e10741b4e743fefbcfbac4fd816ac11640434d7a.jpg",
  "https://cdn.21st.dev/assets/mirror/1c/1c5ee59e6ff3a4e99c1c4efa14703cfde56162a5226cfa929297578f59776492.jpg",
  "https://cdn.21st.dev/assets/mirror/ba/babc15f4baa016fc394aa7c8d608841b2eac7592c867ae6931a6ed379db1252b.jpg",
]

function DefaultScrollDemo() {
  return (
    <div className="min-h-screen bg-background">
      <h2 className="py-8 text-center text-2xl font-semibold">
        Default Infinite Scroll
      </h2>
      <InfiniteScroll images={images} />
    </div>
  )
}

function CustomScrollDemo() {
  return (
    <div className="min-h-screen bg-background">
      <h2 className="py-8 text-center text-2xl font-semibold">
        Custom Infinite Scroll
      </h2>
      <InfiniteScroll 
        images={images}
        columns={4}
        size="lg"
        gap="lg"
        imageHeight="40vh"
        repeat={3}
        lenisOptions={{
          duration: 2,
          wheelMultiplier: 1.5
        }}
      />
    </div>
  )
}

export { DefaultScrollDemo, CustomScrollDemo }