Components
Frame
Animated Blob Image This component uses the CSS clip-path property combined with a CSS animation to create a gentle, morphing blob effect around the image. It's designed to be fully responsive and reusable.
import { AnimatedBlobImage } from "@/components/ui/frame";
export default function AnimatedBlobImageDemo() {
return (
<div className="flex w-full h-[500px] items-center justify-center bg-background p-4">
<AnimatedBlobImage
src="https://images.unsplash.com/photo-1640450013037-b0aba6ad5bf4?w=900&auto=format&fit=crop&q=60&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MTd8fDgwfGVufDB8fDB8fHww"
alt="Woman in a red and white striped swimsuit on a beach"
className="w-full max-w-xs sm:max-w-sm md:max-w-md"
/>
</div>
);
}