Cursor Spotlight Background

import { CursorSpotlight } from "@/components/ui/cursor-spotlight"

export default function Demo() {
  return (
    <CursorSpotlight radius={24} intensity={22} gridSize={3} className="min-h-[32rem]">
      <div className="mx-auto flex min-h-[32rem] max-w-3xl flex-col items-center justify-center gap-6 px-6 text-center">
        <span className="rounded-full border border-border bg-background/60 px-3 py-1 text-xs text-muted-foreground backdrop-blur">
          Studio · Since 2019
        </span>
        <h1 className="text-balance text-4xl font-semibold tracking-tight sm:text-6xl">
          Light follows your cursor
        </h1>
        <p className="max-w-xl text-balance text-muted-foreground">
          A calm surface that reveals its grid only where you look. Move the mouse to see it.
        </p>
        <div className="flex gap-3">
          <a href="#work" className="rounded-md bg-primary px-4 py-2 text-sm font-medium text-primary-foreground">
            See our work
          </a>
          <a href="#contact" className="rounded-md border border-border px-4 py-2 text-sm font-medium">
            Contact
          </a>
        </div>
      </div>
    </CursorSpotlight>
  )
}