WebGL Animation

import { WebGLAnimation } from "@/components/ui/web-gl-animation";
import { Button } from "@/components/ui/button"
import { LiquidCard } from "@/components/ui/liquid-glass-card"

export default function DemoOne() {
  return (
    <div className="relative flex h-full w-full flex-col items-center justify-center overflow-hidden">
    <div className="px-6 absolute">
      <LiquidCard className="w-full max-w-4xl border border-black/20 p-0 shadow-none">
        <div className="p-1">
          <main className="relative overflow-hidden rounded-md border border-white/20 bg-black/60 py-10 shadow-2xl backdrop-blur-md">
            <h1 className="mb-3 grid px-6 text-center text-5xl font-light tracking-tighter text-white md:text-[clamp(2rem,8vw,7rem)]">
              Design is not just what it looks like and feels like.<span className="font-extrabold text-[#fff200]"> Design is how it works.</span>
            </h1>

             <p className="text-center">
             Steve Jobs
             </p>
            
          </main>
        </div>
      </LiquidCard>
    </div>
      <WebGLAnimation
      animationSpeed={0.2}   
      /> 
    </div>
  );
}