Black hole shader

import { WebGLShaderBackground } from "@/components/ui/black-hole-shader";

export default function DemoOne() {
  return (
    <div className="relative h-screen w-screen font-sans text-white bg-black overflow-hidden">
      <WebGLShaderBackground />
      <div className="relative z-10 p-8 flex flex-col h-full box-border">
        <header role="banner" aria-label="Main Header" className="flex justify-between items-center w-full">
          <div className="font-bold text-2xl animate-gradient">21st BLACK HOLE</div>
          <nav role="navigation" aria-label="Primary Navigation" className="hidden md:flex gap-8">
            <a href="#" className="text-sm tracking-wider opacity-80 hover:opacity-100 transition-opacity">HOME</a>
            <a href="#" className="text-sm tracking-wider opacity-80 hover:opacity-100 transition-opacity">ABOUT</a>
            <a href="#" className="text-sm tracking-wider opacity-80 hover:opacity-100 transition-opacity">CONTACT</a>
          </nav>
          <a href="#" className="bg-white text-black py-3 px-6 rounded-full font-semibold text-sm transition-colors hover:bg-gray-200">JOIN US</a>
        </header>
        <main className="flex-grow flex flex-col justify-end items-center text-center pb-32">
          <h1 className="text-4xl md:text-7xl font-bold animate-gradient animate-fade-in-up">Swirl Into the Unknown</h1>
          <p className="text-lg md:text-xl mt-4 animate-gradient animate-fade-in-up animation-delay-300">
            A cosmic shader experience that pulls you in.
          </p>
        </main>
      </div>
    </div>
  );
}