Components
An animated perspective grid floor background with a depth gradient overlay, ideal for Tron-inspired hero sections and landing pages.

import { GridFloor } from "@/components/ui/grid-floor";
export default function GridFloorDemo() {
return (
<GridFloor className="flex min-h-[420px] items-center justify-center rounded-lg border bg-background">
<div className="flex flex-col items-center gap-4 px-6 text-center">
<span className="font-mono text-xs uppercase tracking-[0.3em] text-muted-foreground">
System Online
</span>
<h1 className="text-4xl font-bold uppercase tracking-widest text-foreground sm:text-5xl">
Enter the Grid
</h1>
<p className="max-w-sm text-sm text-muted-foreground">
An animated perspective grid floor with a depth gradient overlay.
</p>
</div>
</GridFloor>
);
}