║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║

---

title: Retro Grid date: 2023-11-23 description: An animated scrolling retro grid effect author: dillionverma published: true video: https://cdn.magicui.design/retro-grid.mp4

<ComponentPreview name="retro-grid-demo" />

Installation

<Tabs defaultValue="cli"> <TabsList> <TabsTrigger value="cli">CLI</TabsTrigger> <TabsTrigger value="manual">Manual</TabsTrigger> </TabsList> <TabsContent value="cli">

npx shadcn@latest add @magicui/retro-grid

</TabsContent> <TabsContent value="manual"> <Steps>

<Step>Copy and paste the following code into your project.</Step>

<ComponentSource name="retro-grid" />

<Step>Update the import paths to match your project setup.</Step>

<Step>Add the required CSS animations</Step>

Add the following animations to your global CSS file.

@theme inline {
  --animate-grid: grid 15s linear infinite;

  @keyframes grid {
    0% {
      transform: translateY(-50%);
    }
    100% {
      transform: translateY(0);
    }
  }
}

</Steps> </TabsContent> </Tabs>

Usage

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

<div className="relative h-[500px] w-full overflow-hidden">
  <RetroGrid />
</div>

Props

| Prop | Type | Default | Description | | ---------------- | -------- | -------- | --------------------------------------------- | | className | string | - | Additional CSS classes for the grid container | | angle | number | 65 | Rotation angle of the grid in degrees | | cellSize | number | 60 | Grid cell size in pixels | | opacity | number | 0.5 | Grid opacity value between 0 and 1 | | lightLineColor | string | "gray" | Grid line color in light mode | | darkLineColor | string | "gray" | Grid line color in dark mode |

║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║