Components
Loading preview...
Here is component of clipped image components
@ui-layouts
npx shadcn@latest add https://21st.dev/r/uilayout.contact/clipped-image// demo.tsx
import ClippedGoeyGallery from '@/components/ui/clipped-image';
import React from 'react';
const ClippedGoeyGalleryDemo: React.FC = () => {
const customMediaItems = [
{ src: "https://images.unsplash.com/photo-1517841961601-52f20387532b?q=80&w=1974&auto=format&fit=crop", 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://images.unsplash.com/photo-1695420310237-7095f9c1e7a4?q=80&w=1932&auto=format&fit=crop", 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://images.unsplash.com/photo-1701358927878-a5b51a511874?q=80&w=1932&auto=format&fit=crop", 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://images.unsplash.com/photo-1721598075306-7e3e4a34b22f?q=80&w=1932&auto=format&fit=crop", 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://images.unsplash.com/photo-1681238093193-1b3a8fcdf225?q=80&w=1962&auto=format&fit=crop", 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 };