An image component with a custom clip-path, creating unique shapes and dynamic visual effects
// demo.tsx
import ClippedMediaGallery from '@/components/ui/clip-path-image';
import React from 'react';
const ClippedMediaGalleryDemo: React.FC = () => {
const mediaContent = [
{
src: 'https://cdn.21st.dev/assets/mirror/77/77279f2e84cbd0e3ba16048034e0170efd897f43b61f8830cbc56a6b13d5dc10.jpg',
alt: 'Abstract Squiggle Art',
clipId: 'clip-squiggle',
type: 'image' as const,
},
{
src: 'https://cdn.21st.dev/assets/mirror/60/604459af2120640fc53cecf6494319502cafcc737feafd6a7f7535f7f0b4dbbb.mp4',
alt: 'Abstract Rectangular Video',
clipId: 'clip-rect',
type: 'video' as const,
},
{
src: 'https://cdn.21st.dev/assets/mirror/dd/dd66447ac4a8201f9ace7d554f7f7e7a2191da2b52b4d17465192a4986badb9c.jpg',
alt: 'Abstract Another Clip',
clipId: 'clip-another',
type: 'image' as const,
},
];
return (
<div className="flex flex-col items-center justify-center p-8 bg-gray-50 dark:bg-zinc-900 min-h-[500px]">
<div className="w-full max-w-4xl border rounded-lg shadow-md p-6 bg-white dark:bg-black">
<div className="mb-8">
<h3 className="mb-4 text-xl font-semibold text-gray-800 dark:text-gray-200">
Content Demonstration
</h3>
<ClippedMediaGallery />
</div>
</div>
</div>
);
};
export { ClippedMediaGalleryDemo as DemoOne };Part of UI Layouts — browse the full library on 21st.dev.