Components
Warp Gradient
: 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.
import WarpGradient from "@/components/ui/warp-gradient";
const settings = {
blobCount: 5,
speed: 1.2,
blur: 80,
contrast: 40,
};
export default function DemoOne(props: Partial<typeof settings>) {
const s = { ...settings, ...props };
return (
// This div replaces the Tailwind classes
<div className="app-container">
{/* The WarpGradient component */}
<WarpGradient
color1="#ff1b6b"
color2="#45caff"
color3="#ff1b6b"
blobCount={s.blobCount}
speed={s.speed}
blur={s.blur}
contrast={s.contrast}
backgroundColor="#000000"
/>
{/* Hero Content Container */}
<div className="content-container">
{/* You can add your content (like text or buttons) back in here */}
</div>
</div>
);
}