An animated scrolling retro grid effect.
1"use client";
2
3import { RetroGrid } from "@/components/magicui/retro-grid";
4
5export function RetroGridDemo() {
6 return (
7 <div className="relative flex h-[500px] w-full flex-col items-center justify-center overflow-hidden rounded-lg border bg-background md:shadow-xl">
8 <span className="pointer-events-none z-10 whitespace-pre-wrap bg-gradient-to-b from-[#ffd319] via-[#ff2975] to-[#8c1eff] bg-clip-text text-center text-7xl font-bold leading-none tracking-tighter text-transparent">
9 Retro Grid
10 </span>
11
12 <RetroGrid />
13 </div>
14 );
15}