magic-ui
components
ui

retro-grid

An animated scrolling retro grid effect.

animated
effect
form
gradient
grid
positioning
transform
View Docs

Source Code

Files
retro-grid
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}