Light Rays

"use client";

import { LightRays } from "@/lab/magicui/ui/light-rays";

export default function LightRaysDemo() {
  return (
    <div className="@container relative h-full w-full overflow-hidden">
      <div className="relative z-10 flex h-full flex-col items-center justify-center gap-3 px-6 text-center">
        <span className="text-[10px] font-semibold tracking-[0.35em] text-slate-200/60 uppercase">Ambient glow</span>
        <h1 className="text-[clamp(1.75rem,6cqw,3rem)] font-bold text-white">Light Rays</h1>
        <p className="max-w-md text-sm text-slate-200/80">
          Drop this component into any container and it will fill the space with softly animated light rays shining
          from above.
        </p>
      </div>
      <LightRays length="120%" />
    </div>
  );
}