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://images.unsplash.com/photo-1542550546-88afdd84b64f?q=80&w=800&h=1066&auto=format&fit=crop",
heightRatio: 1.33,
},
{
type: "image" as const,
src: "https://images.unsplash.com/photo-1562424292-1fa536217c58?q=80&w=800&h=640&auto=format&fit=crop",
heightRatio: 0.8,
},
{
type: "image" as const,
src: "https://images.unsplash.com/photo-1533112050809-b85548ba39c4?q=80&w=800&h=1200&auto=format&fit=crop",
heightRatio: 1.5,
},
],
},
{
flexWeight: 1,
items: [
{
type: "image" as const,
src: "https://images.unsplash.com/photo-1585210256590-fc52fd1e8348?q=80&w=800&h=640&auto=format&fit=crop",
heightRatio: 0.8,
},
{
type: "image" as const,
src: "https://images.unsplash.com/photo-1591037307610-9b7bcdffb72a?q=80&w=800&h=1200&auto=format&fit=crop",
heightRatio: 1.5,
},
{
type: "image" as const,
src: "https://images.unsplash.com/photo-1435244837924-21c508f9db25?q=80&w=800&h=1000&auto=format&fit=crop",
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>
);
}