Retro Grid

featurefrom MagicUI Effects

Retro Grid

AI Usage Rules

Use RetroGrid as a background element for hero sections or landing pages. Place inside a relative container. The grid creates a 3D perspective effect. Requires animate-grid keyframe. Pairs well with dark themes.

Code Template

import { cn } from "@/lib/utils"

interface RetroGridProps extends React.ComponentProps<"div"> {
  angle?: number
}

export function RetroGrid({ className, angle = 65, ...props }: RetroGridProps) {
  return (
    <div className={cn("pointer-events-none absolute inset-0 overflow-hidden [perspective:200px]", className)} style={{ "--grid-angle": `${angle}deg` } as React.CSSProperties} {...props}>
      <div className="absolute inset-0 [transform:rotateX(var(--grid-angle))]">
        <div className="animate-grid [background-repeat:repeat] [background-size:60px_60px] [height:300vh] [inset:0%_0px] [margin-left:-50%] [transform-origin:100%_0_0] [width:600vw]"
          style={{ backgroundImage: "linear-gradient(to right, rgba(0,0,0,0.3) 1px, transparent 0), linear-gradient(to bottom, rgba(0,0,0,0.3) 1px, transparent 0)" }} />
      </div>
      <div className="absolute inset-0 bg-gradient-to-t from-white to-transparent to-90% dark:from-black" />
    </div>
  )
}

Props Schema

Property	Type	Default	Description
angle	number	—

View raw JSON schema

{
  "type": "object",
  "properties": {
    "angle": {
      "type": "number"
    }
  }
}