Grid Scan Overlay

import { GridScanOverlay } from "@/components/ui/grid-scan-overlay";

export default function GridScanOverlayDemo() {
  return (
    <div
      className="relative flex h-[400px] w-full items-center justify-center overflow-hidden rounded-lg"
      style={{
        background: "oklch(0.06 0.02 250)",
        // Tron (cyan) theme tokens so the overlay renders on-brand
        ["--primary" as unknown as string]: "oklch(0.75 0.18 195)",
        ["--primary-foreground" as unknown as string]: "oklch(0.1 0 0)",
        boxShadow: "inset 0 0 120px oklch(0.75 0.18 195 / 0.08)",
      }}
    >
      <GridScanOverlay />
      <div className="relative z-10 text-center">
        <h2
          className="text-3xl font-semibold uppercase tracking-[0.25em]"
          style={{
            color: "oklch(0.9 0.13 195)",
            textShadow:
              "0 0 10px oklch(0.75 0.18 195 / 0.85), 0 0 30px oklch(0.75 0.18 195 / 0.5)",
          }}
        >
          System Online
        </h2>
        <p
          className="mt-3 text-sm uppercase tracking-[0.35em]"
          style={{ color: "oklch(0.72 0.06 200)" }}
        >
          Animated grid scan overlay
        </p>
      </div>
    </div>
  );
}