Docs
Blurry blob
Animated blurry blob background
Installation
Update tailwind.config.js
theme: {
extend: {
keyframes: {
"pop-blob": {
"0%": { transform: "scale(1)" },
"33%": { transform: "scale(1.2)" },
"66%": { transform: "scale(0.8)" },
"100%": { transform: "scale(1)" },
},
colors: {
filter: {
"blur-20": "blur(20px)",
"blur-25": "blur(25px)",
},
},
animation: {
"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.tsx
Paste 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