Components
: A customizable animated "lava lamp" or "metaball" gradient background component for React. It creates a fluid, warping effect using HTML canvas, CSS filters, and animated blobs. Ideal for hero sections and dynamic web backgrounds.
npx @21st-dev/cli add dhileepkumargm/warp-gradientLoading preview...
import WarpGradient from "@/components/ui/warp-gradient";
export default function DemoOne() {
return (
// This div replaces the Tailwind classes
<div className="app-container">
{/* The WarpGradient component */}
<WarpGradient
color1="#ff1b6b"
color2="#45caff"
color3="#ff1b6b"
blobCount={5}
speed={1.2}
blur={80}
contrast={40}
backgroundColor="#000000"
/>
{/* Hero Content Container */}
<div className="content-container">
{/* You can add your content (like text or buttons) back in here */}
</div>
</div>
);
}