Retro Grid
An animated scrolling retro grid effect
Retro Grid
Installation
Copy and paste the following code into your project.
import { cn } from "@/lib/utils"
export function RetroGrid({ className }: { className?: string }) {
return (
<div
className={cn(
"pointer-events-none absolute h-full w-full overflow-hidden opacity-50 [perspective:200px]",
className
)}
>
{/* Grid */}
<div className="absolute inset-0 [transform:rotateX(35deg)]">
<div
className={cn(
"animate-grid",
"[background-repeat:repeat] [background-size:60px_60px] [height:300vh] [inset:0%_0px] [margin-left:-50%] [transform-origin:100%_0_0] [width:600vw]",
// Light Styles
"[background-image: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)]",
// Dark styles
"dark:[background-image:linear-gradient(to_right,rgba(255,255,255,0.2)_1px,transparent_0),linear-gradient(to_bottom,rgba(255,255,255,0.2)_1px,transparent_0)]"
)}
/>
</div>
{/* Background Gradient */}
<div className="absolute inset-0 bg-gradient-to-t from-white to-transparent to-90% dark:from-black" />
</div>
)
}
Update the import paths to match your project setup.
Update tailwind.config.js
Add the following animations to your tailwind.config.js
file:
tailwind.config.js
/** @type {import('tailwindcss').Config} */
module.exports = {
theme: {
extend: {
animation: {
grid: "grid 15s linear infinite",
},
keyframes: {
grid: {
"0%": { transform: "translateY(-50%)" },
"100%": { transform: "translateY(0)" },
},
},
},
},
}
Props
Prop | Type | Description | Default |
---|---|---|---|
className | string | The class name for the component | "" |
angle | number | The angle of the grid | 65 |