// demo.tsx
import ClippedGoeyGallery from "@/components/ui/clipped-image";
import React from "react";
function ClippedGoeyGalleryDemo() {
const customMediaItems = [
{
src: "https://cdn.21st.dev/assets/localized/75aa90ec7b6656a1a9a58658f850dc349923f78232cf2ca74586e7f25cd096d9.jpg",
alt: "Woman in forest",
clipId: "clip-goey1" as const,
type: "image" as const,
figureClassName:
"group p-8 hover:p-4 transition-all duration-200 bg-gradient-to-br from-purple-400 to-indigo-600 rounded-xl",
},
{
src: "https://videos.pexels.com/video-files/3831861/3831861-hd_1920_1080_25fps.mp4",
alt: "Ocean waves",
clipId: "clip-goey2" as const,
type: "video" as const,
figureClassName:
"group p-8 hover:p-4 transition-all duration-200 bg-gradient-to-tl from-blue-300 to-cyan-500 rounded-xl",
},
{
src: "https://cdn.21st.dev/assets/localized/0fa4647addb07e6bae70831d1720afc2bbd1a37dbcbdceb38317a9888de8c292.jpg",
alt: "Colorful abstract paint",
clipId: "clip-goey3" as const,
type: "image" as const,
figureClassName:
"group p-8 hover:p-4 transition-all duration-200 bg-gradient-to-tr from-pink-400 to-red-500 rounded-xl",
},
{
src: "https://cdn.21st.dev/assets/localized/69912344851239b961ebbea3683604daa83a900255124dc814bdaf1be968ad5a.jpg",
alt: "Modern building exterior",
clipId: "clip-goey4" as const,
type: "image" as const,
figureClassName:
"group p-8 hover:p-4 transition-all duration-200 bg-gradient-to-b from-gray-300 to-zinc-500 rounded-xl",
},
{
src: "https://cdn.21st.dev/assets/localized/f58d077381d71ba3acf38807a2a31059c10630b6467337b4fb27b3adb16050b0.jpg",
alt: "Desert landscape",
clipId: "clip-goey5" as const,
type: "image" as const,
figureClassName:
"group p-8 hover:p-4 transition-all duration-200 bg-gradient-to-r from-orange-400 to-yellow-500 rounded-xl",
},
{
src: "https://cdn.21st.dev/assets/mirror/93/93d89df7d904da247ad07e09bab74c563d8929a0d25d974da09f765af5ba1052.jpg",
alt: "Blue abstract art",
clipId: "clip-goey6" as const,
type: "image" as const,
figureClassName:
"group p-8 hover:p-4 transition-all duration-200 bg-gradient-to-bl from-green-400 to-emerald-600 rounded-xl",
},
];
return (
<div className="flex flex-col items-center justify-center p-8 bg-gray-50 dark:bg-zinc-900 min-h-[1000px]">
<div className="w-full max-w-5xl border rounded-lg shadow-md p-6 bg-white dark:bg-black space-y-12">
<h2 className="mb-6 text-2xl font-bold text-center text-gray-900 dark:text-gray-100">
Clipped Goey Gallery Demo
</h2>
<div>
<ClippedGoeyGallery />
</div>
</div>
</div>
);
}
export { ClippedGoeyGalleryDemo as DemoOne };
export default ClippedGoeyGalleryDemo;
Part of UI Layouts — browse the full library on 21st.dev.