Grid Scan Overlay

Backgrounds

About

An animated grid and scan-line overlay that layers a subtle tron-style moving scanline and grid pattern over any container background.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Grid Scan Overlay to your project and fits it to your theme.

Code

How Grid Scan Overlay is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

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>
  );
}