Warp Gradient

Backgrounds 2

About

: 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.

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

Code

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

Usage.tsx

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>
  );
}