Synthesis Background

import Synthesis from "@/components/ui/synthesis";

export default function SynthesisDemo() {
  return (
    <div className="relative flex h-[600px] min-h-screen w-full items-center justify-center overflow-hidden bg-black">
      <Synthesis />
      <div className="relative z-10 flex flex-col items-center gap-4 px-6 text-center">
        <span className="rounded-full border border-white/20 bg-white/10 px-4 py-1 text-xs font-medium tracking-wide text-white/90 backdrop-blur-sm">
          WebGL Background
        </span>
        <h1 className="text-4xl font-semibold tracking-tight text-white sm:text-6xl">
          Synthesis
        </h1>
        <p className="max-w-md text-sm text-white/70 sm:text-base">
          A professional, multi-layered cosmic flow background with extensive
          warping customization.
        </p>
      </div>
    </div>
  );
}