A highly optimized, hardware-accelerated image gallery and modal swiper. Features extremely smooth 3D transitions with blur depth effects. Implements intelligent DOM windowing (renders max 4 items at a time while preloading others in the background) to prevent WebKit GPU glitching/pixelation on Safari and Chromium. Perfect for heavy media portfolios. Supports both images and videos.
"use client";
import { Gallery } from "@/components/ui/gpu-accelerated-3d-blur-swiper-gallery.tsx";
export default function GalleryDemo() {
const columns = [
{
flexWeight: 1,
items: [
{
type: "image" as const,
src: "https://cdn.21st.dev/assets/mirror/5a/5a6957b6c55c7a36dbd2b588458ae36969389ab18aa6c8bbf178f6025106ab28.jpg",
heightRatio: 1.33,
},
{
type: "image" as const,
src: "https://cdn.21st.dev/assets/mirror/b6/b6bcd2ec510c36e3c85f4b13ebc3189d12adfe134446364cbc8199de3486f363.jpg",
heightRatio: 0.8,
},
{
type: "image" as const,
src: "https://cdn.21st.dev/assets/mirror/0d/0d66512dad0a2a3d4d4e2972cd56277cbbbf800f69e14c23e324aa759e44a96b.jpg",
heightRatio: 1.5,
},
],
},
{
flexWeight: 1,
items: [
{
type: "image" as const,
src: "https://cdn.21st.dev/assets/mirror/02/023ba29cb8d28fa4fb670949236c860a9d74379af4f9810d28218fb73466f1b5.jpg",
heightRatio: 0.8,
},
{
type: "image" as const,
src: "https://cdn.21st.dev/assets/mirror/aa/aa87e5aca872d560984ee43cfcd7cf50fc3651ba1024a0473d8d9212ef404274.jpg",
heightRatio: 1.5,
},
{
type: "image" as const,
src: "https://cdn.21st.dev/assets/mirror/5f/5f8d1ab206f2d3ca8ea45909339cfa06ca879cd7f9843f3f9380ead5de3f8ddd.jpg",
heightRatio: 1.25,
},
],
}
];
return (
<div className="w-full min-h-screen bg-zinc-50 p-4 md:p-12 flex flex-col items-center justify-center font-sans tracking-tight">
<div className="w-full max-w-5xl">
<div className="mb-14 text-center text-zinc-900 mt-10 md:mt-0">
<h1 className="text-4xl md:text-5xl font-bold mb-4">
3D Blur Gallery
</h1>
<p className="text-zinc-500 max-w-lg mx-auto text-base">
Hardware-accelerated masonry gallery with immersive 3D swipe transitions. Perfectly smooth even with heavy filters.
</p>
</div>
<Gallery columns={columns} layout="masonry" />
</div>
</div>
);
}