Retro Grid

Source: Magic UI ↗
Author: Magic UI
Licence: MIT

Loading…

A WebGL perspective grid scrolls toward the horizon.

Code

"use client";

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

export default function RetroGridDemo() {
  return (
    <div className="@container relative flex h-full w-full flex-col items-center justify-center overflow-hidden">
      <span className="pointer-events-none z-10 bg-linear-to-b from-[#ffd319] via-[#ff2975] to-[#8c1eff] bg-clip-text text-center text-[clamp(2.5rem,10cqw,4.5rem)] leading-none font-bold tracking-tighter whitespace-pre-wrap text-transparent">
        Retro Grid
      </span>
      <RetroGrid />
    </div>
  );
}

Prompt

Build "Retro Grid", a background animation. What it does: A WebGL perspective grid scrolls toward the horizon. Write it as a single self-contained React component in TypeScript that fills its parent (w-full h-full), styled with Tailwind CSS. Technique: an HTML canvas, WebGL, a requestAnimationFrame loop, CSS keyframes. It sits on a light background, in a 16:10 frame. Respect prefers-reduced-motion with a still state, pause work when the element is off screen, and keep it accessible. Original: https://magicui.design/docs/components/retro-grid (Magic UI, MIT).