Astral Flare Shader

"use client";

import React from "react";
import { ShaderCanvas, shaders } from "@/components/ui/astral-flare-shader";

export default function DemoOne() {
  return (
    // Make this wrapper span the entire screen
    <div className="relative w-screen h-screen overflow-hidden bg-black">
      {/* 
        ShaderCanvas is absolutely positioned to inset-0,
        so it will cover its parent fully
      */}
      <ShaderCanvas
        fragmentShader={shaders.ASTRAL_FLARE}
        className="absolute inset-0"
        style={{ zIndex: 0 }}
      />

      {/* Your overlay text, centered */}
      <div className="absolute inset-0 z-10 flex flex-col items-center justify-center pointer-events-none">
        <h1 className="text-6xl md:text-8xl font-bold tracking-tighter text-white">
          Astral Flare
        </h1>
        <p className="mt-2 text-lg text-neutral-300">
          Powered by a reusable Shader Component
        </p>
      </div>
    </div>
  );
}