Aurora Blur

"use client";

import { AuroraBlur } from "@/components/ui/aurora-blur";

export default function AuroraBlurDemo() {
  return (
    <div className="flex min-h-[520px] w-full items-center justify-center p-6">
      <AuroraBlur
        height={460}
        className="w-full max-w-2xl rounded-3xl border border-white/10"
      >
        <div className="flex h-full w-full flex-col items-center justify-center gap-4 px-8 text-center">
          <span className="rounded-full border border-white/15 bg-white/5 px-3 py-1 text-xs font-medium text-white/80 backdrop-blur">
            Northern Lights
          </span>
          <h2 className="text-4xl font-semibold tracking-tight text-white sm:text-5xl">
            Aurora Blur
          </h2>
          <p className="max-w-md text-balance text-sm text-white/70">
            An ethereal WebGL aurora borealis shader that drifts softly behind
            your content.
          </p>
        </div>
      </AuroraBlur>
    </div>
  );
}