Retro Grid Background

/* Source: Magic UI (magicuidesign) — https://github.com/magicuidesign/magicui/blob/ddedd115f8cabccd6dbcb7526858c68e0988aa05/public/r/retro-grid.json — MIT. Included under its original licence. */
/* Copyright (c) Magic UI. Faithful port of Magic UI's classic CSS RetroGrid; the keyframes are inlined so it is self-contained on Tailwind v4. */
import React from "react";

function cn(...classes: Array<string | false | null | undefined>) {
  return classes.filter(Boolean).join(" ");
}

interface RetroGridProps extends React.HTMLAttributes<HTMLDivElement> {
  className?: string;
  angle?: number;
  cellSize?: number;
  opacity?: number;
  lightLineColor?: string;
  darkLineColor?: string;
}

export function RetroGrid({
  className,
  angle = 65,
  cellSize = 60,
  opacity = 0.5,
  lightLineColor = "gray",
  darkLineColor = "gray",
  ...props
}: RetroGridProps) {
  const gridStyles = {
    "--grid-angle": `${angle}deg`,
    "--cell-size": `${cellSize}px`,
    "--opacity": opacity,
    "--light-line": lightLineColor,
    "--dark-line": darkLineColor,
  } as React.CSSProperties;

  return (
    <div
      className={cn(
        "pointer-events-none absolute size-full overflow-hidden opacity-[var(--opacity)] [perspective:200px]",
        className,
      )}
      style={gridStyles}
      {...props}
    >
      <style>{`@keyframes src-retro-grid{0%{transform:translateY(-50%)}100%{transform:translateY(0)}}`}</style>
      <div className="absolute inset-0 [transform:rotateX(var(--grid-angle))]">
        <div
          className="[background-image:linear-gradient(to_right,var(--light-line)_1px,transparent_0),linear-gradient(to_bottom,var(--light-line)_1px,transparent_0)] [background-repeat:repeat] [background-size:var(--cell-size)_var(--cell-size)] [height:300vh] [inset:0%_0px] [margin-left:-200%] [transform-origin:100%_0_0] [width:600vw] dark:[background-image:linear-gradient(to_right,var(--dark-line)_1px,transparent_0),linear-gradient(to_bottom,var(--dark-line)_1px,transparent_0)]"
          style={{ animation: "src-retro-grid 15s linear infinite" }}
        />
      </div>
      <div className="absolute inset-0 bg-gradient-to-t from-white to-transparent to-90% dark:from-black" />
    </div>
  );
}

export default function SrcRetroGridBackground() {
  return (
    <div className="relative flex h-[28rem] w-full items-center justify-center overflow-hidden rounded-xl border border-zinc-200 bg-white dark:border-zinc-800 dark:bg-black">
      <RetroGrid lightLineColor="#6366f1" darkLineColor="#818cf8" opacity={0.6} />
      <div className="relative z-10 max-w-md px-6 text-center">
        <span className="inline-flex items-center rounded-full border border-zinc-200 bg-white/70 px-3 py-1 text-xs font-medium text-zinc-600 shadow-sm backdrop-blur dark:border-zinc-800 dark:bg-zinc-900/70 dark:text-zinc-300">
          Background
        </span>
        <h2 className="mt-5 text-3xl font-semibold tracking-tight text-zinc-900 dark:text-white sm:text-4xl">
          <span className="bg-gradient-to-b from-indigo-500 to-violet-600 bg-clip-text text-transparent dark:from-indigo-300 dark:to-violet-400">
            Retro
          </span>{" "}
          grid
        </h2>
        <p className="mx-auto mt-3 max-w-sm text-sm leading-relaxed text-zinc-600 dark:text-zinc-400">
          An animated perspective grid that scrolls toward the horizon with a soft gradient fade — the classic synthwave backdrop.
        </p>
      </div>
    </div>
  );
}