Bubble Background Demo

1import { BubbleBackground } from "../ui/bubble-background";
2 
3export const BubblesBackgroundDemo = () => {
4  return (
5    <div className="h-[550px] overflow-hidden rounded-lg">
6      <div className="absolute inset-0 overflow-hidden rounded-lg">
7        <BubbleBackground
8          bgColorA="rgb(30, 0, 60)"
9          bgColorB="rgb(0, 30, 90)"
10          bubbleColors={{
11            colorA: "50, 150, 255",
12            colorB: "200, 80, 255",
13            colorC: "120, 240, 255",
14            colorD: "220, 60, 80",
15            colorE: "200, 200, 80",
16            interactive: "160, 120, 255",
17          }}
18          bubbleSize="70%"
19          blendMode="screen"
20        />
21      </div>
22    </div>
23  );
24};