Docs
Blurry blob
Animated blurry blob background
Loading...
Installation
CLI
pnpm dlx shadcn@latest add https://animata.design/r/background/blurry-blob.jsonManual
Add to your CSS
@keyframes pop-blob {
0% { transform: scale(1); }
33% { transform: scale(1.2); }
66% { transform: scale(0.8); }
100% { transform: scale(1); }
}
@theme {
--animate-pop-blob: pop-blob 5s infinite;
}Run the following command
It will create a new file called blurry-blob.tsx inside the components/animata/background directory.
mkdir -p components/animata/background && touch components/animata/background/blurry-blob.tsxPaste the code
Open the newly created file and paste the following code:
import { cn } from "@/lib/utils";
interface BlobProps extends React.HTMLAttributes<HTMLDivElement> {
firstBlobColor: string;
secondBlobColor: string;
}
export default function BlurryBlob({ className, firstBlobColor, secondBlobColor }: BlobProps) {
return (
<div className="min-h-52 min-w-52 items-center justify-center">
<div className="relative w-full max-w-lg">
<div
className={cn(
"absolute -right-24 -top-28 h-72 w-72 animate-pop-blob rounded-sm bg-blue-400 p-8 opacity-45 mix-blend-multiply blur-3xl filter",
className,
firstBlobColor,
)}
></div>
<div
className={cn(
"absolute -left-40 -top-64 h-72 w-72 animate-pop-blob rounded-sm bg-purple-400 p-8 opacity-45 mix-blend-multiply blur-3xl filter",
className,
secondBlobColor,
)}
></div>
</div>
</div>
);
}Credits
Built by Laxmi Lamichhane