A nostalgic retro-style grid background with animated scrolling effect and 3D perspective.
Installation
import { RetroGrid } from "@/components/ui/retro-grid"
export default function Example() {
return (
<div className="relative h-[500px] w-full overflow-hidden">
<RetroGrid />
</div>
)
}
Custom Styling
import { RetroGrid } from "@/components/ui/retro-grid"
export default function Example() {
return (
<div className="relative h-[500px] w-full overflow-hidden">
<RetroGrid
angle={45}
cellSize={80}
opacity={0.7}
lightLineColor="blue"
/>
</div>
)
}
| 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 |
The grid automatically animates with a scrolling effect using CSS animations and includes a gradient fade at the bottom.
Adjust the angle prop to change the perspective of the grid. Lower angles create a more dramatic 3D effect.