Components
Infinite Scroll
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
Loading preview...
"use client"
import { InfiniteScroll } from "@/components/ui/infinite-scroll"
const images = [
"https://images.unsplash.com/photo-1491895200222-0fc4a4c35e18?q=80&w=640",
"https://images.unsplash.com/photo-1576831371356-d6e9411ae501?q=40&w=640",
"https://images.unsplash.com/photo-1580686405845-6c8ab1cb8e30?q=40&w=640",
"https://images.unsplash.com/photo-1572756317709-fe9c15ced298?q=80&w=640",
"https://images.unsplash.com/photo-1580941918181-dcebebd814aa?q=40&w=640",
"https://images.unsplash.com/photo-1454117096348-e4abbeba002c?q=80&w=640",
]
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 }