GPU-Accelerated 3D Blur Swiper & Gallery

Galleries

About

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.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds GPU-Accelerated 3D Blur Swiper & Gallery to your project and fits it to your theme.

Code

How GPU-Accelerated 3D Blur Swiper & Gallery is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

"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>
  );
}