Retro Grid

Heroes 450

About

An animated scrolling retro grid effect Add the following animations to your tailwind.config.js file: extend: { animation: { grid: "grid 15s linear infinite", }, keyframes: { grid: { "0%": { transform: "translateY(-50%)" }, "100%": { transform: "translateY(0)" }, }, }, },

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

Code

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

Usage.tsx

"use client";

import { RetroGrid } from "@/components/ui/retro-grid";

export function RetroGridDemo() {
  return (
    <div className="relative flex h-[500px] w-full flex-col items-center justify-center overflow-hidden rounded-lg border bg-background md:shadow-xl">
      <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">
        Retro Grid
      </span>

      <RetroGrid />
    </div>
  );
}