Components
Loading preview...
Modern sleek 3D slideshow that showcases a photo gallery created with v0, react three fiber, webgl
@vaib215
npx shadcn@latest add https://21st.dev/r/vaib215/3d-gallery-photographyimport InfiniteGallery from "@/components/ui/3d-gallery-photography"
export default function Home() {
const sampleImages = [
{
src: "https://images.pexels.com/photos/1366919/pexels-photo-1366919.jpeg?auto=compress&cs=tinysrgb&w=1200",
alt: "Mountain landscape",
},
{
src: "https://images.pexels.com/photos/1287145/pexels-photo-1287145.jpeg?auto=compress&cs=tinysrgb&w=1200",
alt: "Ocean waves",
},
{
src: "https://images.pexels.com/photos/1323550/pexels-photo-1323550.jpeg?auto=compress&cs=tinysrgb&w=1200",
alt: "Forest path",
},
{
src: "https://images.pexels.com/photos/1591373/pexels-photo-1591373.jpeg?auto=compress&cs=tinysrgb&w=1200",
alt: "Desert dunes",
},
{
src: "https://images.pexels.com/photos/1450353/pexels-photo-1450353.jpeg?auto=compress&cs=tinysrgb&w=1200",
alt: "City skyline",
},
{
src: "https://images.pexels.com/photos/1761279/pexels-photo-1761279.jpeg?auto=compress&cs=tinysrgb&w=1200",
alt: "Northern lights",
},
{
src: "https://images.pexels.com/photos/1624496/pexels-photo-1624496.jpeg?auto=compress&cs=tinysrgb&w=1200",
alt: "Waterfall",
},
{
src: "https://images.pexels.com/photos/1770809/pexels-photo-1770809.jpeg?auto=compress&cs=tinysrgb&w=1200",
alt: "Sunset beach",
},
]
return (
<main className="min-h-screen w-full">
<InfiniteGallery
images={sampleImages}
speed={1.2}
zSpacing={3}
visibleCount={12}
falloff={{ near: 0.8, far: 14 }}
className="h-screen w-full rounded-lg overflow-hidden"
/>
<div className="h-screen inset-0 pointer-events-none fixed flex items-center justify-center text-center px-3 mix-blend-exclusion text-white">
<h1 className="font-serif text-4xl md:text-7xl tracking-tight">
<span className="italic">I create;</span> therefore I am
</h1>
</div>
<div className="text-center fixed bottom-10 left-0 right-0 font-mono uppercase text-[11px] font-semibold">
<p>Use mouse wheel, arrow keys, or touch to navigate</p>
<p className=" opacity-60">Auto-play resumes after 3 seconds of inactivity</p>
</div>
</main>
)
}