Starfield

import { Component as Starfield } from "@/components/ui/starfield";

export default function Demo() {
  return (
    <div className="flex min-h-screen flex-col items-center justify-center bg-[#030712] p-8 gap-8">
      <div className="w-full max-w-5xl">
        <div className="text-center mb-12">
          <h2 className="text-2xl font-bold tracking-tight text-white mb-2">
            Starfield
          </h2>
          <p className="text-sm text-neutral-400 max-w-lg mx-auto">
            600 stars flying toward you at warp speed. Move your mouse to steer
            through the galaxy. Stars stretch into speed lines as they approach.
          </p>
        </div>

        <div className="rounded-2xl border border-white/10 overflow-hidden">
          <Starfield
            className="w-full h-[500px]"
            starCount={700}
            speed={2}
            steerStrength={0.4}
          />
        </div>
      </div>

      {/* As hero background */}
      <div className="w-full max-w-5xl rounded-2xl border border-white/10 overflow-hidden">
        <Starfield
          className="w-full h-[380px]"
          starCount={400}
          speed={1}
          starColor="200,180,255"
          steerStrength={0.2}
        >
          <div className="flex flex-col items-center justify-center h-[380px] px-8 text-center">
            <h1 className="text-4xl md:text-5xl font-bold tracking-tight text-white mb-4 drop-shadow-lg">
              Warp speed
              <br />
              <span className="bg-gradient-to-r from-violet-400 to-cyan-400 bg-clip-text text-transparent">
                ahead
              </span>
            </h1>
            <p className="text-sm text-white/50 max-w-md mb-8 drop-shadow-md">
              Move your mouse to navigate. Each star is projected from 3D space
              with real perspective division.
            </p>
            <div className="flex gap-3">
              <button className="rounded-full bg-white px-6 py-2.5 text-sm font-semibold text-black">
                Launch
              </button>
              <button className="rounded-full border border-white/20 bg-white/5 backdrop-blur-sm px-6 py-2.5 text-sm font-semibold text-white">
                Explore
              </button>
            </div>
          </div>
        </Starfield>
      </div>
    </div>
  );
}