Morphing Blob Demo

1import { MorphingBlob } from "../ui/morphing-blob";
2import { MoonIcon } from "@radix-ui/react-icons";
3 
4export const MorphingBlobDemo = () => {
5  return (
6    <div className="relative md:absolute md:top-1/2 md:left-1/2 md:-translate-x-1/2 md:-translate-y-1/2 bg-white dark:bg-black w-full h-full rounded-b-xl md:rounded-xl">
7      <div className="w-full flex flex-col md:flex-row gap-0 md:gap-24 items-center justify-center rounded-full -mt-4 md:mt-10">
8        <MorphingBlob theme="primary">
9          <div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 h-72 w-78 bg-blue-400/30 rounded-full blur-xl shadow-[0_0_50px_rgba(96,165,250,0.4)] animate-pulse" />
10          <div className="text-center p-6 z-10">
11            <MoonIcon className="h-10 w-10 mx-auto mb-3 text-white" />
12            <h4 className="text-xl w-full font-bold mb-2 text-white">Nyx UI</h4>
13          </div>
14        </MorphingBlob>
15 
16        <MorphingBlob theme="aurora">
17          <div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 h-72 w-78 bg-red-400/30 rounded-full blur-xl shadow-[0_0_50px_rgba(96,165,250,0.4)] animate-pulse" />
18          <div className="text-center p-6 z-2">
19            <MoonIcon className="h-10 w-10 mx-auto mb-3 text-white" />
20            <h4 className="text-xl w-full font-bold mb-2 text-white">Nyx UI</h4>
21          </div>
22        </MorphingBlob>
23      </div>
24    </div>
25  );
26};