Retro Grid
An animated scrolling retro grid element.
+
Tailwind and Alpine
Copied!
Retro-Grid
<style>
@keyframes grid {
0% { transform: translateY(-50%); }
100% { transform: translateY(0); }
}
.animate-grid {
animation: grid 15s linear infinite;
}
.synthwave-grid {
background-repeat: repeat;
background-size: 60px 60px;
height: 300vh;
inset: 0% 0px;
margin-left: -50%;
transform-origin: 100% 0 0;
width: 600vw;
}
:not(.dark) .synthwave-grid-light {
background-image:
linear-gradient(to right, rgba(0,0,0,0.6) 1px, transparent 0),
linear-gradient(to bottom, rgba(0,0,0,0.6) 1px, transparent 0);
}
.dark .synthwave-grid-dark {
background-image:
linear-gradient(to right, rgba(255,255,255,0.7) 1px, transparent 0),
linear-gradient(to bottom, rgba(255,255,255,0.7) 1px, transparent 0);
}
</style>
<div x-data="{ angle: 60 }" class="relative min-h-[420px] flex flex-col items-center justify-center w-full h-full overflow-hidden border-0" x-cloak>
<h1 class="absolute w-full h-auto text-5xl font-bold text-center">Retro-Grid</h1>
<div class="absolute inset-0 w-full h-full overflow-hidden opacity-50 pointer-events-none" style="perspective: 200px;">
<div class="absolute inset-0" :style="{ transform: `rotateX(${angle}deg)` }">
<div class="animate-grid synthwave-grid synthwave-grid-light synthwave-grid-dark"></div>
</div>
<div class="absolute inset-0 bg-gradient-to-t from-white to-transparent to-90% dark:from-black"></div>
</div>
</div>Data
Below you will find the data properties available in the x-data attribute of this element.
| Property and Description | Description |
|---|---|
| angle | The angle of the retro grid, which is the degree that the grid is tilted. |
| The angle of the retro grid, which is the degree that the grid is tilted. |
More Examples
Below you will find more Retro Grid examples you may wish to use in your projects.
Copied!
Retro-Grid
<style>
@keyframes grid {
0% { transform: translateY(-50%); }
100% { transform: translateY(0); }
}
.animate-grid {
animation: grid 15s linear infinite;
}
.synthwave-grid {
background-repeat: repeat;
background-size: 60px 60px;
height: 300vh;
inset: 0% 0px;
margin-left: -50%;
transform-origin: 100% 0 0;
width: 600vw;
}
:not(.dark) .synthwave-grid-light {
background-image:
linear-gradient(to right, rgba(0,0,0,0.6) 1px, transparent 0),
linear-gradient(to bottom, rgba(0,0,0,0.6) 1px, transparent 0);
}
.dark .synthwave-grid-dark {
background-image:
linear-gradient(to right, rgba(255,255,255,0.4) 1px, transparent 0),
linear-gradient(to bottom, rgba(255,255,255,0.4) 1px, transparent 0);
}
</style>
<div x-data="{ angle: 60 }" class="relative dark bg-gray-900 min-h-[420px] flex flex-col items-center justify-center w-full h-full overflow-hidden border-0" x-cloak>
<h1 class="absolute w-full h-auto text-5xl font-bold text-center text-white">Retro-Grid</h1>
<div class="absolute inset-0 w-full h-full overflow-hidden opacity-50 pointer-events-none" style="perspective: 200px;">
<div class="absolute inset-0" :style="{ transform: `rotateX(${angle}deg)` }">
<div class="animate-grid synthwave-grid synthwave-grid-light synthwave-grid-dark"></div>
</div>
<div class="absolute bottom-0 left-0 w-full h-20 bg-gradient-to-t from-black to-transparent"></div>
</div>
</div>
