Retro Grid

Animated perspective grid floor background with scrolling lines. Pure CSS, zero JS. Drop into any relative container.

Retro Grid

Code

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

export default function Example() {
  return (
    <div className="relative h-64 overflow-hidden rounded-xl bg-bg">
      <RetroGrid opacity={0.5} />
      <div className="absolute inset-0 flex items-center justify-center">
        <h2 className="text-2xl font-bold">Your content here</h2>
      </div>
    </div>
  )
}

Installation

$npx particleui-cli add retro-grid

Usage

TSX

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

export default function Example() {
  return (
    <div className="relative h-64 overflow-hidden rounded-xl bg-bg">
      <RetroGrid opacity={0.5} />
      <div className="absolute inset-0 flex items-center justify-center">
        <h2 className="text-2xl font-bold">Your content here</h2>
      </div>
    </div>
  )
}

Props

Prop	Type	Default	Required
opacity	number	`0.4`	no
color	string	`"var(--color-border)"`	no
className	string	—	no

Details

Source filecomponents/ui/retro-grid.tsx

Typeui

Categoriesbackground, particles

npm dependencies

Registry deps

Claude skill—