Frame

Component 73

About

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.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Frame to your project and fits it to your theme.

Code

How Frame is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

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://cdn.21st.dev/assets/mirror/64/6426232d24a8b77cc74aa7badb988f3535fcaa6aa0f25b5cfbac3f3ef3948ce0.jpg"
        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>
  );
}